VitePress

目前的这个网站就是使用 VitePress 搭建的，VitePress的建站难度真的是小到离谱，只要简单配置一些内容，Markdown直接成为一篇格式还不错的文章。
搭配Vercel去部署，公网直接可以随意访问。
当然，如果为了在局域网内更快访问，还可以用Docker + nginx去部署了一个环境，放在mac mini的docker容器上面一直运行。

🦈 VSCode 预览界面

alt text

🦈 WebStorm 预览界面

alt_text

实话讲，JetBrains的IDE是要比VSCode更好用的，虽然这可能和我的BG有关，我是从Android开发开始真正进入到IT开发行业的，Android Studio就是基于IntelliJ IDEA去实现的，所以这个东西也是有了天然刻板印象，JetBrains的东西总是更能符合我对IDE的认知。
我现在就是非常不习惯JetBrains系列之外的一切IDE，包括微软的VSCode（虽然真的也挺好用的，对于性能比较低的开发电脑是很友好的），也包括苹果家的XCode，我总是找不到它的快捷键要如何使用。

🐳 Docker部署

运行如下脚本（这个脚本是使用ChatGPT写的，ChatGPT真的也是一大神器，这个VitePress博客中有部分的文章，是我描述大致的想法，然后让ChatGPT生成，然后我再简单审查一下内容的正确性，最终进行输出的）
（AI时代已经来临，不要瞧不起使用ChatGPT的Code Boy）
dockerfile

dockerfile

# 使用官方 Nginx 镜像
FROM nginx:alpine

# 删除默认 Nginx 网站
RUN rm -rf /usr/share/nginx/html/*

# 复制构建好的 VitePress 文件到 Nginx 默认目录
COPY docs/.vitepress/dist /usr/share/nginx/html

# 复制自定义 Nginx 配置（可选）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

RUN chmod -R 755 /usr/share/nginx/html

deploy.sh

shell

#!/bin/bash
# ==========================================================
#  VitePress 博客自动部署脚本
#  支持命令：
#     ./deploy.sh deploy   构建 + 更新容器
#     ./deploy.sh clean    清理旧容器和镜像
# ==========================================================

set -e  # 遇错退出

CONTAINER_NAME="vitepress-blog"
IMAGE_NAME="my-vitepress-blog"
PORT=9096

# -------------------------------
# 函数：清理旧容器和镜像
# -------------------------------
clean_old() {
  echo "🧹 正在清理旧容器和无用资源..."

  # 删除同名容器
  EXISTING_CONTAINER=$(docker ps -aq -f name="^${CONTAINER_NAME}$")
  if [ -n "$EXISTING_CONTAINER" ]; then
    echo "⚠️  检测到旧容器 $CONTAINER_NAME，正在停止并删除..."
    docker stop $CONTAINER_NAME >/dev/null 2>&1 || true
    docker rm -f $CONTAINER_NAME >/dev/null 2>&1 || true
  fi

  # 删除所有已退出的容器
  EXITED_CONTAINERS=$(docker ps -aq -f status=exited)
  if [ -n "$EXITED_CONTAINERS" ]; then
    echo "🧽 删除已退出容器..."
    docker rm -v $EXITED_CONTAINERS >/dev/null 2>&1 || true
  fi

  # 删除 dangling 镜像（<none> 标签的）
  DANGLING_IMAGES=$(docker images -f "dangling=true" -q)
  if [ -n "$DANGLING_IMAGES" ]; then
    echo "🗑️  删除未使用镜像..."
    docker rmi -f $DANGLING_IMAGES >/dev/null 2>&1 || true
  fi

  # 删除未使用的网络（可选）
  docker network prune -f >/dev/null 2>&1 || true

  echo "✅ 清理完成！"
}

# -------------------------------
# 函数：部署 VitePress
# -------------------------------
deploy_app() {
  echo "🚧 [1/4] 构建 VitePress 静态文件..."
  npm run build

  echo "🛠️  [2/4] 构建 Docker 镜像: $IMAGE_NAME"
  docker build -t $IMAGE_NAME .

  echo "🧹 [3/4] 清理旧容器..."
  clean_old

  echo "🚀 [4/4] 启动新容器..."
  docker run -d -p ${PORT}:80 --name $CONTAINER_NAME $IMAGE_NAME

  echo "✅ 部署完成！"
  echo "🌐 访问地址: http://localhost:${PORT}"
}

# -------------------------------
# 主逻辑
# -------------------------------
case "$1" in
  deploy)
    deploy_app
    ;;
  clean)
    clean_old
    ;;
  *)
    echo "用法:"
    echo "  ./deploy.sh deploy   构建并部署 VitePress"
    echo "  ./deploy.sh clean    清理旧容器和镜像"
    ;;
esac
#!/bin/bash
# ==========================================================
#  VitePress 博客自动部署脚本
#  支持命令：
#     ./deploy.sh deploy   构建 + 更新容器
#     ./deploy.sh clean    清理旧容器和镜像
# ==========================================================

set -e  # 遇错退出

CONTAINER_NAME="vitepress-blog"
IMAGE_NAME="my-vitepress-blog"
PORT=9096

# -------------------------------
# 函数：清理旧容器和镜像
# -------------------------------
clean_old() {
  echo "🧹 正在清理旧容器和无用资源..."

  # 删除同名容器
  EXISTING_CONTAINER=$(docker ps -aq -f name="^${CONTAINER_NAME}$")
  if [ -n "$EXISTING_CONTAINER" ]; then
    echo "⚠️  检测到旧容器 $CONTAINER_NAME，正在停止并删除..."
    docker stop $CONTAINER_NAME >/dev/null 2>&1 || true
    docker rm -f $CONTAINER_NAME >/dev/null 2>&1 || true
  fi

  # 删除所有已退出的容器
  EXITED_CONTAINERS=$(docker ps -aq -f status=exited)
  if [ -n "$EXITED_CONTAINERS" ]; then
    echo "🧽 删除已退出容器..."
    docker rm -v $EXITED_CONTAINERS >/dev/null 2>&1 || true
  fi

  # 删除 dangling 镜像（<none> 标签的）
  DANGLING_IMAGES=$(docker images -f "dangling=true" -q)
  if [ -n "$DANGLING_IMAGES" ]; then
    echo "🗑️  删除未使用镜像..."
    docker rmi -f $DANGLING_IMAGES >/dev/null 2>&1 || true
  fi

  # 删除未使用的网络（可选）
  docker network prune -f >/dev/null 2>&1 || true

  echo "✅ 清理完成！"
}

# -------------------------------
# 函数：部署 VitePress
# -------------------------------
deploy_app() {
  echo "🚧 [1/4] 构建 VitePress 静态文件..."
  npm run build

  echo "🛠️  [2/4] 构建 Docker 镜像: $IMAGE_NAME"
  docker build -t $IMAGE_NAME .

  echo "🧹 [3/4] 清理旧容器..."
  clean_old

  echo "🚀 [4/4] 启动新容器..."
  docker run -d -p ${PORT}:80 --name $CONTAINER_NAME $IMAGE_NAME

  echo "✅ 部署完成！"
  echo "🌐 访问地址: http://localhost:${PORT}"
}

# -------------------------------
# 主逻辑
# -------------------------------
case "$1" in
  deploy)
    deploy_app
    ;;
  clean)
    clean_old
    ;;
  *)
    echo "用法:"
    echo "  ./deploy.sh deploy   构建并部署 VitePress"
    echo "  ./deploy.sh clean    清理旧容器和镜像"
    ;;
esac

nginx.conf

conf

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
      # ✅ 允许访问 public 里的图片
    location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
        expires 30d;
        access_log off;
    }

    # 可选 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
}

VitePress ​

🦈 VSCode 预览界面 ​

🦈 WebStorm 预览界面 ​

🐳 Docker部署 ​

VitePress

🦈 VSCode 预览界面

🦈 WebStorm 预览界面

🐳 Docker部署