How to Create, Automate & Deploy a Static Blog Using Publii, AWS(S3, Route53, CloudFront), Terraform & NameCheap Part 3

On this part I will show you how to actually create the content for your blog using Publii as the CMS for your website.

Some of the readers might be asking themselves why Publii was chosen as the CMS. To start with, Publii is an open source static site generator so that helps keeps our costs low and has a community of people maintaining it freely. Additionally, it's a static site generator which will make the blog easy & fast to download since there is no backend to take care of. Not everything is rosy colored though. Due to it being a new open source project, its community is small when compared to others and themes available for it are limited unless you want to create your own. So keep that in mind when using it. Now unto our tutorial!

The first step will be to download Publii in itself using this link: Get Publii.

Once you download and start the application  you should see something similar to this:

Ignore the Import Knowledge there. Thats what I am using to write this blog. You only have to click Add new website and you should now see:

Just input your website name and your name or the name of main author for now who will write in the blog. Once you create your website you should see a screen like the one below:

Once you see something like the above image we are ready to start blogging! The first thing we have to do is to go to Site settings and choose a theme. Publii already comes with one free theme and it's the default one in the Site settings. If you want to change it you can check their website for more themes. Be aware that of the themes are free and some others are not. Once you select the default theme or a new one you can hit the preview changes button on the bottom left of Publii; you should see something similar to the below picture:

Very basic layout for a blog. Lets' make the default theme look better by adding a hero image which will be located at the top big square where "welcome to my blog :)" is. For this, I will use images from Unsplash.com  which is a very good website to find free high quality photos for most things. To be able to upload the hero image you will go to the Theme in the left panel of Publii and clicking on NavBar on custom settings.

After you do that hit hero section, find Image and upload it to the Publii application. 

Now lets see how it looks:

Looks good! Now that we have the Hero image for it lets make our first blog post. To make a blog post in Publii we just go to Posts in the left pane Publii options. Use any of the editors you like or feel comfortable working on.  For this example I used a Lorem ipsum generator to fill in the blog content for website.

After you create your first blog, hit save and then "back to posts". Once you can see the blog header, click on "Preview my changes" and you should see something similar to:

And once you click on the blog you should see the content of it use the Hero image.

After this thats pretty much it as far as creating content. We have not published our content to the website yet. We will do that now.

Pushing website updated to AWS.

Now that you have your blog and website layout figured out, it's time to upload it to the internet. First, click on server on the left side of the Publii Dashboard and choose AWS.

After you click on AWS you should see a a few boxes to fill out your log in credentials for AWS. I would suggest to create a Publii user in your AWS account. This will make it more secure by separating the access from your user to another that only has what is needed to upload the website. In this Case S3 write access to the specific website bucket is the only permission needed.

Besure to choose HTTPS:// as the prefix to the URL and to write the URL correctly. Then you input your AWS PUblii user Access ID and Secret Key, the correct bucket name and region where that bucket is located. Make sure ACL is public read too.

After that you can test your connection to make sure everything is correct.

And then if you made all of your changes then you just hit "Sync your website" and thats it! your website should be instantly available to everyone!

Future Things to do:

  • Make the website throughly CI/CD with Github without using Github pages
  • Make it work with multiple bloggers.