Gray's grind

How to initialize this blog?

本文讲讲这个博客的搭建过程，基础主题基于Yummy-Jekyll，配置了MathJax作为LaTex渲染器，Gitalk作为评论模块，VSCode作为编辑器。写个中文版本的pipeline。

Jekyll

Jekyll是一个编译静态网页的基于Ruby的工具。具体使用方法请参考官网。

部署点

旧:Github

新建一个*.github.io仓库来作为个人主页的仓库，内部的内容可以直接选择一个比较完善的基础主题进行fork，再进行修改。 Yummy-Jekyll就是一个完全基于Markdown进行编写的博客系统。
修改或创建CNAME来自定义域名（也可以通过*.github.io仓库的设置界面中进行设置），然后域名解析端（域名服务运营商的控制台处）把域名指向*.github.io界面即可。

新:VPS

迁移到了阿里云轻量，迁移到了腾讯云轻量，如何将Github Page迁移到自己的服务器，请参考本文：https://www.grayxu.cn/wiki/transfer-Blog/

MathJax

Github Page只能加载静态界面，所以需要一个第三方的渲染过程，这里就通过 cdn.mathjax.org的web服务获取MathJax服务。

具体过程只需要在Web文件（即需要渲染的html页面）的配置命令中加入对应的脚本，如以下的例子

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

config中常用的有：
TeX-AMS-MML_HTMLorMML.js：允许使用 TeX, LaTeX, 或者 MathML 符号书写公式。如果浏览器支持就处理为MathML，否则就使用Html和Css渲染。
TeX-AMS_HTML.js：允许使用 TeX 或者 LaTeX 符号书写公式。使用Html和Css渲染。
TeX-MML-AM_HTMLorMML.js：允许使用 TeX, LaTeX, MathML,或者 AsciiMath 符号书写公式。如果浏览器支持就处理为MathML，否则就使用Html和Css渲染。

refer : 加载和配置MathJax

in line LaTex

默认的MathJax是不支持行内LaTex语句的，这也是绝大部分教程里对于MathJax配置没有说清楚的一点。在Web文件再中加入以下脚本即可。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js">

Gitalk

博客的评论系统基于Gitalk，在Web界面中加入（或者抽离一个commmet html）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

然后进行初始化

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo', // 建议使用一个新的公开仓库
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

如果基于一个比较完善的博客系统修改的话，就可以有在外部设置界面中进行配置。如mzlogin可供参考。

refer: Gitalk

gitalk gitment这种插件在做评论的时候，因为Github账户权限细分的问题，需要获得比较高的权限，可能有遭到中间人攻击的风险，请保证网络接入点的安全！具体参考https://github.com/imsun/gitment#is-it-safe-to-make-my-client-secret-public

VSCode

使用VSCode进行Markdown的编写过程，VSCode的插件有很强大的自定义功能，基础插件配置如下：

PicGo

PicGo用来解决Markdown插入图片的需求，PicGo默认使用sm.ms作为图床，可以为其配置七牛云、Github、腾讯云COS等。七牛云的性能稍好一些，有一定免费空间，Github可控性强。
举例PicGo使用Github作为图床的配置。

settings.json
"picgo": {
        "path": "" // path to your external configure file, default value is "", which means that vs-picgo will use "picBed" info below. External configure file should be a JSON file containing all the "picBed" info below.
    },
    "picBed": {
        "current": "github", // current image hosting, default value is "smms"
        "github": {
            "repo": "GrayXu/Online-Storage",
            "token": "***",//这是在settings里添加的token来操作Github仓库
            "path": "img/",
            "customUrl": "",//图片的url，会拼接上path，不写的话会展示Wiegithub的raw。
            "branch": "master",
            "username": "GrayXu"
        } // github image hosting
    },
    "picgoPlugins": {}

注：我已经将图床迁移到ucloud的对象存储服务上，并作了其他介质上做了冗余副本备份。

Markdown All in One!

可以支持多种CSS，以及LaTex渲染展示。

Push

个人博客怎么做订阅？

  1. RSS
  2. Webpushr做浏览器推送，在footer上添加一段JS即可。因为是纯静态页面，没办法自动做推送。可以考虑使用他们提供的RESTful API在后端写个脚本。

数据分析

使用Google Analytics，类似地，注册获得API后，在网页上添加JS脚本即可。

Search

    Table of Contents