Notes about making Github pages beautiful

Introduction
Auto TOC
Highlight
Anchor
Comment

Introduction

More and more people are using Github pages as their personal website. Github pages use Jekyll to render the site. This blog will introduce ways to make your blog more attractive.

Set markdown engine to kramdown in the _config.yml
Use Github style of input

markdown: kramdown
kramdown:
    input: GFM

It is better you can test your pages locally. Please refer to following article.

Testing your GitHub Pages site locally with Jekyll

Auto TOC

Set auto_ids to true for kramdown options.

kramdown:
    auto_ids: true

Then in your blog, you can use following code to generate the toc.

* TOC
{:toc}

* TOC is required. We can also use 1 TOC (ordered list) instead.

Highlight

Set the highlighter to rouge

highlighter: rouge

If you install rougify locally, you can generate the css file yourself. Then include the file in your html file.

rougify style github > style.css

Anchor

Please visit the blog for more details. By default .add() will add h1~5.

<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
    anchors.options = {
      visible: 'always',
      placement: 'right',
      /*icon: '¶'*/
    };
    anchors.add().remove('.intro-header h1').remove('.subheading');
})

Comment

Comment function is one of the common functions. There are certain services that are suitable for static generated pages:

Disqus is blocked in certain areas on the earth; Gitment seems not working and the service is not stable; Gitalk is awesome. Please refer to the detail README of Gitalk.

OAuth apply