Build Blog System

1 minute read

Build Blog System by Github pages and jekyll

  1. markdown
    1. github use GFM[GitHub Flavored Markdown]
      1. resizing image only support by inner html code like<img src="src", alt="", weight=""></img>
    2. kramdown
      1. resizing image by ![](){height:"100px"}
    3. hackmd
      1. resizing image by ![](src... =100x100)
    4. markdownlint MD033 does not recommand for inner html
    5. finily I disable MD033 in vscode by setting

      "markdownlint.config": {
          "MD033": false


  • use _includes\head\custom.html<head>to overload katex render
    • cause as a jekyll theme minimal-mistakes-jekyll, you can override any _includes file by your own file with the same name
  • use limjh16/jekyll-action-ts@v2 to build site file
    • this component require Gemfile.lock
    • cause 7492062
    • so if you need update your Gemfile for any reason, before git push, you’d better run

      bundle lock --update --add-platform x86_64-linux --remove-platform x64-mingw32


  • use peaceiris/actions-gh-pages@v3 to push file to site
    • nothing need talk about
  • katex
    • setting with js
    document.addEventListener("DOMContentLoaded", function () {
        renderMathInElement(document.body, {
          delimiters: [
            { left: "$$", right: "$$", display: true },
            { left: "$", right: "$", display: false },
    • The display here mean css style block, if change it to true, the formular will be center and block there.
  • gem “therubyracer”

Jekyll Theme

  • config it at _config.yml
    • theme: minimal-mistakes-jekyll
  • add dependency at Gemfile
  • there’s other theme you can use
    • dash
    • select from github pages