GitHub Pages

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

1. User/Organization Sites: These sites are tied to your GitHub username or organization name and are hosted at username.github.io.
2. 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

// 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 push -u origin main

Now, enable GitHub Pages in the repository settings.

Output

After completing the above steps, your site will be live at https://username.github.io/my-project/

2. 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/

3. 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

# .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/

Advantages of Using GitHub Pages

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.