准备部署一套全新的博客界面来记录一些记录一些有趣解决方案和精妙的系统设计,与之前的的算法博客区分出来,记录一下搭建过程。
一、基本原理
编写Markdown文件,提交到GitHub,使用GitHub提供的流水线将Markdown文件编译成静态HTML文件,使用GitHub提供的网站部署服务部署这些静态文件。
最终的效果就是,在本地写好文档后,提交到GitHub后,自动更新网站数据。
二、部署流程
由于Hexo是很早以前部署的,我已经忘记了,我也不感兴趣这里的环境搭建,所以这里偷了个懒直接复制了我之前的项目。
1、项目准备
需要完成上述功能,需要在GitHub创建如下两个项目(根据情况改名字):
- 1、cocofhu/systemdesign.github.io 这个项目用来存部署的静态页面
- 2、cocofhu/systemdesign 这个项目用来存原始markdown文件(可以直接复制本项目)
2、创建密钥
1
| ssh-keygen -f github-deploy-key
|
一直回车直至成功得到公钥和私钥。
3、配置密钥
1、在 cocofhu/systemdesign.github.io的Deploy keys配置公钥,Title用 HEXO_DEPLOY_PUB。
2、在 cocofhu/systemdesign 下New repository secret配置私钥,Title用 HEXO_DEPLOY_PRI。
4、配置CI
更改复制的项目cocofhu/systemdesign的.github/workflows/main.yml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| name: HEXO CI
on: [push]
jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [15.x]
steps: - uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }}
- name: Configuration environment env: HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}} run: | mkdir -p ~/.ssh/ echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa chmod 600 ~/.ssh/id_rsa ssh-keyscan github.com >> ~/.ssh/known_hosts # 改成自己的 git config --global user.name "cocofhu" git config --global user.email "cocofhu@outlook.com"
- name: Install dependencies run: | npm i -g hexo-cli npm i
- name: Deploy hexo run: | cd blog rm -rf node_modules && npm install --force npm install --save hexo-deployer-git hexo g # 自定义域名 配置一个CName指向systemdesign.github.io echo "solution.cocofhu.com" > public/CNAME hexo d
|
5、修改配置
更改复制的项目cocofhu/systemdesign的blog/_config.yml:
1 2 3 4 5 6 7
|
deploy: type: git repo: git@github.com:cocofhu/systemdesign.github.io branch: master
|
最后在这里配置GitHub Pages就大功告成了!