Written By: karthik.

The file structure of a hugo generated site.

Hello there my code wizards, hope you enjoyed my first post and now lets move on to my second one (i need to stop counting my blog posts :/ ). So after reading my first post you might now be wondering what all the files in the root folder do and whats the actual use of them? Today we are just going to discuss that.So buckle up again.

What files are we talking about?

Hugo like every SSG(Static site generator) has a pretty straight forward file structure and it looks something like this:

  • your-site-name:
    • –> archetypes
    • –> config.toml
    • –> content
    • –> data
    • –> layout
    • –> static
    • –> themes

We will discuss each of them below.

Archetypes:

so when ever you create a new post using the new command,

hugo new posts/your-post-name.md

the archetypes decide what to put on the front matter of your posts.By default they have date and title of your post, something like this.

---
Title: "My Post"
Date: date: 2050-03-18T15:37:44+05:30
---

So now we can define archetypes as content template files, cause they provide a template for your content information. The archetypes dir in your site’s root folder contains some pre configured front matter and it also defines your website’s content type, so when ever you use the new command this information is used to develop and render your page. If you have any archetype files in your theme folder then you probably want to delete the archetypes dir in the root folder of your site.

Config.toml:

You’ll be interacting a lot with this one, because this file is what defines the whole structure of your site. Hugo uses the config.toml as the default configuration file for your site. The config file can also be of the .yaml or .json extension so check your config file accordingly. Whatever your site uses like images, Customcss files or js files everything needs to be listed in the config file, even the base url, the theme that your site uses reside in this file. You can also have parameters in the config file and then use these parameters else where in your html files.

Data:

As the name suggests the data folder is used whenever your site requires some additional information or data when generating it. NOTE: Data files are never used to create standalone pages rather they are used in order to support the existing pages. Hugo supports loading data from YAML,JSON and TOML files located in the data directory in the root of your hugo project.

Layouts:

This directory provides all the necessary templates in the form of .html pages that of course specify how your site works and looks. These templates include list pages,single pages,your homepage,partials and what not (that means many more).

Static:

Stores all the static content: images, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.

And finally the content files contains all the markdown files or posts that are rendered on to your site as html files.The theme’s folder contains all the contents related to your downloaded theme or custom created theme.

If you want much detailed information on the file structure and what these files do, check the HUGO DOCS.

Until the next post, PEACE ;)