Deploy Jekyll site to AWS S3
When I decided to start my personal blog once again I knew that I want to build it based on some static site generator. There is plenty of options depending on which language you would like to use. My weapon of choice if Ruby so Jekyll natural choice.
If it is about Jekyll hosting there is also couple of options. Probably most popular solution are Github pages. But it was not options for me. I decided that I would not go the easy path. I started a little brainstorming … Jekyll generates pure HTML, CSS, JavaScript and sometimes image files. So maybe some small HTTP server would be enough? Sure, but with such solution I need to run HTTP service somewhere. How can I use cloud solutions for this? Bang! I decided to save static files on S3 and serve content directly from Simple Storage Service.
tl;dr
If you prefer to watch video (and you know Polish) over reading this you can watch movie below. It was recorded during my keynote during Trójmiasto Ruby User Group.
Building
Since I decided not to use Github pages then keeping blog source code in Github was no-no. Closest git repository to S3 is AWS CodeCommit. It is like Github, but from Amazon Web Services … Looks very like Github, 10 years ago. But it works, which is enough for me.
I like the idea of serverless
computing. I have
some experience with AWS Lambda
function written in JavaScript and Serverless
framework (terrible name for framework!). Do
you know what is the best with this S3 - Lambda combo? You can setup
your CodeCommit repository to
trigger Lambda function on every
change in your master
branch. Isn’t it nice? Every git push
will
trigger deploy of my blog. Continous
delivery achieved!
Function itself is quite simple, but can be nice exercise for somebody who wants to learn some async JavaScript. The function do something like this:
- Get the list of files changed
- For every changes file get recent content
- Save file on S3 bucket
- Perform some extra (will describe it later)
As I said before: nothing fancy. Of course in such approach in git repository I keep both markdown and HTML files.
Serving
Now it is time to setup some bucket to keep files. Every S3
bucket has option to to become static
webstie
hosting
out of the box. Just check proper option under Management
tab.
From this moment content inside your S3 bucket is available under
domain
http://<your-bucketn-name>.s3-website.<your-aws-region>.amazonaws.com
.
What is worth to mention at this point is when you enabled S3 website
hosting
you can (and you should) set some nice properties for each object in
this bucket. You need to set property named Content-type
. For
example for index.html
you need to set Content-type
to text/html
otherwise browser will render your HTML page as text/plain
. You can
also set any other HTTP header properties this way like for example
Cache-control
. I set this for each file being uploaded to S3 bucket
in my AWS Lambda function.
But of course it is not domain under which your would like to host
your blog. No worry! You can point your domain directly to AWS
S3. GOTCHA alert! You need to name your
exactly the same as your domain. For example my blog is hosted under
mergujmyniktniewola.it and my S3
bucket name is mergujmyniktniewola.it
.
Extras
As I wrote in description of AWS lambda there is some extras. For me extras was to use AWS CloudFront CDN to get full speed. I would not describe CDN configuration here now, maybe in later posts.
In near future I will publish source code of my Lambda function for deploying https://mergujmyniktniewola.it. So far all AWS infrastructure, except those for Serverless, was done by hand in AWS management console. I will try to automate this using some provisioning tool.
Now it is time to sum up. This way of hosting static site is very
cheap in my case. Deploy is blazing fast. In less than second after I
fire up git push
new version of HTML is ready to be served to
readers. I encourage everyone to try use AWS
Lambda and hack some stuff.