This post will give you step by step instructions on how to set up a static website, like this one, and host it for free.

Technologies I used

  • Hugo
  • Netlify
  • Github

Setup

  • Make sure you have Hugo installed
    • Mac:
      • brew install hugo
    • Linux:
      • sudo apt-get install hugo
  • If you do not already have a Netlify account, create one here

Using hugo

  • Create a new project for your website
    • hugo new site my-site
  • Add this new site to a Github repo
    • cd my-site
    • git init -b main
    • git add .
    • git commit -m "initial commit"
    • git remote add origin <REMOTE_URL>
    • git remote -v
    • git push --set-upstream origin main
  • Pick out a hugo theme you like from here and start using that theme. I used hugo-sugoi
    • If you do not plan to make a lot of changes, add this theme in to your project as a submodule
      • git submodule add https://github.com/aanupam23/hugo-sugoi.git themes/hugo-sugoi
    • If you plan on making a lot of changes, clone the repo instead
      • git clone https://github.com/aanupam23/hugo-sugoi.git themes/hugo-sugoi
  • In your theme directory under exampleSite there will be a file called config.toml. Copy that file in to the root of your project
  • From there edit the config.toml and enter in all of the infromation for your website
  • At this point you should be able to see your website
    • hugo server -D
  • The changes you make will be live updated to the ip address given by the hugo server command

Adding content to your site

  • Create a blog post by running
    • hugo new posts/my-first-post.md
    • It uses this formatting
    • ---
title: "My First Post"
date: 2020-01-05T18:37:11+01:00
draft: true
---

Hello World!

Hooking up netlify with github

  • Log in to your netlify account and grant it access to the github repo where your hugo site is stored
  • Create a netlify.toml file at your projects root directory
  • [build]
publish = "public" 
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.82.1"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
  • Now any time you push a change to your Github repos main branch, Netlify will automatically deploy those changes to your website

Adding your custom dns to netlify

  • First you need to buy a domain. For this example I used Namecheap
  • Once you have a domain name purchased go to your dashboard and click on your domainname
  • From there scroll down to nameservers and change it to custom DNS. It will ask for nameservers. We get these nameservers from Netlify
  • In Netlify go to site settings -> Domain management
  • Click the options drop down and select ‘Go to DNS panel’
  • There you will see 4 nameservers. Copy all 4 of those over to Namecheap custom dns.
  • You now should be able to go to your custom domain name and see your hugo site is live!