博客配置和部署
# 博客相关技术栈
博客框架采用VuePress (opens new window)，主题是vuepress-theme-Vdoing (opens new window)
# 页面配置
# config文件配置
// .vuepress/config.js
module.exports = {
// 插件配置
plugins: [
// 'vuepress-plugin-baidu-autopush', // 百度自动推送
// 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）
[
'thirdparty-search',
{
thirdparty: [
{
title: '在github中搜索',
frontUrl: 'https://github.com/search?q='
},
{
title: '在百度中搜索',
frontUrl: 'https://www.baidu.com/s?ie=UTF-8&wd='
},
{
title: '在stackOverflow中搜索',
frontUrl: 'https://stackoverflow.com/search?q='
},
{
title: '在Bing中搜索',
frontUrl: 'https://bing.com/search?q='
},
{
title: '在MDN中搜索',
frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
behindUrl: '' // 搜索链接的后面部分，可选，默认 ''
},
{
title: '在菜鸟中搜索',
frontUrl: 'https://www.runoob.com/?s='
},
]
}
],
[
'one-click-copy', // 代码块复制按钮
{
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'],
copyMessage: '复制成功',
toolTipMessage: '点击复制代码',
duration: 500,
showInMobile: false // whether to display on the mobile side, default: false.
}
],
[// demo演示模块
'demo-block'
],
[
'vuepress-plugin-zooming', // 放大图片
{
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
options: {
bgColor: 'rgba(0,0,0,0.6)'
}
}
],
[
'vuepress-plugin-comment', // 评论
{
choosen: 'gitalk',
options: {
clientID: '你的id',
clientSecret: '你的secret',
repo: '', // GitHub 仓库
owner: '', // GitHub仓库所有者
admin: [''], // 对仓库有写权限的人
// distractionFreeMode: true,
pagerDirection: 'last', // 'first'正序 | 'last'倒序
id: '<%- (window.location.origin + (frontmatter.permalink || frontmatter.to.path)).slice(-16) %>', // 页面的唯一标识,长度不能超过50
title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
body: '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>' // GitHub issue 的内容
}
}
],
[
'@vuepress/last-updated', // "上次更新"时间格式
{
transformer: (timestamp, lang) => {
const dayjs = require('dayjs'); // https://day.js.org/
return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss');
}
}
],
[ //pwa，用于网站有更新内容时弹出刷新按钮
'@vuepress/pwa', {
serviceWorker: true,
updatePopup: {
message: "发现新内容可用",
buttonText: "刷新"
}
}
],
],
markdown: {
lineNumbers: true,
},
evergreen: true,
};
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
# 部署
- 没有购买服务器，博客部署到了GitHub Pages (opens new window) + netlify (opens new window)上，绑定了自己的域名
# 部署到github page上
- 新建github仓库，名称自取，类型
公共 - 根目录新建deploy.sh
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
yarn build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.llovez.cn' > CNAME
git init
git add .
git commit -m "deploy"
git remote add origin git@github.com:github名/仓库名.git
git branch -M master
git push -f git@github.com:github名/仓库名.git master:gh-pages
cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- package.json中添加"scripts": {"deploy": "bash deploy.sh"}
- 执行yarn deploy 等待上传完成
- 完成后即可访问github名.github.io/仓库名/
# 源代码上传到github
- 新建github仓库，名称自取，类型
私有 - 本地文件执行git命令
git init //初始化
git add . //把项目添加到本地仓库
git commit -m //添加本次提交的注释内容
git remote add origin 仓库地址 //关联远程仓库
git push -u origin master //提交代码，第一次提交需要加上-u，以后提交不需要了
1
2
3
4
5
2
3
4
5
# 使用github actions实现自动化部署
- 首先点击github头像，选择
settings>Developer settings>Personal access tokens,点击新增按钮，创建一个令牌，保存令牌值 - 打开仓库点击
settings>Actions secrets and variables>Actions,点击新增按钮，填写name，value为上一步令牌值 - 在本地项目新建文件
.github>workflows>main.yml编写工作流
on: # 触发条件
# 每当 push 到 main 分支时触发部署
push:
branches:
- main
jobs:
docs:
runs-on: ubuntu-latest # 指定运行所需要的虚拟机环境（必填）
steps:
- name: Checkout
uses: actions/checkout@v2
with:
# “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v1
with:
# 选择要使用的 node 版本
node-version: "14"
# 缓存 node_modules
- name: Cache dependencies
uses: actions/cache@v2
id: yarn-cache
with:
path: |
**/node_modules
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
# 如果缓存没有命中，安装依赖
- name: Install dependencies
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: yarn --frozen-lockfile
# 运行构建脚本
- name: Build VuePress site
run: yarn build
# 查看 workflow 的文档来获取更多信息
# @see https://github.com/crazy-max/ghaction-github-pages
- name: Deploy to GitHub Pages
uses: crazy-max/ghaction-github-pages@v2
# 环境变量 ACCESS_TOKEN为上一步创建的name名
env:
GH_PAT: ${{ secrets.ACCESS_TOKEN }}
with:
# 部署的仓库
repo: lzlife/blog
# 部署到 gh-pages 分支
target_branch: gh-pages
# 部署目录为 VuePress 的默认输出目录
build_dir: docs/.vuepress/dist
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
47
48
49
50
51
52
53
54
55
56
57
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
47
48
49
50
51
52
53
54
55
56
57
- 重新push代码到github上即可自动化部署到选定的仓库分支上
# 部署到netlify上
- 注册netlify账号
- 从github导入项目
- 部署成功后会自动生成域名，可以修改
- 点击
Domain management添加自己的域名绑定，添加后需要到域名服务商解析，添加两条CNAME类型的解析www和@值都是生成的netlify域名 - 最后添加证书即可访问了
编辑 (opens new window)
上次更新: 2023/03/15, 07:15:37