本文純原創，搭建后的博客/文檔網站可以參考： Java 全棧知識體系。如需轉載請說明原處。
文章內容目錄
- 第一部分 - 博客/文檔系統的搭建
- 第二部分 - 博客/文檔的自動編譯
- 第三部分 - 博客/文檔的自動部署
- 第四部分 - 博客/文檔的域名，HTTPS，備案
第一部分 - 博客/文檔系統的搭建
搭建博客有很多選擇，平台性的比如: 知名的CSDN, 博客園, 知乎，簡書等；自己搭建比如 Hexo, Gitbook, Docisify等等。我有一顆不安分的心，每種我都用過...但是最后的最后我還是選擇了將博客逐移至自己搭建的vuepress。 @pdai
博客/文檔搭建前言
有哪些選擇
搭建博客有很多選擇，平台性的比如: 知名的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#全局安裝
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標簽
你是不是常看到別人的項目中加了
這種標簽？這種標簽主要基於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信息沒有用它。
添加百度站點自動推送
主要用於向百度站點自動推送，有助於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 = #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，使用yum安裝nginx/
-
配置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, 每天更新中...。