TL;DR

Requirements

website hostable on S3
blog functionality with tags
fully in JavaScript

Used Technology and Services

AWS Route 53 for hosted zones
AWS CloudFront for SSL certificate management
Gatsby JS as the framework

Recently, I developed a serious interest in learning JavaScript. A simple blog project is a great way to start my learning I thought. This post could be useful for a fellow JavaScript or front-end newbie to get an overview and high-level understanding of the used tech, plus an interest boost to learn CSS Grid.

Hosting

I won some AWS credit after attending my first hackathon in Stirling, where my team has won the AWS category prize. Of course, I first blew all my credit on my first domain which now proudly points to my first website ever deployed. Naturally, it's my dog's website. Note her logo that I built with pure CSS. Much technology. Very UI. Wow... I bought this domain name through AWS Route53. In case you didn't know and assumed that their S3 buckets can only hold data. They are actually capable to host static websites, too. Simply go to your bucket that contains your website content and set its property to static website hosting. Also, don't forget to set the bucket permissions to allow public access. In Route53, if you want to link a domain name to the bucket(s), you would go to the hosted zones to then set the alias records to target your S3 bucket(s). I referred to this tutorial.

Blog Engine

My initial requirements were something like this: I wanted to build a static website which I can host on AWS S3. The website should have a blog which I wanted to be easily editable without a content management system. I didn't care much about the DB so I was happy to adjust to any framework I find. I also wanted to start with a project that was simple, as up until now, I've only been learning JS for about two months. So I decided to write it purely in JavaScript. Gatsby.js is a neat and light-weight JavaScript framework that pretty much fulfils all of the above criteria. The cool thing is that you can just store data in almost any format that you want. The blogs pages for example are written in Markdown. With Gatsby, I can access data from those Markdown files with GraphQL queries and use it to render this blog post for example. If you are a recent beginner of learning JavaScript and want to play around with a small website project, I highly suggest Gatsby. Some of the Gatsby documentation even included tutorials specifically for adding functionality to a Gatsby-powered blog if this is what you're looking for!

Front-end

For the front-end, I decided to give React a try since it's so hyped. I only heard good things about it, especially from my tech lead at work. Previously, I've been doing a short online course on Codeschool which gave me a quick intro to React and JSX. This was enough to build the simple front-end of my website. It's quite easy on this level! I am interested to try out some stuff with React and Redux though in the future because I hear this is making matters significantly trickier to deal with.

CSS Grid and Flexbox

At work, I have to use Sass regularly. However, due to browser limitations, we sometimes cannot use the newest technology. I am mainly referring to CSS Grid. The browser-support should get better in the future as it's quite new at this point. I've frequently used Flex before and was already impressed by the simplicity it brings to working at front-end. I think a lot of people think that Flex is supposed to replace Grid. This is not true as they were created with different intentions. CSS Flex only lets us have control in a one-dimensional way, either vertically or horizontally, grid-direction: row and column, respectively. Grid however, as the name suggests, lets us define two-dimensional areas on which we can place elements. I would describe it as a tool with which you can define the high-level layout of a page. Everything you see, every element is on some sort of grid area. Open the inspector tools to take a look at it. If you are not familiar with grid areas - here is one way how you define a single column layout:

.example-container {
    grid-template-areas: 
     "first_row_a"
     "second_row_a"
     "third_row_a";
}

As opposed to this example that defines two columns:

.example-container {
    grid-template-areas: 
     "first_row_a first_row_b"
     "second_row_a second_row_b"
     "third_row_a third_row_b";
}

This snippet below shows the default mobile grid for my index page for example.

.index-page-container {
    grid-template-areas: 
     "content"
     "picture"
     "self-description";
}

On it, child elements can be placed accordingly. Below, I am demonstrating how the the img element with class portrait-picture is placed on the middle row, called "picture".

.portrait-picture {
    grid-area: "picture"
}

The nice thing about grids is that they make it easy to control the device-specific layouts. Now that I have my default mobile grid and placed my elements on it, I can now specify a separate grid template for desktop and tablet using a media query.

@include breakpoint(medium) {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
        "content picture"
        "content self-description";
    }

In case you're wondering what the template columns line does: In CSS Grid, you can not only define the number of columns and rows but also their width and height.

grid-template-columns: 2fr 1fr;

In this case, I am defining two columns and their width. I want the first column to be two fractions wider than the second one, or in other words, two-thirds of the entire row. CSS Flexbox is still amazing of course. I use it everywhere for controlling the alignment and justification of the elements that I've placed on the grids. Together though, Flex and Grid are like Jay-Z and Beyoncé. Quite awesome on their own but simply unbeatable together. They are so amazing that I pretty much just added this blog post as an homage.

If you're curious, you can take a look at the GitHub repo for this site here.

Technologies that power my site