使用VuePress 搭建个人博客
介绍
VuePress 是一个静态网站生成器，包含由Vue驱动的主题系统和插件API，同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部分。
安装
❝前置条件：VuePress 需要 Node.js >= 8.6
❞
安装 vuepress
VuePress 安装毕竟简单，可以使用以下命令直接安装：
yarn add -D vuepress # npm install -D vuepress
验证安装
为了验证VuePress 的效果，首先创建一篇文档
mkdir docs && echo '# Hello VuePress' > README.md
在当前目录下创建 package.json 文件，添加以下内容：
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
在本地启动服务器
vuepress dev .
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。
如果没有报错，可在浏览器打开http://localhost:8080，默认加载内容为 README.md 中内容。
VuePress 目录结构
VuePress 遵循 「“约定优于配置”」 的原则，推荐的目录结构如下：
.
├── blog
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ └──_post
│ ├── about.md
│ └── README.md
│
└── package.json
这里blog目录被称作 targetDir ，目录下的文件都是相对于 blog 目录的。比如此目录下文件的路由地址如下：
| 文件相对路径 | 页面路由地址 |
|---|---|
| /README.md | / |
| /_post/README.md | /_post/ |
| /_post/about.md | /_post/about.html |
基本配置
现在 VuePress 已经可以运行，现在添加一些基本的配置。首先在当前目录下创建 .vuepress 目录（所有 VuePress 相关的文件都放在此目录下），然后在 .vuepress 目录下创建 config.js 文件（也可以使用YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件）。
添加以下配置到config.js：
module.exports = {
title: '顾斯比', // 网站的标题，它将会被用作所有页面标题的前缀。
description: '顾斯比的博客', // 网站的描述，它将会以 标签渲染到当前页面的 HTML 中。
}
其它详细配置参考官方文档：https://vuepress.vuejs.org/zh/config/
主题
因为是使用 VuePress 作为静态博客使用，需要替换掉默认的主题。这里使用官方主题：@vuepress/theme-blog 。
安装
yarn add @vuepress/theme-blog -D
# OR npm install @vuepress/theme-blog -D
使用&配置
在config.js 中添加主题相关配置：
// .vuepress/config.js
module.exports = {
title: '顾斯比',
description: '顾斯比的博客 gusibi goodspeed',
theme: '@vuepress/blog',
themeConfig: {
nav: [ // 导航条相关配置
{ text: '首页', link: '/' },
{ text: '标签', link: '/tag/'},
{ text: '关于 ', link: '/about/' },
{ text: 'github ', link: 'https://github.com/gusibi/', target:'_blank' },
],
/**
* Ref: https://vuepress-theme-blog.ulivz.com/config/#globalpagination
*/
globalPagination: {
lengthPerPage: 10,
},
/**
* Ref: https://vuepress-theme-blog.ulivz.com/config/#sitemap
*/
sitemap: {
hostname: 'http://blog.gusibi.mobi/'
},
}
}
目录
默认情況下，所有内容都必须放在 _posts 目录內，文件名为标题.md，例如about.md。
└── _posts
├── ...
└── about.md
博客内容设置
Front matter 是用于指定博客文件的变量，必须放在博客文件的最上方。并且必须采用在三点划线之间书写的有效的 YAML。这是一个基本的例子：
---
title: Blogging Like a Hacker # 博客标题
date: 2020-06-14 # 博客发布日期
tags: # 文章标签
- 前端
- dart
- flutter
- vue
summary: 这里是文章的摘要
---
其它变量：https://vuepress.vuejs.org/zh/guide/frontmatter.html
URL
默认情况下，path 路径则为文件目录的相对路径，比如：
├── package.json
└── source
├── _post
│ └── intro-vuepress.md
├── index.md
└── tags.md
那么你就会获得以下的可用页面：
/source/
/source/tags.html
/source/_post/intro-vuepress.html
推荐使用 permalink 指定文章的永久链接，可以使用全局配置来向所有页面应用永久链接：
// .vuepress/config.js
module.exports = {
permalink: "/:year/:month/:day/:slug"
};
另外，你也可以只为单独一个页面去设置永久链接。这种方式比全局配置拥有更高的优先级。
???? 「hello.md」:
---
title: Hello World
permalink: /hello-world
---
Hello!
内容
博客内容格式为 markdown，markdown 语法参考：https://www.markdownguide.org/
插件
搜索
VuePress 内置搜索，可以通过设置 themeConfig.search: false 来禁用默认的搜索框，或是通过 themeConfig.searchMaxSuggestions 来调整默认搜索框显示的搜索结果数量：
module.exports = {
themeConfig: {
search: false,
searchMaxSuggestions: 10
}
}
你可以通过在页面的 frontmatter 中设置 search 来对单独的页面禁用内置的搜索框：
---
search: false
---
「⚠️提示」
「内置搜索只会为页面的标题、****h2」 「、」 「h3」 「以及」 「tags」 「构建搜索索引。如果你需要全文搜索，你可以使用」 「Algolia 搜索」「。」
google-analytics
google-analytics是著名互联网公司Google为网站提供的数据统计服务。可以对目标网站进行访问数据统计和分析，并提供多种参数供网站拥有者使用。这里推荐安装：
安装
使用以下命令安装
yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics
使用
将ga 配置添加到配置文件
module.exports = {
plugins: [
[
'@vuepress/google-analytics',
{
'ga': '' // UA-00000000-0
}
]
]
}
更多配置参考文档：https://vuepress.vuejs.org/zh/theme/default-theme-config.html
RSS
vuepress 包含rss 插件，可以直接在配置中添加以下内容启用：
module.exports = {
...
themeConfig: {
...
feed: {
canonical_base: 'http://blog.gusibi.mobi/',
},
},
};
部署到Github
在 docs/.vuepress/config.js 中设置正确的 base。
❝如果你打算发布到 https://.github.io/，则可以省略这一步，因为 base 默认即是 "/"。
❞
在你的项目中，创建一个如下的
deploy.sh文件:
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
vuepress build --dest ./public
# 进入生成的文件夹
cd public
# 如果是发布到自定义域名
# echo 'blog.gusibi.mobi' > CNAME
git add -A
git commit -m 'deploy'
# 发布到 https://.github.io
git push -f [email protected]:gusibi/gusibi.github.io.git master
# 如果发布到 https://.github.io/
# git push -f [email protected]:/.git master:gh-pages
cd -
❝也以使用github ci 在每次提交代码的时候自动部署到github.io，具体步骤可以自行搜索配置
❞
一个问题
默认主题首页的内容排序有问题，暂时没有解决。
参考链接
Intro to VuePress 1.x：https://ulivz.com/2019/06/09/intro-to-vuepress-1-x/
默认主题配置：https://vuepress.vuejs.org/zh/theme/default-theme-config.html
https://www.markdownguide.org/
VuePress front matter 配置：https://vuepress.vuejs.org/zh/guide/frontmatter.html
VuePress 配置：https://vuepress.vuejs.org/zh/config/
「最后，感谢女朋友支持和包容，比❤️」
也可以在公号输入以下关键字获取历史文章：公号&小程序 | 设计模式 | 并发&协程
扫码关注
内推时间
