{"id":25409354,"url":"https://github.com/mahdi-hazrati/react-gh-pages-workflows","last_synced_at":"2025-10-31T04:30:58.111Z","repository":{"id":171881829,"uuid":"648514426","full_name":"Mahdi-Hazrati/react-gh-pages-workflows","owner":"Mahdi-Hazrati","description":"automate the process of building and deploying React application to GitHub Pages","archived":false,"fork":false,"pushed_at":"2024-02-19T16:08:56.000Z","size":13000,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-12T07:46:06.493Z","etag":null,"topics":["continuous-delivery","deploy-react","deployment","gh-pages","github-actions","react"],"latest_commit_sha":null,"homepage":"https://mahdi-hazrati.github.io/react-gh-pages-workflows/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mahdi-Hazrati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-02T06:39:17.000Z","updated_at":"2025-07-28T08:08:34.000Z","dependencies_parsed_at":"2025-02-16T08:38:33.014Z","dependency_job_id":null,"html_url":"https://github.com/Mahdi-Hazrati/react-gh-pages-workflows","commit_stats":null,"previous_names":["mahdi-hazrati/react-app-ci-cd","mahdi-hazrati/react-gh-pages-workflows","mahdi-hazrati/react-workflow"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mahdi-Hazrati/react-gh-pages-workflows","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mahdi-Hazrati%2Freact-gh-pages-workflows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mahdi-Hazrati%2Freact-gh-pages-workflows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mahdi-Hazrati%2Freact-gh-pages-workflows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mahdi-Hazrati%2Freact-gh-pages-workflows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mahdi-Hazrati","download_url":"https://codeload.github.com/Mahdi-Hazrati/react-gh-pages-workflows/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mahdi-Hazrati%2Freact-gh-pages-workflows/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281930855,"owners_count":26585787,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-31T02:00:07.401Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["continuous-delivery","deploy-react","deployment","gh-pages","github-actions","react"],"created_at":"2025-02-16T08:27:46.464Z","updated_at":"2025-10-31T04:30:57.491Z","avatar_url":"https://github.com/Mahdi-Hazrati.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" \u003e✨ React GitHub Pages 🚀 Workflows ✨\u003c/h1\u003e\n\nhttps://github.com/Mahdi-Hazrati/react-gh-pages-workflows/assets/127740921/c9ca6a12-9736-44d1-840c-c0c354cc7c21\n\nHey there, welcome to the React Workflow repository! This GitHub Action workflow is designed to automate the process of building and deploying your React application to GitHub Pages, saving you valuable time and effort. By leveraging the power of GitHub Pages, you can host your web application online for free, making it easily accessible to anyone with an internet connection. Let's delve into the reasons why this workflow is the perfect choice for your React projects:\n\n## Why you should use `React Github pages Workflows`?\n\n☁  **Build Under Github Cloud Server** : If you deploy with this workflow, everything will be built on the GitHub server and saved multiple times.This means that you can leverage the power of GitHub's infrastructure to automate the building and deployment processes.\n\n🔧 **Automated Deployment**: Say goodbye to manual handling of the build and deployment process! This workflow automates these steps, allowing you to focus your energy on developing your application rather than worrying about deployment hassles.\n\n⚡️ **Time and Effort Saving**: Deploying a React application to GitHub Pages can be a time-consuming task. With this workflow, everything is streamlined, saving you precious time and effort that can be dedicated to enhancing your application.\n\n🌐 **Accessible Web Hosting**: GitHub Pages provides a free and straightforward way to host your web application online. It offers a platform for showcasing your work to a global audience, without the need for complex setups or additional expenses.\n\n## Use Case Scenario\n\n👩‍💻 Let's dive into an example use case to demonstrate the benefits of this workflow:\n\nImagine you're working on a stunning React application and want to make it available to users worldwide. Instead of manually dealing with the build and deployment process, you can rely on this workflow. Simply push your changes to the master branch, and the workflow will automatically kick off. It will handle the build process, transforming your React app into a production-ready state. The resulting build files will be seamlessly deployed to the `gh-pages` branch, instantly making your application accessible to everyone with an internet connection.\n\n## Easy Peasy Method (NPX) - Automatic\n\nOpen Terminal in your root of `react app` direcotry and enter this command:\n```bash \nnpx react-gh-pages-workflows\n```\nand this command create latest verstion of github workflow for your react app\nthen you should commit changes on push to github \n```bash\ngit add .\ngit commit -m \"Add Mahdi-Hazrati/react-gh-pages-workflows to react app\"\n```\nthen push changes to github:\n\n```bash\ngit push origin master\n```\n\n## Manual Config Workflows (Step-by-Step)\n\n![workflows visualization](./assets/visualization.svg)\n\n📝 Here's a step-by-step guide to help you quickly set up and utilize this workflow for your projects:\n\n1. Go to the Actions tab in your GitHub repository.\n2. Click on the \"Set up a workflow yourself\" button.\n3. Copy the provided workflow code and paste it into the YAML file.\n\n```yml\nname: react gh-pages workflows ✨\n\non:\n  push:\n    branches:\n      - master\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v2\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v2\n        with:\n          node-version: 18\n\n      - name: Install dependencies\n        run: npm ci\n\n      - name: Build for production\n        run: npm run build\n\n      - name: Deploy to gh-pages\n        uses: peaceiris/actions-gh-pages@v3\n        with:\n          personal_token: ${{ secrets.GITHUB_TOKEN }}\n          publish_branch: gh-pages\n          publish_dir: ./build\n\n\n# Latest Workflows \u003e https://github.com/Mahdi-Hazrati/react-gh-pages-workflows\n\n```\n\n4. Customize the workflow as per your project requirements.\n5. Save the file, and the workflow will be activated.\n6. Ensure your React application resides in the master branch.\n7. Commit and push your changes to trigger the workflow.\n8. Sit back and relax while the workflow automates the build and deployment process for you.\n9. Once the process is complete, visit your GitHub Pages URL to access your live React application.\n\n## Next js\n\n```yml\nname: Deploy Next JS Application 🚀\n# Next Production Workflow for deploy app to github page\non:\n  push:\n    branches: [\"master\"]\n  workflow_dispatch:\n\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: false\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v4\n\n      - name: Setup Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: \"20\"\n          cache: 'npm'\n\n      - name: Install dependencies\n        run: npm ci\n\n      - name: Build Next.js App\n        run: npm run build\n\n      - name: Upload artifact for deployment\n        uses: actions/upload-pages-artifact@v3\n        with:\n          path: ./out\n\n  deploy:\n    needs: build\n    runs-on: ubuntu-latest\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    steps:\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4\n\n# Latest Workflows \u003e https://github.com/Mahdi-Hazrati/react-gh-pages-workflows\n```\n## 💡 Want to Contribute?\n\nWe welcome contributions to enhance our project! If you're interested in getting involved, please take a moment to review our [Contribution Guidelines](./CONTRIBUTING.md). These guidelines provide detailed information on how you can contribute to our project, from reporting issues to submitting pull requests. We truly appreciate your support and look forward to collaborating with you! 🙌🌟\n\nFeel free to customize and adapt the description according to your project's specific needs and style. Happy contributing! 😊🎉\n\n## End Note\n\n🎉 This React Workflow with GitHub Pages was developed by Mahdi Hazrati to simplify the deployment of React applications.\nEnjoy the automated process, and make the most of GitHub Pages' accessible web hosting features. Show the world what you've built with React!\n\nIf you encounter any issues or have suggestions for improvements, please feel free to reach out.\nThank you for choosing this workflow, and happy coding! 🌟💻\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahdi-hazrati%2Freact-gh-pages-workflows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahdi-hazrati%2Freact-gh-pages-workflows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahdi-hazrati%2Freact-gh-pages-workflows/lists"}