Building a Static Site II

Documenting my experiences building a static site using Hugo: Part 2

Deploying your SSG

The basic process for any SSG is: Markdown files (or similar) go in, static site HTML comes out. The project itself consists of a folder, containing a config file for the site name and address, page navigation, etc.; a sub-folder for content; a sub-folder for static, callable items, such as images; and other sub-folders for layouts, themes, and patterns. The files are created locally, hosted through a service like GitHub, then built and deployed through a platform like Render.

Before jumping from local development, Hugo has a great note about clearing the public/ directory.

GitHub and Render

  1. Open GitHub in Chrome
  • Create a new repo

In my case I created a private repo activated with a one-sentence README.

  • Clone empty repo to the desktop
  • Work in the master branch
  • Copy all existing Hugo files from the Quickstart folder into the master branch, then commit and push to the Origin

Note: Some folders did not copy, but those were empty in the Quickstart folder.

  1. Switch to Render

Creating a new account and loggin in were seamless because I was able to sync my GitHub account.

  1. Create a New Web Service and give Render permission to access your GitHub repo:
  • Connect your GiHhub
  • Choose Only Select Repositories
  • Install the website repo
  • Select the newly linked repo from the menu
  1. Deploy page!
  • Hugo contains some important information here about deployment settings specific to Render

A side note about adding the custom domain

The base URL in the repo config file needs to point to the website. Remember to update this file with the necessary information.

In Render: Under the Settings tab for your service will be some options listed for Custom Domains. Follow the steps to ensure your custom domain name is routing to the Render build. For my page, this involved configuring the Namecheap DNS.

Final notes

Now that the site is launched, editing and adding content is as simple as any regular GitHub workflow!