Website creation using Github Pages

by Don Mahurin, 2022-09-17

This article gives some simple steps on how to use github pages for your website.

Previously, I used just plain html for openright.org, then to make the pages easier to edit, some were converted to simple markup (textile).

I was aware that my pages were boring, and not pretty. I also knew of github pages, and decided to try it for my website.

Some desired conditions of the pages:

• Stored in git
• Simple markdown
• Easy to edit
• Easy to view locally
• Looks "good/ok"

The first step, creating a github pages project, is easy enough. (https://pages.github.com/). Just create a 'something.github.io' project, and enable github pages.

And by default, one can just put markdown files there (index.md, or README.md), and they show up.

But they do not look like a web page.

For pages, github is using Jekyll. It looked like I needed to set that up more properly.

In experimenting with Jekyll, there were some things to note:

• Jekyll assumed the use of "Front Matter" headers on markup pages to get meta data like title, date ...
• Github pages uses a specific version of Jekyll with a select group of plugins available
• To view locally, the plugins and versions used need to align

"Front Matter" is not in any markdown standard, including Github's. If possible, I wanted to avoid it, and keep with simple markdown.

And we needed a simple way to use the github aligned Jekyll and plugins.

Fast-forwarding to the solution...

The following Gemfile depends on 'github-pages', which depends on the same Jekyll versions and plugins that github uses.

It also includes a plugin which makes front matter optional.

Gemfile

source "https://rubygems.org"

gem "webrick"

gem "jekyll-remote-theme"
gem "jekyll-default-layout"
gem "jekyll-optional-front-matter"

gem "github-pages", group: :jekyll_plugins

The following config file:

• Uses GFM markdown (rather than kramdown)
• Uses Minima theme
• Enables proper functionality without front matter

_config.yml

markdown: GFM

remote_theme: jekyll/minima

minima:
  skin: auto

plugins:
  - jekyll-remote-theme
  - jekyll-optional-front-matter
  - jekyll-default-layout

To setup your site, add the Gemfile and _config.yml above, then add some markdown (index.md or README.md).

To get GFM markdown from existing html pages, you may use:

markdownify | pandoc -f markdown -t gfm

Then run

bundle config set --local path vendor/bundle
bundle install --path vendor/bundle
bundle exec jekyll serve

My pages are likely still boring, though I hope you have learned something new about setting up github/jekyll pages.

{{ content }}
{% for post in site.posts reversed %}
  {% if post.url contains page.url %}

    <div class="site-footer"/>
    <p>{{ post.date | date: "%Y-%m-%d" }}</p>
    <p>{{ post.content }}</p>
  {% endif %}
{% endfor %}

{% if page.comments_id %}
{% include comments.html %}
{% endif %}