Creating a Portfolio Website with React and Github Pages

Creating a portfolio website is a great way to showcase your skills, projects, and experience. Using React, a popular JavaScript library, combined with GitHub Pages, a free hosting service, makes this process accessible and efficient. This guide will walk you through the steps to build and publish your React portfolio on GitHub Pages.

Setting Up Your React Project

First, ensure you have Node.js and npm installed on your computer. You can download them from the official website. Once installed, open your terminal or command prompt and create a new React app:

npx create-react-app my-portfolio

Navigate into your project directory:

cd my-portfolio

Customizing Your Portfolio

Replace the default content in src/App.js with your own portfolio details. You can add sections like About Me, Projects, Skills, and Contact. Use React components to organize your content for a clean and professional layout.

Preparing for Deployment

Before deploying, install the gh-pages package, which simplifies publishing to GitHub Pages:

npm install --save gh-pages

Next, update your package.json file to include the homepage URL and deployment scripts:

{
  "homepage": "https://.github.io/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Deploying to GitHub Pages

Initialize a new Git repository, commit your changes, and push to GitHub:

git init

git add .

git commit -m "Initial portfolio commit"

git remote add origin https://github.com//.git

git push -u origin main

Finally, deploy your site:

npm run deploy

Viewing Your Portfolio

After deployment, your portfolio will be live at the URL you specified in the homepage field. Share this link with potential employers or clients to showcase your work.

Tips for a Successful Portfolio

Keep your design clean and easy to navigate.
Highlight your best projects with descriptions and images.
Regularly update your portfolio with new work.
Optimize for mobile devices.

Building a portfolio with React and GitHub Pages is a rewarding project that demonstrates your technical skills. Start customizing today and showcase your talent to the world!

Table of Contents