VuePress搭建博客系统

VuePress搭建博客系统

介绍

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

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

快速上手

安装nodeJs(省略)

::: warning 注意事项
请确保你的 Node.js 版本 >= 8。
:::

安装yarn

sudo npm install yarn

安装vuePress

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

# 安装为本地依赖项
sudo yarn add -D vuepress # 或 sudo npm install -D vuepress

创建docs文件夹

sudo mkdir docs

创建一个 markdown 文件

echo '# Hello VuePress' > docs/README.md

然后，给 package.json 添加一些 scripts 脚本

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

启动

yarn docs:dev 或 npm run docs:dev

预览

http://localhost:8080 效果如下图
[图片上传失败...(image-11361b-1534493335365)]

要生成静态资源，请运行：

yarn docs:build 或 npm run docs:build

默认情况下，构建的文件会位于 docs/.vuepress/dist 中。官方文档

配置

基本配置

在 docs/.vuepress目录下新建一个config.js,添加配置

module.exports = {
  title: 'demo-vuepress',
  description: 'VuePress demo',
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }]
  ]
}

更多基本配置见官方文档

::: warning 注意

.vuepress目录不存在可手动创建

:::

目录结构

[图片上传失败...(image-fb3af5-1534493335365)]

导航栏配置

module.exports = {
  themeConfig: {
    nav: [
      { text: 'home', link: '/' },
      { text: 'js', link: '/js/' },
      { text: 'java', link: '/java/' },
      { text: 'python', link: '/python/' },
      // 下拉列表
      {
        text: 'select',
        items: [
          { text: 'select1', link: '/select/select1' },
          { text: 'select2', link: '/select/select2' }
        ]
      },
      { text: 'GitHub', link: 'http://liuyukuai.github.io'}
    ]
  }
}

效果如下图

[图片上传失败...(image-d030b9-1534493335365)]

侧边栏配置

支持侧边栏分组(可以用来做博客文章分类)

module.exports = {
  themeConfig: {
    sidebar: {
      '/js': [
        {
          title:' 基础',
          // true 展开
          collapsable: true,
          children:[
            '/js/basic/js入门1',
            '/js/basic/js入门2',
          ]
        },
        {
          title:'高级',
          collapsable: true,
          children:[
            '/js/senior/js高级1',
            '/js/senior/js高级2',
          ]
        },
      ]
    }
  }
}

效果如下图
[图片上传失败...(image-e9f1c5-1534493335365)]

更多导航配置见官方文档

部署GitHub

设置base

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

如果你打算部署到 https://liuyukuai.github.io/，就可以省略这一步，因为 base 默认为 "/"。

如果你打算部署到 https://liuyukuai.github.io/blog/（也就是说你的仓库地址是 https://github.com/liuyukuai/blog），设置 base 为 "/blog/"。

module.exports = {
    title: 'demo-vuepress',
    description: 'VuePress demo',
    head: [
        ['link', {rel: 'icon', href: `/favicon.ico`}]
    ],
    base: '/'
}

构建脚本

在你的项目中，创建一个有以下内容的 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://.github.io
git push -f https://github.com/liuyukuai/liuyukuai.github.io.git master

cd -

设置脚本

修改package.json文件，添加
{
    "scripts": {
        "deploy": "bash deploy.sh"
      },
}

完整代码地址：GitHub

更多内容请看官网，官网比较详细。 官方文档