Best Tech Stack For Small Static Sites

tech_stach_graphic
tech_stach_graphic

I have often been tasked with making small sites with the hope that a non-tech oriented person could edit it through a CMS. Normally a CMS costs money or is difficult to build. There are some solutions, such as wordpress or squarespace where it is easy for anyone to edit anything on the site, but I prefer to use static site generators to build sites. I have used both Jekyll and Hugo in the past and either would work for this project, but I am going to use Hugo for this example.

The tech stack is Forestry.io, Hugo, and Github (repos, pages, & actions)

To start, just make a new repository on Github and add Hugo. Instructions

Then, setup another repository for your github pages final product ‘<your username>.github.io’ Instructions

Now make an account on Forestry.io and configure your account to link to the first repository you created that holds all of the initial code from Hugo (or whatever other static site generator you choose, i.e: Jekyll, VuePress, Gatsby, 11ty/Eleventy, or others). Instructions Another thing you will want to do for working with forestry is link the forestry meta data in the head section of your hugo template like this:

Now you will want to follow these instructions to setup a token for your main repository (not the .github.io repo):

Finally, add this file (replace <your username> with your actual github username) to your first repository as .github/workflows/main.yml and you are done.

You now have Forestry as your free CMS and can edit with your static site generator while automatically redeploying to Github pages all for free.

Originally published at http://github.com.

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