How to host a personal site
Back before I had a personal website, I was overwhelmed with where to start. There were so many terms I didn’t understand, and so many services to choose from.
The purpose of this article is to share how I set up my personal site as well as the tech stack I used to do so. I hosted my site on Github Pages (part 1), added React.js to my site (part 2), and connected my Github Pages personal site to the custom domain name I bought on NameCheap (part 3). This article assumes that you know how to build a basic page in HTML — index.html is all you need! — and also how to use Github. If you don’t know what Github even is, feel free to check out this beginner-friendly article I wrote.
Part 1: Github Pages
If you’re familiar with Github, Github offers Github Pages. For every public repository you have, you have the option to display your browser-based site on Github Pages. This works out of the box if your code uses basic HTML, CSS, and JavaScript. All you have to do is go to the settings for your repository and turn it on:
Example repository for a basic website: https://github.com/trishapan/fetch-dad-jokes-lab
Corresponding Github Pages for that repo: https://trishapan.github.io/fetch-dad-jokes-lab/ (Note: The reason why this redirects to trishapan.com/fetch-dad-jokes-lab because of how I linked my Github Pages to a custom domain)
It takes the name of your repository, and adds it to the end of your username.github.io/ URL. But how do you modify what just ‘username.github.io’ looks like?
The answer: Create a repository titled ‘username.github.io,’ and then enable Github Pages for it! Here’s what my personal Github Pages repository looks like:
To clarify: If you were to create a repository with a name that’s just your username, the Github Pages URL for that repository would be username.github.io/username. Your personal Readme would still show up on your profile page:
At this point, you should have a live Github Pages! Congratulations!
Part 2: Adding React.js to your Github Pages
This is only relevant if you want to be able to use React.js, a framework for building websites, to your Github Pages-hosted site.
Github Pages out of the box is unable to host applications built with React.
So I followed this tutorial in order to do so, which goes through how to download and configure the npm module gh-pages: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
Some additional notes that weren’t clear to me from the tutorial:
- In your Github Pages settings, make sure it points to gh-pages.
- If you would like to make updates, commit your updates in your ‘main’ (or ‘master’) branch, then run
npm run deployto update your changes to your live site. If you have a custom domain name linked, you might have to re-enter it in your Github Pages settings for your repo.
Part 3: Adding a custom domain name to your Github Pages site
I used NameCheap to purchase the domain name ‘trishapan.com’
I followed these instructions until step 4 for Github Pages: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site
After completing step 4, I followed these instructions for NameCheap: https://www.namecheap.com/support/knowledgebase/article.aspx/9645/2208/how-do-i-link-my-domain-to-github-pages/
Some things I had to play around with were the domain name in my Github Pages settings. www.trishapan.com didn’t work, but trishapan.com did:
Another weird thing was how I had to ‘enforce HTTPS’ for my website to be linked to my domain name, but I’m not sure if that actually fixed anything, or if it was because my website was taking a long time to load. The Github Pages tutorial did say that it might take up to 24 hours for the initial connection.
I hope my notes are helpful to anyone else who’s having trouble connecting their React Github Pages to NameCheap; I definitely had to do a lot of Googling to figure out what sort of things were worth tweaking, as well as a lot of waiting between each change.
