使用Github与Jekyll生成静态博客

Posted by Hello Bytes on November 17, 2019

使用 Jekyll + Github Pages搭建博客的教程,百度搜索显示近百万个网页,但大体都差不多。鉴于我昨天自己已经设置完成,并成功运转起来了,所以我想就这个过程,总结几点干货经验。

先说配置流程

本文做为一篇指导教程,还是需要先说明一下如何一步一步的,使用Github的Pages功能建设我们的博客。

  1. 在Github上创建一个仓库,仓库名不能乱来,一般就是{您的github用户名}.github.io,比如对于我来说,就是hello-bytes.github.io
  2. 最新版本的Github,默认就是以这个Git工程的master分支作为源,来生成静态网站了(如果需要生成的话)。此时,您直接使用浏览器在master分支下建一个名为index.html的文件,则您已经能通过域名(就是前面取的那个工程名)访问网站了。也就是说,做为一个纯静态的网站,已经搭建好了。如果您要的就是一个单页的博客(或者自己编辑多个html文件,并设置他们之前的跳转),则已经完成。后面的工作就是在线或使用git客户端管理这个仓库的内容。
  3. 基于Ruby编写的Jekyll可以帮助我们生成静态网页,正好Github Pages内置了这个工具,以生成静态网页。为了用上Jekyll,我们只需要组织仓库的文件内容,按要求新建目录与文件即可。每次我们更新这个仓库的内容时,Github Page的后台服务,都会为我们构建静态网页
  4. 如果不会,或者以前没有接触过Ruby或Jekyll,也不要紧,用现成的就好。比如,去这个主题网站上选中题,看上某一个主题,您可以点击主题,然后在详情页里点Homepage这个按钮,即可以看到主题的Github工程,直接下载或克隆这个工程,把内容拷贝到自己的工程中再提交到Github就好。

有些主题比较复杂,用到了Github Page后台不支持的Jekyll插件,这会导致后台编译失败。一般这种主题,需要我们本地安装Jekyll,及其插件,然后本地编译打包生成静态文件。也就是这种主题,没有用到Github Page的后台生成功能,其原理可以参考上面的第二点。本人不太建议使用。判断这种主题的方法也比较简单,看主题仓库的README.md就好。

你可以完全不用在本地安装Jekyll

我觉得这是现在网上教程最大的问题了,所以有的教程一上来就是让安装Ruby,强调版本,然后安装Jekyll,本地查看效果等等。

如果是一个有过Ruby经验的开发人员(最好是还用过一点Jekyll),这都不成问题,对于没有碰过这些内容的网民来说,这个真的是会有点头大。并且说是本地查看效果,确认后再上传。但隔行如隔山,就算是程序员,如果没有碰过这些语言或框架,出了问题还束手无徹。

而且Github Page后台内置了Jekyll工具,我们只需要提交Markdown(或是其它格式的文档),即可以被处理,并按Jekyll的配置生成静态网页。

正如前面第一节介绍的配置流程一样,我们根本就不用在本地安装Jekyll的,除非要修改这个样式。至于说文章内容的样式,我们直接找个Markdown编辑器就好。

Jekyll并不是必须的

如前第一节配置流程里第2点提到了,我们可以直接提交静态HTML文档上去托管,生成静态HTML文档的软件就多了去了,比如如果你要生成一本电子书,可以使用Gitbook这样的软件,在本地处理后,把HTML文档上传到仓库就好。