Added github pages deployment steps

.github/workflows/deploy.yml

@@ -41,7 +41,7 @@ jobs:
       - name: Check for Secret availability
         id: check-secrets-run
         run: |
-          if [ ${{ secrets.GITHUB_TOKEN }} != '' ]; then
+          if [ ${{ secrets.GH_PAGE_DEPLOY }} == 'true' ]; then
             echo "available=enabled" >> $GITHUB_OUTPUT
           fi
 

README.md

@@ -19,6 +19,12 @@
 
 </div>
 
+## Why `react-gh-pages-boilerplate`
+
+In addition to providing a boilerplate, this template also solves <a href="https://stackoverflow.com/questions/63462828/404-error-on-refresh-with-spa-react-router-app-in-github-pages" target="_blank">404 error</a> 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:
@@ -53,6 +59,50 @@ 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**.
+
+<img src=".github/images/github-1.png" width="100%" />
+
+#### 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**.
+
+<img src=".github/images/github-2.png" width="100%" />
+
+#### 1.3. Run GitHub Deploy Actions
+
+**Actions** → choose last deployment → **Re-run all jobs**. Wait until in finishes.
+
+<img src=".github/images/github-3.png" width="100%" />
+
+#### 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**.
+
+<img src=".github/images/github-4.png" width="100%" />
+
+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](https://tailwindcss.com/docs/font-size)
+- [Components Directory](https://daisyui.com/components/)
+- [Animations Directory](https://animate.style/)
+- [Icons Directory](https://react-icons.github.io/react-icons/)
+- [Setup Github Page](https://www.vddeveloper.online/blog/vite-react-deploy-github)
+
 ## Back Us
 
 Support us with a monthly donation and help us continue our activities.
@@ -63,14 +113,6 @@ Support us with a monthly donation and help us continue our activities.
 
 <a href="https://opencollective.com/react-gh-pages-boilerplate#sponsor" target="_blank"><img src=".github/images/sponsor.svg"></a>
 
-## References
-
-- <https://github.com/daisyui/react-daisyui>
-- <https://stackblitz.com/edit/daisyui-react-vite-62pzsn>
-- <https://www.vddeveloper.online/blog/vite-react-deploy-github>
-- <https://leerob.io/blog/nextjs-sitemap-robots>
-- <https://react-icons.github.io/react-icons/>
-
 ## Maintainers
 
 - [Hanzla Mateen](https://github.com/hanzlamateen)