Chapter
5
Adding a Blog
When you want to share your thoughts with the world, using your own site is one of the best ways to do it. While there are platforms you can use to do this, choosing to instead host from your own domain offers certain benefits. You can measure its effects, control how the information is presented, and more importantly, build your own brand with content you own. When you publish content elsewhere, you have to opt in to their terms of service, and sometimes hand over control over your content and community.
To simplify the process of hosting your own content, you can use Hugo to add a blog to your site. To create a blog in Hugo, you’ll create a new content type, named “Post”, and you’ll create layouts to support displaying those posts. A lot of what you’ll do in this chapter will build on what you’ve done previously, but you’ll apply it in new ways. In addition to creating the content type, you’ll incorporate a third-party commenting system into your static site, and you’ll implement pagination so you can support future content growth.
A post on a blog has a title, an author, and some content. It might have a summary as well. You might want to put your posts into categories and tag them. You can manage most of this from the front matter of each piece of content much like you did with projects.
Start by creating an archetype for a post so you have a blueprint to follow. Create the file archetypes/posts.md by copying the default archetype file:
| | --- |
| | title: "{{ replace .Name "-" " " | title }}" |
| | date: {{ .Date }} |
| | draft: false |
| | --- |
Then, add an author field and add your name:
| | author: Brian Hogan |
Next, add some default content to this file. Any placeholder text will do, like Lorem Ipsum:[19]
| | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| | tempor incididunt ut labore et dolore magna aliqua. |
| | |
| | <!--more--> |
| | |
| | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| | aliquip ex ea commodo consequat. |
The <!--more--> line lets you specify where the content summary ends. As you learned in Pulling Data from Remote Sources, when you use {{ .Summary }} in a layout, Hugo will pull the summary from the front matter or by generating it from the content. Sometimes that auto-generated summary ends in an awkward place. To control where the summary should end, add <!--more--> to the content.
Save the archetype and use it to generate an initial post to test things out:
| | $ hugo new posts/first-post.md |
| | /Users/brianhogan/portfolio/content/posts/first-post.md created |
Visit http://localhost:1313/posts/ and you’ll see your post listed. This list is generated using the default list layout, which you’ll customize later. Let’s flesh out the layout for an individual post.