To simplify the process of deploying websites, blogs, portfolios, and documentation without the need for complex configurations, GitHub pages are used. GitHub Pages is a free, user-friendly static site hosting service that integrates directly with GitHub repositories. They solve hosting and deployment issues, making them an essential tool for developers.
What are GitHub Pages?
GitHub Pages is a feature on GitHub that lets you host static websites right from the GitHub repository. It's good for hosting personal, project, or organization pages and is free with support for custom domains. This means a very effortless way to share your work or personal projects with the world.
- Free Hosting: GitHub Pages is free to use for both personal and project sites.
- Ease of Setup: No complex configurations are needed; simply push your site to a GitHub repository.
- Version Control: Since it’s tied to Git, you have full control over versioning and collaborative edits.
- Custom Domain Support: GitHub Pages allows you to connect your own custom domain easily.
- Built-in HTTPS: Securing your site with HTTPS is simple and free.
Types of GitHub Pages Sites
- User/Organization Sites: These sites are tied to your GitHub username or organization name and are hosted at username.github.io.
- Project Sites: These sites are tied to a specific repository and are hosted at username.github.io/repository.
Deployment Methods to GitHub Pages
There are various ways to deploy a project to GitHub Pages, depending on your project's nature and your preference for handling it post-deployment.
Basic Code for deployment
JavaScript // src/app/js import './App.css'; function App() { return ( <div className="App"> <h1>Welcome to github pages</h1> <h3>this is was published using github pages</h3> </div> ); } export default App; 1. Deploying a Static Site from the main or master Branch
This is the simplest approach, where your static site is hosted directly from the root of your main or master branch.
Step 1: Navigate to the repository settings
In the "GitHub Pages" section, select the main or master branch as the source and save changes.
cd my-project
Step 2: Initialize Git repository and commit files
git init git add . git commit -m "Initial commit"
Step 3: Create a new repository on GitHub and push your code
git remote add origin https://github.com/username/my-project.git git push -u origin main
Now, enable GitHub Pages in the repository settings.
GitHub Pages SettingsOutput
After completing the above steps, your site will be live at https://username.github.io/my-project/.
Deploying a Static Site from the main or master Branch2. Deploying from a gh-pages Branch
This method involves using a dedicated gh-pages branch for GitHub Pages, allowing you to keep your main development branch separate from the deployment branch.
Step 1: Create and switch to the gh-pages branch
git checkout --orphan gh-pages
Step 2: Add your static files
git add . git commit -m "Deploy site to GitHub Pages"
Step 3: Push the branch to GitHub
git push origin gh-pages
Output
Your site will be live at https://username.github.io/my-project/.
Deploying from a gh-pages Branch3. Deploying with GitHub Actions
GitHub Actions can automate the deployment process, especially useful for projects that require a build step (like React or Next.js).
Step 1: Create a .github/workflows directory
mkdir -p .github/workflows
Step 2: Create a deploy.yml file in the .github/workflows folder
touch .github/workflows/deploy.yml
Step 3: Add the following workflow configuration
JavaScript # .github/workflows/deploy.yml name: Deploy to GitHub Pages on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: "14" - run: npm install - run: npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build Step 4: Commit the Workflow File
git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow for deployment"
git push origin main
After you push the deploy.yml file to the main branch, GitHub Actions will automatically run the workflow. You can monitor its progress in the Actions tab of your GitHub repository.
Your site will be live at https://your-username.github.io/my-app.
Output
4. Deploying a React or Next.js Project
Step 1: For this method you have to update your package.json file
{ "name": "my-app", "version": "0.1.0", "private": true, "homepage": "https://your-username.github.io/my-app", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } }Step 2: Build the project
npm run build
Step 3: Install gh-pages and deploy
npm install gh-pages --save-dev
npx gh-pages -d build
Output
Your React or Next.js site will be live at https://username.github.io/my-project/.
Deploying a React or Next.js ProjectAdvantages of Using GitHub Pages
Pros | Cons |
|---|
Free hosting | Limited to static content |
|---|
Easy integration with GitHub | No server-side processing |
|---|
Custom domains available | Limited to public repositories |
|---|
Supports Jekyll for dynamic sites | Not suitable for large-scale apps |
|---|
Version control built-in | Limited customization options |
|---|
Best Practices for Securing Content on GitHub Pages
- Use Strong Passwords and Two-Factor Authentication (2FA): Ensure your GitHub account is protected with a strong password and 2FA to prevent unauthorized access.
- Keep Repository Private (if needed): For sensitive projects, consider keeping your repository private. This restricts access to your code and content to authorized users only.
- Limit Access to Collaborators: Be selective about who has write access to your repository. Only add collaborators who need to contribute to the site.
- Use Content Security Policy (CSP): Implement a Content Security Policy (CSP) in your site's HTML headers to protect against cross-site scripting (XSS) attacks.
- Regularly Update Dependencies: Keep all dependencies (e.g., libraries, frameworks) up to date to ensure your site isn’t vulnerable to known security issues.
Similar Reads
GitHub REST API The GitHub REST API allows developers to interact with GitHub programmatically, enabling you to manage repositories, handle issues, automate workflows, and integrate GitHub with other tools and platforms. Whether you're building an application, automating repetitive tasks, or just curious about how
4 min read
Issues in GitHub GitHub is more than just a platform for hosting code; it’s a powerful tool for managing projects and collaborating with teams. One of the key features that provides this is the Issues system. GitHub Issues helps developers track bugs, enhancements, and tasks, ensuring that projects stay organized an
4 min read
What is GitHub? For collaborative software development, version control systems have become an essential part of the development process. GitHub is one of the most popular platforms for version control and collaborative coding, and it plays an important role in how developers work together, manage their code, and c
6 min read
What is GitHub Labels? GitHub Labels are designed to help developers manage and organize issues and pull requests within their repositories. Labels act as tags that can be applied to issues and pull requests, providing a way to categorize, prioritize, and filter them based on various criteria. This article will explore wh
4 min read
GitHub Workflows GitHub Workflows are a powerful feature of GitHub Actions that automate tasks such as building, testing, and deploying your code directly from your GitHub repository. Workflows are highly customizable, allowing you to create automated processes that fit your specific project needs. This article prov
5 min read