03.创建-编译-部署Vuepress博客

创建

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

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

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

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

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

编译

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

"build": "vuepress build docs",

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

部署

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

"deploy": "bash deploy.sh",

2. 执行npm run deploy进行部署

deploy.sh

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# github
echo 'wggz.top' > CNAME
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:isgangzi/weig-Blog.git master:gh-pages # 发布到github

cd - # 退回开始所在目录
rm -rf docs/.vuepress/dist

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

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

个人博客：wggz.top
个人微信公众号：程序员WeiG
欢迎关注👏