image.png

想在兩個小時之內搭建出來一個帶有評論系統和谷歌數據分析的靜態博客，同時完成靜態博客的自動構建和部署嗎??？

這篇文章對每個步驟都做了詳細的記錄，還把每個步驟中踩過的坑梳理了出來，手把手教你搭建出一個屬于你的博客～

后續我還會加上「復制博客文章內容加上版本信息」、「全文檢索」等功能，敬請期待??

博客的最終效果可以這里?? Vuepress 搭建靜態博客全攻略

好了，話不多說，讓我們開始吧～

Vuepress 搭建靜態博客

可以參照 Vuepress 的官方文檔 一步一步來就好了:blush:，我這里就簡單說下步驟：

1. 安裝 Vuepress

你可以全局安裝：

# 可以使用 npm 來全局安裝
npm i -g Vuepress

# 也可以使用 yarn 來全局安裝
yarn global add Vuepress

也可以安裝在你靜態博客項目的開發依賴里面:

yarn add --dev Vuepress

# 或者
npm i -D Vuepress

2. 初始化博客項目

# 可以使用 npm 來初始化項目
npm init

# 也可以使用 yarn 來初始化項目
yarn init

然后在項目的根目錄下新建一個 docs 文件夾，以后我們寫的 markdown 文件都會放在 docs 文件夾下。

我們先隨便初始化一個文件來看看效果：

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

執行命令 vuepress dev docs

可以看到啟動了一個頁面：

image

為了后續運行方便，我們可以把這些命令寫在項目的 package.json 文件里面的 scripts：

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
 }

3. 進一步的配置

目前我們只寫了一個 markdown 文檔，所以只有一個頁面，后續我們的博客會陸續加入很多內容，肯定需要做目錄分級，配置導航欄，可以看文檔里的這部分

4. 部署

靜態博客搭好了，我們就可以把它部署到服務器上正式給別人訪問了，你可以使用 GitHub Pages（GitHub 的靜態頁面托管服務 ）來托管自己的靜態博客。
可以使用 gh-pages 來將打包好的靜態博客快速部署到 GitHub Pages 上。

同樣的，我們可以將部署的命令加入到 package.json 文件里面的 scripts，現在，我們的 scripts 就是這樣的：

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
  },
 }

::: tip 其他第三方靜態頁面托管服務
也可以使用其他第三方靜態頁面托管服務（如 Netlify、Coding Pages、Gitlab Pages 等），這篇文章里面介紹了很多免費的靜態頁面托管服務。
:::

到這一步，你的博客已經可以順利地運行、構建和部署了，直接執行 npm run deploy 就可以將您的博客部署到 GitHub Pages 上去，如果您還想讓你的博客書寫和使用的體驗更好，可以接著往下看。

GitHub Actions 自動構建/部署

大家有注意到 GitHub 悄悄上線了一個 Actions 功能嗎？還不了解的同學可以看這篇文章，寫的非常全面。

::: tip GitHub Actions 是什么
GitHub 官方號稱 Actions 可以讓你的工作流自動化：GitHub 監聽某個事件（可能是某個分支的提交），然后觸發你預定義的工作流，讓大家在GitHub服務器上直接測試代碼、部署代碼。所以，我們可以利用這里特性來做 CI/CD，開發者只要寫一下 workflow 腳本就可以了，不用費心思去想要用哪個第三方的 CI/CD 服務, :100:。
:::

actions 其實就是由一些腳本組成，所以它們是可以復用的，GitHub 做了一個官方市場，可以搜索到他人提交的 actions。另外，還有一個 awesome actions 的倉庫，也可以找到不少 action。這樣一來，你甚至都不用自己寫具體的腳本，直接引用別人的腳本就行啦。

話不多說，趕緊用起來！

寫 workflow 腳本

首先我們需要到項目倉庫的頁面上進入 Actions 這個 tab, 選擇 Node 環境進入腳本的編輯頁面
[圖片上傳失敗...(image-f14c51-1575913606990)]

image

這里我直接使用了 peaceiris 的 actions-gh-pages，這個 action 可以幫你把打包好的靜態文件部署到 GitHub Pages 上去。

最終我的 workflow 腳本如下：
[圖片上傳失敗...(image-b6c39-1575913606990)]
這里有我的腳本源文件，可以參考一下。

更詳細的語法可以去看 GitHub Actions 的官方文檔

::: warning 注意
因為我用的 action 是第三方的，所以 action 可能會經常更改，如果你是過了一段時間才看到這篇文章，peaceiris 的 actions-gh-pages 很可能已經發生了更新，所以腳本的內容建議直接參照它的官方文檔來寫。
:::

設置 workflow 的環境變量

上面的腳本里面第21行的環境變量是怎么回事呢？

image

因為我們需要 GitHub Actions 把構建成果發到 GitHub 倉庫，因此需要 GitHub 密鑰，相當于是給 GitHub actions 授權。

首先運行下面的命令生成一對密鑰：

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
# You will get 2 files:
#   gh-pages.pub (public key)
#   gh-pages     (private key)

然后：

1. 在博客項目的倉庫的 Settings 欄下，找到 Deploy keys這一項，把你的公鑰加進去，注意勾選Allow write access
2. 同樣在博客項目的倉庫的 Settings 欄下，找到 Secrets這一項，把你的私鑰加進去
   [圖片上傳失敗...(image-b39e3d-1575913606990)]

注意事項

1. 把 Vuepress 作為你的開發依賴加入到項目的 package.json 文件里面進行管理。（否則在 GitHub 的 docker 容器里打包的時候會找不到 Vuepress 這個命令）
2. 使用 npm 而不是 yarn 來管理依賴包。（因為 npm 是 node 環境自帶的包管理工具，無需額外安裝，另外， peaceiris 的 actions-gh-pages 也是使用 npm 作為包管理工具的）
3. 使用 npm ci 來安裝依賴包，而不是 npm install

::: tip npm ci 和 npm i 的區別
可以看 medium 上的這篇文章 了解一下。

簡單來說就是：不像npm install，npm ci永遠不會修改您的package-lock.json，它的使用依賴于 package-lock.json文件。所以如果使用npm ci，您將獲得可靠的版本。通常這個命令會在 Jenkins或GitLab CI之類的持續集成工具中使用。
:::

好了，這樣每次你的項目 master 分支一旦有新的提交，就會自動觸發這個 workflow，就可以自動完成靜態博客的構建和部署了～

也就是說，我們可以直接利用 GitHub 的 markdown 編輯器，直接新建一個文檔進行協作，然后提交到 master 分支就行了，完全不用再次去做 git 提交以及本地的構建和部署，簡直太方便了 :rocket:

添加評論系統

搭建博客的目的肯定是為了能和更多技術同好交流，所以評論系統是不可或缺的一個功能。

我們可以使用 gitalk 這個開源的評論插件來做博客的評論系統，它是基于 GitHub Issue 來開發的，可以直接使用 GitHub 賬號登錄，這對程序員來說真的是相當友好了??

注冊 GitHub OAuth Application

首先要申請一個 GitHub OAuth Application。可以點擊這里申請.

image

::: warning 注意
Authorization callback URL 一定要填寫當前使用插件頁面的域名。
:::

注冊成功后你會得到一個 Client ID 和 Client Secret，這兩個數據我們下一步要用到。

創建評論組件

我們回到工程，在 docs/.vuepress 下新建一個文件夾 components，再在 components 文件夾下建一個 comment 文件夾，然后新建文件 comment.vue，并復制下面的代碼。

<template>
  <div class="gitalk-container">
    <div id="gitalk-container"></div>
  </div>
</template>
<script>
export default {
  name: 'comment',
  data() {
    return {};
  },
  mounted() {
    let body = document.querySelector('.gitalk-container');
    let script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
    body.appendChild(script);
    script.onload = () => {
      const commentConfig = {
        clientID: 'YOUR_CLINENT_ID',
        clientSecret: 'YOUR_CLINENT_SECRET',
        repo: '此倉庫的名稱',
        owner: '你的 GitHub 用戶名，注意是用戶名！！！',
        // 這里接受一個數組，可以添加多個管理員
        admin: ['你的 GitHub 用戶名'],
        // id 用于當前頁面的唯一標識，一般來講 pathname 足夠了，
       
        // 但是如果你的 pathname 超過 50 個字符，GitHub 將不會成功創建 issue，此情況可以考慮給每個頁面生成 hash 值的方法.
        id: location.pathname,
        distractionFreeMode: false,
      };
      const gitalk = new Gitalk(commentConfig);
      gitalk.render('gitalk-container');
    };
  },
};
</script>

::: warning 注意
id 不能超過50個字符，否則后續評論組件初始化的時候會發生 Error：validation failed 的報錯。

你可以使用較短的字符來作為 id，例如我自己是使用 document.title.replace(/\s\|\s去沖浪鴨|《|》/g, "") 來作為 id 的，即使用我的文章標題作為 id。
:::

配置組件

在工程根目錄下新建一個文件夾 builds，并在里面新建三個文件，分別是 findMarkdown.js, addComponents.js 和 delComponents.js。

findMarkdown.js 文件讀取你所有的 Markdown 文件的內容。

// findMarkdown.js
const fs = require('fs')

function findMarkdown(dir, callback) {
  fs.readdir(dir, function (err, files) {
    if (err) throw err

    files.forEach((fileName) => {
      let innerDir = `${dir}/${fileName}`

      if (fileName.indexOf('.') !== 0) {
        fs.stat(innerDir, function (err, stat) {

          if (stat.isDirectory()) {
            findMarkdown(innerDir, callback)
          } else {
            // 跳過readme 文件，當然你也可以自行修改
            if (/\.md$/.test(fileName) && !/README/.test(fileName))
              callback(innerDir);
          }
        })
      }

    })
  })
}

module.exports = findMarkdown

addMarkdown.js 文件將 comment 組件注冊到每個 Markdown 文件的最后。

// addMarkdown.js
const fs = require('fs')
const findMarkdown = require('./findMarkdown')
const rootDir = './docs'

findMarkdown(rootDir, writeComponents)

function writeComponents(dir) {
  if (!/README/.test(dir)) {
    fs.appendFile(dir, `\n \n <comment-comment/> \n `, (err) => {
      if (err) throw err
      console.log(`add components to ${dir}`)
    })
  }
}

delMarkdown.js 文件在編譯后執行，目的是將每個 Markdown 文件的 comment 組件移除，因為我們只想讓 comment 組件打包到編譯后的文件中，而非工程文件。

// delMarkdown.js
const fs = require('fs')
const findMarkdown = require('./findMarkdown')
const rootDir = './docs'

findMarkdown(rootDir, delComponents)

function delComponents(dir) {
  fs.readFile(dir, 'utf-8', (err, content) => {
    if (err) throw err

    fs.writeFile(dir, content.replace(/\n \n <comment-comment\/> \n /g, ''), (err) => {
      if (err) throw err
      console.log(`del components from ${dir}`)
    })
  })
}

修改構建腳本

修改 build 的腳本：

{
  "build": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js"
}

好了，這樣你的博客就有一個評論系統了，效果如下：

image

每次有人在一篇評論數為0的文章下面評論，就會自動以當前文章為標題，當前文章的網址為內容生成一條 GitHub Issue，評論就會被關聯到這條 GitHub Issue 上。

配置全文搜索

待補充...

配置 Google Analytics

博客搭建好了，也有人訪問了，那我們要怎么統計用戶的訪問情況呢？可以使用谷歌出品的 Google Analytics （GA）。

Google Analytics （GA）是一個對用戶活動進行追蹤的工具，利用 GA 我們可以收集到博客當前有多少實時活躍用戶，博客的總訪問量，以及分析用戶的一些訪問行為，便于我們對博客網站做一些優化，而且它還是免費的！趕快用起來！

下載 google-analytics 插件

Vuepress 官方已經為我們準備好了 google-analytics 插件。

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics

安裝完在 config 配置文件里面配置一下 plugins

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]
  ]
}

注冊 GA，獲取追蹤 ID

上面那個 ga ID從哪里獲取呢？別著急，我們需要到 Google Analytics 的官網上去注冊一下我們的博客應用：

image

進去后選擇 web app:

image

[圖片上傳失敗...(image-8dea77-1575913606990)]

把獲取到的跟蹤ID 填到上面??的ga這一項里面就好了。

給 Vuepress 博客做 SEO 優化

待補充...

復制文字時顯示版權信息

待補充...