PWA GitHub Blog

10 Dec 2018 - Kunal Patil

Create a responsive, mobile-first PWA GitHub Pages blog using Jekyll, Bootstrap 4 and Workbox.

Summary

This post describes the steps I followed to create a GitHub Pages blog from scratch. I started this blog as a simple Jekyll blog site and then added more features incrementally as follows:

Check out source code of this site on my Github Repo.

Develop a Jekyll Site

GitHub Pages support Jekyll. This means pushing to GitHub repo will publish changes to my Jekyll site without needing to use any CI/CD tool to generate static site and upload to GitHub servers. Jekyll is blog-aware and supports content creation using Markdown. This makes it the best choice for one of my key design considerations- Create and Publish on the go.

Follow the step-by-step process to build a Jekyll site referring to this guide. You may skip Collections if you are the only author of your GitHub blog as this may not be required by your blog. But otherwise, do read about it.

Publish Jekyll Site On GitHub Pages:

Publish the local site simply with Git push to your GitHub repository.

Key Design Considerations

Responsive, Mobile First Design Approach

A web page should look the same on any web browser and should look good on any device!

Making Apps Look The Same On Any Browser

Use normalize.css and Modernizr which are the best and easiest ways to normalize browser differences. html5boilerplate combines features of normalize.css and Modernizr.

Making Apps Look Good On Any Device With Responsive Web Design

Responsive web applications are named so as these apps are crafted in a way that they respond and adapt to various screen sizes(view-ports) of different devices(desktops, tablets and phones) and adjust their look (and in many cases their behaviors too) to best suite the devices for viewing and printing purposes.

Responsive Web Design is essentially based on following three principles:

Checkout following video to quickly understand these three principles-

Always design for mobile first.

Mobile first design is well explained in this w3schools article.

This design approach simply means that, for example, change style of page if width gets larger than 768px. If you start with large-screen-design-first approach, it may make it challenging to layout the page contents for a smaller view-port later.

Further Learning

Do check this free Udacity course by Google: Responsive Web Design Fundamentals to learn more about Responsive Web Design Fundamentals.

I chose to use Bootstrap4 front-end toolkit because it supports building responsive, mobile-first web pages with ease. It also has a component library and uses normalize.css internally.

I got started with learning Bootsrap4 and used the Bootstrap4 starter template as base of my Jekyll web application.

Progressive Web App

Read through the introduction to PWA on this link to understand what the Progressive Web Applications are.

I updated my GitHub blog to a PWA using Workbox to make it faster, reliable and engaging. However, I could not really make it engaging using Server Push Notifications due to constraints with GitHub public hosting.

You can always write Service Workers from scratch but a framework like Workbox helps in taking care of many aspects like cache handling policies and so that you can focus on the web application development.

My GitHub blog makes use of Workbox Service Worker to cache JS, CSS, HTML and images making the content delivery faster and make cached content available while the device is offline.

Get Overview and understand Life Cycle of Service Workers here.

Then use the Getting Started guide of Workbox to add routes for caching static content. There are a lot of other features available in Workbox but I have not used it for this Jekyll site.

Use this PWA checklist for a baseline PWA. As per the checklist, I had to add a Web Application Manifest. I used App Manifest Generator to easily generate & download Web Application Manifest and Application Icons.

Check out below online tools that I used to design my site’s logo:

SVG Icon Editor

https://editor.method.ac/

Generate Icons of Various Sizes

https://app-manifest.firebaseapp.com/

Create and Publish on the go

For creating Markdown content on the go I use JotterPad on my Android phone. I have cloned my GitHub repo on my phone using Termux. With Termux we can use all Git commands that we normally use from a PC. Use this guide to configure Git on Termux. Don’t forget to run termux-setup-storage command to be able to access storage of your phone.

SEO

To make sure that the site is optimized for search engines I used the jekyll-feed, jekyll-seo-tag and jekyll-sitemap Jekyll plugins. Just add these plugins in _config.yml of your Jekyll site. Also make sure to add the plugins to Gemfile like:

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.6"
  gem 'jekyll-sitemap'
  gem 'jekyll-seo-tag'
end

Then run bundle update and add Jekyll’s feed_meta and seo tags in the <head> section of the page where you want to insert SEO and feed related content. The SEO plugin will insert the values for title, name, email, description, etc. from the _config.yml file.

The jekyll-sitemap plugin will automatically generate sitemap for the site. This is one of the best practices to upload your sitemap to Google Search Console to increase chances of your site appearing on Google searche results. The sitemap will be available at /sitemap.xml

Refer to this video for more information about Jekyll SEO plugin:

Lighthouse Scan

Add the Lighthouse Chrome Extension to Chrome and generate the report for your site. Do run this on a Chrome Guest Profile that has only Lighthouse extension enabled or ensure that all the other extensions are disabled before running this scan.

Also ensure that you run the scan on the live site and not on localhost.

Checkout the following Lighthouse scan report for my GitHub site: Download Full Lighthouse Report

lighthouse report summary

Disqus Integration

Finally add Disqus comment plug-in to you posts to engage with audience of your site.

Read Other Posts