目录结构
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
│ └─ about
│ └─ README.md
│ └─ notes
│ └─ javascript
| └─ 数组去重.md
| └─ 数组排序.md
│ └─ vue
| └─ VuePress打造静态博客.md
└─ node_modules
└─ deploy.sh
└─ package.json
安装
# 新建package.json
npm init -y
# 将 VuePress 作为一个本地依赖安装
npm i vuepress -D
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 编辑package.json
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
# 本地预览效果
npm run dev
# 生成静态文件
npm run build
首页模板配置
---
home: true
heroImage: ./img/header.jpg
actionText: 关于我
actionLink: /about/
features:
- title: 装逼
details: 在这里，你可以看到 zhjgh 在这里无限装逼，所以你可以尽情打脸。就算你懂，没关系，打了脸再说~
- title: 搞笑
details: 在这里，你可以获得各种学习欢乐，轻松进击前端编程。点滴进步，成就不一样的你。
- title: 深沉
details: 在这里，你可以收获一个广州自身漂泊的人的情怀，感受在这个烦躁的社会 zhjgh 如何安身立命。
footer: zhjgh 的博客 | Copyright © 2018 不折腾的前端，和咸鱼有什么区别
---
全局配置文件config.js
module.exports = {
// 左上角标题
title: 'zhjgh的博客',
//描述
description: '前端开发工程师',
// 头部部署，右上角小图标
head: [
// ico 配置
['link', {
rel: 'icon',
href: '/img/logo.png'
}]
],
// 主题部署
themeConfig: {
/**
* 右侧导航条
* text - 显示字段
* link - 链接：注意前后带 / 符号
*/
nav: [
{
text: '主页',
link: '/'
},
/**
* 多级菜单
* 开头 text 为一级标题
* 数组内 text 为二级标题
* link 为链接，注意带 /
*/
{
text: '学习文档',
link: '/notes/',
},
{
text: '关于',
link: '/about/'
},
// 链接到网站
{
text: 'Github',
link: 'https://github.com/zhjgh/'
},
],
/**
* 侧边栏配置：侧边栏组
*/
sidebar: {
'/note': [
{
title:'javascript',
collapsable: true,
children:[
'/notes/javascript/数组去重',
'/notes/javascript/数组排序',
]
},
{
title:'vue',
collapsable: true,
children:[
'/notes/vue/VuePress打造静态博客',
]
},
]
}
}
}
一键部署
1.新建deploy.sh
touch deploy.sh
2.配置
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
git push -f https://github.com/zhjgh/zhjgh.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
3.新建命令到package.json
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "bash deploy.sh"
},
4.发布
npm run deploy
