Hosting a website for free — Get started with Google Domains & Github Pages
Oh, if I had a penny for every time I saw a question in the design community for “what’s the best hosting solution for my portfolio?”, I’d probably be rich or something.
A workflow I’ve used for a few years is to manage my domains on Google Domains, and host my landing pages (or simple websites) on Github Pages.
Why? My experience with other domain management companies has been frustrating. Either they lock you into their management, introducing incredible loopholes if you want to release it (hello, GoDaddy), or they just don’t feel all that secure. What’s more, Google Domains doesn’t require you to have yet another log in profile somewhere on the internet.
As for Github Pages, I store all of my code repositories on there anyway, so why not piggy back on one of their best features — free hosting for static sites?
Let me repeat — Github Pages allows you to host simple websites for free.
So if you’re looking for somewhere to put your basic “about me” website or host a few case studies, and don’t have expert coding skills, this is a great option.
Let’s get to it
Step 1 —Purchase or transfer your domain
Head over to Google Domains and purchase your shiny new website, or transfer an existing domain that you own.
After clicking “Get it”, you’ll see your buying options.
If you’ve chosen more sensible and obvious than mynewwebsite.com, you should be good to go and purchase.
For a standard .com, you’re looking at around £10 per year to own it.
To transfer your own domain, there are instructions on the first page of Google Domains to do this, you’ll probably need to “unlock” the domain, and then obtain an authorisation code from your existing domain registrar. This may sound scary, but it will be pretty straight forward — your current domain management company will have instructions.
Step 2 —Start a Github repository
Visit Github.com and create an account if you haven’t already.
🔐 Make sure you set up all the privacy settings
Create a new repository, by clicking the green “new” button in the top of the left hand side bar.
Give your repository a name — maybe something like “portfolio”, or your personal brand name.
Make it a public repository, and check the box for “Add a README file”.
The .gitignore file is something we don’t need to worry about for this example, but is a file where you can say “don’t put these things on my Github repository”.
This is useful for hidden files or things you don’t want others to be peeking at, like settings files for larger projects, but as I mentioned it’s not really required for our simple examples.
💡 If you want to learn more about Git, the official site is the best place to start
A README file is what will be shown in the homepage of your repository on Github, you can leave it blank. You can see the blank example above, with “mynewwebsite” being pulled in from the title of our repository.
Step 3 — Get set up with Github on your desktop
For the purists, you can use the terminal on your computer to manage your Github repository rather than the desktop app
To make things super simple, your easiest way of managing your Github repository is by using the desktop app.
This will allow you to clone your repository to your local machine and start pushing files up to the server to be served on your purchased domain.
Once you have downloaded and set up Github on your machine, head back to your Github repository and click the “Open with Github Desktop”.
This will let you choose where to store the files locally on your computer, and get you all nice and set up to start pushing work to your website.
Once you’re happy with your local path (where the files will be stored on your computer), his “clone” and we’re good to go.
Step 4 — Set up your Google domain
This is the most technical part of the puzzle for us, but don’t panic as you can just copy and paste the settings.
Go back to your Google Domains page, and head to the DNS settings on the sidebar.
Scroll down to the bottom section, titled “Custom resource records”. This is where we’ll sync up our Github and Google Domains.
There are only two things we need to add in here, the A Record, and the CNAME. Don’t worry about what these mean, it’s just what is required to sync things up.
Here’s what we need for the A Record:
Name: @
Type: A
TTL: 1h
Data: 185.199.108.153
And the CNAME:
Name: www
Type: CNAME
TTL: 1h
Data: https://yourusername.github.io.
As you can imagine, yourusername needs to be replaced with…your username.
Once you’ve done this, hit save and we’re good to go.
Step 5 — Connect your Github account to Github Pages and your domain
Now it’s time to go back to Github.
Open up your repository and go to the Settings tab — https://github.com/yourusername/yourrepository/settings — and scroll down to the Github Pages section.
In the Custom Domain section here, add in the URL of your newly purchased domain and hit save.
This should then hook everything up nicely, it might take some time so be patient! Once you’ve hit save and things are smooth, youll see a nice green banner on this section like the below image.
Dingdingding! We have a Github Pages project.
As you’ll see in the green banner, your website should now be ready to view at your custom domain. Give it a click, and you should see the title of your website being pulled in from your README file we set up earlier.
Step 6 — We’re ready for some code
This is where I’m going to stop telling you what to do, as this could make up a 10 thousand word piece on how to code HTML and CSS.
But, I will give you a nudge.
You have your Github desktop app set up, you have your domain setup, and you have your Github Pages all done. With this, you can test out pushing some code.
We need an IDE to edit code, and the simplest one I’d recommend is Atom. Download that, and open it up. Once it’s open, you can go to File > Open, and navigate to your files we cloned from Step 3.
There won’t be anything of note in here, so create an index.html file within this folder and type something in there. Maybe just “hello”.
Once you’ve done this, head back to your Github Desktop app, and you should see that there is a green line with your “hello” on the central panel. This will be coming from your new index.html file.
Click the blue button on the bottom left that has the label “Commit to master”, and this will allow you to push this code right up to Github.
After a minute or so, navigate to mynewwebsite.com in your browser, and you should be able to see your “hello” message. How cool is that, ey?
Now you’re primed and ready to jump a bit deeper into coding something up, which I’ll give you a few useful resources for:
– Tailwind templates. Tailwind is a great resource for “utility CSS”, which you don’t need to worry about, but they have some free templates for you to use and test out on your domain.
– Scrimba’s HTML and CSS course. This is a great website for learning things, and it’s going to be useful to take this course to get started.
Woah, that was long. I hope you stayed awake and learned something useful. Feel free to get in touch with me if something doesn’t quite work and I can try to help you out.
Good luck ❤️
