博客搭建
# 博客搭建
# 一、搭建
基于Vuepress模板搭建，由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统 (opens new window)和插件 API (opens new window)，另一个部分是为书写技术文档而优化的默认主题 (opens new window)，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
比较节省时间成本的做法是clone一个先成的主题并进行自定义调整，同时还可以使用VuePress提供的丰富的插件实现定制化需求。
# 二、部署
核心是将博客系统上传至仓库，并使用GitHub Pages部署。上传部署时需要明白一个关键点，GitHub静态站点所展示页面引用的仓库代码，是最终VuePress打包后的dist文件夹。因此最终打包的dist文件夹，需要放到gh-pages分支下，GitHub Pages会将该分支下的静态页面进行托管。master主分支可以存储整个项目文件。
当然，你也可以往仓库中只上传所打包的静态页面，也可以全部都放到master分支，不需要另起分支。最终只需要在仓库Settings->Pages中，修改静态页面所在分支即可。
# 仓库名同GitHub用户名部署
创建仓库时，仓库名为：<username>.github.io，有几处对应需要适配的地方：
- config.ts中base默认设置"/"
- 访问时，直接访问https://用户名.github.io/
- build打包生成的文件夹推到master分支
# 自定义仓库名部署
仓库名自定义设置：
- config.ts中base需要设置“/仓库名/”，当我们访问页面时，浏览器才知道页面要加载的所有样式去该GitHub账户下哪个仓库找
- 访问地址：https://用户名.github.io/仓库名/
- build打包生成的文件夹推到gh-pages分支
# 自定义仓库+域名进行部署
同以上仓库自定义的部署操作以外，在给项目打包时，需要使用echo指令将域名写入到CNAME文件中，GitHub Pages会读取里面的内容，并添加到Custom domain用户域名选项中，此时会将域名和用户仓库进行绑定。
域名DNS解析的记录值配置为GitHub用户名，记录类型为CNAME，如下：
- 访问网页后会丢样式，原因在于域名配置记录值项后，访问域名时请求的所有css样式指向的应该是GitHub用户名根节点，而博客项目里的所有样式地址都还设置在base路径下，因此配置完DNS后需要再将base改为'/'。
# 其它
设置.sh脚本自动打包并部署，调用时需要在git bash中使用，windows不支持直接运行。
# 三、GitHub Action自动持续集成
功能：整个项目代码推送到仓库master分支后，GitHub会读取项目中./github/workflows/路径下的.yml文件，自动执行如下作业：切换分支—>下载node依赖—>执行deploy部署静态页面脚本。从而实现自动化部署，使用前需要在仓库配置GitHub token。
name: CI
#on: [push]
# 在master分支发生push事件时触发。
on:
push:
branches:
- master
env: # 设置环境变量
TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用该时区时间）
jobs:
build: # 自定义名称
runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- name: Checkout # 步骤1
uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
- name: Use Node.js ${{ matrix.node-version }} # 步骤2
uses: actions/setup-node@v1 # 作用：安装nodejs
with:
node-version: ${{ matrix.node-version }} # 版本
registry-url: "https://registry.npmjs.org"
- name: run deploy.sh
env: # 设置环境变量
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
run: npm install && npm run deploy # 执行的命令
# package.json 中添加 "deploy": "bash deploy.sh"
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
对应部署脚本包括以下几个步骤：
- Vue build打包
- 添加域名文件
- 在git添加版本控制初始化之前，因为不是在本地执行git(相当于在GitHub机器上另起一个git)，因此需要新添加git用户名和邮箱
- 进入dist文件内初始化仓库，并推送到新的gh-pages分支。最后删除dist文件夹。
set -e
npm run build # 生成静态文件
cd docs/.vuepress/dist # 进入生成的文件夹
# deploy to github
echo 'www.blagecode.cn' > CNAME
if [ -z "$GITHUB_TOKEN" ]; then
msg='deploy'
githubUrl=git@github.com:blage-coding/blog.git
else
msg='来自github action的自动部署'
githubUrl=https://blage-coding:${GITHUB_TOKEN}@github.com/blage-coding/blog.git
git config --global user.name "用户名"
git config --global user.email "邮箱"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github
cd -
rm -rf docs/.vuepress/dist
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22