Docker + Jeklly + Git pages + Gitalk + MathJx

227 阅读2分钟

Step 1: 安装****docker

参考:docs.docker.com/install/

Step 2: 克隆项目

git clone github.com/clairejing/…

Step 3: 创建****docker-compose.yml

jekyll:    image: jekyll/jekyll:pages    command: jekyll serve --watch    ports:        - 3999:4000    volumes:        - ~/dev/git/archerwq.github.io:/srv/jekyll/

说明:

· jekyll/jekyll:pages 是专门适用于Github Pages的Jekyll镜像

· jekyll serve –watch 启动容器时运行的命令,这个命令会启动Jekyll内置的用于开发环境的Web服务器,–watch参数表示有任何文件变化时自动重新生成网页

· 3999:4000 把容器的4000端口映射到宿主机的3999端口

· ~/dev/git/archerwq.github.io:/srv/jekyll/ 把宿主机上的Jekyll Site所在目录映射到容器的**/srv/jekyll/**目录,Jekyll默认从这个目录读Jekyll Site

Step 4: 启动Docker容器

在****docker-compose.yml所在目录运行 docker-compose up 命令

这样你就可以在本地编辑文章,然后通过访问 http://localhost:3999 动态的看到文章的显示效果。

Step 5: Add gitalk comments plugin

5.1 创建 Github Application

Gitalk 需要一个 Github Application,在这里申请:github.com/settings/ap…

填写下面参数:

点击创建

获取 Client ID 和 Client Secret 填入你的我们 Gitalk 参数中,

在项目的 _config.yml 中填写clientID, clientSecret

坑:Error: Issues are disabled for this repo.

在你的repo/setting裡面, 找features/issues 打勾就可以了

Step6: Add MathJx for Latex 数学公式

使用****MathJax库

MathJax 是一套开源 JavaScript 库,它并不是将公式转化为一个图片,而是在浏览器端通过位置控制、字体、大小来显示一个公式。已经支持 LaTeX、MathML、和 AsciiMath 数学公式。无需过多的设置、无需浏览器插件、无需安装字体。听起来好屌…

那么如何使用呢?
可以在官网上下载所需的 js 库,大约17M,解压后大约有130M(我了个去!)。太大。所以,MathJax 提供了另一种方式,直接使用他们的 CDN,这样就不用上传下载了。

在主题的文件末尾添加下面的代码:

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

现在,就可以在 markdown 中随意调用 LaTex 公式了。

$ 表示行内公式:

? 表示整行公式:

更多使用方法请参考

math.meta.stackexchange.com/questions/5…

参考文献:

1. Install docker

docs.docker.com/install/

2. Git clone github.com/clairejing/…

3. Install Jekyll in docker

archerwq.cn/2017/09/21/…

4. Add gitalk comments plugin

qiubaiying.top/2017/12/19/…

坑:Error: Issues are disabled for this repo.

在你的repo/setting裡面, 找features/issues 打勾就可以了

5. Add MathJx

wuchong.me/blog/2014/0…