526互联

Github Pages + VitePress搭建

发布时间 2023-11-02 04:03:04作者: 植树chen

官网：https://vitepress.dev/

1.准备

安装node.js和Git

2.新建项目

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

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

得到以下目录结构
image
image

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
image

这样本地项目就搭建好了

5.部署到github pages

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

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

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

到github仓库中设置source为github Actions
image

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

image

内容到vitepress官网中拷贝
image

然后提交
image

回到Actions中等他部署完成
image

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