VitePress+Docker+jenkins —— 构建个人网站

1. VitePress

前端脚手架：s快速生成一个“个人站点”

1. 创建项目

# 安装nodejs
# node -v
# npm -v
mkdir lfy-docs-site
cd lfy-docs-site
# 前端项目初始化
# -y：一路yes用默认值
npm init -y 
# 安装VitePress
npm add -D vitepress
# 初始化
npx vitepress init
# 启动项目
npm run docs:dev
# 启动后可以看到运行在本地IP地址，点击可以在浏览器中看到内容

2. VitePress规则

• index.md 是首页，可以修改后看修改效果
• 任何 md 文件的完整路径（去掉.md后缀名）就是可访问地址
• dgm-docs-site\.vitepress 路径下的 config.mts 包含了一些网页的布局效果
• nav 是顶部导航栏显示，sidebar 是侧边栏的显示，可以修改后看到效果
• 这里有疑问可以问大模型，例如腾讯元宝，deepseek

3. 打包

npm run docs:build
# 生成 .vitepress/dist 文件夹。直接部署到服务器即可访问

2. 服务器

1. 自行购买

服务器会提供一个公网ip，注意用户名和密码

139.196.xxx.xxx

• 下载使用windTerm，新建会话，远程登陆主机，需要使用公网ip、用户名、密码

2. 安装docker

# 安装docker
apt install docker

3. 拉取镜像

# 拉取nginx镜像
docker pull nginx

# 如果拉取过慢，无法拉取，可以使用支付宝登陆阿里云
# # 顶部选择：产品，进入界面
# # 下面找到：容器，进入界面
# # 找到：容器镜像服务ACR免费试用，进入界面
# # 找到：管理控制台
# # 左侧找到：镜像工具，点击下来箭头，找到：镜像加速，可以看到即将要用到的加速器地址：
# # # 大概如下：https://xxx.mirror.aliyuncs.com，xxx是示例
# # 使用如下指令, 下面的xxx要使用你自己再阿里云的加速id替换
sudo nano /etc/docker/daemon.json
# # 这时候已经在编辑界面，把如下内容复制到其中
{
  "registry-mirrors": [
    "https://mirror.ccs.tencentyun.com",
    "https://xxx.mirror.aliyuncs.com"
  ]
}
# # 使用ctrl + x，可以退出，推出时候nano界面会询问是否保存，点击键盘“x”选择保存
# 加速配置完了，应该可以拉取了

4. 运行镜像

# 运行nginx
# -d 表示在后台运行
# -p 表示暴露端口
# 80:80，表示容器外部的80对应容器内部的80
# -name，指定名称
docker run -d -p 80:80 --name app nginx

5. 修改首页

# 进入容器交互模式
# exec，需要两个参数，第一个是交互模式，第二个是进入哪里
# -it，表示交互模式
# app，镜像名称，也可以用id，id不用全拼，可区分识别就行
# /bin/bash，相当于进入它的命令行控制台
docker exec -it app /bin/bash

# 进入指定目录
cd /usr/share/nginx/html
echo "<h1>Hello DGM</h1>" > index.html 
echo "<h2>DGM age:105, how old are you ?</h2>" >> index.html

6. 博客网页内容打包到nginx

1）启动容器的时候设置“挂载”

• 服务器：父电脑
• 服务器中Docker启动的容器们：子电脑A，子电脑B
• 父电脑内容与子电脑内容不能互通，需要“挂载”这种手段

# 创建挂载目录
mkdir /app

# 修改启动容器的方式
# 运行nginx
# -d 表示在后台运行
# -p 表示暴露端口
# 80:80，表示容器外部的端口80对应容器内部的80
# -v 挂在目录
# /app:/usr/share/nginx/html，定义挂载，表示/app内容能够同步到容器内部的/usr/share/nginx/html
# -name，指定名称
docker run -d -p 80:80 -v /app:/usr/share/nginx/html --name app nginx

2）上传文件：站点压缩包

• 在本地电脑.vitepress路径下进入dist，将目录内的所有文件选中打包为dist.zip
• 在WindTerm左下角“文件管理器”中路径设置为：/app/
• 将dist.zip拉到“文件管理器”
• 等到上传完成，在服务器中运行指令查看，进一步解压缩

# 安装解压工具
apt install unzip

# 查看是否压缩包你已经上传
cd /app && ls

# 解压站点包
unzip dist.zip

3）使用本地电脑浏览器登陆

输入服务器的IP和端口，我这里是：http://139.196.xxx.xxx:80就可以看到个人静态文档站点

4）使用域名、ssl证书

• 购买域名，并且实名认证
• 申请免费ssl，申请成功之后下载证书，要切下载nginx版本的
• 准备配置文件目录结构，目录作用：
  • conf.d: 存放 Nginx 配置文件
  • ssl: 存放 SSL 证书文件
  • html: 存放 Vitepress 静态文件

mkdir -p /root/nginx-docker/conf.d
mkdir -p /root/nginx-docker/ssl

• 上传必要文件，将ssl证书解压后的xiaomingzaina.online.pem xiaomingzaina.online.key上传到/root/nginx-docker/ssl

• 创建 Nginx 配置文件

touch /root/nginx-docker/conf.d/xiaomingzaina.conf

• 配置文件xiaomingzaina.conf内容可以使用大模型deepseek生成，拷贝粘贴

• 重新运行镜像

docker run -d \
  --name nginx-web \
  -p 80:80 \
  -p 443:443 \
  -v /app:/usr/share/nginx/html \
  -v /root/nginx-docker/conf.d:/etc/nginx/conf.d \
  -v /root/nginx-docker/ssl:/etc/nginx/ssl \
  nginx:alpine

• 验证容器状态

docker ps
# 预期输出包含：
# 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp

• 检查安全组设置（关键）
  • 访问：阿里云安全组控制台
  • 确保443端口开放：

| 授权策略 | 协议类型 | 端口范围 | 授权对象 |
|---------|---------|---------|---------|
| 允许     | TCP     | 443/443 | 0.0.0.0/0 |

• 测试访问，在服务器内部测试：

# 测试80端口的HTTP重定向
curl -I http://localhost
# 应返回 301 Moved Permanently 和 Location: https://... 

# 测试HTTPS连接
curl -k -I https://localhost
# 应返回 HTTP/2 200

• 在本地电脑测试：

# 测试HTTP重定向
curl.exe -I http://xiaomingzaina.online
# 应返回 301 重定向到HTTPS

# 测试HTTPS访问
curl.exe -k -I https://xiaomingzaina.online
# 应返回 200 OK

6) 后续持续更新...，下一步是使用 jenkins 实现持续集成部署

1. 目的：改善改动后的繁琐的集成部署工作
2. 实现自动集成、自动部署，方便快捷的更新站点文档

3. 学习内容来源：B站UP "雷丰阳" 静态站点教程

• 网址如下：

  【Jenkins自动化部署VitePress个人网站 - 上】 https://www.bilibili.com/video/BV1ZH4y137K5/?share_source=copy_web&vd_source=94caae61527677408e05d4073dfde9d8