How I ditched WordPress and set up my custom domain HTTPS site for (almost) free
A guide (for the minimally tech-savvy) to setting up a website with HTTPS using Hugo, Cloudflare and GitHub Pages.
I got annoyed with WordPress.com. While using the service has its pros (like https and a mobile responsive website, and being very visual and beginner-friendly) it’s limiting. For someone who’s comfortable enough to be tweaking CSS but who’s not interested in creating their own theme (or paying upwards of $50 for one), I felt I wasn’t really the type of consumer WordPress.com was suited to.
To start with, if you want to remove WordPress advertising and use a custom domain name, it’s a minimum of $3 per month. If, like me, the free themes provided aren’t just what you’re looking for, you’re stuck with two choices: buy a theme for $50+, or pay $8.25 per month to do some css customization. I don’t know about you, but I feel like there should be a hack for this.
Okay, almost free. You still have to pay at least $0.88 for a domain name.
For those of you technical enough to skip reading a long post, the recipe is this:
- Buy a custom domain via this Namecheap affiliate link (Thanks! :))
- Install Hugo, my favorite static site generator
- Host with GitHub Pages
- Put your custom domain to work with GitHub Pages
Use Cloudflare’s free planEnforce HTTPS for GitHub Pages
Let’s do the nitty gritty:
If it’s a personal domain like yourname.com, it’s a pretty good idea to pay upfront for five years or even ten years, if you’ve got the cash. It’ll save you the trouble of remembering to renew, allow you to build your personal brand, and prevent someone else from buying up your URL.
If you’re just trying out an idea, you can go with a one-year $0.88 domain. After the ICANN fee, it’ll cost you a whopping $1.06. Namecheap also gives you WhoisGuard (domain registration privacy) free for one year.
I’m a big fan of Hugo so far. Admittedly, those who feel more comfortable with a visual, WYSIWYG editor may feel like a fish out of water at first. As long as you’re not afraid of using command line, though, using Hugo is pretty straightforward. The fact that I have access to all my code is my favorite part. It’s only as simple or complicated as I want it to be.
Hugo is open source and free. They’ve got great documentation, and following their Quickstart guide line-by-line will get you set up with your new site in minutes.
If you’re not used to the idea of your site existing as files and folders, the basic premise is this: Hugo, along with the themes available, helps you to create all the pages and files that your site needs to run. Blog posts can be written in Markdown and saved in your
/content/blog/ folder; preferences for your site and theme can be set in the
config.toml file. After that, generating all your site’s pages is as quick and easy as typing the command
hugo --theme=<your theme>. You’ll be able to see a live version of your site in your browser as you’re editing it (go to
http://localhost:1313/ in your browser, as described in Step 5) so you’re not flying blind.
Confused? Ask me on Twitter @victoriadotdev and I’ll help you out!
If you read to Step 12 of Hugo’s Quickstart Guide, you’ll see that they even provided instructions for hosting your files on GitHub pages. If you’re new to Git, you’ll first need to sign up at GitHub and then set up Git. GitHub is a very friendly resource, and you can find a multitude of code examples and guides in connection with it. The Hello World Guide will take you through all you need to know to use GitHub.com.
Once you’re comfortable with the way GitHub works generally, setting up a site by following the guide on GitHub Pages is no big deal. If you followed the Hugo Quickstart Guide up to Step 11, you’ll want to jump to Step 12 after creating the repository on GitHub.
In case it’s not clear, once you set up your new repository on GitHub called yourusername.github.io, grab the HTTPS link at the top. From there it’s just a few simple commands to create the git repository for your site and push it to your new web address:
## from yoursite/public folder: $ git init $ git remote add origin <paste that https url here!> $ git add --all $ git commit -m "Initial commit." $ git push origin master
Have a little celebration - your site is already up at
https://yourusername.github.io! Now for the pizza-de-resilience: the custom domain.
To set up your site at apex (meaning
yourname.com will replace
yourusername.github.io), there’s just four steps:
- Add your domain to your GitHub Pages site repository
- In your domain registrar’s DNS settings, create A records pointing to GitHub’s IP addresses
- In your domain registrar’s DNS settings, create a CNAME record pointing to
- Make sure there’s a CNAME file in the root directory of your GitHub repository containing
yourname.com(your custom domain)
May 15, 2018 edit: GitHub Pages now support HTTPS through a partnership with Let’s Encrypt! This is welcome news and greatly simplifies the process of serving your site securely. Just look for this clever checkbox in the Settings of your site’s GitHub repository.
The below section is left here to show how far we’ve come. :)
Why do I need a SSL certificate anyway? For one, it’ll give your site a little boost on Google.
Sign up with Cloudflare and follow their set up guide. The site will collect your custom domain’s DNS settings and set everything up automagically. Once the set up is complete, Cloudflare provides you with two new nameserver addresses. Go to your domain registrar’s DNS settings and change the Domain Name Servers to the ones Cloudflare gives you.
config.json file, ensure these lines are present:
baseURL = "https://yourname.com/" canonifyURLs = true enforce_ssl = www.yoursite.com
To redirect users to HTTPS, add this script to the top of your
That’s pretty much it! In a couple hours or so, your site will be up and running at
Thanks for reading!