Moving to Github Pages with Jekyll and fixing a pagination bug

09 Sep 2018

In an effort to make my online presence less dated and more organized I’ve made jakescruggs.com a real site and not just a forward to a Blogger instance. GitHub pages was so dead simple and free-ish (if you want the source control of your site private then you need to pay for a private plan) that it would be hard not to use it. I’ve been interested in the generating html static sites movement for awhile now and here’s how I saw the choices:

Ultimately the fact that I already had a GitHub private plan, am a longtime Ruby programmer, and I figured the cost of change could safely be deferred until a latter date. I went with GitHub Sites and Jekyll (which is written in Ruby). The other static site generators features and speed didn’t seem compelling.

Generally I’ve been delighted with the ease of conversation from Blogger to GitHub/Jekyll. Blogger has a nice feature whereby you can download all of your text-based content as one xml document. I found a bunch of 6-8 year old Blogger xml to markdown projects that were a bit out of date but this Node based one did a very good job: github.com/palaniraja/blog2md

After that it was just figuring out some minor syntax things and I was pretty much done except for pagination. The state of the GitHub official supported pagination plugin is a bit weird right now. The newer re-write of the standard is not supported by Github pages. Documentation for the old paginate plugin is spotty and slightly different than the newer one. I found that creating a pagination list tricky given the instructions at https://jekyllrb.com/docs/pagination/ which suggested this pagination link producing snippet:

  
    {% if paginator.total_pages > 1 %}
    <div class="pagination">
      {% if paginator.previous_page %}
        <a href="{{ paginator.previous_page_path | relative_url }}">
          &laquo; Prev
        </a>
      {% else %}
        <span>&laquo; Prev</span>
      {% endif %}

      {% for page in (1..paginator.total_pages) %}
        {% if page == paginator.page %}
          <em>{{ page }}</em>
        {% elsif page == 1 %}
          <a href="{{ paginator.previous_page_path | relative_url }}">
            {{ page }}
          </a>
        {% else %}
          <a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">
            {{ page }}
          </a>
        {% endif %}
      {% endfor %}

      {% if paginator.next_page %}
        <a href="{{ paginator.next_page_path | relative_url }}">
          Next &raquo;
        </a>
      {% else %}
        <span>Next &raquo;</span>
      {% endif %}
    </div>
    {% endif %}
  

Unfortunately the first page link is wrong when on any page above 2 so I went with:

  
    {% elsif page == 1 %}
      <a href="{{ site.paginate_path | relative_url | replace: '/page:num', ''  }}">
        {{ page }}
      </a>
    {% else %}
  

Not too terrible to fix. Like I said: The Jekyll/GitHub Sites experience has generally been a delight.

Getting my url to be jakescruggs.com instead of jscruggs.github.io was a snap. I followed the directions to configure Hover and GitHub created a CNAME file for me in the project. I was done in minutes.

I’m currently considering if I want to have comments and if so I’m leaning towards “Staticman.” Staticman is very interesting. It uses javascript to fire comments at a public Staticman API (or a private if you prefer to host your own) that then pushes those comments into your GitHub repo and that, of course, triggers a publish of your site. GitHub as DB.