This content originally appeared on DEV Community and was authored by Rafayasad
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
This content originally appeared on DEV Community and was authored by Rafayasad
Rafayasad | Sciencx (2024-07-15T11:18:16+00:00) How to Deploy a Single Page Application on GitHub Pages. Retrieved from https://www.scien.cx/2024/07/15/how-to-deploy-a-single-page-application-on-github-pages/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.