Jekyll, WhatATheme, and AWS S3/Cloudfront

This post will guide you to install WhatATheme on your Jekyll site for AWS Domains

Published on January 04, 2022 by Robert McCue

how to setup static site jekyll informative WhatATheme

7 min READ

What is Jekyll?

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories and if you don’t know what GitHub Pages are you can visit on click here or here

Source : Jekyll Docs

To know more and get started with Jekyll you can click here

Jekyll Installation

Jekyll is a Ruby Gem that can be installed on most systems.

Requirements

  • Ruby version 2.5.0 or above, including all development headers (ruby version can be checked by running ruby -v)
  • Ruby Gems (which you can check by running gem -v)
  • GCC and Make

After Installing the Requirements you can follow these guides:

For detailed install instructions have a look at the guide for your operating system.

Creating a new Jekyll site

We can create a new Jekyll site just by a simple command:

jekyll new my-site

Jekyll will create a new directory named as my-site which is customizable (i.e., you can change the name from my-site to anything you want for example jekyll new brutus).

Changing into the Directory

We have to go inside the directory:

cd my-site

Again, my-site is just a random name which is customizable.

Creating a new Jekyll post

We can create a new Jekyll post just by a simple command:

jekyll post "POST_NAME"

OPTIONAL CLEAN

jekyll clean

Building the site and making it available on a local server

bundle exec jekyll serve

Browsing your Jekyll site

Browse to http://localhost:4000/

At was at this point that I realized that I wanted a premade free theme since I am too lazy to make one myself, but am also willing to rip one completely apart to have it suit my needs. Enter WhatATheme.

What is WhatATheme?

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. >You can rebuild the site in many different ways, but the most common way is to run bundle exec jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

WhatATheme is a customizable Jekyll Portfolio theme which supports blogging. You can use this theme in order to create an elegant, fully responsive portfolio which includes

Home Page -

  • A Hero section - A section where you can outsource an image which will work as the background for the particular section; it also will include your name and a tagline which can be easily manipulated via the _config.yml file.
  • An About section - A section where you can include your image and a 60 word paragraph which again you can easily manipulate using the _config.yml file.
  • A Contact section - A section where you can include 3 direct ways to contact
    Ping on Messenger
    Send an Email
    Tweet on Twitter
    The contact section will also include 10 different social media buttons for your audience to follow.
    Facebook, Twitter, Instagram, LinkedIn, GitHub, YouTube, Reddit, Behance, Dribbble & Spotify.

Blog -

The blog includes a horizontal card list where the latest articles are fetched from the _posts folder automatically in top-down format. It also includes an instant search box which matches your query from the title, description & content of your post and shows the result as soon as you type.
The blog card includes

  • Post Title
  • 300 words from the content of the post
  • The publish date
  • The time which will be required to read the post.

Projects -

The Projects page will include all the projects from the projects.yml file which is present in the _data folder.
Projects will be showcased in a card-list format where each card will contain

  • An image related to the project
  • A Project Title
  • A Project Description of about 80 words

Footer -

The footer includes

  • A small about the author widget which show the same Author Image as mentioned in the about section of the Home page which includes Name of the Author, Around 75 words about the author.
  • A more link widget which includes a link to any extra page that you’ve created and a Subscribe via RSS link.
  • A Recent posts widget which will include latest 3 posts.

Extra Features -

WhatATheme comes pre installed with

  • HTML Compressor - It’ll compress all the pages by removing any extra space or blank lines.
  • Google Analytics - A web analytics service offered by Google that tracks and reports website traffic. For more information click here.

  • Disqus - A worldwide blog comment hosting service for web sites and online communities that use a networked platform. For more information about Disqus click here

    ##### For more information about WhatATheme click here.

WhatATheme Installation

Step 1 - Setting up WhatATheme

Step 2 - Making changes via _config.yml

  • Open _config.yml file
  • Fill the available details accordingly
  • Commit the changes

Step 3 - Making changes to html files to remove the GitHub hardcode

  • Open a way to search text in a bunch of files and directories recursively
  • Search for http://localhost:4000 and remove it.
  • Commit the changes
  • You have to do this because the original author of the WhatATheme theme wrote it for GitHub pages - which I do NOT have.
  • Removing the above templated variables will allow you to host your site elsewhere like AWS.

AWS for hosting

Step 1 - Setup S3 bucket for static hosting

Step 2 - Configure Cloudfront

Blog and Publish Workflow

Now that you have installed Jekyll, WhatATheme, and have configured your S3 bucket and/or Cloudfront, here’s the typical workflow now for blogging and publishing.

Step 1 - Create blog post with the blog _layout

cd my-site

jekyll post "POST_NAME"

Again, my-site is just a random name which is customizable.

Step 2 - Write up the blog post

This is arguably the hardest part. Writers block can be real, you know?

Don’t forget that everything is in Markdown (.md)! This is a basic syntax guide.

Step 3 - Preview the post on the site locally

OPTIONAL CLEAN

jekyll clean

bundle exec jekyll serve

Browse to http://localhost:4000/

Step 4 - Publish post aka s3 sync

cd _site

aws s3 sync --dryrun --delete . s3://<my-site>

aws s3 sync --delete . s3://<my-site>