Serverless Website on AWS part 1

Projects

Serverless Blog Part 1 Building the website.

Today let’s get creative . What I will be explaining here is the whole process of building a Serverless blog using AWS.

What it consist of is FrontEnd hosted on AWS S3 the website in itself as been generated using Hexo a framework written in Node.JS perfect for static blogs.

In order to serve the website with minimal latency I have added CloudFront the CDN service of AWS.

There are additional configuration such as Route53 for the domain name and Lambda for URL redirection.

Why did I do this in the first place ?

  • Because I did not want to have another wordpress blog

  • Because I wanted something simple believe it or not.

  • Because I wanted something that would not cost me a lot.

What to expect form this tutorial ?

I will try to be as detailed as possible in this tutorial so it is going to be a long one. There will be three parts. First I will talk the Hexo Framework and why it makes sense for a blog second how to set up the architecture to host the website and third how to get your website scalable with a proper domain name.

Expectations being set, let’s build our website locally.

The fastest way to create a blog is to use a CMS like Wordpress, this can lead to expensive hosting fees. You also inherit of PHP a language I am not sure anyone should use really.

Meet Hexo. Hexo is a blogging framework which allow you to publish blog posts in the form of Markdown documents. Markdown is a pseudo-code which supports text editor (see all the readme page on Github ? these are markup documents).

Hexo runs on a NodeJS server and can generate all the static files HTML,CSS etc…

To install hexo, as a prerequisites you need to install on your machine Git and npm. Then install hexo-cli https://hexo.io/

npm install hexo-cli -g

hexo init yourwebsite.com

Modify your blog global settings in _config.yml file

# Site
title: #######
subtitle: #######
description: ######
keywords: ######
author: #######
language: 
timezone:

you can start the website with the command:

hexo server

You now have your “Hello World” blog running at the adress
localhost:4000

Just like Wordpress you can change theme (https://hexo.io/themes/).

In Wordpress themes are hosted on a SVN platform which is an old source code versionning system not really flexible.

Here you get all of the beauty of Git for themes management. Browse the hexo Library and git clone the repository in your themes folder.

Then update your main _config.yml to set the new theme

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: YOURTHEME

restart the server

hexo restart 

To write a new article:

hexo new NEWPOSTTITLE

When writing an article you really don’t want to pseudo-code everything yourself so what you can do is use an online markdown generator such as https://stackedit.io/ which give you live HTML preview and access to code to create your article.

More on markdown and why it is amazing here https://www.markdownguide.org/getting-started/

You will note that your articles are in a .md format. When you have all of your articles done you want to generate your website so all the pages are in HTML format.

hexo generate 

(and that is it)

https://hexo.io/docs/generating.html

Our website is ready for deployment. Stay tuned for part two to see how to deploy it to AWS S3.

I have been inspired by this article if you want to complete you knowledge.
https://hackernoon.com/build-a-serverless-production-ready-blog-b1583c0a5ac2