How I Built & Hosted a Website on My Domain for FREE (GitHub Pages + Jekyll Theme, NO CODING)
I’ve owned my domain Rhiannon.io for a year now. When I got the renewal notice last week, I sighed, realizing I had yet to do anything with it.
Like so many of us, I tend to impulse buy domains that I never use, but I’ve wanted to get a personal site online since 2011 when I bought rhiannonpayne.com… but later let it expire without doing anything with it. When I purchased Rhiannon.io last year, I told myself it would be different this time, until it came to shelling out $150+ for web hosting, templates, etc.
Fast forward to yesterday, when I asked my boyfriend Justin how I could get a clean, simple personal website set up on my domain without paying for anything.
I thought this would be an impossible challenge. But Justin introduced me to GitHub Pages, and by the end of the day, I had a beautiful personal site online. And yes, it was all free.
1. Buy Domain (Google Domains)
My domain, Rhiannon.io, is the one thing I did pay for. I purchased my domain through Google Domains, which ended up being pretty easy for connecting it to the host later. It’s also great for setting up an email address through GSuite.
2. Create a GitHub Account
GitHub is a ubiquitous tool that I’ve always known of but never had the opportunity to use until yesterday.
To get started with GitHub Pages, you need to first create a free GitHub account.
3. Create a Repository
Next, you will need to set up a repository for your site.
Per the instructions on pages.github.com, your repository name has to be yourusername.github.io. Because my GitHub username is rhiannon-io, my repository name is rhiannon-io.github.io. This is also the URL you will use to test your site before connecting it with your domain. The repository must be public to set it up with GitHub Pages.
You can find the rest of the instructions on pages.github.com. If you’re not a developer, you will probably be using the “GitHub Desktop” as your “client,” so be sure to select that option after step 1.
4. Find a Free Jekyll Theme
Similar to Wordpress and Squarespace, there are a lot of great themes out there that you can use for your GitHub Pages site. I used jekyllthemes.io to find one that would fit my needs (namely: clean, blog, free).
The Flexible Jekyll theme was perfect for my little personal site. It also looks great on mobile!
5. Fixing the Flexible Jekyll Theme
Unfortunately, I encountered some issues with the Flexible Jekyll theme where GitHub wasn’t loading the dependencies properly.
Fortunately, my boyfriend is an incredible engineer, and I was able to enlist his help.
If you want to use Flexible Jekyll, you can simply clone or fork my repo and customize it for your own site.
By just forking the repo, you can save yourself from having to go through the more complex instructions on the Flexible Jekyll theme’s documentation. If you go this route, you will have to rename the repo fork to yourusername.github.io as discussed earlier — so if you already created a repo with that name in Step 3, you can delete that one and then rename your fork, or alternatively you can clone the repo and copy the files into your empty repo. Forking and renaming is the easiest way IMO.
If you have any issues, let me know in the comments!
And if you’re curious, this is the commit where Justin resolved the dependencies issue with the original theme.
If you select a different theme, I recommend following their documentation or just forking their repo and hopefully, you won’t encounter any issues.
6. Customize the Config File
Now you’re ready to dive into site customizations! You’ll probably want to get started in the _config.yml file.
Click the pencil in the upper right corner to edit the file.
Now, it’s pretty easy to see the areas that you will need to configure with your own information — it’s like a game of fill in the blanks.
When you’re done, click the big green “Commit changes” button at the bottom of the page, then refresh your website (yourusername.github.io) to check it out!
7. Update Favicons
You may notice that your site has a favicon (the little icon in the browser tab). To update it, find the favicon folder (on Flexible Jekyll it’s under assets/img/favicon) and replace the files by uploading new ones with the same image dimensions and same file names.
To create a .ico file you can use this favicon generator tool.
8. Customize Posts
If you’re setting up a blog site like mine, you can do what I did and edit the filler/example posts with your own content.
Go to the _posts folder, click into an example post, and again go to edit.
Now you’re once again filling in the blanks to make sure the post is formatted correctly.
Once done, save your changes by hitting “Commit changes” at the bottom.
9. Add Images
To add your own images in your posts, you will need to upload them to the correct folder in your repo. In Flexible Jekyll, that’s /assets/img.
10. Understanding Markdown
When editing your posts and pages in GitHub, you’ll need to understand the markdown language to format your posts. Markdown is what makes your text bold or italicized, allows you to add headers, add links, add images, etc.
It’s pretty straightforward — I use this handy Markdown Cheatsheet and Google if there’s something I can’t figure out.
In my case, I wanted to post all my existing Medium blog posts on my site, but doing all the markdown manually was taking hours. So I found this Medium to Markdown tool to help! Super easy.
11. Set Custom Domain
Once your site is looking good on yourusername.github.io, you’re ready to connect it to your custom domain!
This is a very fast process, and you can find the GitHub pages instructions here.
If you purchased your domain with Google Domains as I did, you can read more specific instructions here.
My site was live on my domain pretty much instantly after setting it up, and the SSL (which makes your site “secure”) gets set up within 24 hours.
In Conclusion
I woke up yesterday wishing I could get a nice personal site up on my domain, and by the end of the day, I had exactly what I was hoping for without spending a dime! Check it out live on Rhiannon.io.
If you have any questions about setting up your GitHub Pages site or using the Flexible Jekyll theme, please leave me a comment! I typically respond within 24 hours and would be happy to help.
Rhiannon Payne, based in San Francisco, is the founder of Sea Foam Media & Tech, an agency working with tech startups to help them tell their stories, build their products, gain investment, and scale.
She is specifically interested in distributed team building and the changing workforce of the 2020s. Her book, The Remote Work Era, will explore these changes, with a focus on new opportunities for women to go remote and start their own businesses online.
- Subscribe to The Remote Work Era mailing list
- The Remote Work Era: Women Going Remote exclusive community
- The Remote Work Era on Facebook
- Twitter: @rhiannon_io & @remoteworkera
- LinkedIn: linkedin.com/in/rhipayne/
- Personal Website: rhiannon.io
- Email: payne@rhiannon.io
