VuePress 部署服务器

# 1. 准备服务器和静态资源

确保你已经具备以下条件：

服务器能正常运行，且有 SSH 或控制台访问权限。
静态网站资源已准备好（如 HTML、CSS、JavaScript 文件）,使用 VuePress 的话，静态资源在 docs\.vuepress\dist 中。
域名（可选）：我这里使用的 xzxz.top。

# 2. 设置服务器环境

在服务器上配置一个 Web 服务器（如 Nginx ）来托管你的静态资源。

# 安装 Nginx

更新服务器软件包：

sudo apt update && sudo apt upgrade -y

安装 Nginx：

sudo apt install nginx -y

确保 Nginx 服务已启动：

sudo systemctl start nginx
sudo systemctl enable nginx

1
2

# 3. 上传静态资源

将你的静态网站资源上传到服务器的 /var/www/xzxz.top （我的域名是 xzxz.top）目录：

sudo mkdir -p /var/www/xzxz.top

上传文件（通过 SCP 或其他方式）：
- 如果你在本地使用 SCP：

scp -r /本地/路径/静态资源 user@服务器IP:/var/www/xzxz.top

或者直接在服务器上通过 Git 克隆代码仓库。

确保文件权限正确：

sudo chown -R www-data:www-data /var/www/xzxz.top
sudo chmod -R 755 /var/www/xzxz.top

1
2

# 4. 配置 Nginx 虚拟主机

创建 Nginx 配置文件：

sudo vim /etc/nginx/sites-available/xzxz.top

填入以下内容：

   server {
       listen 80;
       server_name xzxz.top www.xzxz.top;

       root /var/www/xzxz.top;
       index index.html;

       location / {
           try_files $uri $uri/ =404;
       }
   }

1
2
3
4
5
6
7
8
9
10
11

激活配置文件：

sudo ln -s /etc/nginx/sites-available/xzxz.top /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

1
2
3

# 5. 设置域名解析

将你的域名 xzxz.top 指向服务器的 IP 地址。

登录你的域名注册商管理控制台（如阿里云、腾讯云、GoDaddy 等）。
找到 DNS 配置或域名解析设置。
添加 A 记录：
- 主机记录：@
- 记录类型：A
- 记录值：你的服务器 IP 地址
- TTL：默认值
添加一个 CNAME 记录（可选，用于 www.xzxz.top）：
- 主机记录：www
- 记录类型：CNAME
- 记录值：xzxz.top

完成以上步骤后，你可以通过访问 http://xzxz.top

# 5. HTTPS配置

阿里云配置免费 SSL 证书 (opens new window)

在Nginx的conf目录下创建一个用于存放证书的目录。

#进入Nginx默认配置文件目录。
# 本示例中的Nginx配置目录位于`/usr/local/nginx/conf`。如果您不清楚Nginx配置目录，请执行`nginx -t`查看。
cd /usr/local/nginx/conf  
#创建证书目录，命名为cert。
mkdir cert

1
2
3
4
5

将下载下来的文件解压后的证书文件上传到Nginx服务器。解压后的证书文件通常包括：

证书文件（如：example.com.pem）
私钥文件（如：example.com.key）

重新修改 Nignx 配置文件：

sudo vim /etc/nginx/sites-available/xzxz.top

增加以下配置：

# 强制 HTTP 重定向到 HTTPS 可选
server {
    listen 80;
    server_name xzxz.top www.xzxz.top;

    return 301 https://$host$request_uri;
}

# HTTPS 配置
server {
     #HTTPS的默认访问端口443。
     #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
     listen 443 ssl;
     
     #填写证书绑定的域名
     server_name <YOURDOMAIN>;
 
     #填写证书文件绝对路径
     ssl_certificate cert/<cert-file-name>.pem;
     #填写证书私钥文件绝对路径
     ssl_certificate_key cert/<cert-file-name>.key;
 
     ssl_session_cache shared:SSL:1m;
     ssl_session_timeout 5m;
	 
     #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
     #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
     ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

     #表示优先使用服务端加密套件。默认开启
     ssl_prefer_server_ciphers on;
 
    location / {
           root html;
           index index.html index.htm;
    }
}

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

示例：

# 强制 HTTP 重定向到 HTTPS 可选
server {
    listen 80;
    server_name xzxz.top www.xzxz.top;

    return 301 https://$host$request_uri;
}

# HTTPS 配置
server {
     #HTTPS的默认访问端口443。
     #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
     listen 443 ssl;
     
     #填写证书绑定的域名
     server_name xzxz.top www.xzxz.top;
 
     #填写证书文件绝对路径
     ssl_certificate /etc/nginx/cert/xzxz.top.pem;
     #填写证书私钥文件绝对路径
     ssl_certificate_key /etc/nginx/cert/xzxz.top.key;
 
     ssl_session_cache shared:SSL:1m;
     ssl_session_timeout 5m;
	 
     #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
     #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
     ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

     #表示优先使用服务端加密套件。默认开启
     ssl_prefer_server_ciphers on;
 
    location / {
           root /var/www/xzxz.top;
           index index.html index.htm;
    }
}

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

执行以下命令，重载配置文件。

nginx -s reload

# 7. 访问网站

完成以上步骤后，你可以通过访问 http://xzxz.top 或 https://xzxz.top 来查看你的静态网站了。

#VuePress

上次更新: 2025/07/05, 22:15:22

GitHub Action 自动化部署网站→