How to deploy to GitHub Pages

[efemkay]

I read the docs. U noted that it technically should be able to be deployed to most if not any static site host. I'm interested to know how one can deploy to GitHub Pages (i.e. with URL username.github.io).

The deploy to netlify and vercel have its own template from your docs page, which makes it quite straightforward. But I couldn't figure out how to do so with GitHub Pages. Can u share the steps / how to?

Thanks!

[David7ce]

I think you need to use the Digital Garden template which is an 11Ty template and deploy to GitHub. Then activate GitHub Pages and connect the plugin of your Obsidian vault to the GitHub repo.

11Ty is a Static Site Generator

It has three config files one
.GitHub/workflow/build.yml
Netlify.toml
Vercel.json

All of them with the commands for npm:
npm install
npm run build
npm run start

In theory you can run these npm commands locally and push the output website to the Git repo.

But I tried and I couldn't do it, some errors with keys or APIs I don't remember.

[oleeskild]

I looked a bit into it, and got it to work with the following workflow:

name: GH Pages

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-22.04

    strategy:
      matrix:
        node-version: [20.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      - run: npm install
      - run: npm run build --if-present

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: ./dist
          github_token: ${{ secrets.GH_TOKEN }}

You will need to add a GH_TOKEN secret to your repo, which should be a github API token having access to your repo. (You can reuse the one you have in your plugin settings)
You will also need to name your repository in github, <username>.github.io. So in your case efemkay.github.io. This is because otherwise the URL will be <username>.github.io/<repositoryname>. This will cause errors when the site tries to get CSS and Javascript from URLs like <username>.github.io/styles/style.css, because they are actually located in <username>.github.io/<repositoryname>/styles/style.css.

Let me know if you get it to work or not!

[zcysxy]

Is it possible to publish at a repo with a different name, i.e., to redirect it to get CSS and JS files from <username>.github.io/<repositoryname>/...?

[David7ce]

This is to autobuild with GitHub. But is it possible to build the template locally with "npm install & nmp run biuld --if-present" and then upload the "dist/" dir to GitHub with git?

I'm interesting in building manually without bots and neither GitHub tokens.

Edit: I have tried in the past but it didn't work, maybe there is a method to achieve that.