Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
31 views

Create a GitHub repository

Uploaded by

xaseb33520
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Create a GitHub repository

Uploaded by

xaseb33520
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Create a GitHub repository

The first step is to create a GitHub repository for your project. If you already have a repository for
your project, you can skip this step. To create a new repository, follow these steps:
1. Go to GitHub.com and log in to your account.

2. Click on the “+” icon in the top right corner and select “New repository”.

3. Give your repository a name, and add a brief description if desired. I will name it react-project.
4. Choose whether to make the repository public or private.

5. Click on the “Create repository” button.


6. After clicking on Create repository you will see this page.

Create a React app with Vite


If you have not yet created a React app, you can use Vite. With Vite, you can create a React app
with less build time and the files in the folder are minimal with optimal output. To do this, you will
need to have Node.js installed on your computer. Here are the steps:
1. Create a folder and name it whatever you want.
2. Open the folder with your preferred IDE, I will be using Visual Studio Code.
3. Make sure to open your terminal in that folder.

4. To install Vite, you need to run:


npm create vite@latest

5. After running npm create vite@latest, you will be asked to put a project name.

I will name it react-project.


6. You will be asked to select a framework. Since this project is a React project, you need to select
React from the list.

7. You will also be asked to choose a variant. I will choose JavaScript.

8. Change your directory to the react-project by running:


cd <Your project name>

In my example, I will run:


cd react-project

9. To install all the dependencies React needs run:


npm install

10. Wait for the installation to finish.


Install the gh-pages package
After the dependencies are installed completely, you need to install ‘gh-Pages’ package.
1. To install ‘gh-pages’ run:
npm install --save-dev gh-pages

2. Wait for the installation to finish.

Update the package.json file


The ‘gh-pages’ package uses the homepage field in the package.json file to determine where to
deploy your app. To update the package.json file, follow these steps:
1. Add a homepage field with the URL of your GitHub repository in the following format:
“homepage”: https://<your-github-username>.github.io/<your-repository-name>/
2. In the scripts tag add:
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d dist”.

The “predeploy” and “deploy” scripts are used to automate the deployment process.
3. Save the changes.

Update the vite.config.js file


1. Add base: “/<repo>/”, to vite.config.js, in my example it would be base: “/react-project/”
2. save the changes.

Push the React app to GitHub


With the ‘gh-Pages’ package installed and the package.json and the vite.config.js files updated
1. Initialize a Git repository by running the command:
git init

This will create a new Git repository in your project’s directory.


2. Add all the files in your project to the Git repository by running the command:
git add .

This will stage all the files in your project for committing.
3. Commit the changes by running the command:
git commit -m "Initial commit"

This will create a new commit in the Git repository with the message “Initial commit”.
4. Rename the master branch to main by running the command:
git branch -M main

5. Add the remote repository by running the command:


git remote add origin <repository URL>
This will add the GitHub repository as a remote for your local Git repository.
6. Finally, push the changes to the remote repository by running the command:
git push -u origin main

This will push the initial commit of your local Git repository to the GitHub repository.

Deploy your React app


With the React app pushed to Github, you can now deploy your React app.
1. Run the command:
npm run deploy

2. Wait for the deployment to finish.


Access your app
Once the deployment is complete, you can access your React app by going to the URL specified in
the homepage field of your package.json file. Typically, the URL will be in the form of
https://<your-github-username>.github.io/<your-repository-name>/.
Or you can find the URL by clicking on the repository setting.

Then click on pages.


Here is the URL.

Click on the URL, and here is your deployed React app.


Conclusion
Deploying a React app to GitHub Pages using the ‘gh-Pages’ package is a simple and convenient
way to share your work with others. By following the steps outlined in this article, you can easily
deploy your own React projects to GitHub Pages and share your work with the world.

You might also like