This project was bootstrapped with Create React App and deployed using GitHub pages.
In order to deploy this React app to GitHub pages, do the following.
Prerequisites:
node,npmandcreate-react-appare installed- Created a git repository
- Added a a remote branch using
git remote add origin https://github.com/youruser/yourrepo.git - Created a React app and added it to the git-repo
Steps:
-
Install GitHub pages (gh-pages) package
npm install gh-pages --save-dev -
Prepare package.json file for deployment
- Add a
"homepage": "https://philjay.github.io/philjay.cc"property to the top level of your package.json file. This property should reflect the url your page will be accessible at (check GitHub repo settings GitHup pages section for details). - Add the following to the
"scripts"property:
"scripts": { //... "predeploy": "npm run build", "deploy": "gh-pages -d build" }- This will ensure that your app is built before being deployed and perform deployment using gh-pages.
- Add a
-
Create a production build of your app and deploy
npm run deploy- Creates a new production build and deploys your app making it available using the homepage url provided in the previous step.
- This will also create a
gh-pagesbranch that contains the built app code (reflecting the deployed React app), the master branch should contain the source code for development.
-
Be patient. It may take a couple of minutes after the
npm run deploycommand has finished before your page becomes available publicly. You can check the GitHub pages section in your repository settings to monitor the current status.
In case you want your page to be available on a fully customized domain (not something starting with "https://philjay.github.io/... or similar), do the following.
-
Purchase the domain you would like to use, in this case
philjay.cc(apex domain). -
In your DNS provider custom DNS settings, add a new A record reflecting the IP addresses of GitHub pages.
- In my case, I created 4 A records (using @ as host), each pointing to one of the 4 GitHup pages IP addresses
- Also make sure to remove any existing A records pointing to other IP addresses (e.g. where your site was previously hosted)
-
Wait until DNS propagation has completed, this can take up to 24 hours.
-
I would recommend to enable "Enforce HTTPS" in your repository settings for GitHub pages.
-
Create a file named
CNAMEin your project (not src) directory. This will prevent the custom-domain field in your repo settings from being overwritten by gh-pages. File content is just the domain name (change to your domain name):philjay.cc -
Update your
package.jsonfile homepage field to reflect the new domain:"homepage": "https://philjay.cc" -
Copy the
CNAMEfile to the public folder during predeploy:"scripts": { //... "predeploy": "npm run build && cp CNAME public", } -
Build & deploy your app using
npm run deploy
GitHub Pages doesn't natively support single page apps. When there is a fresh page load for a url like example.com/foo, where /foo is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /foo.
- Solution 1: Use HashRouter
- Solution 2: Tweak your index.html (used in this project)