How to Deploy a Single Page Application on GitHub Pages

GitHub Pages is a free hosting service provided by GitHub, allowing you to serve your web projects directly from a GitHub repository and deploy a single page application (SPA) on GitHub Pages. In this guide, I’ll walk you through the steps to deploy your SPA efficiently.

Requirements

Before we begin, ensure you have the following:

1. GitHub account.
2. A Single-page application ready to deploy.
3. Git is installed on your machine.

Step 1: Create a GitHub Repository

1. Log in to GitHub: Go to GitHub and log in.
2. Create a new repository:

• Click the “+” icon in the top right corner and select “New repository.”
• Give your repository a name (e.g., my-spa).
• Set the repository to “Public.”
• Click “Create repository.”

Step 2: Initialize Your Project

Open your terminal: Navigate to your project directory.

• Initialize a Git repository:

git init

• Add your files:

git add .

• If you want to check your added files status (optional):

git status

Commit your changes:

git commit -m "Initial commit"

Step 3: Push to GitHub

• Add the remote URL:

git remote add origin https://github.com/YOUR_USERNAME/my-spa.git

• Push your code:

git push -u origin master

Step 4: Set Up GitHub Pages

• Go to your repository on GitHub: Navigate to the repository you just pushed.

• Open the “Settings” tab at the top of your repository page.

• Scroll down to the “GitHub Pages” section: Under “Source,” select the branch you want to use for GitHub Pages. Typically, this is the main or master branch.

• Save: GitHub will automatically publish your site.

Step 5: Configure Your SPA for GitHub Pages

If you are using a framework like React, you may need additional configuration to ensure your SPA works correctly with GitHub Pages. For example, if you are using React, you can use the gh-pages package.

• Install gh-pages:

npm install gh-pages --save-dev

• Add the following scripts to your package.json:

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

• Deploy your app:

npm run deploy

This will build your app and deploy it to the gh-pages branch.

** Step 6: Access Your Deployed Application**

Once deployed, you can access your application at:
https://YOUR_USERNAME.github.io/my-spa

Conclusion

Deploying a single-page application on GitHub Pages is a simple and effective way to host your projects for free. With these steps, you can easily share your work with others and have a live version of your SPA available online. Happy coding!

Feel free to leave comments or questions below if you need further assistance.

If you liked the article follow me 👍. Thank you