A quick how-to guide on deploying your static Astro projects to Fly.io.
Deploying Astro projects to Fly.io.
Introduction
I have been a big fan of using fly.io for hosting my projects for about the last two years now. Having been converted over to using Astro for most if not all JS related projects I looked into how to host my Astro projects on Fly. My blog and website are both Astro projects that are hosted on Fly.
This will be a two part series; where in this first post we will look at how to deploy a static Astro project to Fly. In part two we will go over how to host a server-side rendered (SSR) Astro project on Fly.
Creating a new Astro project
If you are not using pnpm you can use the package manager of your choice. You can follow installation instructions here.
Setting up Fly locally for deployment
If you don’t already have Fly installed you can follow the official documentation here or if you too are on a Mac Homebrew is pretty solid option.
Once you have fly installed if you have an account already you can sign in. If not please signup using the CLI that will direct you to Fly’s website. After you are logged in locally we can run fly launch with in the project directory to setup the necessary files and infrastructure for Fly. Unless you want to tweak any of the settings you can just answer “No” to the prompt:
Updating Docker & Fly Configurations
You will see that three new files are at the root of the project .dockerignore, Dockerfile, and fly.toml along with modifications to the package.json and pnpm.lockfile. We need to make some updates to the Dockerfile and fly.toml before we deploy. First though we need to grab the value of Hostname from the output of running fly launch. We will make use of that value in the astro.config.mjs.
In the Dockerfile we are going to make use of GoStatic, a static web server written in Go, to serve the static files that are output from the build step.
In the fly.toml our changes are based on what GoStatic is looking for as the port numbers, concurrency limits, etc.
Time for Deployment
Now we can run fly deploy and sit back to wait for the magic to happen!
Finally you can just grab the link and visit your website! Too Easy!
Astro's content collection feature is a game changer for easily managing content in a type safe manner. It also can help to easily add related collections or data types through referencing. In this article I show how I implemented a related articles feature.
Cody is a Christian, USN Veteran, Jayhawk, and an American expat living outside of Bogotá, Colombia. He is currently looking for new opportunities in the tech industry.