GitHub + VitePress，或许是你做笔记的新路子 点击关注公众号，“技术干货”及时达！前言为什么我开始转入 VitePress，主要是因为好玩，一直想搭建一个个人博客，稍微了解了一下 VitePress 就狠狠的爱上了，实在是太简便太舒服了 还能结合 GitHub，部署个人网站，入门门槛极低 身为 熟练掌握 Vue 的搬砖工，只要你愿意，你也能玩出花（PS：真的可以玩出花，你看） 本篇主要介绍搭建工作以及部分配置，不会着重介绍创建项目以及项目结构 结束后你也能部署属于你的在线笔记本 「参考链接（站在巨人的肩膀上才能看的更远）」 VitePress 快速上手中文教程 —— 实在是太全面了 ?? AlbertZhang 的文档站 —— 原本有 b 站视频的，截至当前发现下架了 ?? GitHub Actions 工作流自动化的入门核心 —— 嘿嘿嘿我的蛋老师 ?? Markdown 语法 —— 忘了语法就看看 ?? Bilibili 技术胖 —— 他停更了，催更 ?? 创建 VitePress进入你的工作目录，创建一个文件夹，比如 vitepress-doc进入 vitepress-docpnpmadd-Dvitepress 初始化向导pnpmvitepressinit 此时你的目录应该是这样的，这里少加了.gitignore，记得手动加上 node_modules .DS_Store dist dist-ssr cache .cache .temp *.local 初始化vitepress.png部署到 GitHub上传 github 前，先在项目根目录下创建.github/workflows/deploy.yml文件 「提示」 在此之前，可以先看看GitHub Actions 工作流自动化的入门核心这个视频，有助于理解接下来的代码 官网中也有相关配置，这里是修改后的，以便于直接复制就能部署 #构建VitePress站点并将其部署到GitHubPages的示例工作流程 # name:DeployVitePresssitetoPages on: #在针对`main`分支的推送上运行。如果你 #使用`master`分支作为默认分支，请将其更改为`master` push: branches:[main] #允许你从Actions选项卡手动运行此工作流程 workflow_dispatch: #设置GITHUB_TOKEN的权限，以允许部署到GitHubPages 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:Setuppnpm uses:pnpm/action-setup@v2#安装pnpm并添加到环境变量 with: version:8.6.12#指定需要的pnpm版本 -name:SetupNode uses:actions/setup-node@v3 with: node-version:18 cache:pnpm#或pnpm/yarn -name:SetupPages uses:actions/configure-pages@v3#在工作流程自动配置GithubPages -name:Installdependencies run:pnpminstall#或pnpminstall/yarninstall/buninstall -name:BuildwithVitePress run:| pnpmdocs:build#或pnpmdocs:build/yarndocs:build/bunrundocs:build touch.nojekyll#通知githubpages不要使用Jekyll处理这个站点，不知道为啥不生效，就手动搞了 -name:Uploadartifact uses:actions/upload-pages-artifact@v2 with: path:.vitepress/dist #部署工作 deploy: environment: name:github-pages url:${{steps.deployment.outputs.page_url}} needs:build runs-on:ubuntu-latest name:Deploy steps: -name:DeploytoGitHubPages id:deployment uses:actions/deploy-pages@v2 「此时会出现构建失败」 编辑好.github/workflows/deploy.yml后，就可以直接上传的到 GitHub 当中啦，但是这个时候肯定会构建失败，因为我们还没有配置 Actions Actions未设置.png接下来就需要配置 Actions 了，在Settting - Pages - Build and deployment - Branch - 选择main - Save 设置Actions.png接下来等待工作流跑完，这里需要等个几分钟..... 当我们在看到 Code 中看到绿点，就说明完成了，让我来打开看看https://swkende.github.io/vitepress-doc/，这里对应你的仓库链接，需要修改一下url 「敲多麻袋，我样式呢？？？」 咳咳，原来是我没配置 base，导致了打包后丢失 css 样式，小问题，到 .vitepress - config.mjs 加一个 PS：这里是我写的文档，用 vitepress 展示代码还有聚焦效果，简直太帅了 import{defineConfig}from'vitepress' exportdefaultdefineConfig({ base:"/vitepress-doc/", title:"MyAwesomeProject", description:"AVitePressSite", themeConfig:{ ... OK，再次上传代码，这次肯定没问题了 等待几分钟，刷新页面，然后大功告成！ 「最后」 当然这里只是简单的说明如何部署，还没介绍怎么配置，怎么美化之类的，修行之路靠个人，而如今，你已经在道路上了 Demo 文档站 —— 文章中的示例 DEMO SWKende 的文档站 —— 我个人的文档站，还在持续更新中 「相信我，你也可以变成光」 点击关注公众号，“技术干货”及时达！ 阅读原文