Have you ever tried to host a website and you're blocked on where, or how to post it? There's lots of hosting sites these days, and GitHub is one of them.
GitHub Pages is a feature that allows you to host your website direct from your repo. Let's see how to do this.
Step 1. Make sure your code is on GitHub
Since GitHub Pages runs from a *.html file in your GitHub repo, you need to make sure your code is actually on GitHub.
If you haven't uploaded your code yet, follow these steps:
- Go to your profile: github.com/YOUR_USERNAME
- Click the "Repositories" tab
- Click "New"
- Give your repository (repo) a name
- Click private if you don't want people to see your code. Even if your repo is private, the website that goes live will be seen by everyone
- Add any of the options you like
- Click "Create repository"
Now you should have a repo, and you can upload your *.html file by clicking on the "Code" tab and then clicking "Add file".
Step 2. Enable GitHub Pages
Now that your *.html file is in your GitHub repo, you can enable GitHub Pages. Make sure you are in the repo with your *.html file and then follow these steps:
- Go to the "Settings" tab (note this is the settings tab that is shown next to the "Insights" tab on your repo. This is not your personal GitHub settings
- Scroll down until you find "Pages" on the left
- Click "Pages"
- Click the "Source" dropdown and choose which branch to draw your *.html file from
- Click "save"
Now your website is live! It should be available at:
YOUR_USERNAME.github.io
If you ever want to "unpublish" your GitHub Page, click the "Source" dropdown in Step 4 above and choose "none". Now your page is unpublished.
Step 3. Customising your website
Now that your website (or GitHub Page) is live, you can make some customisations. Also read on if you have more than one repo you want as a GitHub Page. Ie. you can't have the same website address for two sites.
Website themes
After you've completed Step 2. above, you'll have more options under the "Pages" settings. You can click "Choose a theme" to add a fancy look (CSS) to your website.
This will take you to a site where you can choose a template to pretty up your website. If you only have a *.html file, a template will make your site look amazing. Otherwise you can write some CSS for your website. We won't go into that here.
Custom domain
Your website is available at the URL GitHub provided, but you can also choose a custom domain. This is a domain you own, and must be purchased through a domain name provider, such as Namecheap.
Once you have purchased a domain, add your domain name under the "Pages" settings, for example https://YOUR_NAME.info. This will direct the GitHub Pages link to this custom domain and your website will appear at your nominated address.
In order for this to work properly, you'll need to setup a few things on your domain name provider's end. For information on how to set those up read the GitHub Docs.
The TL;DR is you'll need to add these A records:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
And you'll need to add a CNAME record with a value that is the URL of your original GitHub Page, for example:
This is how mine looks in Namecheap. Yours' might look slightly different depending on your domain name provider.
If you add a custom domain to your website, you'll have the option to turn off "Enforce HTTPS". Usually, you'll want to make sure this is ticked to ensure your website is secure. Only untick this if you're using a different method to secure your website.
What if you have multiple repos?
GitHub Pages are published at the URL: YOUR_USERNAME.github.io. So if this link takes your username, what happens if you have multiple repos under your GitHub username? Won't these conflict? Well, GitHub solves this by publishing subsequent repos at the URL:
YOUR_USERNAME.github.io/YOUR_REPO_NAME
All you need to do is ensure the CNAME for each custom domain is pointing towards YOUR_USERNAME.github.io and you have the A records added above. GitHub will do the rest for you. After you add a custom domain, you might need to wait a bit until your custom URL will work. Just be patient while the DNS is flushed through. I may have learned this the hard way!
Enjoy your shiny new website ✨
Once your domain name is properly routed through, your new website will be available at your nominated domain name, or the default github.io address.
This is one of the easiest ways to host a website. Read more about GitHub Pages on the GitHub Pages site. Let me know if you want to see more information on this topic, or what other tutorials you'd like to see.
Top comments (3)
Note: "GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see "GitHub's products." - Source
Try fabform.io, If you need to add static website forms to your static website.