SUPCODER

切换白天/黑夜主题

VitePress 发布 ​

概述 ​

VitePress 是一个基于 Vite 的静态网站生成器，适用于文档和博客。以下是 VitePress 项目在 Ubuntu 服务器中发布的流程，包括通过 Git 上传项目的步骤。

1. 安装 Node.js 和 npm ​

首先，确保你的系统上安装了 Node.js 和 npm。可以使用 NodeSource 的二进制分发来安装最新版本的 Node.js。

bash
# 更新包列表
sudo apt update
# 安装 Node.js
curl -sL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

安装完成后，检查 Node.js 和 npm 的版本：

bash
node -v
npm -v

2. 创建项目目录 ​

在你的主目录或其他合适的位置创建一个新的项目目录：

bash
mkdir ~/vitepress
cd ~/vitepress

3. 初始化项目 ​

在项目目录中初始化一个新的 npm 项目：

bash
npm init -y

4. 安装 VitePress ​

在项目目录中安装 VitePress：

bash
npm install vitepress --save-dev

5. 创建项目结构 ​

在项目目录中创建一个 docs 文件夹，并在其中创建一个 index.md 文件：

bash
mkdir docs
echo '# Hello VitePress' > docs/index.md

6. 配置 VitePress ​

在 docs 文件夹中创建一个配置文件 config.js：

bash
mkdir -p docs/.vitepress
echo "module.exports = { title: 'My VitePress Site', description: 'A site generated with VitePress' };" > docs/.vitepress/config.js

7. 本地开发 ​

在项目目录中运行以下命令以启动本地开发服务器：

bash
npx vitepress dev docs

然后在浏览器中访问 http://<your-server-ip>:3000，你应该能看到你的 VitePress 网站。

8. 构建静态文件 ​

当你准备好发布时，运行以下命令构建静态文件：

bash
npx vitepress build docs

构建完成后，生成的静态文件将位于 docs/.vitepress/dist 目录中。

9. 部署静态文件 ​

你可以使用 Nginx 或 Apache 等 Web 服务器来部署生成的静态文件。以下是使用 Nginx 的步骤：

安装 Nginx ​

bash
sudo apt install nginx -y

配置 Nginx ​

编辑 Nginx 配置文件，指向 VitePress 生成的静态文件：

bash
sudo vi /etc/nginx/sites-available/vitepress

在文件中添加以下内容：

bash
server {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    listen 80;
    server_name 117.72.100.67;
    index index.html;

    location / {
        # content location
        root /blog/blog_vite/docs/dist;

        # exact matches -> reverse clean urls -> folders -> not found
        try_files $uri $uri.html $uri/ =404;

        # non existent pages
        error_page 404 /404.html;

        # a folder without index.html raises 403 in this setup
        error_page 403 /404.html;

        # adjust caching headers
        # files in the assets folder have hashes filenames
        location ~* ^/assets/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

确保将 your_domain_or_ip 替换为你的域名或服务器 IP 地址，并将 your_username 替换为你的用户名。

启用配置 ​

创建符号链接以启用配置：

bash
sudo ln -s /etc/nginx/sites-available/vitepress /etc/nginx/sites-enabled/

测试 Nginx 配置 ​

bash
sudo nginx -t

启动 Nginx ​

bash
sudo systemctl restart nginx
sudo systemctl enable nginx

10. 通过 Git 拉取项目 ​

10.1 配置 SSH 密钥 ​

在 Ubuntu 上生成 SSH 密钥：

bash
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

将 your_email@example.com 替换为你的邮箱。

按提示操作，默认情况下，密钥将保存在 ~/.ssh/id_rsa 和 ~/.ssh/id_rsa.pub 中。

10.2 添加 SSH 密钥到 SSH 代理 ​

启动 SSH 代理并添加 SSH 密钥：

bash
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa

10.3 将 SSH 公钥添加到 GitHub ​

复制 SSH 公钥到剪贴板：

bash
cat ~/.ssh/id_rsa.pub

登录到你的 GitHub 账户，进入 Settings > SSH and GPG keys，点击 New SSH key，将公钥粘贴到文本框中并保存。

10.4 克隆远程仓库 ​

将你的远程 Git 仓库克隆到本地（例如 GitHub、GitLab 或其他 Git 托管服务）：

bash
git clone git@github.com:your_username/your_repository.git

确保将 your_username 和 your_repository 替换为你的 GitHub 用户名和仓库名。

11. 访问你的站点 ​

完成部署后，你可以通过浏览器访问 http://your_domain_or_ip 来查看你的 VitePress 网站。

总结 ​

以上是在 Ubuntu 服务器中发布 VitePress 项目的步骤，包括通过 Git 上传项目的完整流程。确保在部署之前，所有内容都已正确配置和测试。根据需要，你可以进一步配置 Nginx 或其他 Web 服务器以满足你的需求。