Create Jekyll website with Github or Gitlab

Background

Both Github and Gitlab (as well as Bitbucket) allow free static websites.

  • Github Pages: up to 100 GB/month and 1 GB storage for Jekyll-based websites.
  • Gitlab Pages: Up to 1 GB storage with any static site generator

Create Jekyll Github website

The “Minimal Mistakes” Jekyll template is one of numerous fast Jekyll templates that are highly fast. Forget about AMP, you can get almost as fast mobile browsing Google PageSpeed scores with Jekyll and Minimal Mistakes.

  1. Download the latest Minimal Mistakes release.
  2. Extract, then

     mv minimal-mistakes your_github_username.github.io
    
     cd your_github_username.github.io
    
     bundle install
    
  3. On Github/Gitlab, create a new blank repository username.github.io (for Gitlab, username.gitlab.io).
  4. edit _config.yml, change the following lines to fit your needs: title, name, description, url, repository
  5. Connect your new website to Gitlab/Github (swapping gitlab for github as appropriate)

     git init
     git add .
     git commit -am init
     git remote add origin https://github.com/username/username.github.io
     git push -u origin master
    
  6. Future edits will follow the usual

     git commit -am foo
     git push
    

Easy enhancements to Wordpress migrated to Jekyll _posts

remove default “layout: post” from migrated posts

This is useful for the default layout: single in _config.yml below.

sed -i '/layout: post/d' *.html

create static page buttons for all pages

edit _data/navigation.yml

Nice formatting to all your pages and posts

copy/paste into _config.yml these lines (anywhere in file):

defaults:
  -
    scope:
      path: ""

    values:
      layout: "single"
      author_profile: false
      read_time: false
      comments: true
      share: true
      related: true

include: ["_pages"]

Make a beautiful banner:

add to index.html header (between three dashes) the lines:

header:
    overlay_color: "#000"
    overlay_filter: "0.5"
    overlay_image: /assets/images/header.jpg 
excerpt: "text overlaid on banner image"

Get rid of the author freckle on the upper left:

index.html:

author_profile: false

It’s smart to do this in case you later decide a page category should change, without screwing up your search engine results.

_config.yml:

permalink: /:title/

number of posts per archive page

_config.yml:

paginate: 10 # amount of posts to show

Tags:

Categories:

Updated:

Leave a Comment