For a completely no-cost static option - Github Pages

For building my personal websites, for a no-cost option, I use Github Pages via Github Actions. The downside is that the code needs to be public.

Anywho, I just drop this file into .github/workflows, change Pages to use Github Actions rather than a branch, and I am set:

name: Build and Deploy for Github Pages
on:
  workflow_dispatch:
  push:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: 🛑 Cancel Previous Runs
        uses: styfle/[email protected]
        with:
          access_token: ${{ secrets.GITHUB_TOKEN }}

      - name: ⬇️ Checkout repo
        uses: actions/checkout@v3

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: 📥 Download deps
        uses: bahmutov/npm-install@v1

      - name: ⚙️ Build
        run: yarn build

      - name: ⚙️ Setup Pages
        if: success()
        uses: actions/configure-pages@v1

      - name: 📁 Upload artifact
        if: success()
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload entire repository
          path: "./dist"

  deploy:
    # Add a dependency to the build job
    needs: build

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write # to deploy to Pages
      id-token: write # to verify the deployment originates from an appropriate source

    # Allow one concurrent deployment
    concurrency:
      group: "pages"
      cancel-in-progress: true

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: 🚀 Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

Note that I am assuming that ./dist is my output here.

For a somewhat private option - Vercel

My next line in choice is Vercel. Unlike Github Pages, just install the Vercel App and have Vercel point to one of your repos. Then, Vercel will know what to do - or you’ll need to provide what the deploy, build and output folders are.

What’s nice is that I get preview URLs per each branch. Excessive, but great. The only downside is that I believe there are limits.

If I like to experiment and tinker on things - Cloudflare Workers or Cloudflare Pages

The I like to live dangerously option choice is Cloudflare Workers or Cloudflare Pages. I haven’t done this option in years, but the upside to this one is that it may perform like Vercel’s Edge Functions - or even faster. This is because Cloudflare Workers deploys to many locations around the world, and will serve the closest to where you are.

There’s no need to deploy to many locations. That’s why I love it. Only downside to this is that I am not working with a Node environment here. I am working with a Cloudflare Workers, or Web Worker environment. It’s the new way of thinking.