# 搭建方法
VuePress 搭建技术网站与个人博客 (opens new window)
# 碰到的问题
部署代码的时候执行命令npm run deploy，这句脚本实际上执行的是bash deploy.sh，但是在 windows 系统上是不能直接运行 bash 命令的，所以需要在 git bash 里面运行。
# 放大查看图片
- 首先需要引入 jquery 和 fancybox，文件资源可以在 staticfile (opens new window) 这个网站中获取。在 config.js 中加入以下配置。
module.exports = {
head: [
[
"link",
{
rel: "stylesheet",
href:
"https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css"
}
],
[
"script",
{ src: "https://cdn.staticfile.org/jquery/3.5.1/jquery.slim.min.js" }
],
[
"script",
{
src: "https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"
}
]
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- 接着，引入图片的时候，需要按照以下格式进行引入。
<a data-fancybox title="mac" href="https://ln-blog.oss-cn-shenzhen.aliyuncs.com/mac/mac1.jpg"></a>
1
这里可以借助一个 vscode 插件 vuepress-img-format，它可以帮助我们快速把文档里原来的 <a data-fancybox title="" href="">![]()</a> 格式快速转换成 <a data-fancybox title="" href="">![]()</a> 这种格式。
插件的用法如下：
按 ctrl + shift + p 打开命令行，然后输入 img format 可以格式化当前文档的所有图片，输入 img reset format 可以重置格式化。
也可以使用快捷键。
系统 格式化 重置格式化 Windows/Linux Ctrl + Shift +8 Ctrl + Shift +8 Mac Cmd + Shift + 8 Cmd + Shift + 9
配置好以上两步之后，就可以点击放大查看图片了。
# 部署到服务器上
首先，服务器上需要安装配置好 nginx，安装方法可以查看 Nginx 安装。
然后，进入到项目目录中，执行
npm run build命令打包项目。其次，将打包生成的 dist 目录上传到服务器上的
/etc/nginx目录下。
scp -r dist scl:/etc/nginx
1
- 最后，修改 nginx 的配置文件中的 root，把它改成访问项目的首页。
root /etc/nginx/dist;
1
此时，在浏览器中访问服务器 IP 地址，就可以看到自己的博客啦～😄
# 部署方法
部署代码到服务器的方法有两种，分别是使用 Jenkins 和 bash 脚本。
# 使用 Jenkins 自动构建部署
# 使用 bash 脚本一键部署
修改 vuepress 项目下的 deploy.sh 文件内容如下：
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
echo -e '正在上传源代码...\n'
git add .
git commit -m $1
git pull origin master
git push origin master
echo -e '上传完成\n'
echo -e '正在打包源代码...\n'
npm run build
echo -e '打包完成\n'
echo -e '正在部署源代码...\n'
scp -r docs/.vuepress/dist root@121.4.83.104:/etc/nginx
echo -e '部署完成\n'
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
同时，package.json 文件中的部署命令为：
"deploy": "bash deploy.sh",
1
当我们修改完文件时，只需要运行 npm run deploy "xxx" 命令（deploy 后面带的参数是给 git 提交记录使用的），就可以将改动的内容一键上传到代码仓库以及一键部署到服务器上了。
# 域名配置和接入 CDN
# 域名配置
在服务器上配置 nginx
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
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;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
# SSL 默认访问端口号为 443
listen 443 ssl;
# 请填写绑定证书的域名
server_name 9277.fun;
# 请填写证书文件的相对路径或绝对路径
ssl_certificate /etc/nginx/9277.fun_bundle.crt;
# 请填写私钥文件的相对路径或绝对路径
ssl_certificate_key /etc/nginx/9277.fun.key;
ssl_session_timeout 5m;
# 请按照以下协议配置
ssl_protocols TLSv1.2 TLSv1.3;
# 请按照以下套件配置，配置加密套件，写法遵循 openssl 标准
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location / {
# 网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
# 例如，您的网站主页在 Nginx 服务器的 /etc/www 目录下，则请修改 root 后面的 html 为 /etc/www。
root /etc/nginx/dist;
index index.html index.htm;
}
}
server {
listen 80;
server_name 9277.fun;
return 301 https://$host$request_uri;
}
upstream node.com {
server 127.0.0.1:3000;
server 127.0.0.1:3001;
}
server {
# listen 80 default_server;
# listen [::]:80 default_server;
# listen 80;
# server_name 121.4.83.104;
# server_name _;
# root /usr/share/nginx/html;
# root /etc/nginx/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location ~ /node/(\d*) {
proxy_pass http://node.com/detail?columnid=$1;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
# listen 80 default_server;
# listen [::]:80 default_server;
listen 8084;
server_name 121.4.83.104;
# server_name _;
# root /usr/share/nginx/html;
root /etc/nginx/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
# listen 80 default_server;
# listen [::]:80 default_server;
listen 8083;
server_name 121.4.83.104;
# server_name _;
# root /usr/share/nginx/html;
root /etc/nginx/seven/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# location / {
# }
#
# error_page 404 /404.html;
# location = /404.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}
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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
# 接入 CDN
提示
腾讯云 CDN 加速采用流量包的方式，一个流量包，可用于多个域名的 CDN 加速，不限域名的个数。
- 访问 CDN 控制台-域名管理 (opens new window)，点击添加域名，一步一步进行配置。
补充
假如接入了 CDN 之后，网站访问还是很慢，可以参考这里 (opens new window)进行排查解决。
如果接入 CDN 之后很不幸你的网站挂了，显示 HTTP 514 无法访问了，可以参考这里 (opens new window)进行排查解决。
假如换了服务器之后，发现网站资源刷新后一直 404 或者是有些页面可以访问有些一直加载不了，可以尝试到 CDN 控制台-域名管理 (opens new window) ->【更多】->【刷新全部缓存】，刷新完成后重新访问网站应该就可以了。