How to publish Scully (angular JAMstack) to Github Pages?

If you are an Angular developer and have heard about the JAMstack solution called Scully, I’m sure you’re excited! Especially if you feel nauseous when you have to write JSX and HTML tags in PascalCase 🤢…

You’ve already created your website with angular, and you already have it in your own repository in github.
Now, how will you publish the site in gh-pages?

Simple! You just need the following:

1. Create a branch called “gh-pages”.
2. Enable gh-pages in the repository.
3. Create a Github action to automatically build and publish the site at each commit to the master branch.

How do I do all this?
It’s also simple…

How do I create a branch called “gh-pages”?

1. Go to project’s repository
2. Click on the branches button
3. Write gh-pages on branches’ search-bar
4. Then click on create branche

How to enable gh-pages in the repository?

Before anything, you must make shure that repo is public.

Then, on repo go to:

1. Settings > Options > Github Pages
2. On “Source” select the branch “gh-pages” > “root”
3. On “Theme Chooser” select any theme (this won’t mess with your project and is necessary because Github Pages won’t publish the site until you choose a theme. I think it’s a bug… 🤷‍♂️)

How to create a Github action to publish Scully’s SSG?

To create a Github action that builds and publishes, automatically, your site, you should open “Actions” tab in the repo, select “setup workflow yourself” and then paste the following workflow and commit:

name: Scully Publish to GH-Pages

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: cmgriffing/scully-gh-pages-action@v9
        with:
          access-token: ${{ secrets.ACCESS_TOKEN }}
          deploy-branch: gh-pages
          build-args: --base-href /your-repo-name/

PS: in “build-args” change “your-repo-name” to the name of your repo (or to your custom domain if you have one)