Publishing a Local React Portfolio Website to a Git Repository and Deploying with GitHub Pages

In our previous blog, we discussed the process of creating a portfolio website using React. Now, let's take it a step further and explore how to publish your locally developed React portfolio website to a Git repository and deploy it using GitHub Pages. By doing so, you can make your website accessible to the world with just a few simple steps.

Prerequisites

Before we begin, ensure you have the following:

• A local React portfolio website project.

• Git installed on your system.

• A GitHub account.

Initializing a Git Repository

The first step is to initialize a Git repository for your project. Open your terminal or command prompt and navigate to the root directory of your React portfolio project. Then, run the following command:

git init

This command initializes a new Git repository in your project directory.

Creating a .gitignore File

It's essential to create a .gitignore file to exclude unnecessary files from being tracked by Git. Create a new file in your project's root directory named .gitignore and add the following content:

node_modules/
build/

The node_modules/ directory contains the installed packages, and the build/ directory contains the generated production build files. Ignoring these directories prevents them from being committed to your Git repository.

Committing Your Project to Git

Now it's time to commit your project files to the Git repository. Run the following commands in your terminal or command prompt:

git add .
git commit -m "Initial commit"

The git add . command adds all the files in your project directory to the Git staging area. The git commit command commits the changes with a descriptive message.

Creating a Remote Repository on GitHub

Next, visit the GitHub website and sign in to your account. Click on the "+" button in the top-right corner and select "New Repository" from the dropdown menu. Provide a name for your repository and choose the desired settings. Optionally, you can add a description and initialize the repository with a README file.

After creating the repository, note down the repository's URL, which will be needed for the next steps.

Adding a Remote Repository

Back in your terminal or command prompt, add the remote repository URL by running the following command:

git remote add origin <repository-url>

Replace <repository-url> with the URL of the remote repository you created on GitHub.

Pushing Your Project to GitHub

To publish your project to GitHub, run the following command:

git push -u origin master

This command pushes your local repository's contents to the remote repository on GitHub.

Deploying with GitHub Pages

Now that your project is on GitHub, you can use GitHub Pages to deploy your portfolio website.

1. Go to your repository on GitHub and navigate to the "Settings" tab.

2. Scroll down to the "GitHub Pages" section.

3. Under the "Source" dropdown, select "master branch" as the publishing source.

4. Click "Save".

GitHub Pages will then build and deploy your React portfolio website from the master branch. It may take a few moments for the deployment to complete.

Installing gh-pages in Your Local Repository

The gh-pages package is a useful tool for deploying React applications to GitHub Pages. It simplifies the deployment process by automating the necessary steps.

To install gh-pages, open your command line interface and navigate to the root directory of your local repository. Then, run the following command:

npm install gh-pages --save-dev

This command installs the gh-pages package as a development dependency in your project.

Modifying package.json

Next, we need to make some changes to the package.json file to configure the deployment settings. Open package.json in a text editor and add the following lines:

"homepage": "https://your-username.github.io/your-repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

In the homepage field, replace "your-username" with your GitHub username and "your-repo-name" with the name of your GitHub repository.

The scripts section defines two new scripts: predeploy and deploy. The predeploy script builds your React project, and the deploy script deploys the built project using gh-pages.

Deploying Your React Portfolio Website

With the necessary configurations in place, you're ready to publish your React portfolio website to GitHub Pages.

1. Open your command line interface and navigate to the root directory of your project.

2. Run the following command to build your project:

    npm run build
   

   This generates an optimized and minified version of your React application in the build directory.

3. Finally, deploy your project by executing the following command:

    npm run deploy
   

   The gh-pages package will deploy the contents of the build directory to the gh-pages branch of your GitHub repository.

Accessing Your Deployed Portfolio Website

Once the deployment process is finished, you can access your deployed portfolio website. GitHub Pages provides a URL for your website, typically in the format https://<username>.github.io/<repository-name>.

Open a web browser and visit your website's URL to see your portfolio live on the internet.

Conclusion

Publishing your local React portfolio website to a Git repository and deploying it with GitHub Pages allows you to share your work with the world. By following these steps, you've taken your portfolio website from a local development environment to a publicly accessible website. Now you can showcase your skills and projects to potential clients, employers, and the wider web development community.