I built my website for $10 per year
With a little effort and the willingness to get your hands into the code, even a noob like me can build a website. I figured out how to do it incredibly cheaply. And it’s not hard! Any small business can drastically reduce the cost of their website.
Here’s how I did it. And how you can, too.
1. Choose a static site generator
A static site generator generates a website that is pure HTML. And pure HTML is fast. Sites built using PHP or other scripting languages (like a Wordpress site) are always slower because they don’t build until a user accesses them. No matter how optimized they are, they will never be quicker than an optimized static site.
Here are some free, open source static site generators for you to check out.
Each of these have easily customizable themes you can use as a base before modifying them. Or, if you are familiar with coding, you can use any of these to create and deploy your own theme.
Why I use Hugo
Large user base. Hugo has a large-enough user base that when I have problems or questions, I know someone else will already have had the same issue. Which means when I go on stackoverflow.com, there will be an answer.
Lots of themes. I’m not a designer. But I know what I like. Hugo has enough free and low-cost themes that I can find one I like. (Spoiler: I found a free one.)
Great documentation. I am a proud noob. Which means I have to refer to the Hugo documentation over and over again. If it weren’t well-written, I would not have built my site.
Total Cost of Hugo: $0
2. Create a Github account
Github is the platform where most open-source code is hosted. But guess what? You can use it, too. Github has WAY more tools than I ever use, and if you get into this, you may use a lot more of them than I do. But for now, you will host your site on a Github repository, not on squarespace or wordpress.com or on AWS. And it costs…?
Total Cost of Github: $0
3. Download VSCode
VSCode is an open source (free and lots of help for noobs) code editor with hundreds of YouTube tutorials and, again, acres of help on stackoverflow.com.
This is where you’ll modify Hugo’s theme to make it your own. It’s even where you’ll write blog posts, like this one.
Total Cost of VSCode: $0
4. Get your theme
Read the basic usage of Hugo article first, so you’re comfortable. And then download your theme. There are many places you can go. For my example, I downloaded the Spectral theme from the Hugo themes page.
In a future post, I’ll go through how you can modify a Hugo theme to quickly upload a website, but that’s beyond the scope of this article. For now it’s enough to know that I turned the above into … this:
Click here to see the live site.
Total Cost of Hugo theme: $0
5. Upload your site to Github
YouTube and Google are your friends here, but once you have the basic commands down, it’s fairly easy to do this once you’ve created and linked a repository. For me, I simply type in the terminal window:
git add .
git commit -m "My comment about this commit"
git push -u origin main
The first line of code gets the site ready to upload. It basically prepares any new or changed files. The second line takes this block of files that you are going to upload to your Github repository and adds a note (or message) to each of the files so when you go back and look later, you get a hint about what’s been changed. A typical commit message is “Initial commit.” And finally, you “push” the files to a Github repository where they now live.
To some people, I’m sure this looks scary. But I have to emphasize, nothing you’ve done so far is customer-facing. You can screw this up as many times as you want, and until you publish, no one will know. It’ll just be your little secret.
Total Upload Cost: $0
6. Create a Netlify account
Netlify is simply the best option I’ve found for building and serving a personal or small business website. And, like everything else I’ve recommended, it has a free tier that’s perfect for individuals and small businesses.
You can and should use your new Github account credentials to create your Netlify account.
Netlify builds your site off of your Github repository, and then serves it to a website with a netlify.app address. For example: 10-dollar-site.netlify.app.
And, if you notice, my example site uses the HTTPS protocol. On average, an SSL certificate costs $60/year. Netlify provides that for free.
To host the site, you simply click the Add New Site button and link to your Github repository. Netlify automagically knows that you are running a Hugo site, and autofills the correct build command. All you have to do is click Deploy.
Total Netlify Cost: $0
7. What about that $10?
Oh, that’s right, we still haven’t spent a penny on your website. So where does that $10 come in?
That’s how much it costs every year to buy my domain name—hagkull.com. And that’s it. The one unavoidable cost for a small business or serious individual is the cost of a domain name.
Ten dollars per year.
Netlify gives you the option to host your site at their netlify.app address securely, and for free with this method, or you can point your site at a custom domain very easily with Netlify’s tools.
And that’s it!
To review: anyone can put up a website for just $10 per year. You need VS Code, a Github account, a Netlify account, and the willingness to give it a try.
I’m not a coder; I’m a writer. But I built this website for $10 per year using this exact method.
And you can, too.
Happy coding! (Let me know in the comments if you would like a post expanding on any of these sections. And to get you started, I’m using an open source Github commenting engine, so you’ll need a Github account. 😃 )