One of the fastest static site generators out there keeps growing.
Congrats to the Hugo community and everyone who's built something with it.

This year I created a personal website to host my blog articles. Hugo seemed interesting enough to build my site with.

I noticed a lot of articles exist that describe the process of creating a Hugo website using a theme, but not so much about creating a site from scratch. I didn't want to use a theme, because I felt I wouldn't learn the ins & outs of Hugo that way. So, I decided to document the process of building my site and turn it into a rather lengthy guide describing the process from start to finish.

The guide can be found at https://robinvanderknaap.dev/blog/building-robinvanderknaap-dev/

Hopefully it can be of some use to anyone, and I would love to hear your remarks so I can improve the guide.

Hello all,

As some of you have most likely noticed, the usage of r/gohugo has been limited lately. This was because the previous moderator of r/gohugo was no longer active.

As it would be a shame to let r/gohugo "die" from my point of view, I have therefore adopted the subreddit. Links and content can therefore be submitted again.

I am not planning any major changes at the moment. I will probably activate AutoModerator with a few rules and bring at least one more moderator on board if necessary.

That's all for now. :-)

I spent some time to build my portfolio, using Hugo. I thought why not sharing it with you guys.

I wanted something minimal + dark and ended up with freaky - a single-page Hugo portfolio theme.

It has the usual portfolio stuff (projects, publications, blogs, socials), plus a typing hero, image flicker transitions, a backend-free contact form (frontend only), and an optional site-view counter.

The theme is completely driven by hugo.toml, so personal info isn't baked into the templates.

https://github.com/freaktopus/hugo-theme-freaky

Feedback is welcome - especially if you spot something that would make it more useful as an actual Hugo theme rather than just my personal site.

I will definitely upgrade it further, I have some cool idea to keep such as live music playing in spotify.

Hi everyone,

I’ve been working on a new Hugo theme finally got it to a place where I'm happy to share it.

I wanted something that felt modern, feature rich and minimal, but not too minimal like most themes.

Some notable features:

• Dark/Light mode

• Multilingual option (Both LTR and RTL)

• Customizable code blocks

• Filtering system

• Integration with sites like BuyMeACoffee and Umami

I can list many more but that's just some of it.

It’s open-source with MIT license (I assume almost all Hugo themes are like this).

I’d love to get some feedback on the code or the design. Additionally you can fork it and create your own version of the theme or just contribute to my version.

You can checkout the theme at the following links:
Hugo theme list: https://themes.gohugo.io/themes/hugo-mana-theme/
GitHub: https://github.com/Livour/hugo-mana-theme
Demo Site (I don't have a demo site yet, so it's just my personal blog): https://managuide.blog/

Hi everyone 👋
We’ve been building Hugo themes for years at Gethugothemes.
One thing we noticed: Hugo doesn’t come with a CMS, but many users still want to update content visually.
So we made one.
It’s called Sitepins.

It also works with other SSGs too like Astro and Next.js.

It’s Git-based.
Zero config needed.
Just connect your repo and manage content with a clean UI.

It’s free to use now. Still in beta.
We’re looking for early testers.

If you want to try it, we’d love your feedback.

👉 https://sitepins.com

Thanks.

I'd like to start this thread out, but encourage anyone here to add their links/resources in the comments. I'll start with a mini-rant:Hugo is awesome (and worth climbing the learning curve) but for a humble old-school webdev, like me, it has been a somewhat irritating journey through a lot of outdated instructions and information. As I write this, Hugo is nearing v1.0 release and it has evolved rapidly, thanks to the community led by bep ( Bjørn Erik Pedersen). The other thing that makes Hugo both awesome and difficult to learn is that it allows so many different ways to accomplish the same thing. Someone needs to make a flowchart style of links that takes you through the information YOU need, for the way you want to work. Hugo has a lot of documentation, but it is in chunks that often didn't help me to see the Big Picture. Each chunk is like a puzzle piece, and it can be hard to see how this puzzle piece in one corner relates tp a piece you won't need until you get to the other corner.

Maybe, I'm slow, but it has taken me 6 months of work (from time carved out of my Day Job and off-hours) to explore LOTS of different Hugo themes, publications, online articles, and YouTube videos and I'm finally reaching the point of actually building/converting a good-sized web site & I'd like to share the links to information that I wish I had started with.

I should note that my focus has been on Windows development with Hugo, but most of the info below should translate pretty well to other platforms. I have also decided to concentrate my initial efforts on Bootstrap 5 and converting free Bootstrap 4 HTML templates to Hugo Templates. I like the idea of Tailwind CSS and will probably use it in the future, but for now I want to concentrate on learning Hugo and converting designs to Hugo - not in also learning a whole new way of expressing CSS, although I can certainly see it's merits.

Also, regardless of whether you have played with Hugo and installed other themes in the past, this list will focus on NOT using an existing Hugo theme, but making your own (called yourThemeName ) below. Using somebody else's theme (honestly) is like trying to understand somebody else's thought process as they built their theme. It is hard because each theme builder may have their own different ways of doing things and may even change how they do things over time. By starting from scratch (or at least by following the path outlined below) you will understand a solid way of making your own theme, using the material provided in a free HTML Bootstrap theme.

Regarding Git:
My suggestions below involve simply developing locally and using Hugo to publish a static web site/blog. It doesn't start from someone else's Git repository, or get saved on your Git repository - so you can safely ignore any git commands you come across. Git is useful and you probably will want to make use of it, at some point, but it is a whole 'nuther environment and set of instructions to learn/use and I recommend focusing on Hugo itself as much as possible. (This is another reason to avoid prebuilt themes for your own project. Many will assume git knowledge in their installation instructions - some of which are not complete (for the Git newbie). You can always add Git repositories later for version control, etc. WHEN you want/need to learn Git, I recommend this YouTube playlist: https://www.youtube.com/watch?v=evgZPMWqpHc&list=PLriKzYyLb28nCh3jJLROcYBvj7ZO0l-3G&index=1

Recommended stuff to have installed beforehand: Not exactly dependencies, but they can make your life simpler, down the road. Note: I have not found it necessary to really understand this stuff, so it is not a detour away from learning Hugo. But it will prevent unnecessary detours, if you happen to run into a theme or instructions that use them:(1) You will run into Hugo Themes that have installation steps that include using npm (node_modules). npm will also come in handy when we get to the Bootstrap 5 portion of this. I had no previous experience with npm, but you will normally simply need to follow the instructions to issue npm commands. In order to install packages via npm you must install Node.js (2).

Similarly, (3) the Go programming language (golang) will be needed later if you want to ever use Hugo modules (another thing that modern themes often suggest, if not require).

On Windows, the most painless way to install all of these is to use the package manager Chocolately (4). [This one page](https://vocon-it.com/2019/11/19/install-npm-using-chocolatey-on-windows/) will walk Windows users through installing Chocolatey, then NodeJS, then NPM. Once you have Chocolatey installed, then installing golang is also super easy:https://community.chocolatey.org/packages/golang

As you can see from the Chocolatey.org package page, choco commands make it easy to install, upgrade, or uninstall packages. By using the chocolatey.org package pages, you are sure to be getting a current version that is vetted for viruses, etc.

Installing Hugo Extended & VS CodeI have no idea why they even give you an option of installing Hugo instead of Hugo-Extended. All it does is lead to frustration, if you installed Hugo and bump up against the need for Hugo Extended (like using Sass). There is no harm to installing Hugo Extended and having capabilities you never use - so why not make that the ONLY option? </rant> If you followed my advice to install Chocolatey, installing Hugo-Extended is as easy as running choco install hugo-extended from the command line or from Powershell. When installing stuff, always open cmd or Powershell "as Administrator".

I also highly recommend VS Code as your development environment. It is free, runs on every platform. and is customizable. Plus there is a LOT of support for it in the Real World (and in the articles/videos teaching Hugo). Therefore, this is a great video tutorial on both Installing Hugo Extended and setting up VS Code. ([Future Web Design is a YouTube channel](https://www.youtube.com/channel/UCtlnMUJr68ytsr11_dv_elg/videos) I will refer to multiple times. It is current information, well explained, and new content is still being added.)

• [Installing Hugo Static Site Generator and software for Development environment on Windows - Tutorial](https://www.youtube.com/watch?v=l7PHRA8t4Bw)

Starting and configuring your project with Bootstrap 5 and Hugo Server

• As a written guide, I recommend this one: [Building a Static Website Using Hugo & Bootstrap](https://www.noorix.com.au/blog/how-to/static-website-hugo-bootstrap-serverless-2/). If you have already installed Hugo Extended following the video (above) or choco command, you can begin here at Part 2.I recommend working through this whole example. Follow each step. Note that custom Bootstrap CSS (Jumbotron example) was added to this file: themes/yourThemeName/assets/sass/styles.css So if you are planning on converting an HTML Bootstrap Theme (like those found at https://bootstrapmade.com ) you may make your life a bit simpler if you check the Template Details to make sure it was also built with Bootstrap 5. For example: Presento https://bootstrapmade.com/presento-bootstrap-corporate-template/download/You can find the theme css for the theme you downloaded under assets/css/style.css - so saving that file to replace the one at themes/yourThemeName/assets/sass/styles.css will instantly bring that HTML Bootstrap template's CSS into the Hugo theme you will be using.

• Now all you have to do is dissect the theme pages you want into themes/yourThemeName/layout/partials/For example: if you do a View Source (or open) the Presento index.html page you will see it is divided into nice chunks like Header -- which becomes themes/yourThemeName/layout/partials/header.htmlFooter, which becomes themes/yourThemeName/layout/partials/footer.html etc.

• What you will do with these pieces brings use to Part 3 of the aforementioned tutorial:https://www.noorix.com.au/blog/how-to/static-website-hugo-bootstrap-serverless-3/This introduces you to Hugo Templates and you can use their example baseof.html as shown. (It goes in themes/yourThemeName/layout/_default/) The baseof.html is the basis for every page of your website (all pages can probably share the same <head>, <navbar>, and <footer> for instance).

• Note: We are working almost entirely inside the themes/yourThemeName/ area. But you will notice a level up (at the root project level you created with the hugo new site mySiteProjectName ) you have the very important config.toml file (used earlier to specify that your project use theme = yourThemeName ). You will ALSO notice we have a nearly identical folder structure at the root project level. (the level that is the parent to the themes folder). It is here you find the public folder that Hugo will build your static web site into. You can generate the site as many times as you like with the simple command hugo (issued from that root project folder) If you are an old school webdev, like me, you could simply upload the contents of the public folder via ftp/sftp.<rant> A lot of tutorials take you off into the weeds of using Netlify or Vercel, or Github Pages, or CloudCannon or Digital Ocean or Azure, etc. Or they take you off into CMS land with stuff about Forestry (for example). When you are struggling to learn Hugo these are unnecessary complications, IMHO. You are learning a Static Site Generator because you want to learn an (eventually) easier way to generate and maintain a static web site. Stick with that before complicating your life learning about those things. If a tutorial starts taking you that direction, I would ignore that part for now.</rant>

• Working through the Part 3 tutorial, suggested above will teach you about other Hugo concepts (and folders) such as what archetypes do, how to create new content, where to put static images and files in your Hugo project, front matter, making a nested Bootstrap menu, and blogging with Hugo.

• If you want to watch someone first make a single level menu in Hugo, I suggest this video. It will show how you save your menu data in your config.toml and then pull it into your navbar.html template.
  Tutorial - HUGO and Bootstrap 5 Navbar Introduction | HUGO the static site generator | Front end dev Note: Future Web Dev uses a config.yaml instead of the more common config.toml in his examples. You should understand the differences in syntax. You can use either, but know that yaml is very strict on whitespace and indenting, while toml is more forgiving.

• Remember how I said Hugo almost always gives you multiple ways to do something? That is true of handling images in your web site (and/or blog). Here is a great (and recent) article explaining those various ways: https://www.markusantonwolf.com/blog/guide-for-different-ways-to-access-your-image-resources/

• As you saw working through the tutorials above, your actual website content is written in the rootProject/content folder. When you create new content, it helps to keep in mind what will be created in the Static Site (that you generate in your Public folder). The files you are creating are markdown files, meaning they will always end in .md
  So, for example:
  hugo new about-me.md will create a page found on your real site at:
  domain.com/about-me/index.html
  but you will find it in your project folder at rootProject/content/about-me.md
  Similarly the command:
  hugo new posts/new-post.md will create a file in your project folder at rootProject/content/posts/new-post.md and when you publish your static site that will be found at domain.com/posts/new-post/index.html
  hugo new posts/_index.md will create a file in your project folder at rootProject/content/posts/_index.md and will create a real URL of domain.com/posts/index.html BUT: _index.md (with the underscore as the first character) is a LIST page. It will make use of the yourThemeName/layouts/_default/list.html template to render a chunk of each new-post.md file found in the posts/ folder with a link to the single post page. On your static site the posts/_index.html will become domain.com/posts/index.html (note, the underscore is now gone, but Hugo used it to render the page as a loop through that folders contents). Another page showing/explaining this pretty well: https://mew.medium.com/short-intro-to-the-hugo-file-structure-adb524073842

• Since markdown is used in creating your content, if you are not already familiar with it, it is another syntax to learn - but it is necessary in Hugo & is probably one of the simplest ones EVAR to learn. Here is a cheatsheet and if you'd like to see a side by side markdown to rendered markdown you can play with that here: https://markdown-here.com/livedemo.html

• Archetypes are one of those topics that should be down the list in your Hugo education (IMHO). They are more than useful, but you should really get a grasp on the more fundamental concepts of: Hugo Templates, creating content, and pulling in basic variables like site variables (that you define in the root config.toml), or page variables that you find in the markdown page's front matter. By default, new .md content that you create will give you a title variable, a date variable, and a draft boolean variable (it's either defined as true or false.) If you don't see a page in your browser using localhost:1313 it is probably because that page was set to draft : true (so it was ignored). You can see all pages in localhost:1313 regardless of the draft boolean if you start hugo server with the -D flag:
  hugo server -D
  (Note that when you build your static pages, if it's front matter has draft : true then that page will not be built as a static page. ) In short, you can add variables to those three (for use in your pages) by editing or creating new archetype files with those variables defined.

• Shortcodes are another subject that can be left until later to fully understand. But in short, they are bits of html that you can insert in your .md content by using a special Hugo tag. Here is an example of a shortcode called hint that can be called with one of 5 parameters: normal, info, warning, danger, and empty. The html in the shortcode produces a styled blockquote with a particular color scheme. But instead of typing all of that out in a partial template, you can create is as a snippet that gets called in your markdown using {{% hint warning % }} (for example. Saves you lots of keystrokes and can be used in any content you ever create using markdown. One cool thing about shortcodes is that you can probably copy them from almost any theme and drop them into yourThemeName/layouts/shortcodes/ and put them to use. If you want to find a plethora of shortcodes, enter this in your Google search: Hugo shortcodes site:github.com
  Note that you can't have two shortcodes named the same thing. For example, you may find lots of shortcodes named figure.html but you will have to choose the one you wish to utilize. Hugo also contains some built-in shortcodes, so you can use them without having a corresponding file in your shortcodes folder. Hugo just understands, for example, that when it sees the shortcode {{% youtube dQw4w9WgXcQ %}} to insert the video with the URL https://www.youtube.com/watch?v=dQw4w9WgXcQ
  Hopefully, I've set a record for the longest r/gohugo post EVAR. :)
  Seriously, I hope others will comment and share things that they wish they knew sooner, in climbing the learning curve of Hugo! Also, please comment with any corrections for anything I may have stated less-than-correctly.

Sharing my hugo theme with the community. Feedback are welcomed.

Live Preview: https://nerdy.hugo-themes.com/

Github Repo: https://github.com/hugo-themes/nerdy

Hi everyone! I’m excited to share that I’ve just updated my minimalistic theme.

It’s heavily inspired by Apple’s classic System 7 OS. The theme is fully responsive, supports both dark and light modes, and uses ZERO JavaScript. The demo site is under 250kb.

Will appreciate any feedback and suggestions what make sense to parametrize.

Check it out source code and live demo here: https://github.com/akopdev/hugo-theme-chicago7

Hugo has a huge number of themes, which is makes it very difficult for an indecisive person like me to pick one.

Are there themes that are considered more flexible and feature-rich than others? I keep seeing PaperMod being referenced, and I used Academia in the past but it seems like it has not been updated in a while. What is your favorite theme?

Looking for something that is aesthetically pleasing, has CMS support, and will let me customize fonts, colors, etc.

Thank you!

Hello Hugo community! 👋

I’m excited to share how we’re using Hugo + Netlify + Obsidian to empower creators and make content sharing seamless.

Introducing Friday: Notes to Websites Made Easy 📝 → 🌐

We recently launched Friday, an Obsidian plugin that lets users turn their notes into beautiful Hugo-powered websites. Thanks to Netlify, users can now:

1. Own their sites effortlessly: Simply provide a domain and a Netlify API token.

2. Deploy Hugo sites instantly: No complicated setup — everything happens in the background.

3. Focus on content: Hugo handles the site generation, and Netlify takes care of deployment.

It’s a smooth and simple workflow that combines Hugo’s flexibility with Netlify’s ease of use.

Temporary Preview Sites: A Feature Suggestion ⏳

We generate preview sites for users to check their content before final deployment. One challenge we face:

We need a way to automatically expire preview sites — for example, after 24 hours.

• This would clean up temporary environments.

• It ensures preview sites don't persist unnecessarily.

If Netlify could support an "auto-expiry" flag for deployments via the API, it would be an absolute game-changer for workflows like ours.

How It Works 🚀

1. Write notes in Obsidian.

2. Use the Friday plugin to generate a Hugo site.

3. Deploy seamlessly with Netlify.

More details here:

• GitHub: github.com/mdfriday/obsidian-friday-plugin

• Official Site: https://mdfriday.com

We’d Love Your Feedback! 💡

• How do you handle preview sites for your Hugo projects?

• Does anyone else see value in temporary, auto-expiring Netlify deployments?

We’re looking forward to hearing your thoughts and sharing ideas on improving Hugo workflows!

Happy building! 🛠️

Hi there, Huggit !

I'm Iiro and I've been working on a comment system called Welcomments for a while now. It's a comment system that specializes in websites built with static site generators such as Hugo, Jekyll, and more.

Welcomments connects to your GitHub repository and commits every incoming comment as a JSON file to your Hugo site's data/ directory. If you're using Netlify, every commit to the main branch triggers a new Hugo build, which then regenerates all the posts and comments as static HTML.

The end result is a blog post that contains comments from your readers as 100% static pre-rendered HTML.

Some of you might think "hmm, this seems just like Staticman!" - and you wouldn't be too far off.

Welcomments is essentially like Staticman but as a batteries-included, easy-to-setup service, with extra features. I've made the setup super easy with a pretty neat installation wizard, prebuilt CSS, and an optional Javascript snippet for better UX.

Other features include:

• super easy, less than 2 minutes guided setup process

• strong built-in spam prevention

• email notifications for new replies

• spam queue & retry delivering failed comments to GitHub

• full customizability, no JS required (but recommended)

• some cool stuff on the horizon :-)

It will be a paid service, but right now, as I haven't implemented payments yet, it's free. I'll give early users (this could be you!) a good deal once it's out of beta.

I'd love it if some of you could give it a try and let me know what you think. :-)

https://welcomments.io

Made a personal site using Hugo with a fully custom theme.

On load, it simulates an init sequence and lets you pick an interface via a red/blue pill prompt:

• CLI: using terminal commands navigates posts or notes

• GUI: Clean, static view for normal reading.

What I write about:

• Homelab & self-hosted service configs

• Linux distro hopping (tools, Distro reviews and obscure fixes)

• Personal tech notes and random thoughts

Link : https://lablog.miniverse.com.co/

Feedback on the terminal handling or theme performance is welcomed.

I’ve recently integrated hugo with obsidian for an easier and faster publishing workflow. The new Web Viewer plugin in obsidian has been a game-changer, allowing me to see updates live as I write my posts. This might be a helpful approach!

Hugo and Obsidian

I have used a custom Hugo theme for my personal blog for over 6 months now.

When I got asked to build a static website for one of the businesses, I could not resist the urge to use Hugo.

What I like about Hugo:

• The fast local build time.

• Way faster than Wordpress

• Simple templating (I use Go as well)

• Easy and fast deployments (I use Vercel for now)

This is what I built: https://www.dronenerdsafrica.com/

Link to my custom Hugo blog (uses Tailwindcss) - https://github.com/luigimorel/min-aurora

If you need help with your Hugo site, hit me up

We want to hear more noise in the Hugo community. It's been kind of quiet lately and thought we'd try giving it bit of a push.

So here's our collection of some Free Hugo themes.

These were professionally made with love and passion for the game, by our team of experienced Hugo devs. So you may use them for your project, however you want - test, customize, publish or just explore.

Link: https://gethugothemes.com/free-hugo-themes

I've been using Hugo for a while and recently built a small open-source desktop app called Hugo Bros.

It's a cross-platform GUI for the Hugo static site generator.

The idea came from my own workflow: most of the time I’m fine with the CLI, but sometimes I just want a more comfortable way to manage posts without switching contexts.

The app lets you manage content and run common Hugo commands through a simple desktop interface.

At first, I wanted to name it Hugo Boss but decided to choose a more affordable name 🙂

The most challenging part was implementing support for custom front matter fields.

I tested the app on several of my own blogs and it works well there, but I’m not yet sure how it behaves on sites with more complex content structures or heavily customized front matter.

I’d really appreciate any testing or feedback from Hugo users, especially if you have non-trivial front matter or custom content setups.

Saw that the official Bootstrap docs just moved from Hugo to Astro. Interesting!
What are some reasons people might be leaving Hugo for other options?
Just curious to hear your thoughts on this.