Build a Hugo static site in your browser using GitHub Codespaces

Getting started

We’ll first create an empty repository in GitHub. Make sure to add an empty README file, so we can easily open it with codespaces later on.

Hugo

Let’s start with Hugo. We’ll run the commands of the Hugo quick start with one modification. If you prefer to just look at the code, check out the repository.

# create a new site in the root folder, force it because it's not empty
hugo new site . --force
# add ananke theme
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
#set theme
echo >> config.toml
# create new post hugo new posts/my-first-post.md
hugo new posts/my-first-post.md
---
title: 'My First Post'
date: 2021-01-24T12:00:00Z
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in fringilla libero.![Placeholder image](/image.png)
hugo server -D --baseUrl="https://your-github-url" --appendPort=false

Deployments using Netlify

To finish it off we’ll add deployments using Netlify. We’ll follow the Hugo tutorial and create a netlify.toml file in the root directory.

[build]
publish = "public"
command = "hugo --gc --minify"
[context.production.environment]
HUGO_VERSION = "0.80.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[context.split1]
command = "hugo --gc --minify --enableGitInfo"
[context.split1.environment]
HUGO_VERSION = "0.80.0"
HUGO_ENV = "production"
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
[context.deploy-preview.environment]
HUGO_VERSION = "0.80.0"
[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
[context.branch-deploy.environment]
HUGO_VERSION = "0.80.0"
[context.next.environment]
HUGO_ENABLEGITINFO = "true"
baseURL = "https://pensive-sammet-17c943.netlify.app/"
languageCode = "en-us"
title = "Hugo Codespaces Example"
theme = "ananke"

Final words

Codespaces makes it really easy to work on projects hosted on GitHub.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store