• By: Andrew M McCall
• Published: June 21, 2022

A part of using Hugo is the freedom of making your own theme. In this tutorial, I will explain how to bootstrap a new Hugo theme so you can customize it exactly how you want to. I will go over verifying installation, creating a theme, telling Hugo how to use your new theme, and we walk through the very basics of setting up a theme so that the home page displays.

Need help installing hugo? I have a How To Install Hugo Tutorial that is a part of this Hugo theme tutorial that can help you get started.

This starts in your favorite terminal prompt.

1. Verify your Hugo install with hugo version

2. Verify your working directory with pwd

3. `hugo new site mysite’ 👉 mysite is the name of your project

4. cd mysite

5. hugo new theme mytheme 👉mytheme can be replaced with the name of your theme

6. if you are using VS CODE, then type code . and your project should open up in VS Code.

7. Find your config.toml file. Add an entry theme = "mytheme" where mytheme is the name of the theme you created at the terminal prompt with .

8. At this point we can open a new terminal in the directory and type hugo server. Nothing will serve at this point.

9. Next, I am creating a new file at the base of the content directory called _index.md. This is a markdown file. Markdown is how you create pages in Hugo. It accepts something called frontmatter.

If you want to learn how to write frontmatter I have a post to get you started. Essentially, markdown is a way to pass data into Hugo’s templates. I will explore this more later on in this mini course. Markdown has very simple content but it can be limited in it’s scope.

10. After you create the content file, we need to edit the index.html file which is located under themes/mytheme/layouts. This is where you put in your html. Hugo uses to Golang templating syntax. Variables are wrapped in double-curly braces like this: {{ .Title }}.

11. Next, we can include stylesheets into our templates. To do this, we are the static directory inside of the theme. This is probably the easiest way. hugo strips the /static prefix so when you include your html you do not need to add /static to access the stylesheet.

I highly recommend checking out the following resources to learn more about bootstrapping a Hugo theme.

• Hugo New Theme

• Go Text/Template Package

In the next article, we will start fleshing out our single and list pages and talk about how partials and context work.

This article is part of a series on how to create a Hugo website from scratch. Read the original article here: How To Create A Hugo Website From Scratch: An Overview