- Stable
3.0.0
Toggle Menu
5.81s
43.36s
Deployment
Contents
现在你已经用 Eleventy 构建了一个网站了 (即使只有一个 HTML 页面!) ,并且已经准备好要把它放到网上让大家看看了!以下是各种部署网站的方式!
标准的 Eleventy 构建 (例如 运行 npx @11ty/eleventy
) 默认是针对生产环境的。Eleventy 内部并不会针对开发和生产环境改变自己的构建行为。
如果你想定制 Eleventy 来实现开发/生产环境的优化,环境变量 是实现这一目标的常用方法。
Providers
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.
Jamstack Providers
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
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.
Classic Web Hosts
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).
Edit on the Web
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
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: now preserves the
.cache
folder by default! (shipped April 2024) - 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
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
Deploy an Eleventy project to GitHub pages
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
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" ]
相关内容
来自社区的资源
×70 resources courtesy of 11tybundle.dev curated by Bob Monsour