听说github.io可以用来搭建博客，于是便尝试一波使用Jekyll来搭建静态网站。

之前一拖再拖的工程终于在暑假期间迈出了重大的一步。

本地配置

安装ruby环境和DevKit，这里还比较顺利，网上参考资料也很多。

接下来安装Jekyll，gem install jekyll

然后按照指引尝试启动Jekyll serve，发现缺少bundler

gem install bundler
bundle install

终于顺利地启动了Jekyll serve！

这样一来，就可以在本地调试网页了，使用以下命令，即可在localhost:4000调试页面

jekyll serve

（Jekyll官方的视频tutorial挺好的）

目录简介

一个基本的Jekyll网站的根目录一般如下文件/文件夹

  • _config.yml
  • _drafts
  • _includes
    • footer.html
    • header.html
  • _layouts
    • default.html
    • post.html
  • _posts
  • _site
  • .jekyll-metadate
  • index.html

config.yml用于保存配置数据；drafts用于存放草稿；includes中的文件可以被加载到网站中，便于重用；layout是布局，包裹载文章外部的模板，布局可以载YAML头信息中根据不同文章进行选择；posts放的是文章；site是Jekyll放置转换完成的生成的文件的地方;index.html和其他载根目录下的html, md, textile文件的头部若包含YAML头信息，Jekyll会自动将它们进行转换。

但是刚开始的时候，我的根目录下仅有部分文件夹。像_layout文件夹在选定主题安装位置会有。渲染的时候，网站会先找根目录下的layout，再去找主题默认的那些layout。因此，我们也可以通过自己建立 _layout文件夹来重写网站的布局风格。

自定义风格

默认的主题是minima，它自带的layouts有home, post, page, default

我想把它切换到slate主题，进行了如下操作：

  1. 在Gemfile中主题的部分将gem “minima”, “~>2.0”注释掉，加入gem “jekyll-theme-slate”

  2. bundle install进行主题的安装
  3. 在_config.yml中修改theme条目为jeklly-theme-minimal
  4. Jekyll serve

在最后一步的时候，弹出了warning说找不到post,home等layout。

于是bundle show Jekyll-theme-slate，进入它显示的目录中，发现slate主题的layout只有default这一项，因此找不到post这些layout

接下来，到minima的layout那里将home, post, page都复制了一下，粘贴在我的博客的文件夹的新建的_layouts文件夹中，解决了问题。

或者将原有文章的layout全部修改成default也可以。

写文章

要发布的文章放在_posts文件夹下，文章的命名格式为年-月-日-标题，其中，标题如果包含空格，需要将空格替换成下划线。生成页面的时候，默认情况下，路径是根据这个标题来确定的。文章的YAML头包含title，date，layout等信息，如果需要的话可以自己加上。文章通过来划分摘要和正文。

草稿文章放在_drafts文件夹下。将草稿移到post中的时候，注意修改文件名的格式。

关于markdown的图片问题

举个例子，我将图片icon.png放置在根目录的asset/images文件夹下，正常情况下，会使用如下方法访问这张图片

![](../asset/images/icon.png)

这样子，虽然在markdown编辑器中可以显示，但是开启Jekyll serve之后就发现图片在网站上显示不了。查看命令行中的信息，我们可以看到它寻找这张图片的路径

Jekyll用它的方式去解析markdown中引用的这张图片。

因此，得知它的解析方式之后，相对应地，我们可以修改markdown中插入图片的路径，如下：

![]({{site.url}}/../../../../assets/images/20190828/1.png)

进行目录穿越，然后在最前面加上网站的url，

这样的话，在本地调试的时候以及push到远程分支的时候都能够正常显示图片了（但是在markdown编辑器中还不能显示）

添加评论

评论使用的是gitalk，详细的操作网上都有，可以参见https://github.com/gitalk/gitalk。

目前评论区配置在了page类型的页面，具体来说，仅在about页面进行了配置。刚开始的时候把repo写成了git clone的地址，然后出现了Error，控制台也出现了404的信息。但其实应该只用写repo的名称essieyiu.github.io（阅读理解很重要）

还有就是，注册OAuth的时候，Homepage URL和 Authorization callback URL要填博客的地址。

数学公式显示

使用mathjax，在default.html或者header.html的head标签中间加上

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
                    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
                            });
</script>
<script type="text/javascript"
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

注意要使用https，否则github page将会拒绝访问mathjax的链接 文字和行间数学公式同时出现的时候要注意换行的问题，如果需要换行，在文字的后面加上至少两个空格再加换行符，再接上数学公式，那么文字和数学公式之间就会有换行，注意，书写完数学公式之后也要注意加上\换行

其他

关于连续两个花括号显示问题

在第一个花括号前后使用raw以及endraw，就不会被解析了