Create personal webpages
In this post, I will show you how to create your personal webpages and host them with GitHub Pages, and how to secure it.
GitHub Pages is a great way to host your personal webpages. You can create a repository and push your HTML, CSS, and JavaScript files there. GitHub will take care of the rest.
This website is realized through al-folio https://github.com/alshedivat/al-folio, a Jekyll theme for academics. You can fork it and modify it to your needs. It allows writing things in markdown, and it is very easy to use.
So the configuration is a bit cumbersome, especially if you are not familiar with this kind of stuff. This is a short guide to help you set up your personal webpages.
- Clone the al-folio repository on your local machine
- From git website, click on settings/pages and select deploy from branch
- You can now access your website at https://yourusername.github.io !
The details are on the github guide
The real overhead starts when you want to add a custom website: wouldn’t it be nicer if you have your www.mywebsite.it instead of the github thing? These are the steps:
- Buy a domain name from a provider
- watch out not to expose your personal data in the whois database
- Now you need to tell your website that the actual site is on GitHub Pages. You need to add a CNAME file in your repository with the domain name you bought.
- First write your domain name in the same settings/pages
- Go to your provider DNS setting
- Add the following to the
A
record to tell the DNS to point to the GitHub Pages servers:185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
- Add similarly for the
AAAA
record:2606:50c0:8000::153 2606:50c0:8001::153 2606:50c0:8002::153 2606:50c0:8003::153
- This is important: the
CNAME
record. It tells the DNS that the domain name is an alias of the GitHub Pages site. Create a CNAME record to point www.mywebsite.it to YOUR-GITHUB-USERNAME.github.io. Note the YOUR-GITHUB-USERNAME NOT the GitHub repo name! It is a bit provider-dependent, for example in my case I have:host name: www value: YOUR-GITHUB-USERNAME.github.io
- Verify your domain on the git page.
- This means you have to add a TXT record with the value of the verification code provided by GitHub in your DNS.
- (Optionally) do the same with Google search console to have your website indexed by google.
Be careful to the DNS propagation, it can take up to 48 hours, in reality expect at least good 30 minutes.
These are the details from git Some resources for Aruba here italian
As a final note, be careful to follow the guide, or inconvenient things, such as subdomain takeover could take place which happened to me. This is how it goes for the curious.
Sometimes the provider has some default CNAME
for services it often offers. For example, in my case it usually sells a full Linux machine together with the domain name (which I did not need and did not buy). Then the provider had a default CNAME
record for the ftp server (this is used to move files on the net). Then the funny thing happened: someone created a git page named ftp.fabrizionapolitano.it, but my settings were pointing to the ftp server of the provider, so actually navigating that page gave a sort of game scam (I presume) website. I realized this because the hijacker actually registered the ftp domain with the Google search console, and I got a notification. Quick fix: remove the ftp CNAME
record and actually verify the domain on the git page (which I forgot to do).
Some helpful discussion on git here
Enjoy Reading This Article?
Here are some more articles you might like to read next: