创建

vuepress官方文档
原生vuepress上手很简单，根据文档操作即可

  1. npm init
  2. npm install -D vuepress
  3. mkdir docs && echo '# Hello VuePress' > docs/README.md
  4. npm run docs:dev

这里推荐一个主题：vuepress-theme-vdoing文档 ｜ vuepress-theme-vdoing仓库
vdoing主题已经搭配好了很多插件，下载下来，执行即可

  1. # 克隆项目
  2. git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git
  3. # 进行项目
  4. cd vuepress-theme-vdoing
  5. # 安装依赖
  6. npm install # or yarn install
  7. # 运行
  8. npm run dev # or yarn dev

在项目中，会有package.json文件，里面是一些依赖环境和一些命令配置
npm install会把package.json中的依赖环境安装一遍
npm run dev 即执行的是package.json中配置的命令vuepress dev docs
�

编译

  1. 在package.json中的scripts中配置命令

    1. "build": "vuepress build docs",

  2. 执行npm run build进行编译，在.vuepress中生成dist目录

�

部署

  1. 在package.json中的scripts中配置命令

    1. "deploy": "bash deploy.sh",

  2. 执行npm run deploy进行部署

deploy.sh

  1. #!/usr/bin/env sh
  2. # 确保脚本抛出遇到的错误
  3. set -e
  5. # 生成静态文件
  6. npm run build
  8. # 进入生成的文件夹
  9. cd docs/.vuepress/dist
  11. # github
  12. echo 'wggz.top' > CNAME
  13. git init
  14. git add -A
  15. git commit -m 'deploy'
  16. git push -f git@github.com:isgangzi/weig-Blog.git master:gh-pages # 发布到github
  18. cd - # 退回开始所在目录
  19. rm -rf docs/.vuepress/dist

�注意⚠️
如果部署后访问没有样式的话，是config.js中base设置的问题

  • 有域名的话，base不用设置，默认为'/'，为根目录
  • 没有域名 - 如果为isgangzi.github.io也为一级域名，也不用设置base
  • 没有域名 - 如果为isgangzi.github.io/仓库名/为二级域名，需要设置base为'/仓库名/'