Stepan's technical notes

Notes about my journey to the Cloud

17 Nov 2019

Hello, I'm Stepan's new blog built with Hugo and AWS Amplify Console!

For the last couple of months, I was thinking of where to move my technical or semi-technical writings. I’ve come to the conclusion that the only rational decision would be my own blog hosted by myself (somewhere in the Cloud).

From the past, I knew that I really don’t want to use WordPress or any similar as such tools represent an unprecedented waste of computing resources! Hence I’ve decided that I will use some static site generator and the site will be hosted on s3 bucket as this is a pretty common setup for hosting frontend applications.

But then, Heitor Lessa from AWS pointed out that setup with s3 is perhaps a bit overcomplicated.

I’m always willing to experiment with some new technology so … challenge accepted (even though literally no one was challenging my setup 😄).

Enter the AWS Amplify Console

Now, let’s just quicly go through the whole process in AWS Amplify Console. Here I expect that you already have some Hugo site prepared in your Git repository. So let’s just connect a new App from the Amplify Console and select git provider of your choice.

select git provider

In the next step, AWS Amplify Console will authorize to your git provider (unless you are using AWS CodeCommit).

select git project and branch

The next section of the wizard is responsible for the build configuration. Translated to the human speech, here you can configure the commands needed for the rendering of your static website.

As you can see, AWS Amplify Console is able to automatically detect the frontend engine you are using. AWS Amplify Console natively supports many static site generators such as Jekyll or VuePress. But don’t worry if you are using something different, the build settings are fully customizable and you can even use your own build image!

configure build setting

Then we just need to save all the settings and run the first iteration of the deployment process. The whole process is really quick, it takes 2 minutes maximum and in the end, you’ll receive URL of the generated website.

build

For the next version of your website, you just need to push changes to the master repository and AWS Amplify Console will do the rest.

Other useful perks

So far I must say that I’m really impressed by the simplicity of the whole setup. But are there any other advantages of this setup? Absolutely!

For instance, AWS Amplify Console site can be configured with your custom domain.

domain name

You can set your own redirects, authentication and AWS Amplify Console even provisions TLS certificates for you! But we are still not at the end of the useful features, the absolutely coolest feature is the preview of your changes. With this feature, you can create feature branches for your new posts and review them before they go to production.

preview

When you are done with your changes, you can just merge Pull Request and AWS Amplify Console will update the live version of your web.

Wrap

I was looking for such a product for a very long time. In my previous job, we were using pretty complex Jenkins pipelines which were doing pretty much the same (for react apps) but still, there was one major difference: these pipelines were not really friendly for developers. I really wish I knew this great product before, this can save so much time so in the end, people can focus on something that matters.

I really wish I knew this great product before, this can save so much time so in the end, people can focus on something that matters.

What’s more, AWS Amplify Console resources can be provisioned via CloudFormation so you can even streamline the provisioning of your sites!

comments powered by Disqus