安装node.js
安装node.js，版本要求在>= 8
node.js下载地址：https://nodejs.org/zh-cn/
选择长期支持版
下载好安装在英文路径上
创建一个文件夹，如：vuepress，进入文件夹打开命令模式
全局安装VuePress
输入：
npm install -g vuepress
创建项目目录
mkdir study_blogs
cd study_blogs
初始化项目
npm init -y
文档路径
mkdir docs
.vuepress目录
cd docs
mkdir .vuepress
新建一个 md 文件
echo '# Hello VuePress!' >README.md
config.js配置文件
cd .vuepress
echo >config.js
public目录
mkdir public
设置package.json的脚本配置
VuePress中有两个命令:
vuepress dev docs命令运行本地服务，通过访问(http://localhost:8080)即可预览网站
vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build即可。
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
完成后的工作目录如下：
study_blogs
├─ docs //以后要在这里面写文章，直接在此文件夹下新建文件夹，然后再建md文档就行，链接会自动生成
│ ├─ README.md // 这个将会是我们以后的首页
│ └─ .vuepress // 这个里面会存放一些配置和组建
│ └─ public // 静态文件存放地
│ └─ config.js //配置文件，我们以后的所有配置基本都在这里写
└─ package.json
在 package.json 里的 scripts 中添加如下代码
输入命令启动项目,npm run docs:dev,输入显示网址
npm run docs:dev
在config.js下添加如下代码，这里的 config.js 便是一个 Vuepress 网站必要的配置文件：
module.exports = {
base: '/haha_blogs/',//github上根目录地址
title: 'study_blogs',
description: 'haha的博客',
}
其中配置项的含义为：
base：站点的基础路径，它的值应当总是以斜杠开始，并以斜杠结束。这里设置为 /blog-demo/ ，我们再次在本地运行项目，访问路径就需要变更为 http://localhost:8081/haha_blogs/
title：网站的标题
description：网站的描述
首页
默认主题提供了一个首页的布局，想要使用它，需要在你的根级 README.md 以格式 YAML front matter 指定 home: true。因此，将我们最初创建的 README.md 修改一下：
---
home: true
heroImage: /image/head portrait.jpg
heroText: study_blogs
tagline: 测试之路
actionText: 走过路过不要错过 →
actionLink: /
features:
- title: 测试学习小笔记
details:从0开始的测试之路，一路下来的小笔记，以免自己忘了。
- title: 测试需要的环境搭建
details: 测试需要的环境搭建，自己踩过的坑，操作过的过程记录。
- title: 感兴趣的扩展
details: 学习之路不断延伸，有了自己感兴趣的方面，比如：搭建自己的博客。
---
- heroImage: 首页图片，图片放置在
.vupress/public文件夹下，若没有该文件夹则自己创建一个，保存一张你想要的首页图片，并在此处引用，这里是放在public下image文件夹下。 - 其它参数请参考官方文档：Vuepress-默认主题首页
导航栏
在 .vupress/config.js 文件添加一些导航栏链接：
module.exports = {
themeConfig: {
// 你的GitHub仓库，请正确填写
repo: 'https://github.com/xxxxxxx/blog-demo',
// 自定义仓库链接文字。
repoLabel: 'My GitHub',
nav: [
{ text: 'Home', link: '/' },
{ text: '第一篇博客', link: '/blog/haha1.md' }
]
}
}
我们在 docs 目录下新建 blog 文件夹，在 blog 目录下创建 /blog/haha1.md 作为我们第一篇博客的内容：
侧边栏
最后我们配置侧边栏，让用户体验更好一些，在 .vupress/config.js 文件添加一些代码：
themeConfig: {
sidebar: [
['/', '首页'],
['/blog/haha1.md', '我的第一篇博客']
]
}
}
#我的第一篇博客
first blog
再次运行，打开网页，点击导航栏第一篇博客
部署
在github上创建一个名为 study_blogs 的仓库
在项目根目录中，创建一个如下的 deploy.sh 脚本文件，请自行修改github仓库地址
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
#如果打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 /<REPO>/，此处我设置为 /study_blogs /
#git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages(分支）
git push -f git@github.com:<USERNAME>/<REPO>.git master
cd -
保存，运行，就可以了
在setting中找到github pages 在source下选择master branch就可以了，如果是分支，选择分支就行，显示的网址就是部署在github上，自己博客的静态网址
