Deploying a GitHub page on a custom domain
This is a small departure from the NLP series I have been writing about. I have been working on creating a portfolio website for myself. I spent hours ensuring it looked exactly like I expected. Now, came the hard part… I had to ensure it was deployed on a website for the world to see. So in this article, I will talk about how to use GitHub pages to deploy on a <>.github.io website and also another way to deploy on a custom website.
Deploying to a github.io domain
Step 1: Ensure you have created a repository and pushed the changes on the repository. I am assuming if you are on this article you already know how to do so.
But, WAIT! You need to add 1 extra item in your package.json file i.e: “homepage”: “https://myusername.github.io/my-app". This tells GitHub to understand which repository the GitHub files will be at.
Step 2: Under your repository name, click Settings. If you cannot see the “Settings” tab, select the dropdown menu, then click Settings.
Step 3: In the “Code and automation” section of the sidebar, click Pages.
Step 4: Under “Build and deployment”, under “Source”, select Deploy from a branch.
Step 5: Use the branch dropdown menu and select a publishing branch. Optionally, use the folder dropdown menu to select a folder for your publishing source.
In most cases, you would like to deploy from the root branch. But the branch name is important. You see when the website gets created it needs to get static file information and those static files need to be deployed. Currently, we have react files but the website does not understand them. To do so, we need to create static files. From the src folder, we need to get the gh-pages package: npm install — save gh-pages or yarn add gh-pages
Next, we need to add these scripts to package.json of the project:
“scripts”: {
+ “predeploy”: “npm run build”,
+ “deploy”: “gh-pages -d build”,
“start”: “react-scripts start”,
“build”: “react-scripts build”,Now, we can run the npm run deploy command to create the static files and push them to the remote repository at the branch gh-pages. The predeploy script runs automatically before deploy is run.
Finally, you can go to the gh-pages repository branch to see the new created files. You should also be able to see the static files in gh-pages branch
Step 6: Click Save and voila you are done!
Deploying to a custom domain
Step 1: Ensure you have set up the correct domain with your provider. I had used GoDaddy for my domain name and you need to add all the 4 github IP Addresses as Type A and name @. For the CNAME, ensure to setup the subdomain to <username>.github.io
For my scenario, I wanted to host on www.arnavgoel.ca so I set the www subdomain to arnav2.github.io.
Step 2: Add CNAME to the repository public package and ensure it is on the gh-pages branch. What does it contain?
It should just contain the custom domain name.
Step 3: Some sites mention you should modify the "homepage”: “https://customwebsite.com", but this won’t work because your static files are not there. They are still on Github, on your repository. For me, you should just remove the homepage and it works like a charm.
Push the changes to the main branch and then run npm run deploy. This worked for me however, I have seen a bunch of 404 issues occurring and also struggled a bit on this step.
If it doesn’t work for you I would recommend trying:
“homepage”: “https://myusername.github.io/my-app",“homepage”: “https://myusername.github.io""homepage”: “https://customwebsite.com"
in the interval of 30 mins. Check where your website is trying to get the static files from and what location are they stored in the console logs for further debugging. All the best :)
Happy Hacking !
