当前位置：首页 > article >正文

【vitepress】如何搭建并部署自己的博客网站

article 2025/3/10 6:09:57

这里写自定义目录标题

- 新的改变
- 一如何搭建[1]:
- - 安装vitepress
  - 初始化Vitepress
  - 启动项目
- 二如何部署[2]
- 视频教程 [3]

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

https://dl-hx.github.io/myBlog/

一如何搭建1:

安装vitepress

首先新建文件夹，打开cmd窗口

pnpm add -D vitepress

初始化Vitepress

pnpm vitepress init

这是我的配置，简单介绍一下

第一个是在当前根目录下创建vitepress项目
站点标题和描述。后续可以在配置中改
主题，建议选择第二个，个人觉得比较好看
是否使用ts，我们个人学习就没必要ts了，主要还是我懒
是否添加脚本到package.json，这个还是需要的，启动命令，打包命令这些都得用

初始化成功后，使用vscode或webstorm打开文件夹，会看到这样一个目录。接下来简单介绍一下每个文件的含义

.vitepress，最核心的目录，
theme目录。自定义主题配置，css样式等
config.mjs。最核心的文件，各种配置导航栏、侧边栏、标题什么的都是在这里
node_modules。安装的依赖
api-examples.md和markdown-examples.md。官方给的两个示例
index.md。主页相关
package.json和pnpm-lock.yml。包管理工具需要用的

启动项目

pnpm run docs:dev

打开，看到这个，说明初始化成功

二如何部署2

需要在config.mjs里面配置base，名称为github仓库名称，注意不要忘记改之前的icon

base: "/myBlog/"

修改package.json, 添加 "packageManager": "pnpm@8.6.12", 版本号要与后面yaml中的pnpm版本号一致

{
  "devDependencies": {
    "vitepress": "^1.6.3"
  },
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  },
+ "packageManager": "pnpm@8.6.12"
}

在 github 中创建一个名称为myBlog的仓库
在项目中初始化 git

$ git init

# Project exclude paths
.idea
.DS_Store
node_modules
/dist

上传代码

$ git push -u origin master

选择github actions
设置工作流
重命名并设置deploy脚本2
脚本文件：参考的vitepress官方文档：https://vitepress.dev/guide/deploy#github-pages
这里发现参考资料里面的node包有问题,换成我们的


name: Deploy VitePress site to Pages

on:
  push:
    branches: [master]
  workflow_dispatch:
# 设置tokenn访问权限
permissions:
  contents: read
  pages: write
  id-token: write

# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
      - name: Setup pnpm
        uses: pnpm/action-setup@v2 # 安装pnpm并添加到环境变量
        with:
          version: 8.6.12 # 指定需要的 pnpm 版本
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: pnpm # 设置缓存
      - name: Setup Pages
        uses: actions/configure-pages@v5  # 在工作流程自动配置GithubPages
      - name: Install dependencies
        run: pnpm install # 安装依赖
      - name: Build with VitePress
        run: |
          pnpm run docs:build # 启动项目
          touch .nojekyll  # 通知githubpages不要使用Jekyll处理这个站点，不知道为啥不生效，就手动搞了
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3  # 上传构建产物
        with:
          path: .vitepress/dist # 指定上传的路径，当前是根目录，如果是docs需要加docs/的前缀

  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URL
    needs: build    # 在build后面完成
    runs-on: ubuntu-latest  # 运行在最新版本的ubuntu系统上
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment  # 指定id
        uses: actions/deploy-pages@v4 # 将之前的构建产物部署到github pages中