# 1. 前言
# 1.1 选型介绍
# 1.1.1 Vuepress文档框架
VuePress是一个基于Vue的静态网站生成器。它具有简洁的设计，专注于提供高质量的内容，并提供一些有用的功能，例如主题定制和插件API。VuePress在构建文档站点方面非常受欢迎，但它也可以用于其他类型的静态网站。它的核心理念是结合现代Web技术的优势来简化静态网站构建过程。
# 1.1.2 vuepress-theme-reco主题
vuepress-theme-reco是一个由VuePress构建的主题，它可以轻松地为博客提供一个漂亮和优雅的外观。该主题提供了许多有用的功能，如可定制的导航栏、侧边栏、图片懒加载和搜索功能，可以更好地组织和展示内容。
项目地址：https://github.com/vuepress-reco/vuepress-theme-reco-1.x (opens new window)
官方文档：https://vuepress-theme-reco.recoluan.com/ (opens new window)
# 1.2 迁移规划
本文以自己实际迁移过程为例，重点讲述迁移过程需要改动的地方及遇到的坑，基础配置和我用不到的功能就不详细说了，看官方文档吧。关于原来的基础服务如何搭建，可参考我之前的博客，此处也不再赘述。
- 搭建Hexo静态博客并使用Git部署到VPS (opens new window) （Hexo搭建及配置、Git Hooks自动部署）
- 使用Waline给Hexo静态博客添加评论系统 (opens new window)（旧版Waline的搭建及集成）
迁移原因： vuepress-theme-reco 主题很简洁，基于 Vue 方便二次开发。
迁移规划：本地搭建vuepress-theme-reco博客——配置Git Hooks自动部署——处理旧Waline数据及Google索引——修改高级配置及源码优化博客
# 2. 本地搭建博客
# 2.1 本地初始化
# 2.2.1 安装主题包
可使用如下命令安装vuepress-theme-reco主题。
$ npm install @vuepress-reco/theme-cli -g
# 2.2.2 初始化主题
执行如下命令，即可初始化主题。
$ theme-cli init
有多个版本可以选，这里我选择了blog（暂时不建议使用2.x，还处于测试版）
# 你的项目名称是什么？
? What's the title of your project? blog
# 你的项目描述是什么？
? What's the description of your project? This is Blog
# 作者叫什么名字？
? What's the author's name? yoyo
# 你希望你的主页是什么风格？
? What style do you want your home page to be?(The 2.x version is the alpha version) blog
blog（推荐）
doc（和blog几乎一致，只不过 init 执行中输入的信息未应用，存在一些问题）
2.x（目前还不成熟）
2
3
4
5
6
7
8
9
10
11
注：这里的初始化信息可以随便填，后面统一在配置文件里修改即可。
# 2.2.3 初始化目录结构
初始化后的目录结构如下，最关键的配置文件在 config.js 里。
└── blog
├── .vuepress
│ ├── public // 存放静态资源
│ │ ├── avatar.png // 头像图片
│ │ ├── favicon.ico // 网站icon图标
│ │ ├── hero.png // 网站横幅背景图片
│ │ └── logo.png // 网站导航栏左上角的logo图片
│ │
│ └── config.js // 全局配置文件，非常重要
├── blogs // 存放博客文章
│ ├── ...
│ ├── ...
│ └── ...
├── docs // 存放说明文档
├── .gitignore // 提交git仓库时需要忽略的文件
├── package.json // 管理包文件
└── README.md // 这里也有少量显示配置
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 2.2 配置文件及源码修改
# 2.2.1 更换主题为本地
vuepress与hexo不一样的是，正常的主题文件会被安装到node_modules文件夹中。所以如果不把主题文件放到本地，我们每次执行npm install的时候，新的文件就会把我们魔改过的文件覆盖掉。
主题的启动流程是：“如果config没指定，系统会默认会检查.vuepress/theme，如果还没有就直接用默认主题”，所以只要把从node_modules中复制下来的文件夹更名为theme，粘贴至.vuepress文件夹下即可。
# 2.2.2 基本配置信息修改
.vuepress/config.js
1）title // 该属性表示的是博客的标题
2）description // 该属性表示该网站的一些描述信息
3）dest // 该属性表示的是项目打包以后文件生成的目录
4）head // 该属性表示的是 html 文档的 head 标签中需要额外插入的其它标签
5）theme // 该属性表示的是当前项目使用的主题
6）themeConfig // 该属性表示的是主题的配置信息
7）markdown // 该属性里存储着一些对于 markdown 解析的配置
2
3
4
5
6
7
README.md 只保留这些行即可（这里配置博客主页横幅背景上的文字、横幅背景图片的高度）
home: true
heroText: Quantum Bit
tagline: Never stop searching, even if only for a brief flash of light.
bgImageStyle: {
height: '250px'
}
2
3
4
5
6
# 2.2.3 本地启动及打包项目
$ npm install // 安装依赖
$ npm run dev // 启动项目
$ npm run build // 打包项目
2
3
注意事项：
1）如果启动或打包时出现this[kHandle] = new _Hash(algorithm, xofLen);报错，执行如下命令即可。
$ export NODE_OPTIONS=--openssl-legacy-provider
2）在package.json中添加启动/编译命令，建议在启动命令添加上-temp .temp，这样更改配置文件后就不需要重新启动项目也能看到效果了。
{
"scripts": {
"dev": "vuepress dev . --open --host \"localhost\" --temp .temp",
"build": "vuepress build ."
}
}
2
3
4
5
6
# 2.2.4 主题样式修改
主题样式都在./vuepress/theme/styles 目录下，里面有以下8个样式文件。
├── arrow.styl
├── code.styl
├── custom-blocks.styl
├── mobile.styl
├── palette.styl
├── theme.styl
├── toc.styl
└── wrapper.styl
2
3
4
5
6
7
8
觉得哪里不合适，就打开Chrome开发者工具对照着改即可。
由于暗色模式下的单行code不明显，所以我对code.styl文件的color lighten($textColor, 20%)改成了color lighten($textColor, 50%)
.content__default
code
color lighten($textColor, 50%)
padding 0.25rem 0.5rem
margin 0
font-size 0.85em
background-color var(--code-color)
border-radius 3px
.token
&.deleted
color #EC5975
&.inserted
color $accentColor
2
3
4
5
6
7
8
9
10
11
12
13
# 2.3 安装插件并集成Waline评论系统
# 2.3.1 添加鼠标点击特效
安装 vuepress-plugin-cursor-effects (opens new window) 依赖
$ npm install -D vuepress-plugin-cursor-effects
在 config.js 里增加配置
["vuepress-plugin-cursor-effects",
{
size: 2, // size of the particle, default: 2
shape: 'circle', // shape of the particle, default: 'star'
zIndex: 999999999 // z-index property of the canvas, default: 999999999
}],
2
3
4
5
6
# 2.3.2 集成Waline评论系统
vuepress-theme-reco默认只支持 Valine 和 Vssue 评论系统，由于我之前已经有了很多 Waline 的数据，还想使用Waline，因此需要对源码及配置文件进行修改。
安装 vuepress-plugin-comment-plus (opens new window) 依赖
$ npm install --save vuepress-plugin-comment-plus
在 config.js 里增加配置
['vuepress-plugin-comment-plus',
{
choosen: 'waline',
// options选项中的所有参数，会传给Waline的配置
options: {
el: '#comments-wrapper', // 挂载点
serverURL: 'https://xxx.xxx.xxx/', // waline服务地址
visitor: true, //文章访问量统计
lang: 'zh-CN', //语言，默认zh-CN
dark: 'auto', //黑暗模式适配
login: 'enable', //登录模式状态，默认值enable
wordLimit: 0, //评论字数限制，0为不限制，默认值为0
pageSize: 10, //评论列表分页，数字为条数，默认值10
highlight: true, //代码高亮，默认true
meta: ['nick', 'mail'], //评论者相关属性，默认['nick', 'mail', 'link']
requiredMeta: [], //设置评论者属性必填项，默认[]（即匿名）
placeholder: '随便说点什么喵～o(=•ェ•=)m \n没有登录也是完全没问题的哦～', //评论框占位提示符，默认'欢迎评论'
copyright: false, //是否显示页脚版权信息
}
}
]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
修改源码中的挂载点：把 ./theme/components/Page.vue文件里的 .comments-wrapper 改成 #comments-wrapper即可。
#comments-wrapper
@extend $wrapper
2
如果你还想保留Waline的博客浏览量，可以对源码和配置文件进行如下修改：
./components/Page.vue注释掉如下代码，关闭原先给valine的评论区。
<!-- <Comments v-if="recoShowModule" :isShowComments="shouldShowComments"/> -->
./components/Footer.vue注释掉如下代码，关闭底部总浏览量。
<!-- <span v-show="showAccessNumber">
<reco-icon icon="reco-eye" />
<AccessNumber idVal="/" />
</span> -->
...
<!-- <Comments :isShowComments="false"/> -->
2
3
4
5
6
在 config.js 里增加配置（改造后的valineConfig只是作为浏览量的开关使用，appId和appKey可以空着）
"valineConfig": { // 已将其改造，变成是否保留来自waline博客浏览量的开关，跟valine没有关系了
"appId": '...',
"appKey": '...',
},
2
3
4
# 2.3.3 将链接解析成拼音
由于博客链接中存在中文会进行转义，导致链接太长，可以使用如下插件将中文转成拼音。
$ npm install vuepress-plugin-permalink-pinyin
在 config.js 里增加配置
['permalink-pinyin']
本文链接经过该插件转换后的效果为：
https://xxx.xxx.xxx/blogs/jiang-bo-ke-cong-hexoqian-yi-zhi-vuepress.html
# 2.3.4 添加网站地图
安装 vuepress-plugin-sitemap 依赖
$ npm install vuepress-plugin-sitemap
在 config.js 里增加配置
["sitemap",
{
hostname: 'https://xxx.xxx.xxx',
exclude: ['/404.html'],
}
],
2
3
4
5
6
注：插件配置成功的话，打包后，会在dist包的根目录处看到一个 sitemap.xml 文件。
# 2.3.5 生成RSS订阅
安装 vuepress-plugin-rss-feed 依赖
$ npm install vuepress-plugin-rss-feed
在 config.js 里增加配置
['rss-feed',
{
username: 'yoyo',
hostname: 'https://www.eula.club',
selector: '.content__post', // extract content to content:encoded
count: 100,
filter: (page) => /^blogs/.test(page.relativePath),
},
],
2
3
4
5
6
7
8
9
注：插件配置成功的话，打包后，会在dist包的根目录处看到一个 rss.xml 文件。filter是个过滤器，我这里只保留/blogs路由的内容。
# 2.3.6 开启 LaTeX 公式支持
安装 @neilsustc/markdown-it-katex 依赖
$ npm install @neilsustc/markdown-it-katex
在 config.js 里增加配置
markdown: {
lineNumbers: true, // 代码行号
extendMarkdown: md => {
md.set({
html: true
})
md.use(require('@neilsustc/markdown-it-katex'), {"throwOnError" : false, "errorColor" : " #cc0000"})
}
},
head: [
['link', {
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css'
}],
['link', {
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"
}]
],
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 2.4 本文配置文件示例
此处放出本博客所使用的 config.js 配置文件作为示例参考。
module.exports = {
"title": "Quantum Bit",
"description": "Never stop searching, even if only for a brief flash of light.",
"dest": "dist", // 打包结果目录
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta", // 元数据，用于SEO及移动设备自适应
{
"name": "viewport",
"content": "width=device-width,initial-scale=1,user-scalable=no"
}
],
// markdown对latex的支持（下面markdown配置处也需要加配置项），npm install @neilsustc/markdown-it-katex
['link', {
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css'
}],
['link', {
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"
}]
],
"theme": "reco",
"themeConfig": {
"subSidebar": "auto", // 是否展示侧边栏目录
"noFoundPageByTencent": false, // 404是否使用腾讯公益页
"mode": 'auto', // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
"modePicker": false, // 默认 true，false 不显示模式调节按钮，true 则显示
"valineConfig": { // 已将其改造，变成是否保留来自waline博客浏览量的开关，跟valine没有关系了
"appId": '...',
"appKey": '...',
},
"nav": [ // 顶部导航栏
{
"text": "Home",
"link": "/",
"icon": "reco-home"
},
{
"text": "TimeLine",
"link": "/timeline/",
"icon": "reco-date"
}
],
"type": "blog",
"blogConfig": {
"category": {
"location": 2,
"text": "Category"
},
"tag": {
"location": 3,
"text": "Tag"
}
},
"friendLink": [ // 友链
{
"title": "Quantum Bit",
"desc": "Never stop searching, even if only for a brief flash of light.",
"logo": "https://www.eula.club/avatar.png",
"link": "https://www.eula.club"
},
],
"logo": "/logo.png",
"search": true,
"searchMaxSuggestions": 10,
"lastUpdated": "Last Updated",
"author": "yoyo",
"authorAvatar": "/avatar.png",
"startYear": "2018"
},
"markdown": {
lineNumbers: true, // 代码行号
extendMarkdown: md => { // latex公式支持
md.set({
html: true
})
md.use(require('@neilsustc/markdown-it-katex'), {"throwOnError" : false, "errorColor" : " #cc0000"})
}
},
"plugins":[
// 鼠标点击特效 npm install -D vuepress-plugin-cursor-effects
["vuepress-plugin-cursor-effects",
{
size: 2, // size of the particle, default: 2
shape: 'circle', // shape of the particle, default: 'star'
zIndex: 999999999 // z-index property of the canvas, default: 999999999
}],
// waline评论插件 npm install --save vuepress-plugin-comment-plus
['vuepress-plugin-comment-plus',
{
choosen: 'waline',
// options选项中的所有参数，会传给Waline的配置
options: {
el: '#comments-wrapper', // 挂载点
serverURL: 'https://xxx.xxx.xxx/', // waline服务地址
visitor: true, //文章访问量统计
lang: 'zh-CN', //语言，默认zh-CN
dark: 'auto', //黑暗模式适配
login: 'enable', //登录模式状态，默认值enable
wordLimit: 0, //评论字数限制，0为不限制，默认值为0
pageSize: 10, //评论列表分页，数字为条数，默认值10
highlight: true, //代码高亮，默认true
meta: ['nick', 'mail'], //评论者相关属性，默认['nick', 'mail', 'link']
requiredMeta: [], //设置评论者属性必填项，默认[]（即匿名）
placeholder: '随便说点什么喵～o(=•ェ•=)m \n没有登录也是完全没问题的哦～', //评论框占位提示符，默认'欢迎评论'
copyright: false, //是否显示页脚版权信息
}
}
],
// 网站地图插件 npm install vuepress-plugin-sitemap
["sitemap",
{
hostname: 'https://www.eula.club',
exclude: ['/404.html'],
}
],
// RSS插件 npm install vuepress-plugin-rss-feed
['rss-feed',
{
username: 'yoyo',
hostname: 'https://www.eula.club',
selector: '.content__post', // extract content to content:encoded
count: 100,
filter: (page) => /^blogs/.test(page.relativePath),
},
],
],
}
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
# 2.5 博客文档描述属性
博客文档描述属性与我之前使用的Hexo主题兼容，所以我无需进行修改。
---
title: 此处是标题 # 文章标题
date: 2022-12-10 00:00:00 # 时间
categories: 项目部署 # 分类
tags: # 标签
- vuepress
- vuepress-theme-reco
publish: true # 是否发布
---
2
3
4
5
6
7
8
9
注：针对于Friends、About这类导航页介绍文档，不想显示在博客列表中，也不想计入文章总数，可以将 publish 属性设置为 false 。
# 3. 服务器部署博客
本地运行项目测试无异常，一开始采用了原来Hexo方案里的部署方式，意外出现全局页面白屏问题。关闭 Cloudfare CDN 资源压缩之后，主页和博客都不白屏了，但又发现直接访问子页面或子页面刷新仍会出现页面白屏问题，将其改成Docker部署然后用Nginx反代，不再出现上述问题了。
# 3.1 解决正式部署出现的页面白屏问题
# 3.1.1 解决Cloudfare CDN资源压缩导致的全局白屏问题
问题描述：本地运行项目无异常，部署到服务器上之后，界面出现白屏。故意输入一个错误路由，通过404界面的返回主页即可正常访问，但只要刷新界面就会再次白屏。
报错信息：DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
问题原因：Cloudfare CDN 的 Auto Minify 资源压缩功能导致的。
解决方案：打开 Cloudfare CDN → 网站 → 域名 → 速度 → 优化 → Auto Minify，关闭 JavaScript 和 HTML 即可。
# 3.1.2 解决直接访问子页面或子页面刷新出现页面白屏问题
问题描述：解决了3.1.1节出现的白屏问题之后，又发现直接访问子页面或子页面刷新仍会出现页面白屏问题
报错信息：同上，DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
问题原因：原先在.gitignore里忽略了blog和docx目录，想不上传源文件能快一些，结果把dist包里的该目录也忽略了（我是个憨憨），没有上传到服务器上。
解决方案：去掉.gitignore里的blog和docx目录忽略，将这俩目录加入git即可。
# 3.2 配置Git Hooks自动部署Docker服务
这次将其改造成Docker部署的方式，配置Git Hooks自动部署、Nginx配置的具体步骤略，详见我之前的博客。
# 3.2.1 准备部署配置文件
新建一个docker-deploy目录，里面放置Dockerfile及Nginx配置文件，目录结构为：
.
├── Dockerfile
├── nginx.conf
├── vuepress_blog.conf
├── proxy.conf
└── rebuild.sh
2
3
4
5
6
Dockerfile
# 设置基础镜像
FROM nginx
# 设置工作目录
RUN mkdir /vuepress_blog
WORKDIR /vuepress_blog
# 放置代码包
ADD dist/ /vuepress_blog
COPY nginx.conf /etc/nginx/nginx.conf
COPY vuepress_blog.conf /etc/nginx/conf.d/vuepress_blog.conf
COPY proxy.conf /etc/nginx
2
3
4
5
6
7
8
9
10
11
12
nginx.conf
user root;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
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
vuepress_blog.conf
server {
listen 8075;
server_name 127.0.0.1;
location / {
gzip on;
gzip_vary on;
gzip_min_length 1k;
gzip_buffers 16 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css text/xml text/javascript application/json;
root /vuepress_blog;
index index.html;
try_files $uri $uri/ /index.html?$query_string;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
proxy.conf
proxy_connect_timeout 900s;
proxy_send_timeout 900;
proxy_read_timeout 900;
proxy_buffer_size 32k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_redirect off;
proxy_hide_header Vary;
proxy_set_header Accept-Encoding '';
proxy_set_header Referer $http_referer;
proxy_set_header Cookie $http_cookie;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
rebuild.sh
#!/bin/bash
docker rm -f vuepress_blog
docker rmi -f vuepress_blog_image
docker build -t 'vuepress_blog_image' .
docker run -itd --name vuepress_blog -h vuepress_blog -p 8075:8075 -e TZ="Asia/Shanghai" vuepress_blog_image
docker update vuepress_blog --restart=always
2
3
4
5
6
7
# 3.2.2 准备部署脚本并配置Git Hooks
新建一个batch-script目录，里面放置init.sh与deploy.sh脚本，其中init.sh是用于git初始化配置并连接远程仓库。
本地端：./batch-script/deploy.sh
# 切换到上一级目录
echo '切换到上一级目录\n'
cd ..
# 将项目打包
echo '执行命令：export NODE_OPTIONS=--openssl-legacy-provider'
export NODE_OPTIONS=--openssl-legacy-provider
echo '执行命令：npm run build'
npm run build
# 解决使用git add命令时报错LF will be replaced by CRLF的问题
echo '执行命令：git config auto.crlf true\n'
git config auto.crlf true
# 保存所有的修改
echo "执行命令：git add -A"
git add -A
# 把修改的文件提交
echo "执行命令：commit -m 'deploy vuepress'"
git commit -m 'deploy vuepress'
# 推送到远程仓库
echo "执行命令：git push -f origin master"
git push -f origin master
# 返回到上一次的工作目录
echo "回到刚才工作目录"
cd -
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
服务器端：post-receive
#!/bin/bash
GIT_REPO=/home/git/www.eula.club.git
TMP_GIT_CLONE=/tmp/www.eula.club
PUBLIC_WWW=/data/wwwroot/www.eula.club
echo "your_git_user_password" | sudo -S rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
echo "your_git_user_password" | sudo -S mv ${TMP_GIT_CLONE}/dist ${TMP_GIT_CLONE}/docker-deploy
echo "your_git_user_password" | sudo -S rm -rf ${PUBLIC_WWW}/*
echo "your_git_user_password" | sudo -S cp -rf ${TMP_GIT_CLONE}/docker-deploy/* ${PUBLIC_WWW}
cd ${PUBLIC_WWW}
docker rm -f vuepress_blog
docker rmi -f vuepress_blog_image
docker build -t 'vuepress_blog_image' .
docker run -itd --name vuepress_blog -h vuepress_blog -p 8075:8075 -e TZ="Asia/Shanghai" vuepress_blog_image
docker update vuepress_blog --restart=always
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注：git用户出现权限不足问题，可以使用echo "your_git_user_password" | sudo -S 命令的方式解决该问题。
# 3.2.3 git push速度太慢的问题
问题描述：搭建好了之后，刚开始 git push 的速度一直正常，突然有一天 git push 的速度变的特别慢（几十kb/s），这个速度几乎就不能用了，然后我先使用了 git config --global https.proxyhttp://127.0.0.1:7890 尝试设置代理，但依旧是那个速度，然后又用 git config --global --unset https.proxy 取消代理，速度仍然没变。
解决方式：去config配置文件里设置代理
$ vim ~/.ssh/config
在最后一行加上 ProxyCommand nc -v -x 127.0.0.1:7890 %h %p 的配置即可（127.0.0.1:7890应换成你本地实际的代理配置）
Host 111.111.111.111
User git
Port 11111
IdentityFile ~/.ssh/id_rsa
ProxyCommand nc -v -x 127.0.0.1:7890 %h %p
2
3
4
5
# 3.2.4 解决 Docker 普通用户无权限问题
问题描述：之前专门弄了个 git 用户，用来运行 git hooks，并没有 docker 的操作权限，因此会报权限错误（另注：之前 将git 用户的 shell 权限也手动关闭了）
解决方式：将 git 用户添加进 docker 用户组
具体步骤：放行git用户的shell权限——将 git 用户添加进 docker 用户组——关闭git用户的shell权限
Step1：开启git用户的shell权限
$ nano /etc/passwd1将最后一行的
git-shell处改为bashgit:x:1001:1001:,,,:/home/git:/bin/bash 改成 git:x:1001:1001:,,,:/home/git:/bin/bash1Step2：给git用户添加进Docker组
$ su git // 切换git用户 $ sudo usermod -aG docker $USER // 将当前用户添加到docker组，需要输入git用户密码（忘记了可以在root用户下重置） $ newgrp docker // 激活组权限1
2
3Step3：关闭git用户的shell权限
同Step1，将最后一行的
bash处改为git-shell即可。
完成上述步骤，git用户就拥有了docker的操作权限，脚本就可以正常运行了。
# 4. 参考资料
[1] Vuepress-theme-reco搭建说明 from fish-aroma (opens new window)
[2] vuepress（二）插件安装推荐 from 程序媛小y (opens new window)
[3] vuepress-theme-reco个人向优化 from 会飞的小弋 (opens new window)
[4] vuepress-theme-reco主题魔改 from 小弋の生活馆 (opens new window)
[5] 从 Valine 迁移 from Waline官方文档 (opens new window)
[6] 暗色模式适配 from vuepress-theme-reco官方文档 (opens new window)
[8] 记一次艰难的 Debug from wxsm's pace (opens new window)
[9] 常见错误 from vuepress-theme-hope官方文档 (opens new window)
[10] 导航栏的文章链接也被显示在了博客列表 from Github issues (opens new window)
[11] VuePress 博客之 SEO 优化（一）之 sitemap 与搜索引擎收录 from Github issues (opens new window)
[12] Netlify or VuePress：大型悬疑推理篇之——报错到底是谁的锅？from Spencer's Blog (opens new window)
[13] 普通用户权限运行docker from Server (opens new window)
[14] 如何提高 Github 的 pull/push 速度 from Ruby China (opens new window)
[15] 搭建 VuePress 站点必做的 10 个优化 from Github issues (opens new window)
[16] vuepress-plugin-rss-feed from npm插件商店 (opens new window)
[17] VuePress渲染数学公式 from Chgtaxihe's blog (opens new window)