Deploying Your 11ty Blog on GitHub Pages: A Full Guide #

Easily deploy your 11ty blog to GitHub Pages and share your content with the world..

Until now, creating an 11ty static blog was just the beginning. Now, you will need to deploy it so that everyone can see it online. One of the easiest ways to do that in this modern world is through GitHub Pages; it will host your static website for free. I'll take you through the whole deployment process for the 11ty blog on GitHub Pages here.

---

Prerequisites #

Before getting started, ensure you have the following:

1. A GitHub account
2. Git installed on your computer
3. An existing 11ty blog project

---

Step 1: Initialize a Local Git Repository #

If you haven't already, navigate to your 11ty project folder and initialize a local Git repository:

cd my-eleventy-blog
git init

Add all your files to the repository and commit them:

git add .
git commit -m "Initial commit for 11ty blog"

---

Step 2: Create a New GitHub Repository #

1. Go to GitHub and log into your account.
2. Click on the New button to create a new repository.
3. Name your repository (e.g., my-eleventy-blog). You can leave it public or private.
4. Do not select "Initialize this repository with a README" since your local repository already contains files.

Copy the repository’s remote URL (e.g., https://github.com/your-username/my-eleventy-blog.git).

---

Step 3: Link Your Local Repository to GitHub #

Back in your terminal, link your local repository to the new GitHub repository:

git remote add origin https://github.com/your-username/my-eleventy-blog.git

Push your local commits to GitHub:

git push -u origin main

---

Step 4: Configuring GitHub Pages #

1. In your repository in GitHub, click the Settings tab.
2. Scroll down to Pages in the left sidebar.
3. Under "Source," select Deploy from branch.
4. Choose the main branch and / (root) as the folder.
5. Click Save and this will enable GitHub Pages.

Within a few minutes, your blog will be ready at https://your-username.github.io/my-eleventy-blog/.

---

Step 5: Create a gh-pages Branch (Optional) #

You may want to create a dedicated gh-pages branch for cleaner deployments. Execute the following command:

git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Initial commit for gh-pages"
git push origin gh-pages

Changing in GitHub Pages settings, source should point to the gh-pages branch.

---

Step 6: Automate Deployments with GitHub Actions #

To automatically publish your blog whenever you push changes, a GitHub Actions workflow should be created:

1. In your project directory, create .github/workflows/deploy.yml.
2. Add the following configurations:

name: Deploy 11ty Blog

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install 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: $
          publish_dir: ./_site

Commit and push the new workflow:

git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow for deployment"
git push origin main

Now, with this setup, any time changes are pushed to the main branch, your blog will automatically deploy.

---

Step 7: Troubleshooting Deployment Issues #

If you don't see your site, try the following:

• Clear the cache in your browser.
• Make sure GitHub Pages is configured in the repository settings.
• In GitHub, verify that the Actions logs show that the deployment workflow completed without errors.

---

Conclusion #

Woohoo! Your 11ty blog is now live with GitHub Pages! GitHub Pages is a great place to publish your content because GitHub Pages deploys automatically and hosting is free. Now you can focus on creating great content, and explore the rest of the features in 11ty.