Earlier today, I needed to make some adjustments to the way document is hosted for FeedbackBulb and here is a short step-by-step guide on how to configure a static deployment using VitePress on Fly.io.
VitePress is a simple but very powerful and performant library for creating static websites. Out of the box, it comes preconfigured for a quick and simple DX as well as good build defaults for a static website:
- Uses markdown files and frontmatter.
- Compiles to static HTML leading to a fast initial load.
- A very nice-looking default theme.
- And the option to customize or replace the theme, as well as various components as needed.
Speed-run your way to a static website
Start by creating a VitePress website:
npx vitepress init
Create the fly.io app which will be hosting the website:
Create a Dockerfile to:
- Build the VitePress website into a static website
- Start a static web server. For this, we will be using goStatic, a very small static server written in Go.
FROM node:18-alpine as base # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. FROM base AS buildtime RUN apk add --no-cache libc6-compat git # install dependencies FROM buildtime AS deps WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json package-lock.json ./ RUN npm ci # rebuilt static website FROM buildtime AS builder RUN apk add --no-cache libc6-compat git WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN npm run docs:build # serve content FROM pierrezemb/gostatic COPY --from=builder /app/.vitepress/dist /srv/http/
This part is inspired by Fly.io's guide for service static pages.
Finally, edit the
fly.toml configuration file in order to adapt the port on which the static webserver will be listening. By default, goStatic listens on port 8043:
... [http_service] internal_port = 8043 ...
That's it, time to deploy it 🎉!