React GitHub Pages Boilerplate uses React, GH-Pages, Vite, Tailwind, DaisyUI, Animate.css.

Why react-gh-pages-boilerplate

In addition to providing a boilerplate, this template also solves 404 error when refreshing a React app deployed to GitHub Pages. That too without using Hash Router.

Additionally, you can get rid of any libraries that are installed and replace them with preferred.

Install

Clone the repo and install dependencies:

git clone --depth 1 --branch main https://github.com/hanzlamateen/react-gh-pages-boilerplate.git your-project-name
cd your-project-name
npm install

Starting Development

Start the app in the dev environment:

npm run dev

Packaging for Production

To create a production build in dist folder:

npm run build

Test a Production Build

Start the dev server and test production build:

npm run preview

Documentation

1. Setup Github Pages

1.1. On your Repo Page

1. Go to Settings → Actions → General.
2. Scroll down to Workflow permissions.
3. Choose Read and write permissions and hit Save.

1.2. On your Repo Page

1. Go to Settings → Secrets and variables → Actions.
2. Click New Repository Secret.
3. Add Name as GH_PAGE_DEPLOY and Secret as `true. Hit Add Secret.

1.3. Run GitHub Deploy Actions

Actions → choose last deployment → Re-run all jobs. Wait until in finishes.

1.4. Configure GitHub Pages

1. Go to Settings → Pages.
2. Under Source, choose "Deploy from a branch" and select the "gh-pages" branch.
3. Click Save.

Once the workflow finishes successfully, you'll see a new deployment on your GitHub Pages. Click the link to access your deployed React application.

2. Additional Resources

• Tailwind CSS Directory
• Components Directory
• Animations Directory
• Icons Directory
• Setup Github Page

Back Us

Support us with a monthly donation and help us continue our activities.

Sponsor Us

Maintainers

• Hanzla Mateen

License

MIT © Hanzla Mateen