一文搭建自己部落格/文檔系統：搭建，自動編譯和部署，域名，HTTPS，備案等
- 2019 年 11 月 8 日
- 筆記
本文純原創，搭建後的部落格/文檔網站可以參考： Java 全棧知識體系。如需轉載請說明原處。
第一部分 – 部落格/文檔系統的搭建
搭建部落格有很多選擇，平台性的比如: 知名的CSDN, 部落格園, 知乎，簡書等；自己搭建比如 Hexo, Gitbook, Docisify等等。我有一顆不安分的心，每種我都用過…但是最後的最後我還是選擇了將部落格逐移至自己搭建的vuepress。 @pdai
- 第一部分 – 部落格/文檔系統的搭建
- 第二部分 – 部落格/文檔的自動編譯
- 第三部分 – 部落格/文檔的自動部署
- 第四部分 – 部落格/文檔的域名，HTTPS，備案
部落格/文檔搭建前言
有哪些選擇
搭建部落格有很多選擇，平台性的比如: 知名的CSDN, 部落格園, 知乎，簡書等；自己搭建比如 Hexo, Gitbook, Docisify等等。
我做了哪些嘗試
- 自己寫：我用java手寫了一個系統
- Docisify等工具
- 部落格園等平台
自己寫：我用java手寫了一個系統
以下系統由我獨立設計，開發和運維（總計四萬多行程式碼吧）, 這裡只展示部落格文檔部分。以下圖片是我在之前部落格園寫文章截圖的：
- markdown編輯
- 文章清單
- 支援導出各種形式
- 支援共享給其它虛擬組織
等等。
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，命令如下：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"然後重新安裝：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"通過該方法直接獲取最新的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
如有需要，請參考這兩篇文章：
配置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-top@next # OR npm install -D @vuepress/plugin-back-to-top@next使用
module.exports = { plugins: ['@vuepress/back-to-top'] }插件使用你還可以參考：插件官網
添加圖片縮放插件
圖片縮放可以使用@vuepress/plugin-medium-zoom插件，它基於medium-zoom 插件。
yarn add -D @vuepress/plugin-medium-zoom@next # OR npm install -D @vuepress/plugin-medium-zoom@next簡單使用:
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標籤
你是不是常看到別人的項目中加了
- 比如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資訊沒有用它。
添加百度站點自動推送
主要用於向百度站點自動推送，有助於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
更多插件配置
請參考 awesome-vuepress
部落格/文檔稍完整配置清單
- 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 = #282c34vuepress 其它參考資源
- 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；
:::tip
後續: 我將阿里到伺服器降級到了1U 1GB，但是使用Vuepress build 編譯靜態頁面時記憶體需要700MB，這將導致記憶體不夠。我這邊考慮使用swap方式，置換一些記憶體資源放置swap磁碟。
:::
- Swap空間
參考文章如下: https://blog.csdn.net/u010457406/article/details/83753384
編譯前
編譯中 （記憶體不夠會置換至swap區）
最後再看下搭建出來的效果吧
最全的Java後端知識體系 https://www.pdai.tech, 每天更新中…。
