Note: Skip next paragraph if you are not interested in backstory.
I started learning 1 word per day from last week and documenting it via twitter(https://twitter.com/UtmostDev/status/1156447349373194240). After few posts, I realised, the platform I chose was wrong. As I'm not a regular tweeter, this is gonna slowly dominate and pollute my feed. But I was not planning to drop #AWordEveryDay anytime soon. My only option was to find a new home for it. It's been some time since I developed a website from scratch, and I chose to do the same ASAP as a refresher.
My obvious choice was create-react-app. Making the website was pretty much straight forward, and it took around three hours to get the first draft ready(https://github.com/danivijay/AWordEveryDay).
As my code sits in GitHub, next step was to search how to deploy a react app using GitHub pages. Then the real problem began. There were tons of tutorials saying the same thing again and again - use gh-pages(https://www.npmjs.com/package/gh-pages). But at the time of writing, the package is not working as expected(https://stackoverflow.com/questions/57314473/the-file-argument-must-be-of-type-string-received-type-undefined-on-npm-run-d). Even downgrading didn't resolved the issue(cache problem, may be). But after some research, I realised we can also directly deploy from docs folder of the master. Renamed build to docs and after pushing, my app was up and running within minutes!!
Second problem was routing my subdomain to the web app. Found out that routing my subdomain is as simple as adding a CNAME record with name as subdomain name (awordeveryday) and domain .github.io.(danivijay.github.io. - the dot in the end is needed). Initially the page showed a certificate error, but opening in incognito resolved the issue(cache problem again?).
Last but not least, I noticed the custom domain configuration in settings resets every time I pushes something. Adding a file named CNAME with my custom domain(awordeveryday.danivijay.com) in my docs folder(which I am publishing) solved the issue.
The site is up and running at https://awordeveryday.danivijay.com, and source can be found at https://github.com/danivijay/AWordEveryDay
Top comments (0)