Deploying VitePress app to Fly.io

Posted by:

  • Avatar of Konstantin

    Konstantin

VitePress - Vue & Vite Powered Static Site Generator

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:

fly launch

⚠️ Make sure NOT to deploy the app once it's created

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 🎉!

fly deploy
VitePress

VitePress - Vue & Vite Powered Static Site Generator

Tags