Creating the Post’s Layout

The page for an individual post is bare because it’s using the default single page layout. Like with project pages, there’s information in each post’s front matter you can use on the page. To do that, create a new single page layout for posts.

Create the directory themes/basic/layouts/posts/ to hold the layout. You can use your editor or use the following command in your terminal:

Then create the file themes/basic/layouts/posts/single.html, which will hold the layout for an individual post.

Create the main content block and place the title and post content in their own sectioning elements with classes; this will help you style them later:

Within the header section, add the byline, which will contain the publication date and author name. The .Date field will fetch the date, and the .Format function will let you format it in a similar fashion to how you formatted the date in the footer.

Many blogs will display the amount of time it takes to read the content at the top of an article. Let’s add that to our blog page template.

The average person reads anywhere from 200 to 250 words per minute^[20] depending on several factors. If you count the number of words in a page’s content and divide it by 200, you’ll get a conservative estimate of the number of minutes it’ll take to read your content.

Hugo has built-in functions for counting words and doing math, so in your template, add the following code to your byline to determine and display the reading time:

To make sure this works, add a significant amount of content to your first blog post so there’s some text to count.

Save the file and visit http://localhost:1313/posts/first-post.md. The author, date, and reading time display above the post:

As you build out more content, you’ll probably want to organize and group it so it’s easier for people to find.

Joe asks:

Does Hugo Support Syntax Highlighting for Code?

If you’re publishing posts, you might want to include snippets of code from time to time. Hugo supports syntax highlighting using a library named Chroma,^[21] which is compatible with the popular Pygments^[22] syntax highlighter.

To configure this, tell Hugo you want it to use Pygments-style classes when it highlights your code. Add this line to config.toml:

​	pygmentsUseClasses = ​true​

Then, generate a stylesheet to highlight your code using one of the available Chroma styles:^[23]

​	​$ ​​hugo​​ ​​gen​​ ​​chromastyles​​ ​​--style=github​​ ​​>​​ ​​syntax.css​

Add the syntax.css style to your head.html partial.

Now, when you write your posts, use code fences and specify the appropriate language:

​	​```javascript​
​	​let x = 25;​
​	​let y = 30;​
​	​```​

Hugo will apply the styles to your code.