A static website is one that hosts pages that are not editable. By contrast, a dynamic website has a server side component and is interactive. While blogs are a common use case for static websites, they are also used for single page web applications. 

In my example to create a static website, I am using Jekyll for the static blogging platform, AWS for the hosting infra and GitHub for version control. However if you are serious about blogging, I suggest you go through this site before considering jekyll

How to create a static website

Step 0 - Before you start

You will need the following

  • AWS Account

  • Github Account

  • Computer (Mac in my case) with git and ruby installed

Step 1 - Set up your Development Environment

Install jekyll

Commands

  • gem install jekyll

[Create a new repository for the website in github and clone it]{.ul}

Commands

  • git clone https://github.com/)<replace with your github account>/<repository name>

Build a default Website

Commands

  • jekyll new my-jekyll-site

  • cd my-jekyll-site

  • jekyll serve

You should be able to point to port 4000 on your localhost and view the blogging site that you just created

Step 2 - Understanding Jekyll

When you run the jekyll command, the blog site bits are stored under the _site directory.

You can copy the contents of _site to your target system and render the blog. We will cover this in detail in the later sections

Jekyll supports multiple themes. I am using the minima which is the default theme. Pls refer to the tutorials for using alternate themes in your blog

The main entry point is called _config.yml You can edit title, description and other details to reflect your blog

For each of the markdown, you can provide details such as layout (home, page or posts), permalink (the way you want the URL to appear), categories (keywords associated)

Step 3 - Creating a Jekyll Blog Post

The blogs are created under the _posts directory. Jekyll requires blog post files to be named according to the following format:

`YEAR-MONTH-DAY-title.MARKUP`

Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file.

If you are not comfortable editing the markdown on your computer, there are plenty of tools available. Alternatively, you can write your blog as a doc and convert it into markdown using pandoc tool

Step 4 - Review the Blog Post and Check-In the Code

You can review the blog as it appears by running the command jekyll serve

You can view the contents at Port 4000 through your browser

Now, run git add, commit and push to check-in your new blog site

Step 5 - Upload the files into S3 and test

Create a S3 bucket

It is a good practice to name your S3 bucket the same as your site name. We will cover details of creating your own domain in the next blog

Configure S3 bucket

Configure S3 bucket to be used for static website

By default, the S3 bucket contents are private. Pls go ahead and make the contents of this bucket public

Upload blogs to S3 bucket

Now upload all the contents in the _site directory into the S3 bucket. Once this is successful, you should be able to view your blog by accessing S3 URL