Creating a New Hugo Blog Post for blog.chrismitchellonline.com

Posting to a Hugo blog is fairly straightforward once you have the tools in place. In this article I’m going to demonstrate how I post a new blog post for blog.chrismitchellonline.com

Prerequisits: I already have a blog site up and running using Hugo, along with hosting using Amazon Web Services S3. For more information read more of my blog posts here: blog.chrismitchellonline.com

New Hugo Page

First I will need a new page for my blog post. From my CLI I am going to change to my blog directory and run

hugo new posts/new-hugo-blog-post.md

After running this command Hugo will create a new .md file for me /content/posts/new-hugo-blog-post.md. This creates a simple starter file that I can now add my content too.

Teaser Paragraph

Each new blog post entry should start with a teaser paragraph that is shown on the homepage. This paragraph should end with <!–more–> tag to seperate content from the teaser paragraph. Any other content that is part of your post will show on the detail page.

Create the Content

Edit the new blog post page, using markdown. A great cheatsheet for writing markdown can be found here: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Preview and Publish Post

Once the post is ready, you can preview with hugo serve -D. This will generate a site to preview in a browser, you can visit the page at http://localhost1313.

NOTE the -D flag: This will tell Hugo to include draft posts when it builds the site. When generating new blog posts with Hugo, posts are set to draft: true by default. When you are ready to publish your post, change this to draft: false.

Publish Blog Post

Once the content is ready to go, change draft to true as mentioned, and publish to our live domain. The site blog.chrismitchellonline.com is hosted using Amazon Web Services S3 bucket web hosting and Cloudfront CDN. To publish to the live site, I need to generate the files by simply running hugo from the CLI:

$ hugo

                | EN   
+------------------+-----+
Pages            |  28  
Paginator pages  |   4  
Non-page files   |   4  
Static files     | 125  
Processed images |   0  
Aliases          |   2  
Sitemaps         |   1  
Cleaned          |   0  

Now I can push these files to S3, using the following AWS CLI command:

aws s3 sync public/ s3://blog.chrismitchellonline.com/ --delete 

This command will delete all of the files that are in the S3 bucket, then upload the site that Hugo generated.

I should also mention that we use NPM to manage packages, so I added the aws s3 sync command to my package.json like this:

"scripts": {
"deploy": "aws s3 sync public/ s3://blog.chrismitchellonline.com/ --delete"
...
}

I can run npm run deploy to publish my blog.

In Closing

This was a high level look of how to generate and publish new content for blog.chrismitchellonline.com. If you are interested in the details of hosting, Hugo, or any other website details Email me or post your questions in the comments below.