2020你应该有自己的知识库

答神
2,238 阅读19分钟

作    者:云白先生
公众号: 前端微服务
GitHub:github.com/yongbolu

概述

俗话说，好记性不如烂笔头，在信息化的今天，笔头我们已经用的很少了，取而代之的是电脑、手机等一系列终端设备，笔头烂不烂已经不重要了，重要的是笔头做的事情才是我们关注的重点，做笔记，把我们的故事记录下来，方便在以后忘记的时候拿出来看看，做做复习,怀念怀念青春。今天小编将为大家介绍如何用当下流行的Vuepress搭建一套属于自己的知识库。VuePress可以让您非常方便的在Markdown 文档中编写 Vue 代码，并且 VuePress 对编译后的 HTML文件做了一些针对搜索引擎的优化。另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大，本文将围绕搭建一个 Github 的静态博客展开。如果对你有帮助，记得点赞!,你的支持是小编最大的创作动力。

目录

  • 第一部分 认识VuePress
  • 第二部分 认识 Nuxt
  • 第三部分 认识 Docsify / Docute
  • 第四部分 认识 Hexo
  • 第五部分 认识 GitBook
  • 第六部分 认识 Jekyll
  • 第七部分 认识 Hugo

你将学到

  • 使用VuePress搭建自己的文档库
  • 了解搭建文档库的工具有哪些
  • 了解搭建文档库工具的优缺点
  • 知道为什么会选用Vuepress搭建自己的文档库

环境要求

  • 注意: 请确保你的 Node.js 版本 >= 8.6

常用命令

  • 安装VuePress
$ npm install -g vuepress
或
$ yarn global add vuepress
  • 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
  • 开始写作
$ vuepress dev .
  • 构建静态文件
$ vuepress build .
  • 运行命令
$ npm run  docs:dev
  • 打包命令
$ npm run  docs:bulid

第一部分 认识VuePress

第1章 VuePress 是什么

VuePress(Vue 驱动的静态网站生成器)是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用，内置webpack，可以用来写文档,是为了支持 Vue及其子项目的文档需求而诞生的。它由两部分组成：

第2章 VuePress 工作原理

  • VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用。
  • 在构建时，为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。

第3章 VuePress 特点

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

  • 简洁至上: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
  • Vue 驱动： 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
  • 高性能: VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
  • 内置的 Markdown 拓展(为技术文档而优化的内置Markdown拓展)
  • 内置的 Markdown 拓展(在Markdown文件中使用Vue组件)
  • 自动生成Service Worker(支持PWA)
  • Google Analytics集成
  • Vue驱动的自定义主题系统
  • 默认主题
  • 多语言支持
  • 响应式布局
  • 支持PWA模式
  • 强大的 Plugin API
  • 基于Git的"最后更新时间

第4章 VuePress 安装环境

  • 请确保你的 Node.js 版本 >= 8.6。
  • 安装工具1:yarn(建议)
  • 安装工具2:npm
  • 一定要使用 yarn add vuepress@next或npm install -g vuepress@next 而不是官网的命令,官网的命令是老版本
  • 如果您的项目代码中并没有 package.json文件，请先执行 npm init

第5章 VuePress 全局安装

如果你只是想尝试一下 VuePress，你可以全局安装它：

# 安装
yarn global add vuepress@next # 或者：npm install -g vuepress@next

# 创建项目目录
mkdir vuepress-demo && cd vuepress-demo

# 在项目根目录下新加 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

注意: vuepress dev . 和vuepress build .后面的“.”

第6章 VuePress 项目安装

如果你想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。作为本地依赖安装让你可以使用持续集成工具，或者一些其他服务（比如 Netlify）来帮助你在每次提交代码时自动部署。

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress@next # 或者：npm install -D vuepress@next

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

注意: 如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。用npm安装执行npx vuepress dev docs会报错，用yarn安装vuepress正常。

VuePress 对 Markdown 做了一些扩展，使得我们可以在 Markdown 文件中使用 YAML 语法，VuePress 使用 ---来隔离 Markdown 语法。默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在你的根级 README.md(docs/README.md) 的 YAML front matter 指定 home: true。配置如下:

---
sidebar: auto  // 该语法表示使用当前页面标题自动生成侧边栏
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

注意: 1.你可以将相应的内容设置为 null 来禁用标题和副标题。 2.任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。

接着，在 package.json 里加一些脚本:

在项目根目录下的 package.json 中添加 scripts ：
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
# 本地运行文档
npm run docs:dev

# 编译打包生产静态 HTML 文件
npm run docs:build

然后就可以开始写作了:

yarn docs:dev # 或者：npm run docs:dev
就会出现一个和Vuepress一样的网站了

要生成静态的 HTML 文件，运行：

yarn docs:build # 或者：npm run docs:build

注意: 默认情况下，文件将会被生成在 .vuepress/dist，当然，你也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上，参考 VuePress部署 来了解更多。

第7章 VuePress 目录结构

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

目录说明

  • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
  • docs/.vuepress/theme: 用于存放本地主题。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
  • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
  • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/templates: 存储 HTML 模板文件。
  • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
  • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
  • docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
  • docs/.vuepress/enhanceApp.js: 客户端应用的增强。

页面访问路由

文件的相对路径页面路由地址
/README.md/
/guide/README.md/guide/
/config.md/config.html

命令行使用

基本用法

vuepress <command> targetDir [options]

常用命令

vuepress dev docs
vuepress build docs
vuepress eject

第8章 VuePress 配置

通过 VuePress 配置文件我们可以使用一些自定义的功能，譬如添加侧边栏，添加导航栏等。首先在 docs 目录下新建一个 .vuepress目录，并在该目录下方新建 config.js。VuePress的基本配置主要在docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YAML 或 toml中完成。

8.1 基本配置

base

在使用 VuePress 编写博客并发布到 Github pages 的时候，我们可能会遇到下图所显示的问题，页面已经有了，但是样式和 js 没有加载成功。我们可以通过配置 base 属性来解决这个问题， base 属性的默认值是 /。假如您准备将代码部署到 xunzhaotech.github.io/xz-blog/ , 那么 base属性就应该被设置成 /xz-blog/。注意：base 属性的值总是以 / 开始并以 / 结束。部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。如 GitHub pages，如果你想将你的网站部署到 foo.github.io/bar/，那么 base 应该被设置成 "/bar/"，它的值应当总是以斜杠开始，并以斜杠结束(base 将会作为前缀自动地插入到所有以 / 开始的其他选项的链接中，所以你只需要指定一次)。

  • 类型: string
  • 默认值: /

title

在 VuePress 中通过设置 title属性来设置网站的标题，它将会被用作所有页面标题的前缀，在默认主题下，它将应用在导航栏上。网站的标题，它将会被用作所有页面标题的前缀，同时，默认主题下，它将显示在导航栏（navbar）上。

  • 类型: string
  • 默认值: undefined

head

注入到当前页面的 HTML 中的标签，每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?]

  • 类型: Array
  • 默认值: []

description

网站的描述，它将会以 标签渲染到当前页面的 HTML 中。

  • 类型: string
  • 默认值: undefined

host

指定用于 dev server 的主机名。

  • 类型: string
  • 默认值: '0.0.0.0'

port

指定 dev server 的端口。

  • 类型: number
  • 默认值: 8080

temp

指定客户端文件的临时目录。

  • Type: string
  • Default: /path/to/@vuepress/core/.temp

dest

VuePress 默认将文件打包在 .vuepress/dist目录下，我们可以通过 dest指定 vuepress build 的输出目录，例如将文件输出在项目根目录下的 dist文件夹中。如果传入的是相对路径，则会基于 process.cwd() 进行解析。

  • 类型: string
  • 默认值: .vuepress/dist

repo

通过设置 repo属性，VuePress 会在导航栏中添加一个 Github 仓库的链接。

locales

  • 类型: { [path: string]: Object }
  • 默认值: undefined

要启用 VuePress 的多语言支持，首先需要使用如下的文件结构：

docs
├─ README.md
├─ foo.md
├─ nested
│  └─ README.md
└─ zh
   ├─ README.md
   ├─ foo.md
   └─ nested
      └─ README.md

然后，在 .vuepress/config.js 中提供 locales 选项：

module.exports = {
  locales: {
    // 键名是该语言所属的子路径
    // 作为特例，默认语言可以使用 '/' 作为其路径。
    '/': {
      lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
      title: 'VuePress',
      description: 'Vue-powered Static Site Generator'
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'VuePress',
      description: 'Vue 驱动的静态网站生成器'
    }
  }
}

注意: 如果一个语言没有声明 title 或者 description，VuePress 将会尝试使用配置顶层的对应值。如果每个语言都声明了 title 和 description，则顶层的这两个值可以被省略。默认主题多语言配置

shouldPrefetch

一个函数，用来控制对于哪些文件，是需要生成 资源提示的。默认情况下，异步 chunk 中的所有资源都将被预取，因为这是低优先级指令; 然而，为了更好地控制带宽使用情况，你也可以自定义要预取的资源。此选项具有与 shouldPreload 相同的函数签名。详细参考。

  • 类型: Function
  • 默认值: () => true

cache

VuePress 默认使用了 cache-loader 来大大地加快 webpack 的编译速度。 此选项可以用于指定 cache 的路径，同时也可以通过设置为 false 来在每次构建之前删除 cache。

  • 类型: boolean|string
  • 默认值: true
  • 提示: 这个选项也可以通过命令行来使用：
$ vuepress dev docs --cache .cache # 设置 cache 路径
$ vuepress dev docs --no-cache     # 在每次构建前删除 cache

extraWatchFiles

指定额外的需要被监听的文件。你可以监听任何想监听的文件，文件变动将会触发 vuepress 重新构建，并实时更新。 类型: Array 默认值: []

module.exports = {
  extraWatchFiles: [
    '.vuepress/foo.js', // 使用相对路径
    '/path/to/bar.js'   // 使用绝对路径
  ]
}

patterns

Specify which pattern of files you want to be resolved.

  • Type: Array
  • Default: ['/*.md', '/*.vue']

8.2 导航栏与侧边栏

在 VuePress 中如果想要为您的网站添加导航栏，可以通过设置 themeConfig.nav 来添加导航链接，通过设置 themeConfig.sidebar 属性来添加侧边栏。如果您的导航是一个下拉列表，可以通过 items 属性来设置。

// dcos/.vuepress/config.js
module.exports = {
  themeConfig: {
    // 添加导航栏
    nav: [
      { text: 'vue', link: '/' },
      { text: 'css', link: '/blog/' },
      { text: 'js', link: '/zhihu/' },
      {
        text: 'github',
        // 这里是下拉列表展现形式。
        items: [
          { text: 'focus-outside', link: 'https://github.com/txs1992/focus-outside' },
          { text: 'stylus-converter', link: 'https://github.com/txs1992/stylus-converter' }
        ]
      }
    ],
    // 为以下路由添加侧边栏
    sidebar: ['/', '/git', '/vue']
  }
}

多级配置

对于多级目录的侧边栏，我们需要用使用对象描述的写法，下面的 /git/ 表示在 git 目录，默认指向 /git/README.md 文件。

docs
 ├── README.md
 ├── vue
 │    ├─ README.md
 │    ├─ one.md
 │    └─ two.md
 └── css
      ├─ README.md
      ├─ three.md
      └─ four.md
// dcos/.vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      '/vue/': [
        'one',
        'two'
      ],
      '/css/': [
        'three',
        'four'
      ]
    }
  }
}

8.3 Styling

palette.styl

如果要对默认预设的样式进行简单的替换，或者定义一些变量供以后使用，你可以创建一个 .vuepress/styles/palette.styl 文件。

// 颜色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// 响应式变化点
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

注意: 你应该只在这个文件中定义变量。因为 palette.styl 将在根的 stylus 配置文件的末尾引入，作为配置，它将被多个文件使用，所以一旦你在这里写了样式，你的样式就会被多次复制。

index.styl

VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。

.content {
  font-size 30px
}

提示::为什么不能把 palette.styl 和 index.styl 合并到一个 API?

8.4 Front Matter配置

任何包含 YAML front matter 的 Markdown 文件都将由 gray-matter 处理。front matter 必须是 markdown 文件中的第一部分，并且必须采用在三点划线之间书写的有效的 YAML。

第9章 VuePress 中注册组件

在 VuePress 中编写 Vue 代码，和我们通常的编写单文件的方式一致，有些时候我们有可能需要使用 Vue 的 UI 组件库。例如 Element，Mint 等，通常我们在项目中使用这些 UI 组件库的时候，我们都会在 main.js 或 botostrap.js 文件中统一注册。好在 VuePress 中也支持这种功能，我们可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，这个文件 exprot default 一个钩子函数，在这个钩子中你可以做一些特殊处理，例如添加全局路由钩子，注册外部组件库。

// .vuepress/enhanceApp.js
// 全局注册 Element 组件库
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
  Vue,
  options,
  router
}) => {
  Vue.use(Element)
}

在 Vue 正常开发中，有些时候我们可能会需要做一些自定义的组件，在 VuePress 中我们可以在 .vuepress/components 目录中编写我们的自定义组件，VuePress 在编译时遍历该目录中所有的 *.vue 文件，并见它们注册为全局组件。

// 注册一个自定义组件
// docs/.vuepress/components/Hello.vue
<template>
  <div class="xz-hello">Hello VuePress Demo</div>
</template>

这样我们在 Markdown 文件编写 Vue 代码的时候就不需要注册注册这些组件，边可以直接在 Markdown 中使用了。

// docs/.vuepress/vue/README.md
<template>
  <div class="test-demo">
    {{ msg }}
    <xz-hello></xz-hello>
    <el-button>button</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello VuePress!'
    }
  }
}
</script>

第10章 VuePress 主题

theme

当这里根据VuePress的默认主题配置,如果默认主题无法满足需求，需要配置。

  • 类型: string
  • 默认值: undefined

theme使用来自依赖的主题配置

  1. 一个主题可以在以 vuepress-theme-xxx 的形式发布到 npm，你可以这样使用它：
module.exports = {
  theme: 'vuepress-theme-xx'
}
# 主题的缩写
module.exports = {
  theme: 'xx'
}
  1. 这也适用于 Scoped Packages的官方主题
module.exports = {
  theme: '@org/vuepress-theme-xxx', // 或者一个官方主题: '@vuepress/theme-xxx'
}
# 官方主题的缩写
module.exports = {
  theme: '@org/xxx', // 或者一个官方主题: '@vuepress/xxx'
}

themeConfig

为当前的主题提供一些配置，这些选项依赖于你正在使用的主题。包含导航栏、侧边栏、搜索框等。

  • 类型: Object
  • 默认值: {}

开发主题

  1. 首先在docs下的.vuepress/theme 目录，接着创建一个 Layout.vue 文件

当前的 .md 文件渲染的内容，可以作为一个独特的全局组件 来使用，你可能想要它显示在页面中的某个地方。

<template>
  <div class="theme-container">
    <Content/>
  </div>
</template>
  1. 然后找到该目录 /node_modules/@vuepress/theme-default
  2. 把 theme-default 中的所有文件复制到刚才的 theme中,注意不是把 theme-default文件夹复制过去
  • 或者使用指令:vuepress eject将默认主题复制到 .vuepress/theme 目录，以供自定义。
  • 现在,你可以自己修改主题了

2. 加入第三方UI框架

  • 集成ElementUI
  • 进入项目根目录,使用命令 yarn add element-ui -S或者npm i element-ui -S
  • 然后在 .vuepress文件夹下的 enhanceApp.js 进行配置,如果没有 enhanceApp.js 文件则新建这个文件
> enhanceApp.js

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
 Vue.use(Element, { size: 'small', zIndex: 3000 });
}

第11章 VuePress 插件

插件通常会为 VuePress 添加全局功能。插件的范围没有限制。

使用插件

你可以通过在 .vuepress/config.js 中做一些配置来使用插件：

module.exports = {
  plugins: [
    require('./my-plugin.js')
  ]
}

使用来自依赖的插件

一个插件可以在以 vuepress-plugin-xxx 的形式发布到 npm，你可以这样使用它：

module.exports = {
  plugins: [ 'vuepress-plugin-xx' ]
}

插件的缩写

如果你的插件名以 vuepress-plugin- 开头，你可以使用缩写来省略这个前缀

module.exports = {
  plugins: [ 'xxx' ]
}
# 和下面等价
module.exports = {
  plugins: [ 'vuepress-plugin-xxx' ]
}
# 这也适用于 Scoped Packages:
module.exports = {
  plugins: [ '@org/vuepress-plugin-xxx', '@vuepress/plugin-xxx' ]
}
等价于:
module.exports = {
  plugins: [ '@org/xxx', '@vuepress/xxx' ]
}

插件的选项

Babel 式

插件可以通过在配置内的数组中封装名称和选项对象来指定选项,由于这种风格和 babeld Plugin/Preset Options 一致，我们称之为"Babel 风格"。

module.exports = {
  plugins: [
    [
      'vuepress-plugin-xxx',
      { /* options */ }
    ]
  ]
}
# 禁止插件
module.exports = {
  plugins: [
    [ 'xxx', false ] // disabled.
  ]
}

对象式

VuePress 也提供了一种更简单的方式来使用来自依赖的插件：

module.exports = {
  plugins: {
    'xxx': { /* options */ }
  }
}
# 禁止插件
module.exports = {
  plugins: {
    'xxx': false // disabled.
  }
}

开发插件

一个插件应该导出一个普通的 JavaScript 对象（样例1），如果插件需要接受配置选项，那么它可以是一个返回对象的函数（样例2），这个函数接受插件的配置选项为第一个参数、包含编译期上下文的 ctx 对象作为第二个参数。一个 VuePress 插件应该是一个 CommonJS 模块，因为 VuePress 插件运行在 Node 端。

# 样例1:
module.exports = {
   // ...
}
# 样例2
module.exports = (options, ctx) => {
   return {
      // ...
   }
}

VuePress 自带的插件

默认主题自带的插件

官方插件

第12章 VuePress 部署

  • 文档放置在项目的 docs 目录中；
  • 使用的是默认的构建输出位置；
  • VuePress 以本地依赖的形式被安装到你的项目中
  • 并且配置了如下的 npm scripts:
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

第二部分 认识 Nuxt

第13章 Nuxt是什么

VuePress 能做的事情，Nuxt 理论上确实能够胜任，但 Nuxt 是为构建应用程序而生的，而 VuePress 则专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性。

第三部分认识 Docsify / Docute

第14章 Docsify / Docute是什么

Docsify / Docute都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择

第四部分 认识 Hexo

第15章 Hexo是什么

Hexo 一直驱动着 Vue 的文档 —— 事实上，在把我们的主站从 Hexo 迁移到 VuePress 之前，我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互，同时，Hexo 的 Markdown 渲染的配置也不是最灵活的。

第五部分 认识 GitBook

第16章 GitBook是什么

GitBook和Vuepress是专注于写文档工具。GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。

第六部分 认识 Jekyll

第17章 Jekyll 是什么

Jekyll 是一个简单的免费的Blog生成工具，类似WordPress。但是和WordPress又有很大的不同，原因是jekyll只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。

第七部分 认识 Hugo

第18章 Hugo是什么

Hugo 是 Go 编写的静态网站生成器，速度快，易用，可配置。Hugo 有一个内容和模板目录，把他们渲染到完全的 HTML 网站。

关注我们

点击下方关注我👇👇👇

avatar
文章
阅读
粉丝
相关推荐
手把手教你从零搭建自己的知识库
9.6k阅读
 · 
89点赞
死月的二零二三总结
7.0k阅读
 · 
73点赞
搭建个人知识库
12k阅读
 · 
140点赞
扩展你的前端知识库，毫无废话！
8.1k阅读
 · 
174点赞
基于大模型 + 知识库的 Code Review 实践
11k阅读
 · 
169点赞
😼使用Next.js搭建一个全栈前端知识库项目
13k阅读
 · 
219点赞
LangChain + ChatGLM2-6B 搭建个人专属知识库
17k阅读
 · 
130点赞
LangChain 入门(一) 搭建本地知识库
5.2k阅读
 · 
12点赞
基于 Quivr 搭建个人专属知识库
7.2k阅读
 · 
52点赞
LangChain + ChatGLM 实现本地知识库问答
16k阅读
 · 
66点赞

友情链接：