Toggle Menu
- Get Started
- Community
- Working with Templates
- Using Data
- Configuration
- Template Languages
- Plugins
- API Services
- Release History
- Advanced
1.93s
70.65s
Deployment
Contents
Now that youβve built a web site with Eleventy (even if itβs one HTML page!) you might be ready to put it on the web for everyone to see! There are a bunch of different ways to do it!
A standard Eleventy build (e.g. running npx @11ty/eleventy
) is a production-ready build by default. Eleventy doesnβt change its build behavior internally for development versus production.
If you want to customize Eleventy to do your own local development/production optimizations, environment variables are a common solution to accomplish that goal.
Providers Jump to heading
Take a look at the list below for some ideas on where to deploy your Eleventy project. There are many deployment options available and this is not meant to be an exhaustive list.
Classic Web Hosts Jump to heading
Eleventy can work with any web host that supports static files!
With these hosts deployment is not automatically triggered for you, so after you run the Eleventy build command youβll need to upload your Eleventy output directory (defaults to _site
) to the host manually.
This is a great place to start if youβre not familiar with source control (e.g. git or GitHub).
Jamstack Providers Jump to heading
Jamstack providers can trigger your Eleventy build command automatically when you commit a file to your source control repository (GitHub, GitLab, Codeberg, etc.) and deploy Eleventyβs build output directory for you.
Use an npm Script Jump to heading
One common practice when deploying Eleventy via a Jamstack provider is to use an npm script to run your build command. This is configured in your package.json
file and could look like this:
{
"scripts": {
"build": "npx @11ty/eleventy"
}
}
This allows you to configure your host to run npm run build
and allows you to make future changes to that command in your code and not the hostβs configuration.
Edit on the Web Jump to heading
There are some great Web editors popping up that you can use to run and edit Eleventy projects online! Here are some options:
Persisting Cache Jump to heading
The .cache
folder is used by the Eleventy Fetch plugin (and Eleventy Image) to avoid repeating costly network requests. On your hosting providerβs build server, this folder will typically be empty when you start a build, because you definitely are not checking in your .cache
folder to git
(right?).
Some Jamstack providers have additional features to persist this folder between builds, re-useing the cache and speeding up build times. Here are a few of these:
- CloudCannon: use Preserved paths. Tutorial on YouTube.
- Vercel: zero-configuration support (when the Eleventy framework is detected, source).
- Cloudflare Pages: not yet supported but weβve been working with the team to add itβcoming soon!
- GitHub Pages: use the
cache
action. Mini-tutorial included below. - Netlify: use
netlify-plugin-cache
. Mini-tutorial included below. Video on YouTube.
Speed up Eleventy Image Jump to heading
Additionally, if youβre writing your Eleventy Image output to your Eleventy output directory (e.g. ./_site/img/
) (and not checking those files into git
), you can persist this folder as well to reuse the Eleventy Image disk cache to improve build times.
Mini-tutorials Jump to heading
Deploy an Eleventy project to GitHub pages Jump to heading
Includes persisted cache across builds. Using peaceiris/actions-gh-pages
.
- Go to your repositoryβs Settings on GitHub.
- In the GitHub Pages section change:
- Source:
Deploy from a branch
- Branch:
gh-pages/(root)
- Source:
- Create a new GitHub workflow file in
.github/workflows/deploy-to-ghpages.yml
name: Deploy to GitHub Pages
on:
push:
branches:
- main
pull_request:
jobs:
deploy:
runs-on: ubuntu-22.04
permissions:
contents: write
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Persist npm cache
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
- name: Persist Eleventy .cache
uses: actions/cache@v3
with:
path: ./.cache
key: ${{ runner.os }}-eleventy-fetch-cache
- run: npm install
- run: npm run build-ghpages
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/main'
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./_site
Using netlify-plugin-cache
to persist cache
Jump to heading
Using netlify-plugin-cache
.
npm install netlify-plugin-cache
- Add the following to your
netlify.toml
configuration file[[plugins]]
package = "netlify-plugin-cache"
[plugins.inputs]
paths = [ ".cache" ]
Related Jump to heading
From the Community Jump to heading
Γ55 resources courtesy of 11tybundle.dev curated by Bob Monsour