Homepage

The first real page we will create together is our homepage.

If you do not have your local Hugo development server running, run the hugo serve command in your Terminal now to start your site running on http://localhost:1313. Make sure you are inside your my-blog folder when you run the command.

cd my-blog
hugo serve

Index.html

To create a homepage, create a file called index.html inside the folder layouts.

Your folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
├── data
├── layouts
|   ├── _default
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Open the index.html file in your code editor and paste the following code:

{{ define "main" }}
  <main>
    <header>
      <h1>{{ .Title }}</h1>
    </header>
    <div>
      {{ range first 5 .Site.RegularPages }}
          {{ .Render "summary" }}
      {{ end }}
    </div>
  </main>
{{ end }}

We will go over what all this means, but first, you should save your file and open your browser to http://localhost:1313 and you should see a white page with a big title saying: My New Hugo Site.

This is the title of your new site and it can be changed by editing the config.toml file in your project.

Go ahead and change the title field in your config.toml file, save your changes and watch your site update in the browser with your new title.

Main Block

Now we see in the snippet on line 1 that we start with {{ define "main" }} and the last line is {{ end }}, everything in between those two declarations will be placed inside the baseof.html main block.

If you do not remember, inside our baseof.html template, we had a block that looked like this: {{ block "main" . }} {{ end }}. So now we know how to inject different templates inside blocks from other templates.

This is how Hugo allows us to not duplicate our code for every page.

Title

In the snippet above we also see {{ .Title }}, this is the title that is taken from your config.toml. Hugo will inject a lot of different data into your templates for you to access and almost all data inside your config.toml can be used for display or logic decisions, such as language choice, or metadata.

Page Range

After the title, we see something new a range block. Range blocks are used for looping over many items. In this case we are looping over all our content pages that are found in the content folder in our project and displaying them as a summary. Right now we don’t have any files in our content folder so this range doesn’t output anything.

To test that this range block is working, we will create our first blog post file!

First blog post

Create a folder called posts inside the content folder. Then, create a file called my-first-post.md.

Your folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Open the file my-first-post.md and paste the following:

---
title: 'My first post'
date: '2020-08-01'
---

Hello world!

This is a markdown file and it is how we will create content and blog posts for our site. We will go into detail about markdown in the next section.

Summary Template

Now you might expect to see your new blog post on your homepage. But you shouldn’t yet, because we haven’t told hugo how to render a summary of a blog post. That is the snippet of {{ .Render "summary" }} inside of our range block.

Create a file called summary.html and place it in the layouts/_default folder.

Your folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   ├── summary.html
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Inside that new summary.html file, paste the following:

<a href="{{ .Permalink }}">
  <div>{{ .Title }}</div>
  <div>{{ .Summary }}</div>
  <div>
    <span>{{ .ReadingTime }} Minutes</span>
    <span>{{ .Date.Format "Jan 2, 2006" }}</span>
    <span>{{ .WordCount }} Words</span>
  </div>
</a>

Now when we go back to our web browser and look at our homepage: we should see a link to our first post we have created.

It’s not very pretty yet, but we will style it later.

If you click the link, you should get a 404 page not found error, and that is because we have not created the layout for showing a full post yet.

Troubleshooting

If you don’t see your changes in your browser. Try stopping your local server by hitting ctrl-c a few times in your terminal. Then start the server up again by typing hugo serve and reload your web browser on localhost:1313. If Hugo decides to host the server on a different port, then you will see that port displayed in your terminal after running hugo serve and you should visit that port in your web browser instead of the default 1313.

If you don’t have the hugo command working at all. Go back to the installation step of this course and make sure you have followed those steps until it is working and you can see the hugo version printed when you run hugo version command in your terminal.