💡 全程零服务器、完全免费!我的个人站 guoshunfa.com ,正是基于此方案搭建,目前稳定运行。
✅ vdoing不是基于最新的vuepress2,但是是我目前使用过最好用的主题,完全自动化,只需专心写博客。
本文只会描述从0到1搭建,如果想要了解配置、组件添加等,可以关注本系列《用Vuepress搭建个人网站系列》
官方搭建版演示视频:Bilibili (opens new window) | Youtube (opens new window)
简略版演示视频:Bilibili | Youtube
🛠️ 准备工作
- Git环境 ➜ 《Git环境搭建指南》:https://guoshunfa.com/pages/3bb0d0/
- Node.js环境 ➜ 《NPM环境搭建指南》:https://guoshunfa.com/pages/6f72e9/ (已安装可跳过,使用
git --version
和node -v
验证)
🚉 官网版和简略版的区别
官方版本:会提供齐全的配置,可以做博客、知识库。
简略版:简略版主要针对于想搭建官方服务介绍、官方文档介绍。删除了一些不常用的配置,降低配置难度,下载后就可以使用。
🚀 三步搭建
步骤1:下载vdoing主题仓库
- 官方版本:前往https://github.com/xugaoyi/vuepress-theme-vdoing/releases/tag/v1.12.8-v1.12.9 (opens new window)下载。
- 简略版:
git clone https://github.com/guoshunfa/vuepress-vdoing-docs-template.git
步骤2:安装依赖(关键!)
# 进入项目目录
cd vuepress-theme-vdoing-1.12.8-v1.12.9# 安装依赖
npm install
步骤3:本地热启动
看到 ➜ Local: http://localhost:8080/
后,浏览器访问即可预览:
🌍 免费部署方案
部署前必须操作:config.ts下base调整为github对应仓库名
- GitHub Pages:
# 一键部署到gh-pages分支
npm run deploy
- Vercel: 导入Git仓库自动构建,自带CDN加速。
- 更多问题:参考 vdoing官方文档 (opens new window)
关注郭顺发官网可了解更多Vuepress相关知识:guoshunfa.com