How do you host an 11ty site on GitHub pages?

[binyamin]

Jekyll works very well with GitHub pages. So does React. But Eleventy poses some difficulties.

I'm sure this question has been answered umpteen times, and asked twice as often. I'm interested in what different solutions people use.

[Ryuno-Ki]

I'm not hosting on GitHub myself (bot on the Shared Hosting provider called Uberspace), but hosting on GitHub would imply a gh-pages branch on the repo. The URL is build as https://<username>.github.io/<reponame>/. You can even create one without <reponame> if the repo is called like the domain.

Lastly, using the npm package gh-pages can be pointed to the output directory by eleventy as a postbuild step (for example).

[binyamin]

but hosting on GitHub would imply a gh-pages branch on the repo

Not necessarily; iirc Jekyll and React work automatically.

[Ryuno-Ki]

Well, there are a few different steps necessary but it works almost the same.

Keep in mind, that there is a limitation on the themes you can use (for security reasons).

As far as I know, GitHub was built with Ruby (on Rails) in the beginning. Thus, Jekyll is close enough to be offered as a service.

Can't tell about React support.

[nhoizey]

There's a tutorial written by @lea37 here: https://lea-tortay.com/writings/github-pages-eleventy/index.html

[edthedev]

Thanks @lea37 for the tutorial! I've been using this method for some time with 11ty, and it works great!

[architchandra]

Thanks for this. The article from @lea37 and https://www.rockyourcode.com/how-to-deploy-eleventy-to-github-pages-with-github-actions/ helped me.

[holdenmad]

Can someone explain why the docs solution works/worked?

[lea37]

Can someone explain why the docs solution works/worked?

It comes from GitHub itself
See the doc here

the source folder can either be the root of the repository (/) on the source branch or a /docs folder on the source branch

[holdenmad]

@lea37 Thank you so much 🙏🏼

[timkley]

This is also a great tutorial, written by Sophia Brandt: https://www.rockyourcode.com/how-to-deploy-eleventy-to-github-pages-with-github-actions/

I used it to setup deployment for a page today in about 20 minutes, very well written!

[phineas-pta]

now github has it own action to deploy page, here an updated pipeline

name: build 11ty site

on:
  push:
    branches: ["main"]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:

  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - name: Install dependencies & build
        run: |
          npm install
          npx @11ty/eleventy
      - uses: actions/upload-pages-artifact@v2

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - id: deployment
        uses: actions/deploy-pages@v2
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

just make sure the output dir is _site

[cuppajoeman]

I think I also independently stumbled across a similar answer to @phineas-pta, I wrote a blog post about it here