kotlin-js-on-gh-pages VS github-pages-deploy-action

I hope you found this post useful. GitHub Actions is a powerful, but also complex tool, and I hope that these instructions make it a bit easier to get started together with Kotlin/JS. You can find the sample project I used to create the screenshots for this tutorial on GitHub as well, and use it as a source of inspiration or template for a future project.

The interesting part is towards the bottom where we build the frontend code and make use of the github-pages-deploy-action step to automatically make a new commit with the compiled frontend code to a gh-pages branch.

Finally, will do the deploy on github pages using the scripts from JamesIves/github-pages-deploy-action, and create a branch gh-pages with the code from apps/web/build.

- Deploy to GitHub Pages using GitHub Actions

For Storybook deploy, we will use github-pages-deploy-action

If you've built a site that can be rendered statically, then you can probably set up a GitHub Pages deploy via GitHub Actions (since Pages supports only Jekyll by default, you need this for any other static site generator). But if you have a server component, then you'll need to host it some other way.

Around three years ago I created the github-pages-deploy-action project as my first real venture into the world of open source. I built this action so I could make continued updates to a blog while being away from my work laptop. The community response has been fantastic and I'm very happy with how it has evolved over the years as a result. I even had the opportunity to be interviewed by GitHub for my involvement back in 2020 which you can read here.

This action is a composite action using shell scripts for installing necessary tools and preparing docs and makes use of JamesIves/github-pages-deploy-action for deploying the docs to a GitHub Pages branch.

github-pages-deploy-action is used to push a static exported site to gh-pages branch.

Lastly, we use another Action to deploy our project to GitHub Pages – but only if the workflow is running on the master or main branch (we don't want development branches to be deployed to the public!). We point this action to the build/distributions folder, which is where building a Kotlin/JS project creates the final .js and .html artifacts.