How to Deploy a Single Page Application on GitHub Pages

Rafayasad — Mon, 15 Jul 2024 11:18:16 +0000

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:

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

Step 1: Create a GitHub Repository

Log in to GitHub: Go to GitHub and log in.
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

DEV Community: Rafayasad

How to Deploy a Single Page Application on GitHub Pages

Requirements

Conclusion