本文純原創，搭建後的部落格/文檔網站可以參考： Java 全棧知識體系。如需轉載請說明原處。

文章内容目錄

文章内容目錄
第一部分 - 部落格/文檔系統的搭建
- 部落格/文檔搭建前言
  - 有哪些選擇
  - 我做了哪些嘗試
    - 自己寫：我用java手寫了一個系統
    - Docisify等工具
    - 部落格園等平台
  - 為什麼現在用vuepress
- 部落格/文檔工具vuepress介紹
  - vuepress是如何工作的？
  - vuepress 一些特性
  - vuepress 插件架構
- 部落格/文檔基礎搭建
  - brew安裝或者更新
  - 更新node和npm
  - 配置vuepress工作目錄
  - 添加配置和内容
- 文檔搭建插件和配置
  - 添加文檔附加樣式配置: 主題
  - 添加傳回最上插件
  - 添加圖檔縮放插件
  - 添加評論插件
  - 添加Vuepress文檔的導出
  - 添加svg label标簽
  - 添加百度統計
  - 添加Copy自動加版權資訊
  - 添加SEO優化
  - 添加百度站點自動推送
  - 添加Sitemap資訊
  - 添加代碼拷貝
  - 更多插件配置
- 部落格/文檔稍完整配置清單
- vuepress 其它參考資源
第二部分 - 部落格/文檔的自動編譯
- Travis CI
  - Github 啟用插件
  - 配置插件
  - 添加.travis.yml
  - 觸發編譯
  - 檢視最後送出編譯狀況
  - 生成build 狀态svg
第三部分 - 部落格/文檔的自動部署
- 文檔編譯和部署流程
- 搭建
  - 安裝NodeJS
  - 清理原有部分服務
  - 安裝Nginx和配置
  - 部署項目
第四部分 - 部落格/文檔的域名，HTTPS，備案
- 申請域名
- https
- 備案
- 伺服器資源選擇

最後的效果請通路： Java 全棧知識體系

第一部分 - 部落格/文檔系統的搭建

搭建部落格有很多選擇，平台性的比如: 知名的CSDN, 部落格園, 知乎，簡書等；自己搭建比如 Hexo, Gitbook, Docisify等等。我有一顆不安分的心，每種我都用過…但是最後的最後我還是選擇了将部落格逐移至自己搭建的vuepress。 @pdai

部落格/文檔搭建前言

有哪些選擇

搭建部落格有很多選擇，平台性的比如: 知名的CSDN, 部落格園, 知乎，簡書等；自己搭建比如 Hexo, Gitbook, Docisify等等。

我做了哪些嘗試

自己寫：我用java手寫了一個系統
Docisify等工具
部落格園等平台

自己寫：我用java手寫了一個系統

以下系統由我獨立設計，開發和運維（總計四萬多行代碼吧）, 這裡隻展示部落格文檔部分。以下圖檔是我在之前部落格園寫文章截圖的：

markdown編輯

一文搭建Vuepress部落格/文檔系統：搭建，導出，SEO，自動編譯和部署，域名，HTTPS，備案等文章内容目錄第一部分 - 部落格/文檔系統的搭建第二部分 - 部落格/文檔的自動編譯第三部分 - 部落格/文檔的自動部署第四部分 - 部落格/文檔的域名，HTTPS，備案最後的效果

文章清單

支援導出各種形式

支援共享給其它虛拟組織

等等。

Docisify等工具

之前用搭建過基于K8S的完整的平台，寫了系列的文章總結。用的工具就是用的Docisify。

效果如下：

部落格園等平台

支援自定義樣式，自定義js權限，這表明自由控制程度會很高（這點看CSDN就略保守了）；但是網站長期沒有更新，首頁樣式感覺停留在十年前；用戶端程式，略有點low;

效果如下：

具體可以看我寫的這篇：【部落格園配置】部落格園自定義配置有哪些騷操作

為什麼現在用vuepress

類似部落格/文檔工具比對vuepress可以看出其優勢：以下内容摘自: Vuepress官網

Nuxt

VuePress 能做的事情，Nuxt 理論上确實能夠勝任，但 Nuxt 是為建構應用程式而生的，而 VuePress 則專注在以内容為中心的靜态網站上，同時提供了一些為技術文檔定制的開箱即用的特性。

Docsify / Docute

這兩個項目同樣都是基于 Vue，然而它們都是完全的運作時驅動，是以對 SEO 不夠友好。如果你并不關注 SEO，同時也不想安裝大量依賴，它們仍然是非常好的選擇！

Hexo

Hexo 一直驅動着 Vue 的文檔 —— 事實上，在把我們的主站從 Hexo 遷移到 VuePress 之前，我們可能還有很長的路要走。Hexo 最大的問題在于他的主題系統太過于靜态以及過度地依賴純字元串，而我們十分希望能夠好好地利用 Vue 來處理我們的布局和互動，同時，Hexo 的 Markdown 渲染的配置也不是最靈活的。

GitBook

我們的子項目文檔一直都在使用 GitBook。GitBook 最大的問題在于當檔案很多時，每次編輯後的重新加載時間長得令人無法忍受。它的預設主題導航結構也比較有限制性，并且，主題系統也不是 Vue 驅動的。GitBook 背後的團隊如今也更專注于将其打造為一個商業産品而不是開源工具。

部落格/文檔工具vuepress介紹

VuePress 由兩部分組成：第一部分是一個極簡靜态網站生成器，它包含由 Vue 驅動的

主題系統

和

插件 API

，另一個部分是為書寫技術文檔而優化的

預設主題

，它的誕生初衷是為了支援 Vue 及其子項目的文檔需求。

每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也是以具有非常好的加載性能和搜尋引擎優化（SEO）。同時，一旦頁面被加載，Vue 将接管這些靜态内容，并将其轉換成一個完整的單頁應用（SPA），其他的頁面則會隻在使用者浏覽到的時候才按需加載。

vuepress是如何工作的？

事實上，一個 VuePress 網站是一個由 Vue、Vue Router 和 webpack 驅動的單頁應用。如果你以前使用過 Vue 的話，當你在開發一個自定義主題的時候，你會感受到非常熟悉的開發體驗，你甚至可以使用 Vue DevTools 去調試你的自定義主題。

在建構時，我們會為應用建立一個服務端渲染（SSR）的版本，然後通過虛拟通路每一條路徑來渲染對應的HTML。這種做法的靈感來源于 Nuxt 的

nuxt generate

指令，以及其他的一些項目，比如 Gatsby。

vuepress 一些特性

為技術文檔而優化的内置Markdown拓展
在Markdown檔案中使用Vue元件的能力
Vue驅動的自定義主題系統
自動生成Service Worker(支援PWA)
Google Analytics內建
基于Git的"最後更新時間"
多語言支援
響應式布局
天然的SEO能力，對比Docsify這種前端渲染HTML要好很多

vuepress 插件架構

其整體的插件架構案例: Vuepress 插件架構案例

部落格/文檔基礎搭建

文檔的搭建比較簡單，主要記錄流程，有些步驟你在閱讀的時候如果覺得不需要, 可以直接略過。

brew安裝或者更新

先解除安裝已安裝的homebrew，指令如下：

然後重新安裝：

通過該方法直接擷取最新的homebrew，出現預期效果。注：上述可以修複

chown: /usr/local: Operation not permitted

這個問題。

如果覺得慢，需要更換 Brew 鏡像源, 請看考: 更換 Brew 鏡像源

更新node和npm

Vuepress對Node版本要求： Node.js 版本 >= 8.6。

方法1: 手動删除/usr/local/bin 下面的node和npm檔案
方法2: 覆寫現有版本brew link --overwrite node

如有需要，請參考這兩篇文章：

mac 用brew更新node最新版本，npm出現問題問題解決
brew 更新 node版本

配置vuepress工作目錄

全局安裝vuepress

yarn global add vuepress

# 目錄
mkdir tech-arch-doc
cd tech-arch-doc
# 初始化
yarn init -y # 或者 npm init -y
# 放markdown的檔案夾
mkdir md
# package.json, 裡面放的内容看後文
touch package.json
# 放vuepress相關
mkdir .vuepress
cd .vuepress
# 建立config.js, 裡面放的内容看後文
touch config.js
# 放圖檔和CNAME
mkdir public
# 放樣式的
mkdir styles
# 在裡面建立放圖檔
cd public
mkdir _images

最後的結構大概是這樣：(其它灰色的檔案夾是編譯出來的)

添加配置和内容

添加首頁面

---
home: true
heroImage: /_images/index-read.gif
actionText: 快速開始 →
actionLink: /md/java/basic/java-basic-oop.md
features:
- title: 夯實基礎
  details: 不積跬步無以至千裡, 仰望星空還需腳踏實地
- title: 建構體系
  details: 告别碎片化學習，幫助你構築你自己的知識體系
- title: 全棧開發
  details: 以Java開發為背景，全棧開發，DevOps
footer: © 2017-present pdai
---

config.js配置

module.exports = {
    port: "3000",
    dest: "docs",
    ga: "UA-xxxxx-1",
    base: "/",
    markdown: {
        lineNumbers: true,
        externalLinks: {
            target: '_blank', rel: 'noopener noreferrer'
        }
    },
    locales: {
        "/": {
            lang: "zh-CN",
            title: "Java 全棧知識體系",            
            description: "包含: Java 基礎, Java 部分源碼, JVM, Spring, Spring Boot, Spring Cloud, 資料庫原理, MySQL, ElasticSearch, MongoDB, Docker, k8s, CI&CD, Linux, DevOps, 分布式, 中間件, 開發工具, Git, IDE, 源碼閱讀，讀書筆記, 開源項目..."
        }
    },
    head: [
        // ico
        ["link", {rel: "icon", href: `/favicon.ico`}],
        // meta
        ["meta", {name: "robots", content: "all"}],
        ["meta", {name: "author", content: "pdai"}],
        ["meta", {name: "keywords", content: "Java 全棧知識體系, java體系, java知識體系, java架構,java詳解,java學習路線,java spring, java面試, 知識體系, java技術體系, java程式設計, java程式設計指南,java開發體系, java開發,java教程,java,java資料結構, 算法, 開發基礎"}],
        ["meta", {name: "apple-mobile-web-app-capable", content: "yes"}]
    ],
    plugins: [
    ],
    themeConfig: {
        // repo: "realpdai/tech-arch-doc",
        docsRepo: "realpdai/tech-arch-doc",
        // logo: "/logo.png",
        editLinks: true,
        sidebarDepth:0,
        locales: {
            "/": {
                label: "簡體中文",
                selectText: "Languages",
                editLinkText: "在 GitHub 上編輯此頁",
                lastUpdated: "上次更新",
                nav: [
                ],
                sidebar: {
                }
            }
        }
    }
};

package.json配置

進入項目目錄

{
  "name": "tech-arch-doc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
  "devDependencies": {
    "vuepress": "^1.0.2"
  }
}

本地測試

vuepress dev

初步效果：

要生成靜态的 HTML 檔案，運作:

預設情況下，檔案将會被生成在 .vuepress/dist，當然，你也可以通過 .vuepress/config.js 中的 dest 字段來修改，生成的檔案可以部署到任意的靜态檔案伺服器上

請參考官網 https://vuepress.vuejs.org/zh/guide/getting-started.html#%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85

vuepress build

文檔搭建插件和配置

這裡主要介紹文檔搭建除了預設加載的配置和插件之外，新增加的插件和配置。

添加文檔附加樣式配置: 主題

注意很多網上的例子還是基于老的版本的，甚至我用vuepress的時候，官網還沒有更新過來。

最佳配置請參考: 這裡: （其它官網的配置都沒有更新）

index.styl - 覆寫的樣式

.custom-page-class{
    /* 自定義的樣式 */
}

// markdown blockquote
blockquote
  font-size 1rem
  color #2c3e50;
  border-left .5rem solid #42b983
  background-color #f3f5f7
  margin 1rem 0
  padding 1rem 0 1rem 1rem

  & > p
    margin 0

// markdown h2
h2
  font-size 1.65rem
  padding-bottom 1rem
  border-bottom 1px solid $borderColor

palette.styl - 樣式配置覆寫

// 内容的寬度
$contentWidth = 100%

// 顔色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

添加傳回最上插件

文章很長，添加右下角一鍵傳回頂部按鈕，官網提供了 back-to-top 插件.

安裝

yarn add -D @vuepress/plugin-back-to-[email protected]
# OR npm install -D @vuepress/plugin-back-to-[email protected]

使用

module.exports = {
  plugins: ['@vuepress/back-to-top']
}

插件使用你還可以參考：插件官網

添加圖檔縮放插件

圖檔縮放可以使用@vuepress/plugin-medium-zoom插件，它基于medium-zoom 插件。

yarn add -D @vuepress/[email protected]
# OR npm install -D @vuepress/[email protected]

簡單使用:

module.exports = {
  plugins: ['@vuepress/medium-zoom']
}

自定義選項:

module.exports = {
  plugins: {
    '@vuepress/medium-zoom': {
      selector: 'img.zoom-custom-imgs',
      // medium-zoom options here
      // See: https://github.com/francoischalifour/medium-zoom#options
      options: {
        margin: 16
      }
    }
  }
}

效果可以點選本文中的圖檔檢視, 具體使用你可以參考: 插件官網。

添加評論插件

代碼托管平台遵從 OAuth 2 spec 提供了 OAuth API。Vssue 利用平台提供的 OAuth API，使得使用者可以登入并發表評論。那麼有哪些評論插件可以使用？這裡使用Vssue，它比較新，可能知道的人還不多。@pdai

Vssue , Gitalk 和 Gitment，為何選擇Vssue：

Vssue 支援 Github、Gitlab 和 Bitbucket，并且很容易擴充到其它平台。Gitment 和 Gitalk 僅支援 Github。
Vssue 可以發表、編輯、删除評論。Gitment 和 Gitalk 僅能發表評論。
Vssue 是基于 Vue.js 開發的，可以內建到 Vue 項目中，并且提供了一個 VuePress 插件。 Gitment 基于原生JS，而 Gitalk 基于 Preact。

下面是 Vssue 的簡要工作過程：

使用者在平台的授權頁面允許 Vssue 接入後，平台會帶有

code

或

token

重定向回 Vssue 的頁面（如果是

code

，Vssue 則會根據

code

向平台請求

token

）。

Vssue 擷取

token

後，會将

token

存儲在 localstorage 中，于是使用者就成功使用平台的帳号“登入”到了 Vssue。

接下來， Vssue 就可以擷取使用者的基本資訊、擷取目前頁面的評論，使用者也可以發表評論了。

添加如下配置：具體參考Vssue 官網教程

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

    // 其他的 Vssue 配置
    owner: 'OWNER_OF_REPO',
    repo: 'NAME_OF_REPO',
    clientId: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
  },
},

效果如下：

添加Vuepress文檔的導出

導出頁面隻在我本地開放，線上功能我暫時關閉了。

自己寫了文檔PDF的導出功能（Page, Group, Current是我導出功能裡的

代号

): Page = Group1+…GroupN, Group = Current1+…CurrentN

目前頁面導出
Group頁面導出：主要用來導出一組或者多組章節下面的所有文章。
Page頁面導出

以SpringBoot部分章節導出為例，導出效果如下：

添加svg label标簽

你是不是常看到别人的項目中加了

這種标簽？這種标簽主要基于svg，主要有兩種:

比如Travis CI 提供的: 本網站Build結果
這個網站還可以定制：定制icon svg

添加後效果(狀态為自動擷取)：

添加百度統計

百度統計主要輔助我分析頁面通路量，直接去: 百度統計官網

注意百度統計添加, 考慮在每個頁面點選時作記錄，在enhanceApp.js中攔截router:

export default ({router}) => {
    router.beforeEach((to, from, next) => {
        // @pdai: 對每個頁面點選添加百度統計
        if(typeof _hmt!='undefined'){
            if (to.path) {
                _hmt.push(['_trackPageview', to.fullPath]);
            }
        }
        
        // continue
        next();       
    })
};

百度統計裡某個頁面效果如下：

添加Copy自動加版權資訊

複制你網站時，禁用複制或者添加版權資訊等。

安裝

npm install vuepress-plugin-copyright

配置

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'copyright',
      {
        noCopy: true, // 選中的文字将無法被複制
        minLength: 100, // 如果長度超過 100 個字元
      },
    ],
  ],
}

效果, 拷貝本頁面會自動添加：

著作權歸 xxxx 所有。
連結：https://www.pdai.tech/md/about/blog/blog-build-vuepress.html

更多請參考插件：vuepress-plugin-sitemap

添加SEO優化

這裡給個連結供參考，我這邊自己添加的meta資訊沒有用它。

vuepress-plugin-autometa

添加百度站點自動推送

主要用于向百度站點自動推送，有助于SEO。

安裝

npm install -D vuepress-plugin-baidu-autopush

添加配置

module.exports = {
  plugins: [
    'vuepress-plugin-baidu-autopush'
  ]
};

更多請參考插件：vuepress-plugin-baidu-autopush

添加Sitemap資訊

主要用于生成站點的Sitemap，有助于SEO。

安裝

npm install vuepress-plugin-sitemap

配置

// .vuepress/config.js
module.exports = {
  plugins: {
    'sitemap': {
      hostname: 'https://www.pdai.tech'
    },
  }
}

更多請參考插件：vuepress-plugin-sitemap

添加代碼拷貝

在代碼區，添加一個拷貝按鈕，用來拷貝代碼。

安裝

npm install vuepress-plugin-code-copy

配置

module.exports = {
    plugins: [['vuepress-plugin-code-copy', true]]
}

更多請參考插件：vuepress-plugin-code-copy

部落格/文檔稍完整配置清單

config.js部分内容

module.exports = {
    port: "3000",
    dest: "docs",
    ga: "UA-xxxxxxxxxxx-1",
    base: "/",
    markdown: {
        lineNumbers: true,
        externalLinks: {
            target: '_blank', rel: 'noopener noreferrer'
        }
    },
    locales: {
        "/": {
            lang: "zh-CN",
            title: "Java 全棧知識體系",            
            description: "包含: Java 基礎, Java 部分源碼, JVM, Spring, Spring Boot, Spring Cloud, 資料庫原理, MySQL, ElasticSearch, MongoDB, Docker, k8s, CI&CD, Linux, DevOps, 分布式, 中間件, 開發工具, Git, IDE, 源碼閱讀，讀書筆記, 開源項目..."
        }
    },
    head: [
        // ico
        ["link", {rel: "icon", href: `/favicon.ico`}],
        // meta
        ["meta", {name: "robots", content: "all"}],
        ["meta", {name: "author", content: "pdai"}],
        ["meta", {name: "keywords", content: "Java 全棧知識體系, java體系, java知識體系, java架構,java詳解,java學習路線,java spring, java面試, 知識體系, java技術體系, java程式設計, java程式設計指南,java開發體系, java開發,java教程,java,java資料結構, 算法, 開發基礎"}],
        ["meta", {name: "apple-mobile-web-app-capable", content: "yes"}],
        // baidu statstic
        ["script", {src: "https://hm.baidu.com/hm.js?xxxxxxxxxxx"}]
    ],
    plugins: [
        ['@vuepress/back-to-top', true],
        ['@vuepress/medium-zoom', {
            selector: 'img',
            // See: https://github.com/francoischalifour/medium-zoom#options
            options: {
              margin: 16
            }
        }],
        // see: https://vssue.js.org/guide/vuepress.html#usage
        ['@vssue/vuepress-plugin-vssue', {
            // set `platform` rather than `api`
            platform: 'github',
            // all other options of Vssue are allowed
            owner: 'realpdai',
            repo: 'tech-arch-doc-comments',
            clientId: 'xxxxxxxxxxx',
            clientSecret: 'xxxxxxxxxxxxxxxxxxxxxx',
        }],
        // see: https://vuepress.github.io/zh/plugins/copyright/#%E5%AE%89%E8%A3%85
        ['copyright', {
            noCopy: false, // 允許複制内容
            minLength: 100, // 如果長度超過 100 個字元
            authorName: "https://www.pdai.tech",
            // clipboardComponent: "請注明文章出處, [Java 全棧知識體系](https://www.pdai.tech)"
        }],
        // see: https://github.com/ekoeryanto/vuepress-plugin-sitemap
        ['sitemap', {
            hostname: 'https://www.pdai.tech'
        }],
        // see: https://github.com/IOriens/vuepress-plugin-baidu-autopush
        ['vuepress-plugin-baidu-autopush', {
            
        }],
        // see: https://github.com/znicholasbrown/vuepress-plugin-code-copy
        [['vuepress-plugin-code-copy', true]]
        // ...
    ],
    themeConfig: {
        //repo: "realpdai/tech-arch-doc",
        docsRepo: "realpdai/tech-arch-doc",
        //logo: "/logo.png",
        editLinks: true,
        sidebarDepth:0,
        locales: {
            "/": {
                label: "簡體中文",
                selectText: "Languages",
                editLinkText: "在 GitHub 上編輯此頁",
                lastUpdated: "上次更新",
                nav: [
                    {
                        text: '關于', link: '/md/about/me/about-me.md'
                    }
                ],
                sidebar: {
                    "/md/about/": genSidebar4About()
                }
            }
        }
    }
};

// About page
function genSidebar4About(){
    return [
        {
            title: "關于",
            collapsable: false,
            sidebarDepth: 0, 
            children: [
                "me/about-me.md",
                "me/about-content.md",
                "me/about-content-style.md",
                "me/about-arch.md",
                "me/about-motivation.md"
            ]
        },
        {
            title: "關于 - 本文檔的搭建",
            collapsable: false,
            sidebarDepth: 0, 
            children: [
                "blog/blog-build-vuepress.md", 
                "blog/blog-build-ci.md",
                "blog/blog-build-cd.md",
                "blog/blog-build-ssl.md"
            ]
        }
    ];
}

package.json

{
  "name": "tech-arch-doc",
  "version": "2.0.1",
  "private": true,
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.0.3",
    "@vuepress/plugin-medium-zoom": "^1.0.4",
    "vuepress": "^1.0.2"
  },
  "dependencies": {
    "@vssue/api-github-v3": "^1.1.2",
    "@vssue/vuepress-plugin-vssue": "^1.2.0",
    "vuepress-plugin-baidu-autopush": "^1.0.1",
    "vuepress-plugin-code-copy": "^1.0.4-alpha",
    "vuepress-plugin-copyright": "^1.0.2",
    "vuepress-plugin-sitemap": "^2.3.0"
  }
}

enhanceApp.js

export default ({router}) => {
    router.beforeEach((to, from, next) => {
        // @pdai: 對每個頁面點選添加百度統計
        if(typeof _hmt!='undefined'){
            if (to.path) {
                _hmt.push(['_trackPageview', to.fullPath]);
            }
        }
        
        // continue
        next();     
    })
};

index.styl

.custom-page-class{
    /* 自定義的樣式 */
}

// markdown blockquote
blockquote
  font-size 1rem
  color #2c3e50;
  border-left .5rem solid #42b983
  background-color #f3f5f7
  margin 1rem 0
  padding 1rem 0 1rem 1rem

  & > p
    margin 0

// markdown h1
h1
  font-size 2rem
  padding-bottom 1rem
  border-bottom 1px solid $borderColor

// markdown h2
h2
  font-size 1.65rem
  border-bottom 0px solid $borderColor

// custom block for tip
.custom-block
  .custom-block-title
    font-weight 600
    margin-bottom -0.4rem
  &.tip, &.warning, &.danger
    padding .1rem 1.5rem
    border-left-width .5rem
    border-left-style solid
    margin 1rem 0
  &.tip
    background-color #dfefff
    border-color #428eb9

// logo
.navbar
  .logo
    height $navbarHeight - 1.6rem
    min-width $navbarHeight - 1.6rem
    margin-right 0rem
    vertical-align top

palette.styl

// 内容的寬度
$contentWidth = 100%

// 顔色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

vuepress 其它參考資源

VuePress 官網
VuePress Github
VuePress 社群 VuePress社群維護的生态系統
awesome-vuepress // 注意：vuepress插件分官方（包括官方社群）和社群兩個維護，在裡面都可以找到

第二部分 - 部落格/文檔的自動編譯

文檔托管在Github，有幾種選擇: Github自帶的Github Actions，或者插件Travis CI，或者插件Circle CI。@pdai

Travis CI

注意: Travis CI有個坑爹的地方要注意: 它有travis.com和travis.org兩個網站，一個是對公有項目，一個是對私有項目；然後，github是可以在公有和私有項目中切換的，于是在切換後，一些配置可能無法正确設定。

Github 啟用插件

進入 https://github.com/marketplace/travis-ci

配置插件

添加.travis.yml

注意: 這裡隻是簡單做編譯操作，您可以将編譯的結果（靜态的html檔案）強制推送至目前倉庫專門放編譯後檔案的分支；也可以在自己的伺服器上安裝travis-cli，在travis.com(注意不是travis.org)生成證書資訊（自動生成相關環境變量），來進行自動化部署。

這裡上述兩種方案都沒有采用，是因為:

1）travis-cli對私有項目自動添加證書資訊支援不夠；
2）同時本文檔中靜态資源較多，拉取編譯結果較大；
3）github 拉較大資源速度穩定性無法保障，原因你懂的；相對來說用webhook方式已經夠了。

language: node_js

sudo: false

node_js:
  - "12"

cache:
  yarn: true
  directories:
    - node_modules

branches:
  only:
    - master

env:
  global:
    - GITHUB_REPO: github.com/realpdai/tech-arch-doc.git

before_install:
  - export TZ=Asia/Shanghai

script:
  - vuepress build

觸發編譯

檢視最後送出編譯狀況

生成build 狀态svg

第三部分 - 部落格/文檔的自動部署

本文主要介紹目前文檔是如何在我自己的伺服器自動編譯部署的。@pdai

文檔編譯和部署流程

搭建

之前購買了一個低配的阿裡雲虛拟機，系統是CentOS 7.x。

安裝NodeJS

添加yum源

curl -sL https://rpm.nodesource.com/setup_10.x | bash -

yum install

yum install -y nodejs

其它方式可以參考此文 https://blog.csdn.net/bbwangj/article/details/82253785

清理原有部分服務

之前伺服器上搭建過gitlab-ee，jenkins，httpd等，由于我自己的代碼托管已經切換至github的私有倉庫，是以現在需要清理下；不需要清理的，請略過。

清理gitlab-ee

https://blog.csdn.net/huhuhuemail/article/details/80519433

清理httpd

https://www.cnblogs.com/richardcastle/p/8296166.html

安裝Nginx和配置

安裝

https://www.centos.bz/2018/01/centos-7%EF%BC%8C%E4%BD%BF%E7%94%A8yum%E5%AE%89%E8%A3%85nginx/

配置開機自啟

https://www.cnblogs.com/jepson6669/p/9131217.html
配置nginx.conf

https://www.cnblogs.com/alvin-niu/p/9502286.html

配置firewalld

https://blog.csdn.net/benchem/article/details/79605598

部署項目

通過webhook觸發編譯并reload nginx

第四部分 - 部落格/文檔的域名，HTTPS，備案

本文主要記錄本文檔的域名，HTTPS，備案。 @pdai

文檔的域名，HTTPS，備案這三個步驟不能反，因為存在依賴關系。

申請域名

申請: 萬網

申請域名

https

阿裡雲上: SSL證書

申請證書

證書稽核

30分鐘之内就稽核完成

證書詳情

這個詳情頁面在備案的時候需要拍照上傳。

證書下載下傳

備案

80/443端口通過域名直接通路是需要備案的，在18年的時候我搭建過的個人網站是不要備案的。

備案前通路 www.pdai.tech

進入備案

期間需要手機通過阿裡雲人臉認證，并上傳身份證，域名和證書拍照等。

備案稽核

注意備案初審由阿裡雲代理的，要求: 個人網站必須命名為 xxxx的個人部落格 或者 xxx的個人首頁 ，否則備案不通過。申請的周期大概最多是20天，申請完了之後工信部會發短信到登記到手機号，之後到8小時就可以使用了。

伺服器資源選擇

那麼搭建這樣的網站需要多少伺服器資源呢，阿裡雲坑的地方是新使用者首年都便宜，後面續費就貴了。

看下搭建需要多少資源

看下費用

推薦選擇1CPU，1-2G記憶體即可；1Core-1GB一年價格287多，選擇五年也就642多；後期如有需求，可以線上 增加配置

關于續費，我之前選擇是2CPU，4GB記憶體；當初一年是780，續費價格是2363；

後續: 我将阿裡到伺服器降級到了1U 1GB，但是使用Vuepress build 編譯靜态頁面時記憶體需要700MB，這将導緻記憶體不夠。我這邊考慮使用swap方式，置換一些記憶體資源放置swap磁盤。

Swap空間

參考文章如下: https://blog.csdn.net/u010457406/article/details/83753384

編譯前

編譯中（記憶體不夠會置換至swap區）

最後的效果

最後的效果請通路： Java 全棧知識體系

文章内容目錄

第一部分 - 部落格/文檔系統的搭建

部落格/文檔搭建前言

有哪些選擇

我做了哪些嘗試

自己寫：我用java手寫了一個系統

Docisify等工具

部落格園等平台

為什麼現在用vuepress

部落格/文檔工具vuepress介紹

vuepress是如何工作的？

vuepress 一些特性

vuepress 插件架構

部落格/文檔基礎搭建

brew安裝或者更新

更新node和npm

配置vuepress工作目錄

添加配置和内容

文檔搭建插件和配置

添加文檔附加樣式配置: 主題

添加傳回最上插件

添加圖檔縮放插件

添加評論插件

添加Vuepress文檔的導出

添加svg label标簽

添加百度統計

添加Copy自動加版權資訊

添加SEO優化

添加百度站點自動推送

添加Sitemap資訊

添加代碼拷貝

更多插件配置

部落格/文檔稍完整配置清單

vuepress 其它參考資源

第二部分 - 部落格/文檔的自動編譯

Travis CI

Github 啟用插件

配置插件

添加.travis.yml

觸發編譯

檢視最後送出編譯狀況

生成build 狀态svg

第三部分 - 部落格/文檔的自動部署

文檔編譯和部署流程

搭建

安裝NodeJS

清理原有部分服務

安裝Nginx和配置

部署項目

第四部分 - 部落格/文檔的域名，HTTPS，備案

申請域名

https

備案

伺服器資源選擇

最後的效果

繼續閱讀