Profile Picture

Takahiro Suzuki

Why are you keeping this curiosity door locked?!

Static Website hosting on AWS S3 ~ Part I ~

Generate static Website with HUGO, and deploy to robust AWS S3 with CI/CD pipeline by GitHub and Travis CI

Takahiro Suzuki

2 minutes read

Pic 1

Hello Coder🀩! Welcome to my personal blog! This is my first post. I’m gonna introduce you to the architecture behind this blog, and I would like to show you how easy to create personal blog with HUGO, and how to deploy your static site to AWS S3 based on the best practice.

HUGO

Recently, a lot of static site generator is available for free, like Nuxt.js, GatsbyJS, HUGO, NEXT.js, etc. One of the reasons I decided to go with HUGO is the variety of template, which is much more than others. Hopefully, we don’t need to write HTML & CSS from scratch in order just to create a simple static blog. I would say it is sort of “Reinvent the wheel”. You should spend much more to write your logic instead of stacking with frastrating UI problem. So, let’s dive into HUGO πŸš€πŸš€πŸš€

# Install hugo with homebrew (NOTE: for only mac users)
$ brew install hugo

# Create your project
$ hugo new site [Your Project Name]

# Add Theme
$ cd [Your Project Name]
$ git init
$ git submodule add https://github.com/pacollins/hugo-future-imperfect-slim.git themes/hugo-future-imperfect-slim
$ echo 'theme = "hugo-future-imperfect-slim"' >> config.toml

# Apply Example Style
$ cp -r themes/hugo-future-imperfect-slim/exampleSite/* ./

Now you are ready to start a journey to your own blog. Generally, you wouldn’t need to write HTML, CSS, and Javascript by yourself. Only you have to write is just Markdown. But almost all you might customize a theme with a little bit your own commitment. If so, you can do some minor changes, like an icon, header, content to display, etc. You can also check your page’s UI with following command.

# Add new post
$ hugo new content/blog/my_first_blog.md

# Start a HUGO server
$ hugo server -w

# Generate static file -> /public
$ hugo

Thank you for reading!

In a next post, I’m gonna show you how to deploy a static site generated by HUGO to AWS S3, and apply https to it by using AWS CloudFront. Before moving on to the next post, please make sure you have AWS account and have an IAM account which has FullAccess permission to S3 and CloudFront. See you soon!

Recent posts