Getting started with Hugo, GitHub, and DigitalOcean

Hugo touts itself as the world’s fastest framework for building websites. It’s open source and claims to make building websites fun again.[^1] Given that, I wanted to take it for a test drive. So I spun up a site and have to admit… it’s pretty fun! I’m still finding my way around, but wanted to share how I got things up and running.

tl;dr: I develop locally, push to GitHub, and then use DigitalOcean’s App Platform to automatically build and deploy the site whenever I push changes to GitHub.

💻 Install Hugo Locally

I use Homebrew as a package manager, which makes installing Hugo locally pretty straightforward. If you’re using Homebrew, you can open up your terminal and run:

For other platforms or package managers, you can refer to Hugo’s installation docs to get up and running. Once installed, you can create a new Hugo site with:

Then you can navigate to the new directory, initialize a new Git repository, and make your first commit:

And with that, you have Hugo installed locally and your first site created. 🎉

🎨 Find and install a theme

Hugo doesn’t come with pre-installed themes out-of-the-box. You’ll need to install or create one. There are quite a few existing themes you can view and choose from in Hugo’s Theme collection. I chose the Paper theme and installed it as a Git submodule:

By installing the theme as a Git submodule, I’m able to manage it as a dependency. If a new version of the theme is released, I can update the copy on my site by updating the theme submodule.

Now we just need to tell Hugo to use that theme. We can do so by editing Hugo’s config file. By default, that will be . Since I am using the Paper theme, I’ll specify that in like so:

And then we can commit our changes:

⚠️ Note: DigitalOcean looks for , , or to build Hugo. I renamed to to properly build the site.

📖 Create your first page

With the theme installed, we can now take it for a test drive by building the site locally:

You can open your browser and navigate to the site (hugo new+++drafttruefalse/posts/cmdc-D-D--buildDraftsdraftfalsepublic.hugobuild.lock.gitignoreAutodeploybaseURLconfig.tomlbaseURLbaseURLconfig.tomlconfig.toml that sets some of the basics:

And here is a snippet that includes some of Paper’s theme options:

Experimenting with these configuration settings can be a helpful way to familiarize yourself with the basic concepts of working with Hugo. I’ll dig into more as I continue to experiment and learn my way around. At the very least, I can say that it is fun and the framework is indeed pretty fast!

[^1]: “Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.”_ https://gohugo.io

[^2]: This is an affiliate link that will give you credit with DigitalOcean. If you decide to use it, I’ll receive credit to my DigitalOcean account.

[^3]: You will need to set/modify your GitHub permissions for DigitalOcean.