Yist's Blog

About one year ago, I knew that I can use GitHub Pages to host my personal website. But then I found it could only host static pages, that is, I can’t run some programs in backend and integrate database into my website. Since I have always wanted to build a blog, I thought GitHub Pages could not meet my need.

One month ago, I accidentally found that GitHub Pages supports Jekyll, which can be used as a static site generator. While Jekyll working as a framework packaged as a rubygem, I don’t have to know anything about how to program in Ruby. What I have to do is to follow the guide and place all files in the specific directories. After the environment has been set up, I can simply type,

jekyll serve

to build the site and browse it locally, which is so easy.

Themes

Jekyll also has an extensive theme system that help us customizing our sites in a quick way. At first I tried using Type-on-Strap as my Jekyll theme because its demo page looks pretty awesome. However, I soon found some small parts were buggy, like the malfunctioned menu icon on mobile browser. Besides, it’s not as customizable as its origin, Type-Theme, so I decided to use type-theme instead.

While Type-on-Strap looks more elegant and Type-Theme is more customizable, I can really apply some features from former to latter. In order to do that, I looked into some folders, such as _layouts, _includes, and _sass, to find out the parts that need to be modified.

To place annoying icons in the footer, I modified _includes/footer.html ¹,

<footer class="site-footer">
    <p class="text">Powered by <a href="https://jekyllrb.com/">Jekyll</a> with <a href="https://github.com/rohanchandra/type-theme">Type Theme</a>
</p>
    <div class="footer-icons">
        <ul>
            { % include icons.html % }
        </ul>
    </div>
</footer>

and put this in _sass/includes/_footer.scss,

.footer-icons {
  list-style: none;

  ul {
    li {
      display: inline;
      font-size: 1.8em;
    }
  }
}

Footnotes