vuepress+GitHub部落格，從此不再沉默。自動化構建+評論，就是這麼簡單。

挖礦者發表於2019-07-04
VueGithub

關於部落格

這個部落格是基於Vuepress1.X來搭建的。記錄一些技術方面的知識。下面是介紹怎麼用Vuepress從頭開始搭建一個技術部落格。

Vuperss簡介

Vuepress是Vue生態中關於靜態網站的一個生成器，對於技術型別部落格支援很好，配置少，上手快，UI風格討人喜歡。這個部落格網站使用的是Vuepress1.x來進行搭建的。除了這個部落格之外下面的網站也是使用的vuepress

開始

  • 預設你的電腦上有Node環境
  • Node.js的版本大於8.6
  • 如果已經閱讀過官方文件最好不過

本篇教程一共會在github上面建立兩個專案，一個用來寫部落格，另外一個用來展示部落格。其實也可以合成一個專案，看個人喜好。

安裝vuepress

在這個部落格使用的是vuepress1.X所以安裝的時候需要這樣安裝：

    yarn global add vuepress@next // OR npm install -g vuepress@next

複製程式碼

如果想要使用vuepress0.X,按照下面的安裝方式，

    yarn global add vuepress // OR npm install -g vuepress
複製程式碼

對於新手搭建部落格這兩個版本的區別不大，這個部落格中建議使用vuepress1.X。

搭建部落格專案

一共分為四個部分

  • 搭建一個初始專案並且能用vuepress來寫部落格
  • 配置導航和側邊欄
  • 構建並且釋出
  • 自動化部署

開始之前我先放一個我的部落格的目錄結構：

jiegou

第一部分：搭建專案

新建write-blog資料夾,並且初始化專案,在第一部分中


mkdir writ-blog
cd writ-blog
npm init -y
mkdir docs // 這個資料夾是放置所有部落格的地方
cd docs
touch README.md //建立reademe檔案，即首頁

複製程式碼

初始化的目錄結構如下所示：

.
├─ docs
│  └─ README.md
└─ package.json
複製程式碼

注意 docs資料夾是你所有部落格所在的資料夾，docs資料夾根目錄下的README.md 檔案在經過vuepress的編譯之後會成為你的部落格網站的首頁！！！

在docs跟目錄中的README.md檔案中寫上以下內容：

---
home: true
heroImage: /logo.png
actionText: 介紹 →
actionLink: /blog/
features:
- title: 框架
  details: Vue、React、Abgular、Flutter的學習和實踐。
- title: 工作筆記
  details: 好記性不如爛筆頭，記錄平時工作中遇到的一些問題和解決方法。
- title: 前端視覺化
  details: 前端方面視覺化的知識，包括webgl,canvas,glsl等。
- title: 後端
  details: 前端怎麼能不瞭解一些後端知識呢？ 一些個人對後端的學習和實踐。
- title: 開發環境配置
  details: 有時候開發環境的配置也是很頭疼的，windows和mac下面又各不一樣，工具的熟練程度直接決定開發速度，所以留文待查吧。
footer: MIT Licensed | Copyright © 2019-present chenfeng
---
複製程式碼

注意: 這個檔案就是你部落格的首頁(index.html)，```'home: true'```,是必須的

初始化之後，在package.json中的script中新增兩個命令：


"dev": "vuepress dev docs",
"build": "vuepress build docs",

複製程式碼

然後執行npm run dev，在瀏覽器中開啟服務,會出現一個頁面，大概長得是這個樣子

第一步
,到這裡第一步就已經完成了，你已經可以寫部落格了，但是遠遠不能滿足我們們的需求，這個時候就需要配置導航和側邊欄了。

第二部分：配置導航和側邊欄

第二部分的目錄結構如下：

.
├─ .vuepress
│  └─ config.js
├─ docs
│  └─ README.md
└─ package.json
複製程式碼

你會注意到這一步多出了一個.vuepres的資料夾，有關vuepress的配置，都在這個資料夾之中，下面介紹一下有關導航欄和側邊欄的配置。.vuepress/config中的基本配置如下：


module.exports = {
    title: 'chenfeng\'s blog',
    description: 'chenfeng的個人部落格',
}
複製程式碼

當你完成上述步驟的話，你在本地起的dev環境所呈現的網頁應該包含一個頁頭,和一個描述。

下面這個配置內容是我的網站的配置：


module.exports = {
    title: 'chenfeng\'s blog',
    description: 'chenfeng的個人部落格',
    head: [ // 注入到當前頁面的 HTML <head> 中的標籤
        ['link', { rel: 'icon', href: '/logo.png' }], // 增加一個自定義的 favicon(網頁標籤的圖示)
        ['link', { rel: 'manifest', href: '/logo.png' }],
        ['link', { rel: 'apple-touch-icon', href: '/logo.png' }],
        ['link', { rel: 'mask-icon', href: '/logo.png', color: '#3eaf7c' }],
        ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache' }],
        ['meta', { 'http-quiv': 'expires', cotent: '0' }],
        ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache, must-revalidate' }]
    ],
    serviceWorker: true, // 是否開啟 PWA
    base: '/', // 這是部署到github相關的配置
    markdown: {
        lineNumbers: true // 程式碼塊顯示行號
    },
    themeConfig: {
        nav: [
            { text: '主頁', link: '/' },
            {
                text: '基礎', items: [
                    { text: 'JavaScript', link: '/basis/JavaScript/' },
                    { text: 'HTML', link: '/basis/HTML/' },
                    { text: 'CSS', link: '/basis/CSS/' },
                    { text: 'TypeScript', link: '/basis/CSS/' },
                ]
            },
            {
                text: '框架', items: [
                    { text: 'Vue', link: '/frame/Vue/' },
                    { text: 'React', link: '/frame/React/' },
                    { text: 'Angular', link: '/frame/Angular/' },
                    { text: 'Flutter', link: '/frame/Flutter/' }
                ]
            },
            { text: '工作筆記', link: '/work/' },
            { text: '前端視覺化', link: '/visualization/' },
            { text: '環境配置', link: '/devconfig/' },
            { text: 'Github', link: 'https://github.com/soyomo' }
        ],
        sidebar: {
            '/blog/': getSidebar('blog'),
            '/frame/': getSidebar('frame'),
            '/basis/': getSidebar('basis')
        },
        sidebarDepth: 2, // 側邊欄顯示2級
    }
};

function getSidebar(barName) {
    const sidebar = {
        frame: [
            '/frame/',
            '/frame/Vue/',
            '/frame/React/',
            '/frame/Angular/'
        ],
        blog: [
            '/blog/'
        ],
        basis: [

        ]
    }
    return sidebar[barName]
}
複製程式碼

如果你感覺檔案太長的話，可以單獨把nav和sidebar提到另外一個獨立的檔案之中。我的.vuepress的檔案目錄結構是這樣的：

檔案目錄結構

其中nav.js的內容如下所示：

module.exports = [
    { text: '主頁', link: '/' },
    {
        text: '基礎', items: [
            { text: 'JavaScript', link: '/basis/JavaScript/' },
            { text: 'HTML', link: '/basis/HTML/' },
            { text: 'CSS', link: '/basis/CSS/' },
            { text: 'TypeScript', link: '/basis/CSS/' },
        ]
    },
    {
        text: '框架', items: [
            { text: 'Vue', link: '/frame/Vue/' },
            { text: 'React', link: '/frame/React/' },
            { text: 'Angular', link: '/frame/Angular/' },
            { text: 'Flutter', link: '/frame/Flutter/' }
        ]
    },
    { text: '工作筆記', link: '/work/' },
    { text: '前端視覺化', link: '/visualization/' },
    { text: '環境配置', link: '/devconfig/' },
    { text: 'Github', link: 'https://github.com/soyomo' }
]
複製程式碼

然後把這個檔案引入到config.js中就可以了.這個時候的導航還是不能工作的，因為你會找不到路徑。所以需要把導航對應的資料夾都建立好，這些資料夾都是建立在docs的跟目錄中的，部落格每個頁面對應的檔案都是在docs的跟目錄下的！！！這些資料夾建立好之後，都要建立一個README.md的檔案，因為當你的路徑只寫資料夾的時候，這個檔案在vuepress中是路徑預設匹配的。我的docs的檔案目錄如下：

docs檔案目錄

這個時候執行專案,每一個導航欄對應的頁面應該時空白頁面。

關於docs/.vuepress/public這個資料夾:

這個資料夾

是存放公共的資源的，我把我部落格的logo放到了這個資料夾中，每篇部落格的靜態資源建議放到該篇部落格的目錄下而不是都放到public之中。例如：本片教程中的圖片我都放到了這篇文章對應的目錄下面:

blog

blog資料夾的路徑：write-blog/docs/blog;

關於pwa的manifest配置也是需要放到這個資料夾中的。 manifest.json的內容：

{
    "name": "chenfeng",
    "short_name": "feng",
    "start_url": "index.html",
    "display": "standalone",
    "background_color": "#2196f3",
    "description": "個人網站",
    "theme_color": "blue",
    "icons": [
      {
        "src": "./logo.jpg",
        "sizes": "144x144",
        "type": "image/png"
      }
    ],
    "related_applications": [
      {
        "platform": "web"
      },
      {
        "platform": "play",
        "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
      }
    ]
  }

複製程式碼

到此為止，第二部分就完畢了。

第三部分:構建並且釋出

在這個部分中你需要在github上新建一個專案，我的專案是專案，其實這個專案就是所謂的GitHub Pages，新建好專案之後需要在該專案的setings中，

stings
,把你的專案的名稱改為{你的使用者名稱}.github.io,然後你就擁有了一個gitpage,就可以直接通過該連結訪問了。https://{username}.github.io/; 做完這些之後，需要在你的write-blog專案中的package.json中新增以下命令：

 "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh",
  },
複製程式碼

並且在write-blog檔案的跟目錄下新建一個deploy.sh檔案,內容如下：

#!/usr/bin/env sh

# 確保指令碼丟擲遇到的錯誤
set -e
npm install -g vuepress@next
# 生成靜態檔案
npm run 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 https://${token}@${address} master:master
git push -f git@github.com:{你的使用者名稱}/{你的使用者名稱}.github.io.git master

# 如果釋出到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
複製程式碼

然後，執行npm run deploy，之後就會發布到{username}.github.io這個專案中去了，並且通過連線是可以訪問的。這樣就基本可以實現書寫部落格了，但是每次寫完都得去npm run deploy一下，並不是很友好，那麼自動化部署就會幫到你了。

第四部分：travis自動化部署

對於travis,如果你還沒有聽說過，那麼這裡有一篇入門的教程供你參考。在這個環節裡，分為三部分：

  • 用你的github賬號登陸travis網站
  • 在github上面申請Personal access tokens
  • 在travis中設定環境變數

申請Personal access tokens

去github setting申請一個Personal access tokens

token
點選Generate new token
new token
隨便起一個Note,然後把所有的都給勾選上，然後點選Generate token這個按鈕，結果大概是這樣的
copy
,然後點選後面的複製按鈕圖示，留作第二步使用;

設定Environment Variables :100:

去travis上你的專案中的More OPtions(下圖中右上角):

就是write-blog這個專案的More Options，soyomo.github.io這個專案只是一個空殼子，只有兩個地方有用到，第一是按照gitpage的規範建立；第二是部署的時候在travis中設定環境變數address的時候用到這個專案的github地址。別的時候就沒有了。

OPtions
中找到Settings,再在Environment Variables中新增環境變數,我新增的類似於下圖，

下圖
圖中的token後面的內容就是第一步中複製的內容，address的內容是我的github專案的地址（github.com/soyomo/soyomo.github.io.git）。新增完畢之後，在專案中的deploy.sh檔案中修改git push 的內容，如下:

!/usr/bin/env sh

# 確保指令碼丟擲遇到的錯誤
set -e
npm install -g vuepress@next
# 生成靜態檔案
npm run 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 https://${token}@${address} master:master

# 如果釋出到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
複製程式碼

然後，在專案的跟目錄下面建立一個.travis.yml檔案，內容如下：

sudo: required
language: node_js
node_js: stable
script: bash ./deploy.sh
branches:
  only:
  - master
notifications:
  email: false
複製程式碼

這樣，當你每次提交write-blog專案的修改的時候，travis就會自動的幫你構建你的{username}.github.io專案了。

報錯

當初部署的時候，並沒有去github申請token導致在travis上報錯,如果遇到這個報錯：

報錯
說明沒有許可權往git倉庫上提交程式碼，那麼這個時候就需要重複第四個步驟：travis自動化部署。

後續

上面的步驟都做好之後，一個簡單的部落格網站就已經在你的手中誕生了，這個時候應該去買杯咖啡或者吃頓大餐來犒賞一下自己:tada: :tada: :tada:,但是這個部落格並沒有可以評論的地方怎麼辦呢？

新增評論系統

在新增評論之前你需要準備clientID和clientSecret，這兩個東西的生成是在這裡Register a new OAuth application,

oauth
除了Authorization callback URL之外，剩餘的三項是可以隨便填寫的，Authorization callback URL中的回撥url一般指向的是你的部落格地址，我的填寫的是‘soyomo.github.io’，點選Register application 之後會跳轉一個新頁面你就會看到clientID和clientSecret了。然後接下來就是新增系統評論的部分了。

我的部落格現在使用的是：Vssue.Vssue是一個vue驅動的基於Issue的外掛，在vuepress中使用它十分方便。這裡是官方關於在vuepress中使用Vssue的說明文件，如果你不想看也沒關係其實一共也就兩步。

第一步安裝外掛

npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3
複製程式碼

第二步使用外掛

在.vuepress/config.js中新增plugins:

plugins: {
    '@vssue/vuepress-plugin-vssue': {
      // 設定 `platform` 而不是 `api`
      platform: 'github',
      locale: 'zh', // 語言設定

      // 其他的 Vssue 配置
      owner: 'OWNER_OF_REPO', // 你的github賬戶名稱
      repo: 'NAME_OF_REPO', // 你的Github部落格倉庫 我填的是soyomo
      clientId: 'YOUR_CLIENT_ID', // 你在github上面申請的clientId
      clientSecret: 'YOUR_CLIENT_SECRET', // 在github上面申請的clientSecret
    },
  },

複製程式碼

然後以元件的方式在md文件中使用,也就是在md文件的最底部加上這樣一句就行：

<Vssue title="Vssue Demo" />
複製程式碼

評論系統的另一種選擇

我的部落格第一版的裡面用的是gittalk來實現評論的，gittalk的原理就是利用github的issue來實現評論部落格的。具體的實現是在.vuepress/enhanceApp.js檔案中。關於enhanceApp.js的內容可以參考vuepress的官方文件,在這個部落格專案中就只需要在該檔案中輸入以下程式碼就可以了：


function integrateGitalk(router) {
    const linkGitalk = document.createElement('link');
    linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
    linkGitalk.rel = 'stylesheet';
    document.body.appendChild(linkGitalk);
    const scriptGitalk = document.createElement('script');
    scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
    document.body.appendChild(scriptGitalk);
  
    router.afterEach((to) => {
      if (scriptGitalk.onload) {
        loadGitalk(to);
      } else {
        scriptGitalk.onload = () => {
          loadGitalk(to);
        }
      }
    });
  
    function loadGitalk(to) {
      let commentsContainer = document.getElementById('gitalk-container');
      if (!commentsContainer) {
        commentsContainer = document.createElement('div');
        commentsContainer.id = 'gitalk-container';
        commentsContainer.classList.add('content');
      }
      const $page = document.querySelector('.page');
      if ($page) {
        $page.appendChild(commentsContainer);
        if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
          renderGitalk(to.fullPath);
        }
      }
    }
    function renderGitalk(fullPath) {
      const gitalk = new Gitalk({
        clientID: '****', // 在github上生成的
        clientSecret: '****', // 在github上生成的 come from github development
        repo: '****', // 你的部落格的倉庫名稱
        owner: '****', // 你在githug上的使用者名稱稱
        admin: ['****'], // 管理成員
        id: 'comment',
        distractionFreeMode: false,
        language: 'zh-CN',
      });
      gitalk.render('gitalk-container');
    }
  }
  
  export default ({Vue, options, router}) => {
    try {
      document && integrateGitalk(router)
    } catch (e) {
      console.error(e.message)
    }
  }

複製程式碼

需要注意的是因為在開發環境中我們的專案使用的是‘write-blog’，而配置中的repo填寫的是部落格的專案名稱，就會導致在開發環境中登陸不成功，但是如果開發環境中已經有關於評論的部分的話，就說明已經配置成功了

相關文章