DEV Community

Cover image for How To Build and Host a Hugo Site
Justin Hunter
Justin Hunter

Posted on

How To Build and Host a Hugo Site

Hugo is a static site generator that first launched in 2013. While many static site generators are built in Node.js, Hugo is built using Go. The open source project has gained a ton of traction over the years and currently has over 77,000 stars on Github.

Today, we’re going to build and host a Hugo site using Orbiter. Orbiter is the fastest and easiest way to get static websites online.

Getting Started

Since we’re going to build a site using Hugo and we’re going to host it using Orbiter, you’ll need a few things:

  1. A free account on Orbiter. You can sign up here.
  2. Install Hugo (you may also need to install Homebrew depending on your operating system and how you choose to install Hugo)
  3. A code editor like VSCode or Zed or really anything
  4. Git needs to be installed (this comes on most computers, but here’s a guide if you need it)

That’s it! Now, we can get into creating our Hugo site. Assuming you have already installed Hugo, let’s make open the terminal application on our computer and navigate to the folder where we keep our projects.

Run the following command to initialize a new Hugo project:

hugo new site hugo-orbiter
Enter fullscreen mode Exit fullscreen mode

You can call your site whatever you’d like. I called mine hugo-orbiter.

Now, we need to change into the new project directory. Run this command:

cd hugo-orbiter
Enter fullscreen mode Exit fullscreen mode

Now, we need to install a Hugo theme. We’re going to use Git submodules to do that as it’s recommended in the Hugo quickstart guide. So, run the following command:

git init
Enter fullscreen mode Exit fullscreen mode

Then run:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Enter fullscreen mode Exit fullscreen mode

Now, we need to tell Hugo to use that theme. We can do that with this command:

echo "theme = 'ananke'" >> hugo.toml
Enter fullscreen mode Exit fullscreen mode

To see our site, we need to run a local Hugo server. You can do that with this command:

hugo server
Enter fullscreen mode Exit fullscreen mode

The site will be available in the browser at http://localhost:1313. This is a start, but we want to add some content before we host our site. To do so, you can use Hugo to create the markdown scaffolding of a blog post like this:

hugo new content content/posts/my-first-post.md
Enter fullscreen mode Exit fullscreen mode

This will create a markdown post in the content folder of your project. To see this, open the project in your code editor of choice. Open the content folder, and you’ll see a posts folder inside. Inside that, you’ll see the markdown file. Right now, there’s not much in the file, but we can change that.

Update your markdown file to look like this:

+++
date = '2025-01-20T15:32:29-06:00'
draft = false
title = 'My First Post'
+++

## Hello, Orbiter!

This is a simple example post that will be part of my Hugo site. It will be hosted on [Orbiter](https://orbiter.host). 
Enter fullscreen mode Exit fullscreen mode

Now, we need to tell Hugo to build the site with new files. If your Hugo server is still running, you can stop it with crtl + c. Then, run this command:

hugo server -D
Enter fullscreen mode Exit fullscreen mode

Now, when you visit the site in the browser, you should see your post and can click the read more button. It should look something like this:

CleanShot 2025-01-20 at 15.38.00@2x.png

We have the basics of a site. Let’s see about hosting it on Orbiter now.

Hosting the site

Hosting a Hugo site on Orbiter is as simple as uploading files. Let’s make sure we have the right files to upload though first. Shut down the local Hugo server and run this command:

hugo
Enter fullscreen mode Exit fullscreen mode

This will build your site and output the static pages in a folder called public. That’s the folder we will use to upload to Orbiter.

Log into your Orbiter account and click the Upload Site button. Drag your public folder into the modal or click the Select Folder button then choose your public folder. Give your site a subdomain, and click Create.

upload screen

In a few seconds, your site will be online and ready for you to share with the world! If you’d prefer to work at the command line level, you can also use the Orbiter CLI. The docs can be found here.

And that’s it. You’ve hosted your Hugo site on Orbiter in just a few clicks and spent just a few seconds doing it. Updating your site is just as simple. Click the gear icon next to your site, choose Update Site, and then upload a new version of the public folder.

Conclusion

Hugo is one of the most popular static site generators on the market. Hosting your Hugo sites can be as simple as an upload. Go from generated site to hosted site in seconds. Get started today!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay