VuePress-基于vue-ssr的静态网站生器初体验

发表于

VuePress

昨天在微博上看到尤大神新发布的基于vue-ssr静态网站生成器VuePress，刚刚通过Hexo搭建博客的我又忍不住去尝试了下。。

参考官方文档可知该项目有一下特点：

  • 内置markdown（基础功能）
  • 支持PWA
  • 集成了Google Analytics
  • 拥有一套默认主题（风格与(官方文档)[https://vuepress.vuejs.org]一致）
  • 自动生成的GitHub链接和页面编辑链接

快速上手

安装

初始化项目

1
npm init -y

安装 vuepress，也可以全局安装

1
npm install -D vuepress

创建文章文件夹

1
mkdir docs

配置package.json

1
2
3
4
5
6
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

书写

直接在docs文件夹下新建markdown文件即可编辑书写文章

预览

1
npm run docs:dev

打开
http://localhost:8080/

构建

1
npm run docs:build

生成的文件默认会在 .vuepress/dist 文件夹下

自定义配置

可以将配置文件写到 .vuepress/config.js 中

添加顶部导航

1
2
3
4
5
6
7
8
9
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

添加侧边栏

1
2
3
4
5
6
7
8
9
module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}

同时支持分组添加侧边栏
eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',
        collapsable: false,
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

自定义主题

可以在github上复制官方的主题源码到.vuepress/theme中，然后使用

1
vuepress eject 目标路径

命令自定义主题

部署到github上，生成专属博客

在 .vuepress/config.js 中设置基础路径

即如果你的github连接为：https://github.com/foo/bar

你的主页为:
https://foo.github.io/bar/

那么你的基础路径设置为：bar即可

最后构建文件之后，进入到生成文件路径

1
cd docs/.vuepress/dist

将dist文件夹中的代码提交到对应的git仓库就好

下面访问你的地址就好了：https://xxx.github.io