02-创建:编译:部署Vuepress博客
# 创建
vuepress官方文档 (opens new window)
原生vuepress上手很简单，根据文档操作即可
npm init
npm install -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md
npm run docs:dev
1
2
3
4
2
3
4
这里推荐一个主题：vuepress-theme-vdoing文档 (opens new window) ｜ vuepress-theme-vdoing仓库 (opens new window)
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
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
在项目中，会有package.json文件，里面是一些依赖环境和一些命令配置npm install会把package.json中的依赖环境安装一遍npm run dev 即执行的是package.json中配置的命令vuepress dev docs
# 编译
- 在package.json中的scripts中配置命令
"build": "vuepress build docs",
1
- 执行
npm run build进行编译，在.vuepress中生成dist目录
# 部署
- 在package.json中的scripts中配置命令
"deploy": "bash deploy.sh",
1
- 执行
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
注意⚠️
如果部署后访问没有样式的话，是config.js中base设置的问题
- 有域名的话，base不用设置，默认为
'/'，为根目录 - 没有域名 - 如果为
isgangzi.github.io也为一级域名，也不用设置base - 没有域名 - 如果为
isgangzi.github.io/仓库名/为二级域名，需要设置base为'/仓库名/'
上次更新: 2021/12/22, 10:20:31