How to Host Your Volunteer Site for Free
Preamble
The last thing most non-profits and volunteer groups need are needless expenses, and I’ve seen it’s not uncommon for organizations to spend $240 a year on very basic webhosting.
There are plenty of “free” web hosting providers such as Wix, but they generally limit you to a non-customizable domain name for their free tier. In a pinch that’s fine, but most orgs want to have at least some basic branding online, and domain names are generally pretty cheap.
What’s worse in my opinion, is these systems are usually throwing pop-ups left and right trying to sell you upgrades, or showing features that look interesting, but aren’t actually available to you. They pack in a ton of functionalty, but a lot of the features aren’t hugely useful for smaller groups, and they clutter the interface.
On top of that, these tools generally limit you to one login. For many organizations that might not be an issue, but in Scouting we generally have a scout webmaster and an overseeing adult webmaster, and ideally the adult should have a way to review and approve all scout generated changes; trust but verify and all that jazz.
Plus, if you are in a situation where you are training youth on how the web works, tools like Wix are very far removed from the underlying technology, and don’t give scouts exposure to web development fundamentals.
So with all that, here’s my favorite way to run a free website, with multiple user accounts, 10GB of storage, and custom domain support. This method will be a bit more adventurous than something like Wix, but you can do it. A lot of folks say they are non-technical, but really they just haven’t been exposed to these tools, and like anything new, it takes a little practice. You’ve got this.
Ingredients
The key players in this project will be:
- Hugo - an open source website tool that makes it easy to create content using a simple language called Markdown. There are a number of free themes to choose from, or you can get creative and build your own.
- Git - an open source tool that tracks versions of files. Website and software developers use Git to track their changes as the work in case they break something, and to keep a history of why they changed what they changed. Git also helps multiple people work together by making it easy to share their changes.
- GitHub - a service that allows people to share and publish work they’ve done in Git. GitHub provides free web hosting for simple projects, and is perfect for most community organization sites.
There are other places you can host your Hugo based site, but GitHub is very well known, part of Microsoft (so it’s probably not going anywhere), and has a well documented process for making everything work.
I’m going to avoid recreating the wheel and will link to appropriate articles that will guide you through the steps. I will keep this post updated as well as I can on the off chance any of the linked guides go away.
Prep
First up, let’s get our tools.
- Install Git - We need this to keep track of our file changes, and to send our changes to GitHub
- Install GitHub Desktop - This will make it easier to connect to GitHub.
- Install Hugo - I would recommend getting a pre-built version from here
- Install Sublime Text - To make our website we will be creating text files, and having a nice text editor makes that much more pleasant. Sublime has a very generous trial period, and is great to get started with. I recommend buying a license to support a great small developer, but you can get everything you need to done without paying.
Our mise en place is set; let’s start cooking.
- Open the command line for your operating system. For macOS this is Terminal, for Windows it will be Git>Bash which came with your Git install for Windows.
- Follow the steps in this tutorial to create your Hugo based site locally. I recommend the following changes to their steps:
- Replace ‘quickstart’ with a short version of your site name. In my case, it was “troop3”.
At this stage, you should have a bunch of files on your computer, and when your run hugo server -D
and connect to the url it gives you, you should see a site. This is a great time to pause and play with the tool. Try adding another page using hugo new content
, edit your pages, and try different elements like bullet lists. The goal of Markdown is that you can create text that looks mostly normal without having to read HTML with angle brackets everywhere. It’s fairly simplistic, but it makes it easy write quickly.
Next up, we’re going to setup Github, push our files to the site, and configure GitHub to build the site everytime we make a change.
Once that is setup, if you have a custom domain name like mycoolgroup.org, you can update your DNS records to point to your new website. Information on configuring DNS can be found here. Note that you should not setup your custom domain if you have content you want to migrate from an existing site first. Get all of your content migrated, and then update your DNS to point at the new GitHub hosted site.
There’s a fair amount of hand waving inbetween those steps, but in bold strokes, following those steps will get you a website that is fast and free, that can be migrated to any number of places easily, or even hosted yourself.
A Fork in the Road
Now if this site was a fresh start for you, you’re ready to rock. However if you have an existing site, it can be a daunting prospect to migrate all of the content by hand. Inevitably your current content is not in markdown format, and you’re looking at a lot of copying and pasting and formatting.
This is where using a large language model(LLM) can be a HUGE timesaver. LLMs like ChatGPT and Claude are built for text manipulation and transformation, and are very comfortable with Markdown and even Hugo. While there isn’t a magic button that will bring everything over, using an LLM can make it relatively painless and won’t cost an arm and a leg; I migrated our troop site for about a buck.
To do this migration we need to give Anthropic or OpenAI access to our computer. The cheapest and most effective tool I’ve found so far is Goose from Block (the folks behind Square.) Goose is a local agent that you can configure with your preferred LLM to handle the logic, constrained to a folder of your choosing.
Let’s dive in! First up we need to get a couple tools setup
- Install Goose - The desktop application works great.
- Setup a Claude API account - You can use any provider you like, but Anthropic is solid for this sort of work.
Inside of the console you’ll need to add a credit card and create an API key. Once you have the key, add Anthropic as a provider inside of Goose and pick a model; 3.7 latest is a solid bet. Once it’s configured, click in the upper left to select a directory, and point Goose at the folder where you created your site.
At this point, it’s time to ask the LLM to jump in! You’ll want to say something along the lines of:
I am migrating my current website to a new Hugo based website. The
source for the new Hugo site is in the current directory. Please
pull the pages from https://yourcurrentsite.org and recreate the
pages in the Hugo site. Only bring over content from https://yourcurrentsite.org.
These are all of the prompts that I used while migrating our site:
I am migrating a website for my scouting troop from Wordpress
to Hugo. I would like you to create a new Hugo theme based on
the website at https://bsa-troop3.org. Please bring over the
styling and the content for this new hugo based site. Only
bring over the content of pages hosted at bsa-troop3.org."
You have been doing a great job on this new scout website!
Please bring the contents of https://bsa-troop3.org/eagles-nest/
into content/eagles-nest.md"
On the page eagles-nest.md, please use rowspan to merge
the rows that have just years in them, and center the
year in the merged row.
Please update content/eagles-nest.md so that all of the
date are of the form MMMM DD, YYYY
Please add a 10 pixel left and right margin around the post
content. The content is right against the edges on smaller devices.
please download the favicon from https://bsa-troop3.org and add
it to this site
On the discount card page please center the image
Can you please pull header image from https://bsa-troop3.org
and add it to the Hugo site?
"Thank you for your work on this website so far! Can you please
move the header image you just added to the left, and constrain
it to the height of the header?
It might seem odd that I’m saying please and thank you, but there is some research that shows postivity and politeness lead to better outcomes with LLMs, and honestly, I think it’s a bad habit to be impolite since someday you’ll probably want to work with a human again; best to practice the good habits.
Goose will start churning and working through the request. You will likely see it running commands to look at the local files, and then looking at the website you pointed it at. It will most likely download the pages of your existing site into the working directory so it can copy out content. There’s no guarantee that it will get all of the material, but you can look in the live view as it is grinding away to see what has been built. If a particular page is missing you can ask Goose to fetch it after it has finished.
When migrating our troop site, I had Goose bring over the content and recreate the styling we had on our original site as a new custom theme. Goose it quite capable at making Hugo themes, so this can be an interesting exploration and doesn’t cost a lot. All told I think I spent about $2 and idly watched videos while Goose did all the heavy lifting with me pointing out missing pages and styling.
Now, I won’t say that everything above isn’t a lot to dive into, because it is. However, as long as you are willing to dive into a new topic, you can handle this. Hugo has a great community and there are a ton of videos online talking about how to use Hugo, git, and GitHub. The biggest challenge is when something fails siliently which can be very frustrating, but that’s the time to reach out either the Hugo community or a more experienced friend. The cost savings can be substantial and running your site like this sets you up to learn a lot about how the web works. While there is a lot to learn, it’s not nearly as mysterious as it seems.
Please feel free to hit me up with questions on Bluesky or Mastodon, and I’d be happy to make an end to end video if that would be helpful.