DEV Community: Rohan T George

🚀 Deploy Your Project to GitHub Pages Using gh-pages

Rohan T George — Mon, 28 Apr 2025 02:46:35 +0000

Have you ever finished a side project — maybe a cool React app, a static website, or a portfolio — and then asked yourself, "Now what? How do I put this live?"

One of the easiest (and free!) solutions is GitHub Pages.

In this article, we'll dive into why you'd use gh-pages, how to set it up, and step-by-step how to deploy your project.

Let's get into it! 🎯

📌 The Problem: You Have a Project but No Hosting

When you build a frontend project locally, it's just on your computer. To show it to the world (or a recruiter 👀), you need to host it somewhere.

Traditional hosting options (Netlify, Vercel, AWS) are great but can be overkill for small projects.

GitHub Pages is a perfect alternative:

It's free.
It's simple to configure.
It integrates directly with your GitHub repositories.
No backend server needed!

However, manually setting up your project for GitHub Pages (especially for React or Vite apps) can be a pain — because you often need a build process and a specific branch (gh-pages) to host your compiled code.

That's where the gh-pages package comes in!

🛠️ The Method: Use the `gh-pages` npm package

gh-pages automates the deployment for you:

Builds your project.
Creates a special gh-pages branch.
Pushes your built files there.
GitHub then serves it live!

Here's how you can set it up:

⚙️ Step-by-Step Setup Guide

1. Install `gh-pages`

First, you need to add gh-pages as a development dependency:

npm install gh-pages --save-dev

This allows you to run deployment commands easily.

2. Add a `homepage` field in your `package.json`

GitHub Pages needs to know where your app will live.

Open your package.json and add the following at the top level:

"homepage": "https://<your-github-username>.github.io/<your-repo-name>"

For example:

"homepage": "https://johndoe.github.io/my-portfolio"

👉 This ensures that your assets and routes are correctly handled.

3. Update your `scripts` in `package.json`

Still in package.json, under the "scripts" section, add:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

predeploy will automatically build your project before deploying.
deploy will push the build folder contents to the gh-pages branch.

Note: If you are using Vite, your output folder might be dist instead of build. Adjust accordingly!

4. Push Your Project to GitHub

If you haven't already initialized a Git repo, do:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-username>/<your-repo-name>.git
git push -u origin main

This ensures GitHub knows about your project and can host it.

5. Deploy!

Now the fun part 🎉

Run:

npm run deploy

This command:

Runs your build process.
Pushes the compiled files to the gh-pages branch.
Automatically sets up the deployment.

6. Check GitHub Pages Settings (Optional)

Go to your repository on GitHub.
Navigate to Settings → Pages.
Under "Source," select the gh-pages branch.
GitHub will display the URL where your site is live.

Boom! 🚀 Your project is now live and shareable with the world.

🧩 Common Gotchas

Wrong homepage URL: Always use the format https://<username>.github.io/<repo-name>.
404 errors on refresh (React Router): GitHub Pages doesn't handle client-side routing very well out-of-the-box. You might need to create a 404.html redirect file or adjust your BrowserRouter to HashRouter.
Wrong output directory: If you use tools like Vite, make sure to deploy the correct folder (dist, not build).

📚 Final Thoughts

Deploying projects shouldn't be harder than building them!

Thanks to tools like gh-pages, sharing your work becomes effortless.

Now you have no excuse — deploy that project!

Share it, put it in your portfolio, apply for that job, and show off what you made.

🚀 Bonus Tip: Automate Deployments

You can even set up GitHub Actions to auto-deploy every time you push to main. But that's a story for another article... 👀

Thanks for reading!

If you liked this tutorial, drop a ❤️ or comment below — I'd love to see what you deployed!

How to Fix 404 Error on Vercel with React Router and Client-Side Routing

Rohan T George — Sun, 27 Apr 2025 14:34:11 +0000

When deploying React applications to Vercel, you may encounter a frustrating issue where direct URLs like /about or /contact result in a 404 page. This happens because Vercel serves static files by default, and when you try to access a route that doesn't correspond to a file on the server, it returns a 404 error. In this article, I'll walk you through how I encountered this issue, the steps I took to resolve it, and how you can fix this in your own React app deployed on Vercel.

Intro

React applications that use React Router for client-side routing can run into problems when deployed to static hosting services like Vercel. Since Vercel serves files based on URLs, it expects an actual file to be found at every URL you access. However, in a single-page application (SPA) like a React app, the routing is handled by JavaScript running on the client-side, and no physical files exist for routes like /about, /contact, etc. This causes a 404 error if you try to directly access these URLs.

How I Came to Know About the Issue

When I deployed my React app on Vercel, I encountered an issue where navigating directly to a route such as https://your-app.vercel.app/about or refreshing the page would show a 404 error. Initially, everything worked fine during development and in the browser when navigating between pages. However, once I uploaded the app to Vercel, directly entering a URL or refreshing the page led to an error, as Vercel was trying to find an actual file at the given path and couldn’t find anything.

This issue wasn’t related to React or React Router itself. It stemmed from the way Vercel serves static files and doesn’t know how to handle dynamic routes like those used in SPAs.

Steps to Solve the Issue

Identify the Problem:
The root cause of this issue lies in how static hosting services like Vercel serve files. When you access a URL like /about, Vercel looks for a physical file that matches that URL path, such as /about.html. However, in a React SPA, routes are handled entirely by JavaScript and React Router, and there are no physical files corresponding to the routes.
Understand the Solution:
We need to tell Vercel to redirect all routes to the index.html file. This allows React Router to take over and handle the routing on the client side, ensuring that the correct component is rendered when you visit a route.
Set Up a Rewrite Rule:
The solution involves adding a rewrite rule that ensures every URL, whether it’s /about, /contact, or any other route, is routed to the index.html file. Once the index.html file is loaded, React Router will handle the rest.

Solution

To fix this, you need to configure Vercel to handle client-side routing correctly by redirecting all paths to the index.html file. Here's how you can achieve that:

Option 1: Using `vercel.json` Configuration

Create a vercel.json File: In your project’s root directory, create a vercel.json file with the following content:

   {
     "rewrites": [
       {
         "source": "/:path*",
         "destination": "/index.html"
       }
     ]
   }

What This Does:
- rewrites: This rule tells Vercel to rewrite all URLs (specified by :path*) to point to the index.html file.
- source: "/:path*": This matches any URL path, including paths like /about, /contact, and /locations.
- destination: "/index.html": This ensures that no matter what route is accessed, Vercel serves the index.html file, allowing React Router to take control.
Deploy Changes:
Once you've added this vercel.json file to your project, commit and push the changes to your repository. Vercel will automatically redeploy your app with the new configuration.

Option 2: Using Vercel’s Dashboard for Redirects

Alternatively, you can set up redirects and rewrites directly through Vercel’s dashboard:

Go to your Vercel Dashboard.
Under Settings, find the Redirects/Rewrites section.
Add a new Rewrite rule with the following configuration:
- Source: /:path*
- Destination: /index.html
- Type: 200 (Rewrite)

This accomplishes the same result without needing a vercel.json file.

Conclusion

By default, Vercel serves files based on their URL path, which can lead to 404 errors when you try to access routes like /about or /contact in a React app that uses React Router. The solution is simple: configure Vercel to redirect all routes to the index.html file, allowing React Router to handle the client-side routing.

With this setup, your app will work seamlessly both when users navigate between pages within the app and when they refresh or directly access routes via URL. This is a common issue faced by React developers deploying SPAs to Vercel, and now you have a clear, actionable solution to fix it.

Bonus Tips:

If you use other static hosting services like Netlify or GitHub Pages, the solution for handling client-side routing is similar, and these services provide their own configuration methods (like _redirects file for Netlify).
Always test your app in different scenarios—local development, direct navigation, and page refreshes—after deploying to catch any potential issues early.

If you found this article helpful, don't forget to share it with others in the React community!

Mastering WordPress: Rohan T George's Upwork Success Story

Rohan T George — Sun, 27 Apr 2025 04:08:50 +0000

Join me, Rohan T George, a Top-Rated WordPress Developer on Upwork, as I share my journey in creating stunning, high-performing websites! In this video, you'll discover my expertise in custom WordPress development, WooCommerce stores, and SEO-friendly designs, all backed by 6+ years of experience and 100% client satisfaction. Watch as I showcase my streamlined process from initial consultation to final launch, ensuring your project is a success!

Ready to build your dream website? Don't miss the opportunity to hire me on Upwork! Like and share this video to spread the word!

How to Manage Multiple GitHub Accounts Seamlessly

Rohan T George — Sun, 27 Apr 2025 03:59:14 +0000

Managing multiple GitHub accounts can quickly become a hassle if you're switching between personal, work, or client projects. Here's a comprehensive guide on setting up and managing multiple GitHub accounts effectively.

Why Use Multiple GitHub Accounts?

Many developers maintain separate accounts for different purposes:

Professional: Dedicated to your work projects and collaborations.
Personal: For personal or open-source contributions.
Freelance/Client: Separate client or freelance work from your personal projects.

Step-by-Step Guide to Set Up Multiple GitHub Accounts

Step 1: Generate SSH Keys

To generate a new SSH key pair for each GitHub account, open your terminal (on macOS or Linux) or Git Bash (on Windows). Then execute the following command, replacing your_email@example.com with the email address associated with your GitHub account:

ssh-keygen -t ed25519 -C "your_email@example.com"

Press Enter to accept the default location (~/.ssh/id_ed25519) or type a unique filename (e.g., ~/.ssh/id_ed25519_personal) to differentiate between multiple accounts. You can optionally add a passphrase for added security. For example, when prompted:

Enter passphrase (empty for no passphrase): your_secure_passphrase
Enter same passphrase again: your_secure_passphrase

This passphrase adds an extra layer of protection by encrypting your SSH key.

ssh-keygen -t ed25519 -C "your_email@example.com"

Save each key to a unique file within the .ssh directory located in your user's home directory (typically at ~/.ssh). Examples of filenames include:

~/.ssh/id_ed25519_personal
~/.ssh/id_ed25519_work

Step 2: Add SSH Keys to GitHub Accounts

Go to your GitHub account settings:

Settings → SSH and GPG keys → New SSH key
Paste the contents of your public key file (e.g., ~/.ssh/id_ed25519_personal.pub)

Repeat this for each account.

Step 3: Configure SSH

Edit your SSH config file at ~/.ssh/config:

# Personal Account
Host github.com-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal

# Work Account
Host github.com-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_work

Step 4: Clone Repositories Using Custom Hosts

Instead of cloning normally, use your configured SSH host aliases:

git clone git@github.com-personal:username/repo.git
# or
git clone git@github.com-work:companyname/repo.git

Step 5: Set Up Git Configuration per Repository

Configure Git user details within each cloned repository:

git config user.name "Your Name"
git config user.email "your_email@example.com"

Alternatively, use conditional includes in your global git config (~/.gitconfig):

[includeIf "gitdir:~/work/"]
  path = ~/work/.gitconfig-work

[includeIf "gitdir:~/personal/"]
  path = ~/personal/.gitconfig-personal

Then, create separate .gitconfig-work and .gitconfig-personal files:

[user]
  name = Your Work Name
  email = work_email@example.com

Step 6: Verify Your Configuration

To verify your setup, run:

ssh -T git@github.com-personal
ssh -T git@github.com-work

You should see a success message indicating you're authenticated correctly.

Tips and Best Practices

Always verify the SSH key in use before pushing sensitive changes (ssh-add -l).
Clearly name SSH keys and configurations for easy management.
Regularly update and rotate your keys for enhanced security.

Troubleshooting Common Issues

SSH authentication fails: Verify the correct SSH key and configuration host are used.
Pushing commits under the wrong identity: Double-check the Git configurations for user email and name in your repository settings.

Conclusion

Effectively managing multiple GitHub accounts ensures a clear separation between personal, professional, and client projects, enhancing security and organization. By following this structured approach, you can seamlessly work across different GitHub identities without confusion.

WordPress vs Other CMS: Pros and Cons

Rohan T George — Sun, 21 May 2023 18:09:56 +0000

When it comes to building a website, choosing the right content management system (CMS) is essential. WordPress is one of the most popular CMS platforms, but it’s not the only one. In this blog post, we’ll explore the pros and cons of WordPress compared to other CMS platforms.

WordPress Pros:

Ease of Use: WordPress is known for its user-friendly interface, making it easy for beginners to build and manage a website.
Customization: WordPress provides a vast library of themes and plugins that allow users to customize their website’s appearance and functionality.
Community Support: With its large user base, WordPress has an extensive community of developers and users who provide support and share resources.
SEO-Friendly: WordPress is built with SEO in mind, providing features like customizable permalinks, easy content creation, and optimization plugins like Yoast.
Cost-Effective: WordPress itself is free, and many of its themes and plugins are also free or low-cost.

WordPress Cons:

Security: As with any popular platform, WordPress is a target for hackers, and security vulnerabilities can lead to website hacks and data breaches.
Speed and Performance: WordPress can be slow and resource-intensive, especially with poorly optimized themes and plugins.
Updates and Maintenance: WordPress requires regular updates and maintenance to keep the website secure and running smoothly, which can be time-consuming.
Customization Limitations: While WordPress offers a wide range of customization options, there may be limitations in terms of design and functionality.

Other CMS Pros and Cons:

Drupal: Drupal offers advanced customization options and a robust security framework, but it can be complex and challenging for beginners.
Joomla: Joomla is user-friendly and offers a wide range of features and extensions, but it can be slow and not as SEO-friendly as WordPress.
Shopify: Shopify is a popular ecommerce platform that offers easy setup and customization, but it can be costly and limited in terms of design and functionality.

In conclusion, each CMS platform has its strengths and weaknesses. WordPress is a popular choice for its ease of use, customization options, and community support. However, it’s not without its drawbacks, such as security vulnerabilities and maintenance requirements. When choosing a CMS, it’s essential to consider your website’s specific needs and choose a platform that best meets those needs.

View more latest news on My Blog

The Future of WordPress: Trends and Predictions

Rohan T George — Fri, 19 May 2023 22:54:31 +0000

WordPress has come a long way since its inception in 2003. It has become one of the most popular content management systems (CMS) in the world, powering more than 40% of all websites on the internet. With the rise of new technologies and changing user preferences, what does the future hold for WordPress? In this blog post, we’ll explore some of the latest trends and predictions for the future of WordPress.

1. Increased Use of Artificial Intelligence (AI) and Machine Learning (ML)
AI and ML are already changing the way we interact with technology, and it’s no different for WordPress. In the future, we can expect to see more AI-powered tools and plugins that make it easier to manage and optimize WordPress sites. For example, chatbots that use natural language processing (NLP) could be used to provide customer support, while ML algorithms could help optimize content for search engines.

2. Growth of Headless WordPress
Headless WordPress is an increasingly popular approach to website development, where the front-end and back-end of a website are decoupled. This approach allows developers to build more complex and scalable websites, using different front-end frameworks like React, Vue, or Angular. As more developers adopt this approach, we can expect to see more plugins and tools specifically designed for headless WordPress.

3. Continued Focus on Accessibility and Inclusivity
Accessibility and inclusivity have always been essential values for WordPress, and this trend is likely to continue in the future. With more awareness around web accessibility and the increasing number of laws and regulations related to it, WordPress is likely to focus on making its core platform and themes more accessible for all users, including those with disabilities.

4. Increased Use of Cloud-Based Technologies
As the internet continues to evolve, cloud-based technologies are becoming increasingly important for website development and hosting. WordPress has already started moving in this direction, with the introduction of WordPress.com, which offers cloud-based hosting and management for WordPress sites. We can expect to see more cloud-based technologies and solutions for WordPress in the future, making it easier and more cost-effective to run and manage WordPress sites.

5. Continued Focus on Security and Privacy
As cyber threats become more sophisticated, security and privacy are critical concerns for website owners and users. WordPress has always taken security seriously, with regular updates and patches to keep sites secure. We can expect to see even more focus on security and privacy in the future, with new features and tools designed to protect WordPress sites from cyber threats.

6. More Emphasis on Mobile Optimization
With more and more users accessing the internet on mobile devices, mobile optimization is no longer an option but a necessity. WordPress has already taken steps to improve mobile optimization with its responsive themes and plugins. However, we can expect to see more emphasis on mobile optimization in the future, with new tools and features designed specifically for mobile users.

7. Increased Use of Video and Interactive Content
As users become more engaged with interactive and multimedia content, we can expect to see WordPress embrace these trends. More themes and plugins will be designed to handle video and interactive content, while website owners will have more tools at their disposal to create engaging and interactive websites.

In conclusion, the future of WordPress is bright, with many exciting trends and predictions on the horizon. From increased use of AI and ML to a continued focus on accessibility and inclusivity, WordPress is evolving to meet the changing needs of its users. With its open-source community and dedicated developers, we can expect to see WordPress continue to lead the way in website development and content management for years to come.

View more latest news on My Blog

DEV Community: Rohan T George

🚀 Deploy Your Project to GitHub Pages Using gh-pages

📌 The Problem: You Have a Project but No Hosting

🛠️ The Method: Use the gh-pages npm package

⚙️ Step-by-Step Setup Guide

1. Install gh-pages

2. Add a homepage field in your package.json

3. Update your scripts in package.json

4. Push Your Project to GitHub

5. Deploy!

6. Check GitHub Pages Settings (Optional)

🧩 Common Gotchas

📚 Final Thoughts

🚀 Bonus Tip: Automate Deployments

How to Fix 404 Error on Vercel with React Router and Client-Side Routing

Intro

How I Came to Know About the Issue

Steps to Solve the Issue

Solution

Option 1: Using vercel.json Configuration

Option 2: Using Vercel’s Dashboard for Redirects

Conclusion

Bonus Tips:

Mastering WordPress: Rohan T George's Upwork Success Story

How to Manage Multiple GitHub Accounts Seamlessly

Why Use Multiple GitHub Accounts?

Step-by-Step Guide to Set Up Multiple GitHub Accounts

Step 1: Generate SSH Keys

Step 2: Add SSH Keys to GitHub Accounts

Step 3: Configure SSH

Step 4: Clone Repositories Using Custom Hosts

Step 5: Set Up Git Configuration per Repository

Step 6: Verify Your Configuration

Tips and Best Practices

Troubleshooting Common Issues

Conclusion

WordPress vs Other CMS: Pros and Cons

WordPress Pros:

WordPress Cons:

Other CMS Pros and Cons:

The Future of WordPress: Trends and Predictions

🛠️ The Method: Use the `gh-pages` npm package

1. Install `gh-pages`

2. Add a `homepage` field in your `package.json`

3. Update your `scripts` in `package.json`

Option 1: Using `vercel.json` Configuration