As a first post on this shiny new blog, I thought a guide on creating and hosting a blog would be appropriate. The idea is to detail the steps I went through in generating this blog and hosting it on AWS. Hopefully, someone else might find this useful.
This blog was created using Hugo, a static site generator written in Go. Content such as this blog post is written in markdown, which hugo converts to static pages and applies the author’s chosen theme.
To get started, you will need to download Hugo for your OS. On Debian/Ubuntu, Hugo can be installed from the default repositories
sudo apt-get install hugo
Instructions on how to install Hugo on other operating systems can be found here.
Generate a new site
Once installed, run the following to create a new website in a directory of your choosing.
hugo new site myblog
This creates a directory called
myblog with the following structure:
ls -al total 36 drwxrwxr-x 8 colman colman 4096 Sep 23 21:12 . drwxr-xr-x 29 colman colman 4096 Sep 23 21:12 .. drwxrwxr-x 2 colman colman 4096 Sep 23 21:12 archetypes -rw-rw-r-- 1 colman colman 82 Sep 23 21:12 config.toml drwxrwxr-x 2 colman colman 4096 Sep 23 21:12 content drwxrwxr-x 2 colman colman 4096 Sep 23 21:12 data drwxrwxr-x 2 colman colman 4096 Sep 23 21:12 layouts drwxrwxr-x 2 colman colman 4096 Sep 23 21:12 static drwxrwxr-x 2 colman colman 4096 Sep 23 21:12 themes
cd myblog/themes git clone https://github.com/vjeantet/hugo-theme-casper casper
And with that done, you’re ready to create your first blog post. As previously mentioned, posts are written in markdown. Create a new blog post as follows.
hugo new post/test-blog-post.md
test-blog-post.md in a text editor. Hugo would have already added some metadata within the file such as
title which is the title of the blog post that will be displayed on the website. Depending on the selected theme, it may be possible to add other metadata fields to specify, for example the author’s avatar, tags and whether sharing should be enabled.
Add the content below to
--- title: "My First Post" date: 2017-09-23T22:08:12+02:00 draft: false --- ### Introduction This is a test post. Here's some html _code_: ```html <!DOCTYPE html> <html> <body> <h1> A heading </h1> </body> </html> ``` > This is another way to display some text. This another text format ```layouts/```
We are almost ready to generate the site. Depending on your chosen theme, it may be necessary to modify
config.toml and add extra fields. This file contains properties and specifications that Hugo uses to generate your site. Required fields can typically be found in the theme’s github or Hugo page. For example, a typical casper theme
config.toml looks like this:
baseURL = "http://example.org/" languageCode = "en-us" title = "My New Hugo Site" paginate = 5 DisqusShortname = "YOUR_SHORT_NAME_HERE" Copyright = "All rights reserved - 2015" canonifyurls = true theme = "casper" [params] description = "Welcome to my website" metadescription = "Used as 'description' meta tag for both home and index pages. If not set, 'description' will be used instead" cover = "images/cover.jpg" author = "author name" authorlocation = "Author, Name" authorwebsite = "http://example.org" authorbio= "my bio" logo = "images/logo.png" googleAnalyticsUserID = "UA-79101-12" # Optional RSS-Link, if not provided it defaults to the standard index.xml RSSLink = "http://feeds.feedburner.com/..." githubName = "githubname" twitterName = "twittername" # facebookName = "" # linkedinName = "" # set true if you are not proud of using Hugo (true will hide the footer note "Proudly published with HUGO.....") hideHUGOSupport = false # Setting a value will load highlight.js and enable syntax highlighting using the style selected. # See https://github.com/isagalaev/highlight.js/tree/master/src/styles for available styles # A preview of above styles can be viewed at https://highlightjs.org/static/demo/ hjsStyle = "default" [params.social] twitter = "your_twitter"
The fields are pretty self explanatory. Cover, author, logo and any other images can be placed in the
static/images directory. Change your
config.toml to contain any required fields for your chosen theme. It should also contain the
To generate the site and host it on a local web server, run the following in the root directory of your website.
http://localhost:1313/ on your browser to view the generated website.
Hosting on AWS S3
Give the website a name and use the example website for now. Click on ‘Create your website’. AWS will create and host your new site for you on a cloudfront URL. Take note of this URL and paste it in your
config.toml as the
Run the following to generate the site content.
This will create a
public directory containing the generated site. Compress the contents of this folder into a single zip file.
cd public zip -R myblog.zip "*"
Upload the zip file to your newly created website on AWS.
You can also register a domain through your website’s management page. Simply click on ‘Register a domain’ and follow the prompts. You may also wish to enable SSL for your new site using Amazon’s certificate manager. See here for a step by step guide.