TinyHow2: GitHub Page hosting for React (with custom domain)

Antoine — Fri, 06 May 2022 15:15:32 +0000

The requirements:

This short instruction is written under the following assumptions:

You have already familiarized yourself with GitHub workflow, Node.js, and Npm.
Your app is neatly stored on a GitHub repository that you own.
You can work the console/ terminal window.
You're in TLDR mode and you don't have time for lengthy technical instruction.

If that's not you, please refer to this detailed instruction.

The setting:

a) You have just made your last commit to the dev-branch of your first React (JS) app on GitHub.

b) You are itching to deploy it using GitHub Page.

c) You have already grabbed a custom domain with a neat name. It's being hosted by GoDaddy, Bluehost, Namecheap or a similar (domain) hosting service.

The approach:

1) Open the console/ terminal window, make sure that you're inside the folder which contains your React project and run:

   npm install gh-pages

Notes: Open package.json and make sure that you have the following dependency installed for everything mentioned herein to work properly:

  "devDependencies": {
    "gh-pages": "^3.2.3"
  }

2)
2a) Open package.json, add homepage above your project name:

  "homepage": "https://www.your-custom-domain-name.whatever",
  "name": "your-react-project-name",

2b) Add a CNAME file in the public folder with a single entry of www.your-custom-domain-name.whatever

3) Scroll down to the script section of package.json and make sure to add the following:

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",

4) Configure your custom domain from the side of your hosting service:

Simply locate Advanced DNS tab/option on your domain hosting dashboard.
Create the following A records:

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153

Create a CNAME record with: Host: www and Value: your-github-username.github.io. Then save everything.

Notes: These changes can take a while to be applied.

5) Open the console/ terminal window again and run:

   npm run deploy

6) Get on github.com and navigate to the repository to be deployed from, locate the Settings tab and click on Pages.

7) Select Branch: gh-pages as the source.

8) Make sure that your custom domain pass the DNS check and don't forget to check Enforce HTTPS afterward. If everything goes well, you should see:

BannerPic by Martin Katler

Learning to swim again.

Antoine — Wed, 09 Mar 2022 09:29:05 +0000

“Choose a safe spot where your feet can touch the sand and move as I showed you”, said my father to six-year-old me when we first went to the beach. It was just around 5:30 AM, and my father had already done a couple of warm-up laps along the shoreline. It took me a while to shake myself awake and trod down the gently sloped dune, shivering with each step as I waded into the chilly emerald water. Before my mind could conjure up more unpleasant thoughts, I quickly dunked my head under the water and started paddling with my feet and arms while my father remained nearby to offer assistance and words of encouragement. After a month of daily practice, my disliking of sea swimming gradually disappeared while I enjoyed every second at the beach.

Earlier this year, I have pushed aside any notion of hesitation to take the plunge into a career in professional Web Development. I have spent a considerable amount of time online for both work and entertainment without fully understanding the inner working of websites and databases. I often marveled at the websites and applications which were so well-designed to make my life easier. Over time, I became more curious about how to build such products. I chose the boot camp route because it is well-suited for my propensity to learn through hands-on approaches.

From my perspective, the learning curve is not much different from learning to swim. Boot camp projects are the “safe spots” where my “feet can touch the sand”. I can code in a constructive environment with supportive teachers (and classmates) never seem out of reach. There is still the occasional fleeting moment of panic when something didn’t work the way it’s supposed to or when my mind goes blank in the face of a complex problem.

Daily practicing can make all the difference. I learn to enjoy the workflow, I am in tune with the software development culture, I appreciate the prospect of working from home, and most of all, I am glad to be in a career with so much room for innovation. As someone who loves to solve practical problems and building things, I am slowly building my skills and filling my GitHub repositories with cool/ quirky projects.

My biggest motivation has always been my family, especially my spouse who sacrifices three months of her time to take care of our children so I can fully immerse myself in the accelerated learning path. She understands my love for technical problems and technology. Without her help, I could not have pursued a career in Web Development and explored my interests in Web3.

This is the first online blog that I have ever written as someone who often prefers to think and build. I am glad if anyone finds it helpful.

DEV Community: Antoine

TinyHow2: GitHub Page hosting for React (with custom domain)

The requirements:

The setting:

The approach:

Learning to swim again.