In this article, I will demonstrate how we deploy our application to GitHub Pages, using GUI and commands.
Github
GitHub, Inc. provides Git-based Internet hosting for software development and version control. It provides Git’s distributed version control and source code management (SCM) functions, as well as its own. For each project, it provides access control as well as various collaboration tools such as bug tracking, feature requests, task management, continuous integration, and wikis. It has been a Microsoft subsidiary since 2018, with headquarters in California.
It’s frequently used to house open-source projects. GitHub boasts of having over 73 million developers and more than 200 million repositories as of November 2021. (including at least 28 million public repositories). As of November 2021, it is the largest source code host.
Github Pages
GitHub Pages is a static site hosting service that accepts HTML, CSS, and JavaScript files directly from a GitHub repository optionally running them through a build process and then publishing a website. The GitHub Pages examples collection contains examples of GitHub Pages sites.
Your site can be hosted on GitHub’s github.io domain or on your own custom domain. See “Using a custom domain with GitHub Pages” for additional details.
You can configure access restrictions for your project site if it is published from a private or internal repository controlled by an enterprise that uses GitHub Enterprise Cloud. All GitHub Pages sites are privately published in an organization with controlled users. See “Changing the visibility of your GitHub Pages site” for additional details.
Note: We can only deploy static websites to GitHub Pages.
React Form UI
I will be deploying my already created React Form, you can download the code from here.
Deploy using Website GUI
Step 1: Go to your Github repository.
Step 2: Go to Settings
Step 3: Scroll down to GitHub Pages. Click on “Check it out here!”.
Step 4: Under source, select the branch and the folder, in my case I had root and docs. I selected ‘main’ and ‘root’, which is the default.
After that select the theme and domain(to which you want to publish), which are optional to select.
I want my site to be HTTP secure, hence I have selected “Enforce HTTPS”.
Step 5: After that, you save all the things.
In the image, you can see that my site is published. Sometimes it takes some time for your site to get live.
Deploy using gh-pages
Step 1: Open your code in any of the code editors. I am using Visual Studio Code.
Step 2: Open a terminal and execute the following command to install the gh-pages packages
npm install gh-pages --save-devWe have added “–save-dev” since we want to have it as a development dependency. Hence it will not get installed on production.
Step 3: Add the following commands to the package.json file.
The first property we need to add at the top level homepage second we will define this as a string and the value will be
"http://{username}.github.io/{repo-name}"
- {username} is your GitHub username
- {repo-name} is the name of the GitHub repository you creeated
it will look like this :
"homepage": "https://github.com/Rohit-Gupta-IIC/gh-pages-demo"
Second in the existing scripts the property we to need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
package.json will look like the following
Step 4: Now after that, we need to create a GitHub repo with the same name that we added as the value of “homepage” in package.json. You can skip the step if you already created one.
Step 5: Execute the following commands to add the GitHub repo remote to your project.
git init
git remote add origin https://github.com/Rohit-Gupta-IIC/gh-pages-demo.gitStep 6: Run the following command to deploy your React App to Github Pages.
npm run deploy
Conclusion
Thanks for reading, hope you got answers to some of your questions and learned how to deploy a React JS application to GitHub Pages.
Visit Let’s React to learn more about React.
