Hugo is a powerful and popular open-source static site generator. It is fast, flexible, and easy to use, making it a great choice for anyone looking to create a static website. In this blog post, we’ll go over how to get started with Hugo, and how to create and add content to your website.
First, you will need to download and install Hugo on your computer.
You can find the latest version of the software on the Hugo website.
Once you have it installed, you can create a new site by running the command hugo new site mysite
, where “mysite” is the name of your new website.
This will create a new directory with the basic file structure for your site.
Next, you will need to choose a theme for your site.
Hugo has a vast library of themes available on the Hugo website.
To apply a theme, simply download the theme and place it in the themes directory of your site.
Once you have done this, you can apply the theme by adding the following line to your config.toml file: theme = "themename"
, where “themename” is the name of the theme you have downloaded.
Once you have your theme in place, you can start creating pages and posts for your website.
To create a new page, use the command hugo new page-name.md
.
This will create a new Markdown file in the content folder.
You can edit this file to add the content of your page.
To create a blog post, use the command hugo new posts/post-name.md
. This will create a new Markdown file in the content/posts directory.
You can then edit this file to add the content of your post.
Hugo uses the front matter of the Markdown files to extract metadata like date and tags.
New pages and posts are marked draft by default.
This to make sure that your posts are not visible before publishing.
If draft = true
in the front matter of a post, it will not be included when you serve the website with hugo server or when building the website with hugo.
Once you have added all of your pages and posts, you can use the command hugo server to serve your site locally. This will allow you to preview your site and make sure that everything is working as expected.
Hugo and related themes support multiple discussion/commenting back-ends. A nice option is Giscus. This commenting system is easy to setup (instructions are clearly written on the giscus website). A downside is that all commenters are required to comment using their GitHub account. However, the upside of this approach is that this severely limits the amount of spam.
Finally, you can use the command hugo
to build your site and generate the static files.
These files can be deployed to a web server or hosting service, to make your site live.
In summary, Hugo is an excellent static site generator that makes it easy to create, organize and deploy a website. Using command line interface and applying a theme with config.toml file, you can create and add static pages and blog posts with the help of Markdown files and their front matter. And with the draft flag, you can keep your work in progress hidden and only visible when ready.
And with this post, my personal website and blog has become powered by Hugo.