【vitepress】如何搭建并部署自己的博客网站
文章目录
- 新的改变
- 一 如何搭建[1]:
- 安装vitepress
- 初始化Vitepress
- 启动项目
- 二 如何部署[2]
- 视频教程 [3]
新的改变
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
- 根目录添加.gitignore 文件
# 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中
- 点击确定，耐心等待15秒左右，就可以了，接下来查看我们的域名：
这里我自己的是这个https://dl-hx.github.io/myBlog/
点击之后.可以看到我们的页面
最后，就部署完毕了