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

文章目录

- 新的改变
- - 旧的github.io地址,现在不用
  - 更新netlify托管之后为这个
- 一如何搭建[1]:
- - 安装vitepress
  - 初始化Vitepress
  - 启动项目
- 二如何部署[2]
- 视频教程 [3]

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

新的改变

旧的github.io地址,现在不用

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

更新netlify托管之后为这个

https://dl-hxblog.netlify.app/

一如何搭建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 Pageson:push:branches: [master]workflow_dispatch:
# 设置tokenn访问权限
permissions:contents: readpages: writeid-token: write# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:group: pagescancel-in-progress: falsejobs:# 构建工作build:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3with:fetch-depth: 0 # 如果未启用 lastUpdated，则不需要- name: Setup pnpmuses: pnpm/action-setup@v2 # 安装pnpm并添加到环境变量with:version: 8.6.12 # 指定需要的 pnpm 版本- name: Setup Nodeuses: actions/setup-node@v3with:node-version: 18cache: pnpm # 设置缓存- name: Setup Pagesuses: actions/configure-pages@v5  # 在工作流程自动配置GithubPages- name: Install dependenciesrun: pnpm install # 安装依赖- name: Build with VitePressrun: |pnpm run docs:build # 启动项目touch .nojekyll  # 通知githubpages不要使用Jekyll处理这个站点，不知道为啥不生效，就手动搞了- name: Upload artifactuses: actions/upload-pages-artifact@v3  # 上传构建产物with:path: .vitepress/dist # 指定上传的路径，当前是根目录，如果是docs需要加docs/的前缀# 部署工作deploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URLneeds: build    # 在build后面完成runs-on: ubuntu-latest  # 运行在最新版本的ubuntu系统上name: Deploysteps:- name: Deploy to GitHub Pagesid: deployment  # 指定iduses: actions/deploy-pages@v4 # 将之前的构建产物部署到github pages中