How to Deploy an Eleventy Static Site on a VPS
Eleventy (11ty) is a fast, flexible static site generator. Build your site locally or on your Breeze, then serve the output with Nginx for blazing-fast performance.
Install Node.js and Eleventy
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt install -y nodejs
mkdir ~/my-11ty-site && cd ~/my-11ty-site
npm init -y
npm install @11ty/eleventyCreate Content
# src/index.md
---
title: Welcome
layout: base.njk
---
# Welcome to My Site
This site is built with Eleventy and hosted on a Breeze.<!-- src/_includes/base.njk -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
</head>
<body>
{{ content | safe }}
</body>
</html>Build the Site
# Add to package.json scripts
# "build": "eleventy --input=src --output=_site"
npm run buildDeploy with Nginx
# Copy built files
sudo mkdir -p /var/www/mysite
sudo cp -r _site/* /var/www/mysite/
sudo chown -R www-data:www-data /var/www/mysiteserver {
listen 80;
server_name mysite.com;
root /var/www/mysite;
index index.html;
location / {
try_files $uri $uri/ =404;
}
# Cache static assets
location ~* \.(css|js|png|jpg|svg|woff2)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
}For continuous deployment, set up a Git hook that runs npm run build and copies files on push. Static sites on a Breeze deliver exceptional load times with minimal resource usage.