Github Pages + VitePress搭建

官网：https://vitepress.dev/

1.准备

安装node.js和Git

2.新建项目

在该项目路径下安装vitepress并初始化(建议用管理员的方式打开命令行)

npm add -D vitepress	#安装
npx vitepress init	#初始化

得到以下目录结构

3.配置站点基本信息

.vitepress/config.js,这个配置文件js、ts、mts都可以，如果你上面的初始化init成功的话，那这里就会自动生成了

// .vitepress/config.js
export default {
  // site-level options
  title: 'VitePress',
  description: 'Just playing around.',
 
  themeConfig: {
    // theme-level options
  }
}

4.启动并运行

package.json脚本中添加

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

启动

npm run docs:dev

浏览器访问 https://localhost:5173

这样本地项目就搭建好了

5.部署到github pages

github上创建一个公开仓库，名字MyBlog

把本地的项目提交并推送到这个仓库

仓库名是MyBlog要设置base，修改.vitepress/config.js文件，添加 base:"/MyBlog/",

到github仓库中设置source为github Actions

到Action中创建工作流和部署配置文件deploy.yml

内容到vitepress官网中拷贝

然后提交

回到Actions中等他部署完成

访问的页面可以在setting-pages中找到