First Post And Hugo Setup

Hello And Welcome to the first post

Don’t mind me I’m just testing things out right now. This is where I will put things though, programs, write-ups for CTFs (as long as it’s allowed), and notes while I’m learning.

This site was made using the static site generator Hugo with the Tailbliss theme. The theme is likely going to be changed a few times as I build up the site, and try new things out. For now, it is actually a really nice looking theme, and fits what I need nicely as of now.

The generator, Hugo, was super easy to set up and hasn’t been too difficult to learn, though it’s still early on so that may change. So how does Hugo work?

After that you’ll want to add some pages to your site, but first it’s important to know how Hugo organizes the content and uses files. The quick and dirty of it is, when you create the site it creates the root directory of the site with a few files. Here’s how it looks in my file manager Hugo_directory For the purpose of this, all you need to worry about is the content, static, and archetype directories. The archetypes directory is where the page templates are stored, and the content and static directories are used as the root of the website when you are linking and referencing other files on the site. But, what does that mean really? Here’s an example to help explain what I mean.


Let’s say you had an image you put in the static directory, and a page file in the content directory, if we used the same root directory for the website as we use with the file system, we’d set the link to the image as

![the backup text](/static/image.jpg)

However, since Hugo treats them both as sort of a linked root directory when you run the site all you need to do is

![backup text](/image.jpg)


It doesn’t change that much, but it is important to keep in mind. Given that I am still new to Hugo, keep in mind that everything here should be fact checked and is subject to change as I continue.

Along with the shared base directory that you have with content and static, Hugo will also keep files organized based on the subdirectories you have them stored in inside the content directory, it might do that with static too, I don’t know.

But how do you even add the pages anyways?

It’s very simple, just go ahead and run

Hugo new content new-file.md

This will use the default page style you have the archetype directory to build the new page based on the template. If you want to organize the files based on what they’re for, for example blog posts, you can run

Hugo new content posts/new-post.md

Not only will this add the new file into the post directory inside content, because of how Hugo uses the directories and templates, if you have a posts.md template file inside your archetype directory, the new file will be built based on that template instead of the default.

And it really is that simple. While the dev server is running any changes you make to your site files will be detected by the server, and it will automagically reload the site, letting you see the changes in real time! This is by no means a total guide for everything you need to know, and I expect I made a few mistakes that I will learn about eventually, so if you are interested in using huge I highly recommend visiting their site and reading the official docs and quickstart guide.