If you like my work, please consider supporting its development.
Have improvements you’d like to see in this guide? File an issue and let me know!

This article is meant to provide users with a concise guide for setting up a Hugo site to use Midnight. This guide replaces the Hugo setup guide, though it refers to Hugo documentation throughout for things not specific to Midnight.

Step 1: Install Dependencies

You will need Hugo and Git.

The following pages of the Hugo documentation are important to creating your site but are not specific to Midnight. Read through at least those pages if you don’t know how Hugo works, then continue to Step 2.

Step 2: Copy the Site Template

Download the Midnight site template onto your computer using the below Git command.

When you use the below commands, be sure to replace the example folder paths with the path to the existing folder that will hold the folder containing the site’s source code (e.g. ~/Documents/websites/). Also replace example.com with the name you want to give the new folder: the domain name of the site is a good candidate.

Linux/Mac OS X/Git Bash for Windows

cd $HOME/hugo-sites/
git clone --depth 1 https://git.shadow53.com/BluestNight/site-template.git example.com
cd example.com
git submodule update --init
rm -rf .git

Windows (Command Prompt/Powershell)

cd %HOMEPATH%/hugo-sites/
git clone --depth 1 https://git.shadow53.com/BluestNight/site-template.git example.com
cd example.com
git submodule update --init
rmdir /S /Q .git

Step 3: Modify the Site’s config.toml

Open the config.toml file in the root of the new folder using your favorite text editor. The file itself is well-documented, so take the time to go through the various options and change what you want. At minimum, change the following values:

  • title
  • baseurl
  • tagline
  • description

Step 4: Add Content

Use the hugo new command to create a new page(s) on your site. For example:

hugo new posts/hello-world.md

You can modify the front matter of the page and add content using Markdown. If you’d like to see what customization Midnight offers per page, see the documentation.

Step 5: Preview Your Site

To preview the changes you’re making to your site, use the following command:

hugo server --disableFastRender --buildDrafts

Building drafts is useful when you are working on new content that you aren’t ready to publish but want to preview.

Step 6: Make More Changes

Midnight offers a lot of features, so take a look through the documentation and see what looks useful to you. Add more pages using hugo new and flesh out your website.

Step 7: Deploy

The Hugo documentation provides some good guides to deploying on various systems. You can also build your site locally and upload the contents of public/ to a server using FTP or another file transfer protocol.

Step 8: Enjoy!

That’s it! You’ve just created a new site using the Midnight theme!