程序員不可錯過的一款Hexo博客主題
自從 2018 年開始寫公眾號之后，我的個人站點(diǎn)（fwhyy.com）就停止更新了，直到最近查資料發(fā)現(xiàn)了hexo 博客的 stellar 主題，春節(jié)期間重新將博客維護(hù)起來，主要原因是因?yàn)樵撝黝}支持專欄的功能，點(diǎn)擊「閱讀原文」可以訪問博客。
原來博客站點(diǎn)的部署情況如下：
域名：在狗爹購買，DNSPod 進(jìn)行 DNS 解析；
空間：Linode 東京機(jī)房，后來被遷移到東京機(jī)房 2 ，遷移后感覺速度變慢了；
圖床：沒有使用圖床，圖片直接放在網(wǎng)站發(fā)布的目錄中；
寫作工具：MWeb；
發(fā)布方式：使用 hexo d 命令結(jié)合 Linode 服務(wù)器上安裝的 Git Hook 。
因?yàn)樵L問速度的原因，便想換一種部署的方式，調(diào)整后的方案如下：
空間：使用 GitHub Page ,然后進(jìn)行域名的綁定；
域名：需要修改 DNSPod 中的 DNS 解析；
圖床：選用 GitHub 圖床，配合 jsdelivr 做 CDN 加速
寫作工具：Typora；
發(fā)布方式：GitHub Action 。
GitHub Page 綁定域名
多年前我就用過 GitHub Page，所以這次只需要進(jìn)行域名的綁定就可以：
1、在倉庫的 Settings 的 Pages 項(xiàng)中進(jìn)行域名的設(shè)置，如下圖：
2、在倉庫的根目錄下創(chuàng)建 CNAME 文件，內(nèi)容為域名，如下圖：
修改 DNSPod
1、將原來的兩條 A 記錄禁用；
2、添加新的 CNAME 記錄，記錄值為 oec2003.github.io。
如下圖：
圖床
圖床使用的是 GitHub 圖床；
使用
做 CDN 加速；
使用 PicGo 來進(jìn)行圖片的上傳；
在寫作工具 Typora 中可以使用 PicGo 作為圖片的上傳服務(wù)。
1、在 GitHub 上創(chuàng)建 hblog-images 的公有倉庫來用存儲圖片；
2、下載 PicGo 并進(jìn)行配置：
倉庫名：在 GitHub 中創(chuàng)建的公有倉庫的名稱 hblog-images
分支名：通常為 master
設(shè)定 Token：登錄 GitHub ，在 Settings / ?Developer settings / Personal access tokens 中生成 Token，需要注意的是生成之后Token只會出現(xiàn)一次，及時保存
指定存儲路徑：隨便取個名字即可，比如上面配置的為 img/ ，表示圖片會上傳到倉庫的 img 目錄中
自定義域名：這里就是設(shè)置 jsdelivr 的 CDN 地址，https://cdn.jsdelivr.net/gh/oec2003/hblog-images ，格式為：https://cdn.jsdelivr.net/gh/
/<倉庫名稱>
3、在 Typora 的偏好設(shè)置中進(jìn)行圖片的上傳服務(wù)的設(shè)置，如下圖：
4、在 Typora 中選中一張圖片點(diǎn)擊右鍵，選中上傳圖片，成功后圖片的地址會自動替換，如下圖：
使用 GitHub Action
使用 GitHub Action 需要兩個 GitHub 倉庫：
GitHub Page 的倉庫，https://github.com/oec2003/oec2003.github.com
存放 Hexo 代碼的倉庫，https://github.com/oec2003/hblog-code
具體步驟如下：
1、生成 SSH Key
?ssh-keygen -t rsa -C "[email protected]"以 Mac 系統(tǒng)為例，生成的文件在 ~/.ssh 目錄中，id_rsa 為私鑰文件，id_rsa.pub 為公鑰文件。
2、在 GitHub Page 的倉庫的 Settings > Deploy keys 中添加公鑰
3、在 Hexo 代碼倉庫中的 Settings > Secrets > Actions 中添加私鑰
4、在 Hexo 代碼倉庫的 Actions 頁簽添加 workflow，如下圖：
5、創(chuàng)建的 workflow 為一個 yml 文件，內(nèi)容如下：
?name: hblog deploy
?on: [push]
?jobs:
? build:
? ? runs-on: ubuntu-latest
? ? name: A job to deploy blog.
? ? steps:
? ? - name: Checkout
? ? ? uses: actions/checkout@v1
? ? ? with:
? ? ? ? submodules: true
? ? - name: Cache node modules
? ? ? uses: actions/cache@v1
? ? ? id: cache
? ? ? with:
? ? ? ? path: node_modules
? ? ? ? key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
? ? ? ? restore-keys: |
? ? ? ? ? ${{ runner.os }}-node-
? ? - name: Install Dependencies
? ? ? if: steps.cache.outputs.cache-hit != 'true'
? ? ? run: npm ci
? ? ?
? ? ?# Deploy hexo blog website.
? ? - name: Deploy
? ? ? id: deploy
? ? ? uses: sma11black/[email protected]
? ? ? with:
? ? ? ? deploy_key: ${{ secrets.BLOG_DEPLOY_PRIVATE }}
? ? ? ? user_name: oec2003 ?
? ? ? ? user_email: [email protected] ?
? ? ? ? commit_msg: ${{ github.event.head_commit.message }} ?
? ? - name: Get the output
? ? ? run: |
? ? ? ? echo "${{ steps.deploy.outputs.notify }}"上面配置需要修改的部分是 steps 中的 Deploy 步驟；
uses：這里使用的是 sma11black/[email protected] ，這是一個現(xiàn)成的 hexo 發(fā)布 action；
deploy_key ：上面第三步中在 Hexo 代碼倉庫的 Settings > Secrets > Actions 添加私鑰的名稱；
user_name：GitHub 登錄名；
user_email：生成 ssh 密鑰時使用的郵箱。
寫作流程
1、使用 hexo n 命令創(chuàng)建博客文章的 md 文件 ,該文件的所在目錄為 /source/_posts 目錄中；
2、使用 Typora 打開 _posts 目錄，選擇創(chuàng)建的文件進(jìn)行內(nèi)容的編輯；
3、文章中如果有圖片，直接粘貼到 Typora 中，并右鍵選擇上傳圖片即可，上傳成功后地址會自動替換為 jsdelivr 的地址；
4、文章內(nèi)容編輯完成后，在 GitHub Desktop 中將修改內(nèi)容進(jìn)行提交和推送，GitHub Action 會自動進(jìn)行網(wǎng)站的生成和部署。
常見問題
域名問題
每次 push 代碼自動構(gòu)建發(fā)布后，GitHub Page 的倉庫中配置的域名會丟失。按照如下步驟可以解決：
1、在網(wǎng)站根目錄的 _config.yml 文件中找到 skip_render 節(jié)點(diǎn)，配置 CNAME ，如下圖：
2、在 /source 目錄中創(chuàng)建一個文件，命名為 CNAME ，里邊的內(nèi)容為你的域名。例如我的域名為：http://fwhyy.com , 該文件的內(nèi)容為：fwhyy.com 。
Deploy keys 和 SSH keys
每個倉庫的 Settings 中有 Deploy keys 的設(shè)置，全局的 Settings 中有 SSH keys 的設(shè)置，全局的 SSH keys 設(shè)置后，其他的倉庫就不用單獨(dú)設(shè)置了。
而且這兩個是沖突的，如果設(shè)置了全局的 SSH keys ，再在某個倉庫中設(shè)置 Deploy keys 時，會提示 key 已經(jīng)存在。
_config.yml 文件中的 deploy 設(shè)置
這里需要注意兩點(diǎn)：
1、網(wǎng)站根目錄中的 _config.yml 的 deploy 節(jié)點(diǎn)需要進(jìn)行設(shè)置，否則 GitHub Action 運(yùn)行后不能將文件發(fā)布到 GitHub Page 的倉庫，deploy 配置如下：
?deploy:
? type: 'git'
? repo:
? ? github: [email protected]:oec2003/oec2003.github.com.git
? ? ?
? branch: master
? message: "Build at {{ now('YYYY-MM-DD HH:mm:ss Z') }}"2、上面配置中的 github 的地址配置的是 GitHub Page 倉庫的地址，因?yàn)榍懊嬗性O(shè)置過 Deploy keys 或 SSH keys ，所以這個地址使用 ssh 地址即可，如果要使用 https 地址，需要在地址中添加 GitHub 的賬戶和密碼。
總結(jié)
1、重新更新博客主要是因?yàn)檫@款主題，能支持專欄，還有一個原因就是博客更隨意，內(nèi)容也能隨時修改；
2、第一次使用了 GitHub Action ，發(fā)現(xiàn)功能非常強(qiáng)大，也能帶來一些思考，比如說，在 steps 中的一個任務(wù)塊可以使用 uses 來引用其他現(xiàn)成的 action 。在零代碼平臺中一個很重要的思路就是組件的組合，組件如果能形成一個生態(tài)，而且在組建功能時能方便地使用到公共組件，擴(kuò)展能力將會大大增強(qiáng)。