# 谁不想拥有一个自己的网站/博客呢?
是呀,谁不想拥有一个自己的网站/博客呢?
我们很多人可能曾经通过多种多样的方式搭建过自己的博客系统。有的是一时兴起,有时是经过深思熟虑,有的不愿成为他人嫁衣,有的是想保留下这两分自留地。即使搭建完成之后,它们大概率会像刚出生一样静静地躺在那里,但我们仍然会选择"Just do it!"。
# 搭建博客的痛点
- 源码存放在本地,容易丢失;发布的博客系统只是打包好的文件。
- 不能一键发布。
- 源码存放 github,可能会透露一些敏感或隐私信息。
- 发布的博客网址携带项目目录名,如: naturellee.github.io/contacts/xxx.html,而我们期望的是 contacts 不存在。
因此对搭建博客系统提出以下要求:
- 源码私有存放;
- 发布到自己的 username.github.io 主路径;
- 源码更新即可触发博客的更新发布;
# 正确姿势
为满足以上要求,现提出一种新的构建方式:
- 在个人 github 中新建 private repo: notes,用于存放整个博客系统的代码;
- 在个人 github 中新建 public repo: username.github.io;这是一个特殊的 repo,提交到 master 分支的代码会自动作为 username.github.io 的内容;因此我们会把 notes 分支打包好的代码自动推送到这个项目中;
- 使用 github actions 在 notes repo 中添加 CI 构建脚本,监听 push 请求,触发编译,并自动提交打包好的代码到 username.github.io repo 中;
- 由于 github actions 中会使用项目权限,需要添加相应的 access token;
# 实战案例
.github/workflows/ci.yml文件
name: Build and Deploy
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: |
npm install
npm run build #具体命令对应你的项目打包命令
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
token: ${{ secrets.ACCESS_TOKEN }} # ACCESS_TOKEN需要在notes/settings/Secrets 下面添加Actions secrets
repository-name: NaturelLee/naturellee.github.io
branch: master # The branch that the action should deploy to.
folder: docs/.vuepress/dist # The folder that the action should deploy.
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
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