使用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: '顾斯比的博客', // 网站的描述，它将会以 <meta> 标签渲染到当前页面的 HTML 中。
}
复制代码

其它详细配置参考官方文档：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: 这里是文章的摘要
---
复制代码

其它变量：vuepress.vuejs.org/zh/guide/fr…

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 语法参考：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
      }
    ]
  ]
}
复制代码

更多配置参考文档：vuepress.vuejs.org/zh/theme/de…

RSS

vuepress 包含rss 插件，能够直接在配置中添加如下内容启用：

module.exports = {
    ...
    themeConfig: {
      ...
      feed: {
         canonical_base: 'http://blog.gusibi.mobi/',
      },
    },
  };
复制代码

部署到Github

1. 在 docs/.vuepress/config.js 中设置正确的 base。

若是你打算发布到 https://.github.io/，则能够省略这一步，由于 base 默认便是 "/"。

1. 在你的项目中，建立一个以下的 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://<USERNAME>.github.io
git push -f git@github.com:gusibi/gusibi.github.io.git master

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

cd -
复制代码

也以使用github ci 在每次提交代码的时候自动部署到github.io，具体步骤能够自行搜索配置

参考连接

1. Intro to VuePress 1.x： ulivz.com/2019/06/09/…
2. 默认主题配置： vuepress.vuejs.org/zh/theme/de…
3. www.markdownguide.org/
4. VuePress front matter 配置： vuepress.vuejs.org/zh/guide/fr…
5. VuePress 配置： vuepress.vuejs.org/zh/config/

---

最后，感谢女友支持和包容，比❤️

也能够在公号输入如下关键字获取历史文章：公号&小程序 | 设计模式 | 并发&协程

---

内推时间