静态网站生成工具备忘

0. 前言

  • 全文都非常主观。

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

    • 特点:功能齐全、选择多、成本低。
    • 一开始配置复杂较复杂,但一旦配置完成后,可专注于内容创作。
  • 静态网站生成工具与第三方博客网站(如CSDN/简书/知乎)的比较

    • 首先明确一点,第三方博客网站并不是特别好的文字编辑工具,个人推荐在专门的Markdown编辑器中写内容,然后上传到静态网站/第三方博客中。
    • 个人建议:
      • 如果是希望分享知识,并与大家一起交流的,除非是名人,否则建议使用第三方博客。
      • 如果不是技术人员,同时不想花太多时间在博客本身,建议直接使用第三方博客进行创作。
      • 简而言之,静态网站生成器适合闲着没事干的人(我)。
类别上手难度功能流量美观度
静态网站生成工具丰富
第三方博客网站固定
  • 静态网站生成工具与文档工具(如语雀/有道云笔记/为知笔记)的比较
    • 静态网站生成工具有各类主题,其中就包括文档类的,比如 docsifyvuepress官方主题
    • 文档工具的重点在于 团队协作,这一点静态网站生成工具比不了。
    • 个人建议:
      • 如果目标是团队协作,不用想,就用文档工具。
      • 如果目标是内容输出,比如团队内部知识分享。

1. 需求分析

1.1. 博客/文档基本需求

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

1.2. 网站构建需求

  • 首页(HOME)
    • 下图是Vuepress的首页,就是有一些导航栏以及基本介绍。
    • image-20201016001509817
  • 导航栏(Nav)
    • 就是上图中,图片右上角的内容。
    • 一般有两种形式:
      • 超链接:点击跳转页面。
      • 下拉菜单:移上去后有几个选项,比如选择语言。
    • 一般需要在配置文件中手动设置。
  • 侧边栏(Sidebar)
    • 一般用于展示多级文档的多级目录,以及文档内部的结构。
    • 侧边栏的结构可以自动生成(毕竟Markdown保存在本地的多级目录中,那就可以通过这个自动生成侧边栏),但一般都需要手动设置一些内容,自动生成的总还是有一些小问题。
    • 下图是我自己测试 vuepress 时的截图,红色框内的就是侧边栏。
    • image-20201016011747682
  • 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工具就不再更新,团队专注于做网站以及相关功能,所以并不推荐使用这个,以后我也不会看这个了。
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页