静态网站生成工具备忘

0. 前言

• 全文都非常主观。

• 静态网站生成工具是实现自己博客的一种方式。

  • 特点：功能齐全、选择多、成本低。
  • 一开始配置复杂较复杂，但一旦配置完成后，可专注于内容创作。

• 静态网站生成工具与第三方博客网站（如CSDN/简书/知乎）的比较

  • 首先明确一点，第三方博客网站并不是特别好的文字编辑工具，个人推荐在专门的Markdown编辑器中写内容，然后上传到静态网站/第三方博客中。
  • 个人建议：
    • 如果是希望分享知识，并与大家一起交流的，除非是名人，否则建议使用第三方博客。
    • 如果不是技术人员，同时不想花太多时间在博客本身，建议直接使用第三方博客进行创作。
    • 简而言之，静态网站生成器适合闲着没事干的人（我）。

类别	上手难度	功能	流量	美观度
静态网站生成工具	高	丰富	低	高
第三方博客网站	低	固定	高	低

• 静态网站生成工具与文档工具（如语雀/有道云笔记/为知笔记）的比较
  • 静态网站生成工具有各类主题，其中就包括文档类的，比如 docsify 和 vuepress官方主题。
  • 文档工具的重点在于 团队协作，这一点静态网站生成工具比不了。
  • 个人建议：
    • 如果目标是团队协作，不用想，就用文档工具。
    • 如果目标是内容输出，比如团队内部知识分享。

1. 需求分析

1.1. 博客/文档基本需求

• 静态网站生成的本质就是建立网站，也就是在内容创作的基础上，还需要大量附加功能。
• 下面写一些静态网站工具一般都支持的功能：
  • Markdown 基础语法
    • 一般是自带的，不需要插件。
    • 比如多级标题、有序/无序列表、超链接、文字粗体/斜体、图片显示、代码块、引用块等。
  • Markdown 进阶语法
    • 一般不是自带的，需要插件辅助。
    • 比如生成流程图、数学公式、TaskList。
  • 评论功能
    • 一般都是插件实现。
    • 基本上都要依托于第三方，需要在第三方网站上注册，然后根据什么ID、什么Key来做这些。
    • 我个人比较喜欢两种评论方式：
      • Gitalk：Github自带的功能，评论需要登录Github帐号，用的人比较多。
      • 使用Github的ISSUE来保存评论：
  • 部署功能
    • 一般都是自带的。
    • 工具一般都能在本地运行，通过 localhost:xxxx 在本地浏览器中预览。
    • 发布到公网上最容易的方法是使用 Github Pages，网上教程非常多。这种方法存在的最大问题就是Github不稳定，访问速度有时候非常慢。
  • 站内搜索功能
    • 一般都有自带的（比较弱），也有第三方工具（配置较麻烦，记得有个A开头的用的人很多）。
    • 对于文档不用说了，非常重要。个人博客是很多人记笔记的地方，有站内搜索非常重要。
  • 标签/分类
    • 对文章进行管理的方式主要有这两种。
    • 分类：一般可以有多级分类，每篇文档、每一级文章只对应一个分类，每个级别比如 技术 -> 编程语言 -> Python。
    • 标签：只有单级，但每篇文档能对应多个分类。
    • 一般都自动生成的分类页面、标签页面。

1.2. 网站构建需求

• 首页（HOME）
  • 下图是Vuepress的首页，就是有一些导航栏以及基本介绍。
  • 
• 导航栏（Nav）
  • 就是上图中，图片右上角的内容。
  • 一般有两种形式：
    • 超链接：点击跳转页面。
    • 下拉菜单：移上去后有几个选项，比如选择语言。
  • 一般需要在配置文件中手动设置。
• 侧边栏（Sidebar）
  • 一般用于展示多级文档的多级目录，以及文档内部的结构。
  • 侧边栏的结构可以自动生成（毕竟Markdown保存在本地的多级目录中，那就可以通过这个自动生成侧边栏），但一般都需要手动设置一些内容，自动生成的总还是有一些小问题。
  • 下图是我自己测试 vuepress 时的截图，红色框内的就是侧边栏。
  • 
• SEO（搜索引擎优化）
  • 主要目标就是为了让搜索引擎能更好的搜到我们写的内容。
  • 之前提到过，如果不是名人，个人博客的流量都是很低的。
• 多语言支持
  • 比如原始是英文页面，但也有对应的中文页面。
  • 这个一般用于文档。
• 其他网站常见功能
  • 个人信息：名称、个人头像、联系方式（邮箱、Github、知乎、CSDN、Facebook等）
  • 打赏、友情链接
  • 网站内容分析：比如文章访问次数、预计阅读时间、浏览量
  • 前端功能优化：图片展示增强、返回顶端、文章分页
  • 访问优化：CDN、资源惰性加载、彩虹背景、加载等待动画

2. 常见建站工具概述

• 剩下内容只描述我用过的工具。
  • 用过的：Hexo、Vuepress、Docsify、Gitbook
• 其他常见的
  • Jekyll：老牌工具，Ruby实现
  • Hugo：听说是页面生成速度最快的，有不少人从Hexo转向Hugo

2.1. 总体评价

• 非常主观

• 下面从我个人关注的 文档质量（决定了上手难易程度）、相关资料数量（用户数量决定）、主题数量（美观程度）、插件数量（扩展功能多少）、个人偏

  工具名称	文档质量	相关资料数量	主题数量	插件数量	个人评价
  Hexo	高，中英文非常齐全	多	非常多	多	说不上喜欢，也说不上讨厌，上手容易，功能齐全，不想花太多时间又想建站的首选
  Vuepress	烂，我的体验非常不好	中	多	较多	从我对该工具文档的评价就可以看出，我不太喜欢这工具，但现在用熟了，也还好
  Docsify	非常高	少	少	中	自建文档首选工具，我个人非常喜欢
  Gitbook	中	少	少	少	名头大，但我不喜欢，这个团队的人已经抛弃了CLI，专注于做网站，插件啥的基本上都不更新了

2.2. Hexo

• 刚上手的时候用的就是Hexo，之前就记过这个的笔记，中文资料非常多，大量的教程（都不如官方的好）。
• 特点：有一款非常漂亮、非常全面的主题 Next。
  • 这个主题什么都好，就是用的人太多。
  • 虽然非常漂亮，看用的人多了也比较尴尬，毕竟选择建站就是为了有一些个性化的东西……
  • 这个主题在Github上有三个不同的Repo，百度搜索到的中文文档（好像是0.4.x的版本）已经过时了（部分能用），最新文档（0.7.x或0.8.x）没有中文。
• 后续会写一篇笔记。

2.3. Vuepress

• 这文档，我见过最烂的，极大影响了我的心情。
  • 公正地说，在我入门了之后，现在查文档还是比较方便、清晰的。
  • 但作为前端小白、vuepress入门选手，看到这文档真的无力吐槽，总感觉啥都没说清楚，需要反复推敲、并且稍微尝试下才能搞明白。
• 为了实现某需求，硬着头皮搞了很久，现在差不多算使用入门了，用起来也还行。
• 后续会写一篇笔记。

2.4. Docsify

• 这个可能不能叫做静态网站生成？毕竟只有一个页面，没有Markdown转HTML这一步，都是网页内动态生成的。

• 作为文档形式我非常喜欢。

  • 对于文档，我并不需要有太多的主题供选择，只要清晰、明确就好。Docsify能够满足我的需求。

  • 所有配置都在一个 index.html 中实现。

  • 所有插件都是在 index.html 中导入js/cs实现。

  • 文档清晰，功能齐全，配置方便。

2.5. Gitbook

• 唯一的优势可能是名头比较大？
• 2018年起，CLI工具就不再更新，团队专注于做网站以及相关功能，所以并不推荐使用这个，以后我也不会看这个了。