如何利用VuePress和GithubPage搭建一個輕量級部落格
摘要: 相信每個人都想擁有一個部落格, 一個屬於自己寫作的地方，今天講講如何用VuePress和github Github Pages打造一個屬於自己的部落格，不用建站，也不用域名的輕量級部落格, 關鍵還支援markdown寫作, 大大提高了寫作的好感度。本文首發於公眾號:
漫步coding
部落格地址如下：
大家可以開啟看看效果:
VuePress
VuePress 自然不用多說，基於 Vue 的靜態網站生成器，風格簡約，配置也比較簡單。之所以不使用 VitePress，是因為想使用現有的主題， 而 VitePress 不相容當前 VuePress 的生態系統，至於為什麼不選擇 VuePress@next，考慮到還處於 Beta 階段，等穩定後再開始遷移。
安裝過程
目前我用的node版本是: v16.14.2, 大家在安裝之前要檢查一下自己的node版本, 太低了可能安裝不了。
大家也可以看VuePress的官網教程: https://v2.vuepress.vuejs.org/guide/getting-started.html
1、建立專案
mkdir vuepress-starter
cd vuepress-starter
2、初始化專案
git init
yarn init
3、安裝VuePress
yarn add -D vuepress
4、將下面的script 新增到package.json中
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
5、建立第一個檔案
mkdir docs
echo '# Hello VuePress' > docs/README.md
6、執行下面的命令啟動local server
yarn docs:dev
這時你訪問http://localhost:8080/，如果能出現以下介面，說明到你已經搭建好了部落格。
7、基礎配置
在docs目錄下建立一個 .vuepress 目錄，所有 VuePress 相關的檔案都會被放在這裡。
命令
mkdir docs/.vuepress
touch docs/.vuepress/config.js
此時你的專案結構可能是這樣：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
6、在 .vuepress 資料夾下新增 config.js，配置網站的標題和描述，方便 SEO：
cat > docs/.vuepress/config.js
module.exports = {
title: '漫步coding的部落格',
description: '公眾號: 漫步coding, 歡迎大家關注， 一個聚焦於演算法、資料庫、架構的公眾號'
}
這個時候就可以看到網站title 已經變成了: 漫步coding的部落格
7、新增導航欄
我們現在在頁首的右上角新增導航欄，修改 config.js:
module.exports = {
title: '漫步coding的部落格',
description: '公眾號: 漫步coding, 歡迎大家關注， 一個聚焦於演算法、資料庫、架構的公眾號',
themeConfig: {
nav: [
{ text: '首頁', link: '/' },
{
text: '漫步coding 部落格',
items: [
{ text: 'Github', link: 'https://github.com/easyhappy/travel-coding' },
{ text: '公眾號', link: 'https://mp.weixin.qq.com/s/Npkk0oHEszZrUP2yRiTaSA' }
]
}
]
}
}
執行效果如下:
8、新增左側邊欄
現在我們新增一些 md 文件，目前文件的目錄如下：
執行以下命令
命令1:
mkdir docs/about
cat > docs/about/brief.md
Hello 大家好，我是公眾號: 漫步coding 的作者, 很高興我們能在這裡相聚。可以關注公眾號, 一起交流。
命令2:
mkdir docs/mysql
cat > docs/mysql/brief
一般來講在面試當中， 關於資料庫相關的面試題頻率出現比較高的幾個關鍵詞是SQL優化、索引、儲存引擎、事務、死鎖、樂觀鎖、悲觀鎖、關係型資料庫和非關係資料庫對比等等。 把這幾個點問完基本也差不多10~20分鐘了(一般一輪面試1小時左右), 基本這些可以讓面試官對你的資料庫知識有一定的瞭解了。
如果你線上運維經驗, 一般也會問一些比如資料庫擴容, 如何給大表加索引, 如何在業務高峰是給一個大表新增欄位等。
目前文件的目錄如下：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ mysql
| └─ brief.md
| └─ about
| └─ brief.md
|
└─ package.json
8、設定docs/.vuepressconfig.js sidebar模組, 新增左側導航欄, 完成設定如下:
module.exports = {
title: '漫步coding的部落格',
description: '公眾號: 漫步coding, 歡迎大家關注， 一個聚焦於演算法、資料庫、架構的公眾號',
themeConfig: {
nav: [
{ text: '首頁', link: '/' },
{
text: '漫步coding 部落格',
items: [
{ text: 'Github', link: 'https://github.com/easyhappy/travel-coding' },
{ text: '公眾號', link: 'https://mp.weixin.qq.com/s/Npkk0oHEszZrUP2yRiTaSA' }
]
}
],
sidebar: [
{
title: 'mysql',
path: '/',
collapsable: false, // 不折疊
children: [
{ title: "前言", path: "/mysql/brief"},
]
},
{
title: '關於我',
path: '/',
collapsable: false, // 不折疊
children: [
{ title: "公眾號", path: "/about/brief"},
]
}
]
}
}
效果圖如下:
9、設定部落格主題
yarn add vuepress-theme-reco
將以下程式碼放到config.js中
module.exports = {
// ...
theme: 'reco'
// ...
}
就可以自主設定顯示模式了。
9、此時基本完成了VuePress的搭建, 下面就是將部落格釋出到Github Page上。我們在 Github 上新建一個倉庫，這裡我取得倉庫名為：travel-coding。
module.exports = {
// 路徑名為 "/<您建的REPO名字>/"
base: '/travel-coding/',
//...
}
10、將下面新增一些檔案或者目錄放到.gitignore檔案中.
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
11、然後我們在專案 vuepress-starter 目錄下建立一個指令碼檔案：deploy.sh，注意修改一下對應的使用者名稱和倉庫名：
#!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
# 生成靜態檔案
npm run docs:build
# 進入生成的資料夾
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
### imporant 注意替換 如果釋出到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:easyhappy/travel-coding.git master:gh-pages
cd -
12、執行命令, 會將編譯好的部落格檔案, push到github 專案的gh-pages
sh deploy.sh
13、在專案的Settings -> Pages 就可以看到對應的部落格地址， 也可以自己設定根目錄和自定義域名
我最後生成的部落格地址: https://easyhappy.github.io/travel-coding/
程式碼地址: https://github.com/easyhappy/travel-coding
到此為止, 我們就完成了 VuePress 和 Github Pages 的部署。
讓我們一起漫步coding, enjoy your self.