Now we will start learning about Hugo, our static site generator. On this page we will learn about the baseof.html template.
What is baseof.html?
Before we explain, I would like you to create a folder called _default inside your layouts folder in your new hugo project called my-blog.
Then inside, create a file called baseof.html
Your project structure should now look like this:
my-blog
βββ archetypes
| βββ default.md
βββ content
βββ data
βββ layouts
| βββ _default
| βββ baseof.html
βββ static
βββ themes
βββ config.toml
Open the new baseof.html file and paste the following snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ block "title" . }}
{{ .Site.Title }}
{{ end }}</title>
</head>
<body>
{{ block "main" . }}
<!-- The part of the page that begins to differ between templates -->
{{ end }}
</body>
</html>
There is a lot of code in this file now and we will explain each part.
The first line: <!DOCTYPE html> is a doc type declaration and it tells the browser what kind of code is inside so the browser knows how to read it and convert it to things users can see on the screen.
The next block is the <html> element, this element should be included on every page and it is the root element. Every other element will be inside this root element.
The next element we see is the <head> element, and this is used for extra meta data about the page.
Head
Elements stored inside the <head> are not visible on screen, but are read by the browser and search engines like Google to index your page.
Title
The head is also used for storing information, such as the page title, by using the <title> element. The text inside the title is used for the text of your tab in your browser. If you look at your web browser window right now and look at the tab at the top, you will see text that describes the page, that is controlled by the title element. If no title is provided, just the page URL is showed instead.
Meta
There are also many different <meta> elements that can be added to your head as well. Some of these meta elements are for your browser to read, and some are for search engines that crawl your site to read.
We will go over meta in more detail later in the optimization part of the course.
Body
The <body> element comes after the <head> and it is the first element that holds all other elements for actually displaying things on the screen.
All the elements that we learned in the previous section about HTML can be placed inside your <body> element and they will be displayed on screen.
Comments
There is also a way to write comments in HTML, using the syntax <!-- your comment here -->, these are available just for developers. You can write anything you want here and the browser and search engines will ignore it. Nobody will see it unless they are looking at the code.
Template Blocks
In a regular HTML file, you write elements and write data inside the elements to display on screen - but what if you have 30 pages or even 1,000 pages on your site? Do we need to write the same code over and over again for each page? Nobody wants to write code when they just want to blog about their favourite new food.
The answer is no. We do not have to write code every time we want to change the content of our site. That is the point of Hugo, to allow us to write HTML Templates and content separately and have Hugo stitch them together seamlessly without effort.
I am sure that you have noticed these strange double curly braces in the snippet above, they look like this: {{ code here }}. These are specific to Hugo, and will allow us to turn these HTML files into more dynamic files that can be used as templates for a lot of different content.
In the above snippet we see our first template syntax called a block. We can use these blocks as placeholders for content. This will allow us to generate an unlimited amount of pages with the exact same layout, but with completely different text and information inside.
In this snippet we defined two blocks and we gave names to them so that we can reference them in other templates so that Hugo knows how to stitch the template together.
Title block
The first block is the title block {{ block "title" . }} and this is inside our <title> element. This will allow us later to make templates for different parts of our blog and use different titles for each template.
Main Block
The main block {{ block "main" . }} is the block used for showing the elements on the screen and this can change from page to page. Anything outside the main block will not change from page to page (unless it is a different block).
Also note that block names like main are arbitrary and you can name these whatever you like.
Do not worry if you do not fully understand blocks yet. We will have more examples on how they are used and it will make more sense.