VuePress搭建个人博客（用腻了hexo、jekyll）

介绍

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

特性

内置 markdown 扩展，针对技术文档进行了优化
能够利用内嵌在 markdown 文件中的 Vue 代码
以 Vue 驱动的自定义主题系统
PWA 支持
Google Analytics 集成
一个默认主题：
- 响应式布局
- 可选的主页
- 简单、开箱即用、基于标题的搜索功能
- 可定制的导航栏和侧边栏
- 自动生成的 GitHub 链接和页面编辑链接

安装

首先需要如下环境：

node.js

1
2
3

检查安装版本
$ node -v
v8.10.0

全局安装VuePress

我这里使用的是淘宝的镜像，原npm是国外的，由于国内的不可抗拒力速度很慢。
安装淘宝镜像方法：
npm install -g cnpm --registry=https://registry.npm.taobao.org

1	cnpm install -g vuepress

创建项目文件夹

创建一个项目名为“VuePressBlog”的文件夹
在这个文件夹中Shift+鼠标右键，在此处打开命令窗口，输入：

cnpm init

需要填写一些基本信息，如果不填写，就直接回车下一步（这些配置信息以后也可以改，这里随意填或者不填），最后输入y 即可。生成package.json

创建项目文件夹树

新建docs文件夹
- docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹。
在文档目录(docs文件夹)中创建一个 .vuepress 目录。
- .vuepress目录主要放置所有 VuePress 特有(VuePress-specific) 文件的地方，不做任何配置的话，页面会显得过于简单，用户也无法方便地浏览网站。

到.vuepress目录中，创建config.js

配置 VuePress 站点的基本文件是 .vuepress/config.js，其中导出一个 JavaScript 对象：

//主要配置包括网站的标题、描述等基本信息，以及主题的配置。
module.exports = {
    title: '个人主页', 
    description: 'God耀的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/favicon.ico' }],
    ]
	,
	//主题配置
	themeConfig: {
		//导航栏配置
		nav: [
		  { text: '主页', link: '/' },
		  { text: '归档', link: '/archive/' },
		  { text: 'God耀|博客', link: 'https://www.yzblog.xyz' },
		  // 下拉列表的配置
		  {
			text: 'Languages',
			items: [
			  { text: 'Chinese', link: '/language/chinese' },
			  { text: 'English', link: '/language/English' }
			]
		  }
		]	
  }
}

字段名词解释：

title : 网站标题
description：网站描述
head ：网站头部的引用
图标路径默认为：/docs/.vuepress/public/目录下(所有的静态资源目录)
text : 代表页面显示的
link : 跳转的分类文件页面（如：上面定义的是archive，那我们就要在docs目录下建立一个archive文件夹，并且在这个文件夹中创建一个README.md文件）

这里我就随便写了一点内容做参考

/docs/README.md的内容如下：

---
home: true
heroImage: /img/hero.png
actionText: HOME →
actionLink: /
footer: Email-yzengchn@163.com | [Copyright © 2018-present Evan You](https:www.yzblog.xyz)
---
我是首页HOME

/archive/README.md的内容如下：

---
home: true
heroImage: /img/hero.png
actionText: 起步 →
actionLink: /guide/
footer: MIT Licensed | 
---

<div style="text-align: center">
  <Bit/>
</div>

<div class="features">
  <div class="feature">
    <h2>简明优先</h2>
    <p>对以 markdown 为中心的项目结构，做最简化的配置，帮助你专注于创作。</p>
  </div>
  <div class="feature">
    <h2>Vue 驱动</h2>
    <p>享用 Vue + webpack 开发环境，在 markdown 中使用 Vue 组件，并通过 Vue 开发自定义主题。</p>
  </div>
  <div class="feature">
    <h2>性能高效</h2>
    <p>VuePress 将每个页面生成为预渲染的静态 HTML，每个页面加载之后，然后作为单页面应用程序(SPA)运行。</p>
  </div>
</div>

### 起步就像数 1, 2, 3 一样容易

# 安装
yarn global add vuepress # 或 npm install -g vuepress

# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md

# 开始编写
vuepress dev

# 构建为静态文件
vuepress build

::: warning 兼容性注意事项
VuePress 要求 Node.js >= 8。
:::

这样我们的项目目录结构就都出来了

VuePressBlog
├─── docs
|   ├── README.md
│   ├── archive
|		└── README.md
│   └── .vuepress
│       ├── public
│			└── img
|			  ├── favicon.ico
|			  └── hero.png
│       └── config.js
└── package.json

运行看看效果

1	cnpm run docs:dev

首页展示

自定义导航栏展示

打包部署

用gitHub的pages或者coding的pages都可以,也可以搭建在自己的服务器上。
将dist文件夹中的内容提交到git上或者上传到服务器就好

1 2	npm run docs:build //将会在项目中生成dist文件夹，里面就是生成的静态html

但是这样每次敲这么多命令比较麻烦，弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本
在你的项目中，创建一个如下的 deploy.sh 文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs: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 git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

基本搭建完成

这样就基本做到了基础功能，接下来就是慢慢把Hexo中的文章和主题一点点搬运过来了

参考链接：

https://vuepress.vuejs.org/zh/
https://segmentfault.com/a/1190000015237352
https://yq.aliyun.com/articles/603815