Setting up a personal web page with GitHub Pages
In less than 5 minutes
For this example, we will be using GitHub Pages for hosting. Checkout my article called I want a website. Now what? to understand what hosting and domain names are. Since we are using GitHub Pages, buying a domain name is optional. If you do not purchase a domain name, then the URL to your page will simply be github-username.github.io. Also, there is no limit to how many “sites” you can host on GitHub Pages if you use the project pages method.
Steps:
- [ Optional ] Buy a domain name
- Create a GitHub account and create a new repository
- Create content
- [ Optional ] Setup your domain name
[ Optional ] Buy a domain name
Navigate to your preferred site for buying domain names. Here I am using Namecheap, however feel free to use any domain name purchasing site.
In the search box, Find your new domain name, enter the name of the site you’d like to purchase. Here I typed “kimcodes.tech”:
As you can see kimcodes.tech is already taken (I bought it). However, there are many other options available like kimcodes.xyz, which is only $1.15 CAD for the year. Not bad! Once you find the domain name you want, within a price range you’re willing to pay, simply add the domain to your cart using the add to cart icon:
Follow the checkout process and the domain name is yours!
Side note: Buying a cheap domain like .xyz for $1 isn’t always the best choice, because you need to take into consideration the renewal fees for the following year. So you will need to weigh the pros and cons.
Create a GitHub account and create a new repository
Once you have a domain name you need to setup the hosting. Hosting is where you will store the code that generates your site. For this tutorial we are going to use GitHub Pages.
Head over to www.github.com and create an account if you do not have one.
Once signed in, you will need to create a new repository. If you are on the main page there will be a green button in the top right corner that reads “New Repository”. If you are on your profile page, you will need to click on Repositories and then hit the green button on the top right that says “New”.
Make this repository Public and name it as github-username.github.io. My GitHub username is bacontext so my repository name is bacontext.github.io.
Create content
The repository you just created will store all the files needed to generate your website. For now, create a file called index.html in the master branch. By default, when you create a new repository there will be a master branch. A separate article will be written on how GitHub works and how to use it. Add the following snippet to your index.html file:
<html>
<head>
<title>My First Site!</title>
</head>
<body>
<p>I created my first web page using GitHub Pages! </p>
</body>
</html>Your index.html file should look like the following:
Hit Commit New File. Navigate to your URL, github-username.github.io, and voilà!
Now that you get the idea, you can use one of the 12 themes crafted by GitHub designers and developers. All you have to do is head on over to the Settings tab of your repository, scroll down to the GitHub Pages section, and click the Automatic Page Generator button. Pick one, publish, and again voilà!
If you bought a domain name, there are additional steps to follow.
Setup your domain name
While in your repository create a new file called CNAME. In this file write your domain name. You may only write ONE domain name so if you have multiple there will be some extra steps to have them all redirect properly. Your file should look something like this:
Once you save your CNAME file, click on Settings in the current repository. Scroll down to GitHub Pages and enter your domain name in the Custom domain section. Hit Save.
If you used Namecheap to purchase your domain name you will need to perform the following steps on the Namecheap website:
- Sign-in and click on Domain List.
- Click on the Manage button for the domain name.
- Select Advanced DNS. Then you should see Host Records section.
- Delete the two default records (URL Redirect record, CNAME Record).
- You will need to create three new records for your domain.
These host records point your domain to the IP address of your hosting, which in this case is GitHub.
** UPDATE ** September 2018
- Add a new record. Select “A Record”, set the Host to “@” and the IP Address to “185.199.108.153”.
- Add a new record. Select “A Record”, set the Host to “@” and the IP Address to “185.199.109.153”.
- Add a new record. Select “A Record”, set the Host to “@” and the IP Address to “185.199.110.153”.
- Add a new record. Select “A Record”, set the Host to “@” and the IP Address to “185.199.111.153”.
- Add a new record. Select “CNAME Record”, set the Host to “www” and the IP Address to “your github-username.github.io”.
If you look up the IP addresses you will see they belong to GitHub. Save all changes. It should look something like the following:
* NEW **
Head back over to GitHub settings and Enforce HTTPS
** IMPORTANT **
Note: If you are updating your previous records, you may need to delete the CNAME file from your repository and re-add it. After which it could take a few hours for your site to be https secure.
It can take a full day to update and the wait varies among DNS providers, for the newly created records to take effect.
I hope you found this tutorial useful! Next time I will show you how to use free Azure credits to host your website. Stay tuned.
