用VuePress來搭建一個極簡的靜態網站

VuePress學習

全局安裝前我們需要Git和node這兩個軟件，關於怎麼安裝可以我之前hexo的視頻教程

假如這兩個都沒有安裝好，那麼下面就不需要看了哈，棧友們

全局安裝

首先我們先全局安裝一下

npm stall -g vuepress    # 或者  yarn global add vuepress

這裏等待安裝完成後，我們在命令行輸入 vuepress或者輸入vuepress -V可以看到

vuepress
Usage: vuepress <command> [options]
Options:
  -V, --version                output the version number
  -h, --help                   output usage information
Commands:
  dev [options] [targetDir]    start development server
  build [options] [targetDir]  build dir as static site
  eject [targetDir]            copy the default theme into .vuepress/theme for customization.
  Run vuepress <command> --help for detailed usage of given command.

vuepress -V
0.14.8

目錄結構

好，安裝成功後，我們先來了解一下vuepress的目錄結構

首先我們先新建一個項目，項目名爲 “vuepress” ，然後我們進入到這個文件夾,我們在這個文件夾的空白處右鍵Git Bash Here，我們會看到一個黑底的命令工具，上面的全局安裝也是可以在這裏來安裝和查看版本號的，這裏不多說了，直接輸入下面的命令哈

我們先輸入一行命令，生成package.json文件

npm init -y

回車後，我們可以看到

{
  "name": "vpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然後你回到vuepress文件夾內，本來是空的文件夾，現在多出來一個package.json文件

開始寫作

新建README.md文件

在命令框輸入

echo '# Hello VuePress!' > docs/README.md

輸入完後，還是回到vuepress文件夾內，我們可以看到多出來一個docs的文件夾裏面有一個README.md文件，打開這個文件可以看到有Hello VuePress的字樣

運行測試一下

在項目根目錄的命令行輸入

vuepress dev docs

 VuePress dev server listening at http://localhost:8080/

我們在瀏覽器打開 http://localhost:8080/ 可以看到一個很簡潔的頁面

裝飾首頁

首頁配置

我們來編輯一下docs目錄下的README.md文件

---
home: true
heroImage: /mackxin.png
heroText: 馨客棧
tagline: 關注分享，關注導航，關注馨客棧
actionText: 每日更新 →
actionLink: /fuli/
features:
- title: 馨客棧導航
  details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專注於寫作。
- title: 馨客棧前端導航
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。
- title: 馨客棧每日分享
  details: VuePress 爲每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作爲 SPA 運行。
footer: MIT Licensed | Copyright © 2018-present Mackxin
---

我們配置完後直接到瀏覽器看效果，感覺是不是不一樣了哈

創建配置文件

在配置之前我們先要在docs文件夾下面新建一個新的文件夾，名字爲 “.vuepress”，記得前面是有個點的哦，不要忘記了。然後我們進入到這個.vuepress文件夾，再在裏面新建一個config.js文件，我們的導航配置文件就是在裏面配置的哈

配置favorite.icon

在.vuepress文件夾下新建public文件夾，把自己製作好的icon放進去

然後我們在config.js配置文件來操作

// .vuepress/config.js
module.exports = {
    title : 'mackxin',
    description : 'xininn',
    base: '/', // 這是部署到github相關的配置
    markdown: {
        lineNumbers: false // 代碼塊顯示行號
    },
    head : [
        ['link',{rel:'icon',href:'/mackxin.ico'}]
    ],
    sidebar: 'auto', // 側邊欄配置
    sidebarDepth: 2, // 側邊欄顯示2級
}

現在重新執行命令yarn docs:dev 就可以看到效果了

導航配置

我們主要配置的也是config.js文件

module.exports = {
    title : 'mackxin',
    description : 'xininn',
    head : [
        ['link',{rel:'icon',href:'/mackxin.ico'}]
    ],
    themeConfig: {
        nav: [
            { text: '首頁', link: '/' },
            { text: '馨客棧導航', link:'http://mackxin.com/nav.html/' },
            { text: '馨客棧前端導航', link:'http://mackxin.com/webnav.html/' },
            { text: '馨客棧每日分享', link: 'http://mackxin.com/fx.html/' },
            { text: '關於', link: '/about' },
            { 
               text: '分享', 
               items:[
                 { text: '技術' , link:'/jishu/'},
                 { text: '每日分享' , link:'/fx/'}
               ]
            },
            { text: 'GitHub', link: 'https://github.com/mackxin'},
            // 下拉列表顯示分組
            {
                text: '學習',
                items: [
                { 
                    text: '前端', 
                    items: [
                    { text: 'js', link: '/js/' },
                    { text: 'css', link: '/css/' }
                    ] 
                },
                { 
                    text: '後端', 
                    items: [
                    { text: 'php', link: '/php/' },
                    { text: 'java', link: '/java/'},
                    ] 
                },
                ]
            }
        ],
        sidebarDepth: 2,
        lastUpdated: 'Last Updated'
      }
}

這裏我們要新建about、js、css、php、java、jishu、fx等七個文件夾，我們來看看新建完的目錄結構哈

├─docs     // docs目錄下
│ ├─.vuepress     //文件夾的名字
│ |    ├─ public   //文件夾的名字
│ |          ├─logo.png
│ |    ├─ config.js   //配置文件
│ ├─js     //文件夾的名字
│    ├─README.md    //js首頁文件
│ ├─css    //文件夾的名字
│    ├─README.md    //css首頁文件
│ └─php    //文件夾的名字
│    ├─README.md    //php首頁文件
│ └─java   //文件夾的名字
│    ├─README.md    //java首頁文件
│ └─jishu  //文件夾的名字
│    ├─README.md    //技術首頁文件
│ └─fx     //文件夾的名字
│    ├─README.md    //分享首頁文件
| about.md    //關於頁面
| README.md  //首頁配置

側邊欄配置

主要配置的也是config.js文件

// .vuepress/config.js
module.exports = {
    themeConfig: {
        sidebar: {
            '/fx/': [
                '',     
                'fx1', 
                'fx2'  
            ],
            '/js/': [
                '',     
                'js1', 
                'js2'
            ],
            '/css/': [
                '',     
                'css1', 
                'css2'
            ],
            '/php/': [
                '',     
                'php1', 
                'php2'
            ],
            '/java/': [
                '/java/', // JAVA文件夾的README.md 不是下拉框形式
                {
                  title: 'java標題',
                  children: [
                    '/java/java1', // 以docs爲根目錄來查找文件 
                    '/java/java2'  // 以docs爲根目錄來查找文件 
                  ]
                }
            ]
            // 下面的是首頁顯示側邊欄的，不需要首頁顯示的話可以刪掉代碼
            // '/': [
            //     '',        /* / */
            //     'contact', /* /contact.html */
            //     'about'    /* /about.html */
            // ]
        }
    }
}

部署

這裏暫時只講部署到GitHub Pages的哈

首先我們在package.json文件裏面添加代碼，如下

{
  "scripts": {
    "docs:build": "vuepress build docs",
    "d": "bash deploy.sh"
  }
}

然後我們在vuepress文件夾下新建一個名爲deploy.sh的文件，跟docs文件夾同級的哈，不要放錯地方了

如果你想發佈到 https://<USERNAME>.github.io ,記得吧文件裏面的<USERNAME>改成你的github的用戶名哦，不然無效的哈

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

# 如果是發佈到自定義域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果發佈到 https://<USERNAME>.github.io
git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master

# 如果發佈到 https://<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -

如果你想發佈到 https://&lt;USERNAME>.github.io/<REPO> ，記得吧文件裏面的<USERNAME>改成你的github的用戶名哦，還有就是把你的<REPO>改成你新建的倉庫的名字哦

這裏要注意一下哦

如果你想發佈到 https://&lt;USERNAME>.github.io/<REPO>

那麼你需要到config.js文件裏面配置一下哦

base:'/vblog/'

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

# 如果是發佈到自定義域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果發佈到 https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master

# 如果發佈到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -

弄好以後我們定位在 vuepress的空白處，右鍵git bash here

輸入命令

npm run d

如果你看到的是下面的這樣，那就說明你成功了哈

> [email protected] d H:\blog\vpress
> bash deploy.sh

> [email protected] docs:build H:\blog\vpress
> vuepress build docs

 WAIT  Extracting site metadata...
[15:53:56] Compiling Client
[15:53:56] Compiling Server
[15:54:35] Compiled Server in 39s
[15:54:36] Compiled Client in 40s
 WAIT  Rendering static HTML...

 DONE  Success! Generated static files in docs\.vuepress\dist.
 ······
 ······
 這裏省略好多英文
 ······
 ······
  create mode 100644 php/php1.html
 create mode 100644 php/php2.html
Enumerating objects: 56, done.
Counting objects: 100% (56/56), done.
Delta compression using up to 2 threads
Compressing objects: 100% (53/53), done.
Writing objects: 100% (56/56), 83.58 KiB | 950.00 KiB/s, done.
Total 56 (delta 30), reused 0 (delta 0)
remote: Resolving deltas: 100% (30/30), done.
To github.com:mackxin/vblog.git
 * [new branch]      master -> gh-pages

現在你打開你的網站 ，我的就是 https://mackxin.github.io/vblog/

部署到自己的域名下

首先到你的個人域名的管理後天，進行解析我們來添加一下記錄

• 記錄類型我們選擇 A 類型哈
• 主機記錄，一個www 一個@
• 解析路線我們默認就好了

• 記錄值看下面我的介紹

  • 我的域名是mackxin.github.io ,那麼我們要獲得這個的ip的話我們就要ping一下
  • 在命令行輸入：ping mackxin.github.io然後回車，稍等一下，你就可以看到你的ip值了

Ping mackxin.github.io [185.199.110.153]
這裏我們需要的值就是185.199.110.153了

添加 CNAME 文件

在倉庫 mackxin.github.io 中找到 Settings > Custom domain 把 www.liweiwen.top 添加進去即可

最後，看到這裏如果你還是沒有看懂的話，那麼你需要看下面的視頻鏈接，希望可以幫到你順利的搭建網站，上面說的所有內容都可以在下面的視頻鏈接那裏得到你想要的答案，如果看了還是不懂的話，那麼你可以多看幾遍

---

學無止境，好好努力，奮鬥吧！

想看視頻的記得點擊下面的鏈接學習哈

用VuePress來搭建一個極簡的靜態網站