Building a Cheap Website for Free (or $13 a Year), using GitHub Pages, Namecheap, Html5up, and Unsplash
TAGS: software; website; GitHub Pages; Namecheap; Html5up; Unsplash
Why I Did This
I wanted to understand more about the basics of building and hosting a website; this
included: html files that are the bones of the website (provided for free by Html5up),
optional free photos from Unsplash, an optional domain name (for $6 to $13 from Namecheap),
and from web hosting service from GitHub Pages.
Many popular website builder’s (like Squarespace, Wix and Wordpress) are good at setting up
nice looking, fast generated websites, but they require a monthly service fee for hosting
it. Typical website fees stem from: holding a domain name (like ‘myexample.com’) for a
yearly fee of ~$13; using web hosting servers (like Wordpress or HostPapa) for a monthly fee
of ~$2; HTML theme files for free or ~$55 for fancy ones.
The website building method I chose can get you all elements you need to host your own
website for free (but I spent the extra few dollars to get a nice domain name instead of
'username.github.io’). Note that GitHub Pages is a static website, which means it’s primary
usage it to display consistent content regardless of user (while dynamic websites can
display content dynamically for different user profiles, like Netflix). For me right now,
GitHub Pages is fine.
Github pages is free to get is you have an account (accounts are free).
Design Walkthrough
Parts: html template packaged files (free from Html5up); optional photos (free from Unsplash); optional domain name (for $13/year from Namecheap, or $6/year with first time buyer’s coupon); GitHub Pages web hosting service (so you need a GitHub account)
Following the directions from GitHub to setup GitHub Pages: I made a new repository called
'username.github.io’ (where 'username' is my GitHub username); cloned the repo to my desktop
(using whatever shell terminal, like VSCode’s).
I then found a nice free html template package from Html5up, downloaded it, and copied those
files to my root github rep; there the index.html would act as my website’s home page. Note:
I could have used GitHub Page’s partner themes, but I found lots of them to be plain. Joshua
Fluke’s tutorial on website building is how I learned about setting up a website and using
Html5up themes, so I appreciate his tutorial!
I then decided to buy a domain name from Namecheap’s website and got a .com one (for $6/year
for first time buyers, otherwise it would have been $13/year which is typical of many
providers). In order to use with GitHub, I had to change the Namecheap’s domain name servers
(DNS) to include a redirection record (CNAME) to point to GitHub.
Finally, I set the protocol to be HTTPS automatic redirection (because why not, its
apparently safer) and then started changing my html pages to be filled with content like
articles and photos of my experiences (VSCode has a handy ‘live server’ extension that
allows for live viewing of a webpage while updating it at the same time).
Get free html packages that are already packed with responsive website boxes and buttons.
Lessons Learned and Future Changes
Limited, but good enough. As a single purpose website, it is great; I can fit whatever pages I want at a central location. Downsides: it’s static so if I want to do some deep custom server tinkering, I need to find appropriate libraires that will work with static pages, or switch hosting to a personal device server (like a laptop or raspberry pi). It also only uses 1 subdomain; since we are a GitHub subdomain, we cannot make our own subdomain within (at least not that I’m aware of), but for my purposes, this is a very minor defect. If I want to utilize more subdomains, I can find other hosting options like No-IP or personal hardware servers (and still use my bought domain name).References
GitHub Pages free website hosting: https://pages.github.com/
HTML5UP.net free website themes: https://html5up.net/
Unsplash free photos: https://unsplash.com/
Namecheap cheap domain name leasing: https://www.namecheap.com/
Joshua Fluke’s website building tutorial:
https://www.youtube.com/watch?v=u-RLu_8kwA0&ab_channel=JoshuaFluke