How to Deploy Static Websites Anywhere with Github Actions

How to Deploy Static Websites Anywhere with Github Actions

Introduction

We've come a long way from the days of simple FTP uploads for hosting websites. Now, with the emphasis on scale and automation, deploying static sites can feel unnecessarily complex. But fear not, we're here to simplify the process using Github Actions.

The Challenge of Modern Hosting

Hosting providers often push for Github integrations, but what if you want more control over your deployment process? We'll show you how to deploy your static site wherever you want, without being tied down by forced build processes.

Our Toolbox for Today

Let's get familiar with the tools we'll be using:

  • Github Actions: Your build pipeline, offering flexibility and automation.

  • rclone: A versatile file-syncing tool supporting various services.

  • Buildpacks: Build projects without Dockerfiles, streamlining the process.

Setting up our sample Gatsby site

If you're using Gatsby, follow these steps to prepare your site for deployment. Don't worry; we'll keep it simple:

  1. Initialize your Gatsby site.

  2. Build your site using npm run build.

  3. Verify your site by running npm run serve.

Building it with Actions

Time to dive into Github Actions. Let's set up the workflow to automate your deployment process effortlessly.

Creating the Workflow

Follow these steps to create a Github Actions workflow:

  1. Set up a new repo on Github.

  2. Add the necessary actions to your project.

  3. Push your changes to trigger the workflow.

Deployment Options

Now that we've set up the workflow, let's explore different deployment options for your static site:

Deploy to AWS S3

Amazon's S3 offers robust hosting capabilities. Here's how to deploy your site to S3:

  1. Create a bucket on AWS.

  2. Configure IAM permissions.

  3. Ensure TLS/SSL for secure connections.

Deploy to Netlify

Netlify provides an intuitive platform for hosting static sites. Follow these steps to deploy to Netlify:

  1. Create a new site on Netlify.

  2. Use the provided job definition to deploy.

Deploy to Github Pages

Github Pages is a convenient option for hosting using Git. Here's how to set it up:

  1. Create a gh-pages branch.

  2. Use Github Actions to update your site.

Deploy to Neocities

Neocities offers free hosting with optional TLS support. Deploy your site with ease:

  1. Obtain your Neocities API key.

  2. Add the key to your repo secrets.

  3. Use the provided job definition for deployment.

Deploy via SFTP

For those preferring traditional hosting, SFTP is a solid choice. Follow these steps for deployment:

  1. Set up your SFTP credentials.

  2. Use the provided job definition for deployment.

Additional Hosting Providers

Looking for more options? Reach out to us if you want to explore other hosting providers compatible with manual uploads.

Final Words

Hosting providers may impose integrations, but there's always a way to regain control over your deployment process. Let's keep things simple and flexible, just like the good ol' days of FTP uploads.

Appendix

Explore additional tips and tricks for handling Docker images and more.