注册
> 资源中心>博客资讯>编程开发

如何用Eleventy (11ty) 制作一个静态网站

WBOLT_COM 5 月 10, 2023 1.3k+ 0

如何用Eleventy (11ty) 制作一个静态网站

随着像Eleventy这样的静态网站生成器（SSG）的兴起，创建一个时尚而高效的静态网站从未如此简单。

在这篇文章中，我们将探讨如何使用Eleventy来制作一个令人惊叹的功能性静态作品集网站，而不需要服务器端语言或数据库。

你还将学习如何将你的静态网站直接从GitHub仓库部署到云服务应用托管平台，让你的网站快速上线。

下面是你将用Eleventy建立的静态作品集网站的现场演示。

时尚的静态作品集展示网站

时尚的静态作品集展示网站

如果你想仔细看看，你可以访问这个项目的GitHub仓库。

  1. 什么是Eleventy？
  2. 如何安装Eleventy
  3. Eleventy的命令和配置
  4. 如何预览一个Eleventy网站
  5. 如何用Eleventy创建一个作品集静态网站
  6. 如何创建附属页面并添加到主页上
  7. 如何在Eleventy网站上添加主题
  8. 如何部署一个Eleventy网站

什么是Eleventy？

Eleventy，也被称为11ty，是一个静态网站生成器，可以创建由HTML、CSS和JavaScript驱动的网站，而不需要数据库和后端编程语言。

Eleventy以其简单性和灵活性著称，因为它不强迫你只使用一种模板语言或框架。它支持超过10种模板语言，甚至允许你在一个项目中使用任意多的模板语言：

Eleventy模板语言

Eleventy模板语言

Eleventy和大多数SSG一样，允许你使用可重复使用的组件来构建静态网站的内容，而不是为每个页面创建完整的HTML文档。

如何安装Eleventy

安装Eleventy很容易。具体方法如下：

  1. 确保你的电脑上安装了Node.js。你可以通过在终端运行 node -v 命令来检查。不可用？以下是在你的电脑上安装Node.js的方法。
  2. 为你的项目创建一个新的目录。
  3. 打开你的终端，在你的项目目录中运行命令 npm init -y ，以初始化一个新的Node.js项目，创建一个带有默认设置的package.json文件。
  4. 运行命令 npm install @11ty/eleventy --save-dev ，将该包作为开发依赖项安装到你的项目中。
  5. 这就是了! 现在你可以通过在你的项目目录下运行命令 npx @11ty/eleventy 来运行Eleventy。这将生成你的网站文件，并将它们输出到你的项目文件夹中的_site目录（或你配置的目录）。

注意：当你运行 npx @11ty/eleventy 命令时。你会得到这样的输出：

[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)

这里，写了0个文件是因为你的项目文件夹里没有模板。

Eleventy命令和配置

你现在已经创建了你的Eleventy项目，但这还不是全部。你需要为你的静态网站创建一些配置并了解一些基本的命令，这些命令可以提供给浏览器。

Eleventy命令

下面是一些你应该知道的Eleventy关键命令：

  • npx eleventy： 这个命令用于建立你的网站，并将结果输出到_site文件夹（或你配置为输出目录的任何文件夹）。
  • npx @11ty/eleventy --serve： 这个命令将启动一个本地服务器，以便你能在浏览器中预览你的网站。当你对你的网站做任何改动时，你的项目将自动重建并在你的浏览器中更新。
  • npx @11ty/eleventy --serve --port=8081： 这条命令启动Eleventy服务器，并指定一个服务器要监听的自定义端口。
  • npx @11ty/eleventy --watch： 这个命令将观察你的项目文件是否有变化，并在必要时自动重建你的网站。

你不必记住这些命令，因为你可以在package.json文件的scripts对象中把它们添加到一般命令中：

"scripts": {
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"build": "npx eleventy"
},

现在你可以使用 npm start 来服务你的应用程序，而不是 npx @11ty/eleventy --serve ，同时你也可以运行 npm run build 来代替 npx eleventy 。

如何用Eleventy配置你的静态网站

Eleventy默认为 “零配置”，有灵活的配置选项。下面是一些你应该知道的关键配置选项：

  • input：这个选项让你指定你的项目文件的目录。最好的做法是使用src。
  • output：这个选项让你指定你的网站应该输出到哪个目录。默认情况下，Eleventy会输出到_site文件夹中。(许多开发者使用public）。
  • templateFormats：这个选项让你指定哪些文件扩展名应该作为模板来处理。默认情况下，Eleventy处理.html、.njk和.md文件作为模板。

这些只是Eleventy中可用的一些命令和配置选项。要配置你的Eleventy项目，在你的项目根部创建一个.eleventy.js文件。然后把这些代码粘贴到文件中，给你的项目一个包括输入和输出目录的结构：

module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};

注意： eleventyConfig 作为一个参数被传递，提供了更多的配置选项，将在本项目的后面使用。

如何预览一个Eleventy网站

你现在知道了一些可以用来预览Eleventy静态网站的关键命令，但是当你运行命令时，比如 npx @11ty/eleventy ，什么都没有提供。这是因为你没有模板文件。

你可以在你项目的根目录下创建一个src文件夹，然后创建一些模板文件，如index.html，或者使用你喜欢的模板语言来表示主页：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eleventy Static Site</title>
</head>
<body>
Hello World!
</body>
</html>

如果你现在运行 npx @11ty/eleventy 命令，一个public文件夹将被创建，里面有生成的静态文件。你肯定想让这个文件提供给你的浏览器，并启用一些热重载功能。这可以通过运行以下命令来实现：

npx @11ty/eleventy --serve

这将在http://localhost:8080/，为你的网站提供服务。

这些命令是相当难记的，而且总是使用。你已经在你的package.json文件中把它们加入了熟悉的语法，所以你可以使用 npm start 把你的应用程序服务到http://localhost:8080/。

如何用Eleventy创建一个作品集静态网站

你现在知道如何用Eleventy创建一个静态网站了。让我们来创建作品集项目。

你可以从头开始创建一个新的Eleventy项目，或者你想为你的项目创建图片、CSS和实际内容，所以我们创建了一个GitHub仓库模板来帮助你加快进度。在GitHub中，选择Use this template > Create a new repository，将这些资产和初始配置文件复制到你自己的新仓库中，然后将它们下载到你的本地机器上。

你的项目将有以下结构：

├── node_modules/
├── public/
├── src/
|        ├── _includes
|                      ├── layouts
│       ├── assets
│       ├── css
│       ├── projects
│       └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.json

如何在Eleventy中使用模板

在使用Eleventy时，你需要了解三大类型的模板。这些模板可以用Nunjucks创建，它允许你定义变量、循环、条件和其他逻辑，可以用来动态生成页面的内容。

  • Page Templates：它们定义了你网站上各个页面的结构和内容。
  • Layout Templates：它们定义了你的网站页面的整体结构和设计。它们通常包括共同的元素，如页眉、页脚、导航菜单和侧边栏，这些元素在多个页面中共享。
  • Partials Templates：它们定义了你的网站的HTML标记的小的、可重复使用的部分。它们通常用于定义常见的元素，如页眉、页脚、导航菜单和侧边栏，它们可以包含在布局和页面模板中。

现在你已经了解了这些类型的模板中的每一种。让我们来为作品集静态网站创建模板。

如何在Eleventy中创建布局

在src目录下，创建一个_includes目录。这将包含我们所有的布局和参数。

然后，你可以创建一个layouts文件夹（用于适当的组织）来存放你所有的布局。这些布局是模板，可以使用你喜欢的模板语言，如Nunjucks，我们在这里使用。

让我们创建一个base.njk文件来保存你所有页面的一般布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</html>

在上面的代码中，创建了一个普通的HTML标记，并从CDN中包含了Font Awesome，这样你就可以访问它的图标。此外，内容变量也被传递，以便使用该布局的任何页面的所有内容都被包括在内。

但这并不是整个布局的故事。你的布局将有一些部分会出现在每个页面上，例如导航栏和页脚。让我们为这些部分创建参数。

如何在Eleventy中使用参数

所有参数都存储在_includes目录下。为了适当地组织，你可以把它们存放在一个文件夹里。在这种情况下，在_includes目录下创建一个components文件夹，并创建导航条和页脚模板。

下面是navbar.njk中的导航条参数：

<div class="nav-container">
<div class="logo">
<a href="/">
J.
</a>
</div>
<div class="nav">
<a href="/projects" class="link">
Projects
</a>
<a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a>
</div>
</div>

这里是footer.njk中的页脚部分：

<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>

将这些参数添加到你的页面或布局模板中。这可以用 {% include %} 语句来完成。下面是当你包括导航条和页脚模板时，layouts/base.njk模板会是什么样子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{{ content | safe }}
{% include "components/footer.njk" %}
</div>
</body>
</html>

当你运行 npm start 命令时，这个布局不会出现，因为它还没有被添加到页面模板中。创建一个页面模板并添加这个布局。

如何在Eleventy中创建页面模板

在你的src文件夹中，创建一个index.njk文件，作为你的作品集网站的主页。这个页面将使用基础布局：

---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>

当你现在运行 npm start 命令时，你的静态网站将加载到http://localhost:8080/。这就是输出的样子：

没有样式的页面模板

没有样式的页面模板

如何在Eleventy中使用CSS和图片

你现在知道了存在的各种模板，它们是如何工作的，以及它们如何一起使用。但是你会注意到，在layouts/base.njk文件中，有一个CSS文件被链接到作品集页面的样式，但是当网站加载时，CSS样式并没有受到影响，因为这个CSS文件没有被添加到public文件夹中。

要解决这个问题，你需要在你的.eleventy.js文件中使用 eleventyConfig 参数进行配置。这样，Eleventy就可以知道CSS文件的存在，也可以观察到CSS文件可能的变化。

在src文件夹中，你可以创建一个css文件夹来存放你项目中要使用的所有CSS文件，但在本文中，你可以使用一个CSS文件–global.css。然后你可以对css文件夹进行配置，这样它就可以配置该文件夹内的所有文件：

eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');

对图像也是如此。如果你在你的页面上添加任何图片，你会发现它不显示。为了让它显示出来，你需要配置你的图片存放的文件夹。让我们创建一个assets文件夹来存储我们所有的图片并配置assets文件夹。

eleventyConfig.addPassthroughCopy('src/assets');

这就是你的配置文件现在的样子：

module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};

当你运行 npm start 时，CSS样式将起作用，你的主页将看起来像这样：

添加布局后的模板外观

添加布局后的模板外观

创建部分布局并添加到主页中

你现在已经成功地创建了一个布局并将其添加到你的主页（index.njk）。让我们自定义主页，以容纳一些关于你自己的信息，如关于你的更多信息，你的技能，和联系信息。

你可以决定将你的代码和标记直接添加到index.njk模板中，但让我们为主页、关于、技能和联系信息创建单独的Partials。

Hero部分

这是导航栏下面的第一个部分，其主要目的是让用户了解网站的内容。

<div class="hero-container">
<img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" />
<div class="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.
</p>
<div class="social-icons">
<a href="https://twitter.com/olawanle_joel">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://github.com/olawanlejoel">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/olawanlejoel/">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>

上面的代码中包含了关于你的一些细节，还有一些社交图标，以连接到你的社交媒体资料的链接。

Hero部分应该看起来像这样：

Hero展示

Hero展示

你可以在Hero部分添加更多的内容，改变css/globals.css文件中的样式，甚至创建你自己的这部分版本。

About部分

关于部分告诉访问你的作品集的人关于你的更多信息，可以有很多段落。如果你有更多的信息需要讲述，这可以是一个单独的页面。

<div class="about-container">
<h2>About Me</h2>
<div class="flex-about">
<div class="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p>
</div>
<div class="about-img">
<Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" />
</div>
</div>
</div>

该代码包含关于你的信息（一张图片和一些文字）。这就是 “About” 部分应该有的样子：

About部分

About部分

Skills部分

本节用于显示你使用或喜欢使用的技术。

<div class="skills-container">
<h2>Skills</h2>
<div class="grid-skills">
<div class="skill-card html">
<i class="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div class="skill-card css">
<i class="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div class="skill-card js">
<i class="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div class="skill-card react">
<i class="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div class="skill-card node">
<i class="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div class="skill-card python">
<i class="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>

上面的代码创建了一个卡片，用来存放字体漂亮的技术图标和每个技能的名称。你还可以添加更多的样式，并修改代码，使其更有吸引力和特色。这就是技能部分应该有的样子：

Skills部分

Skills部分

Contact部分

既然这是一个作品集，你应该为潜在客户添加一个联系你的途径。一种方法是让人们向你发送电子邮件。

<div class="contact-container">
<h2>Get In Touch</h2>
<p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p>
<a href="mailto:joelolawanle@kinsta.com" class='cta-btn'>Say Hello</a>
</div>

用你自己的标签替换 a 标签中的电子邮件地址，这样按钮就会启动一个电子邮件应用程序，让人们给你发信息。

Contact部分

Contact部分

你现在已经成功地为你的主页创建了所有的Partials。接下来，你需要将它们包含在你的index.njk文件中，这样它们就可以显示在主页上：

---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}

当你运行start命令时，你的主页将相应地显示所有添加的Partials。

如何在Eleventy中使用集合

在Eleventy中，集合是一种将相关内容分组的方式，这样你就可以根据这些内容来生成页面。例如，如果你有类似内容（博客文章）的markdown文件存储在你项目的博客文件夹中，你可以使用集合来获取它们，并显示所有内容的列表。同时，你可以创建一个布局来处理这些内容的显示方式。

集合是在.eleventy.js配置文件中定义的，可以包括来自不同来源的数据，如markdown或JSON文件。

对于这个作品集网站，让我们在src目录下创建一个projects目录，用来存储每个项目的markdown内容。这些内容将包括项目的细节，解决的问题，使用的技术，遇到的挑战，以及学到的教训。

你可以用项目的名字（quotes-generator.md）创建一个markdown文件，然后粘贴下面的代码：

---
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.
### Technologies Used
The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.
### Challenges and Lessons Learned
One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.
Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.
Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.
Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.

注意：如果你使用了入门模板，你应该已经有了它们，否则你可以从GitHub上我们的入门模板的项目目录中复制它们。

这些文件顶部的frontmatter和模板一样，使数值可以注入你的模板中。

因为这些Markdown文件在src目录下，Eleventy会把它们当作模板，并为每个文件生成一个HTML页面。它们的URL将是/projects/quotes-generator之类的。

没有布局的项目外观

没有布局的项目外观

然而，Eleventy不会知道对这些页面使用什么布局，因为它们的前言中还没有一个布局值。

让我们首先为这些内容创建一个布局，然后再创建一个集合，并将它们作为一个列表添加到专门的项目页面。

像以前一样，在layouts文件夹中创建一个布局文件（project.njk）。为了避免重复，因为这个文件将使用默认的HTML标记，你通过创建一个块来调整base.njk布局，以表示你的布局中将要改变的部分。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{% block content %} 
{{ content | safe }}
{% endblock %}
{% include "components/footer.njk" %}
</div>
</body>
</html>

该块被赋予了一个名字content，因为你可以在你的模板中拥有许多块。现在你可以把它扩展到你的project.njk布局中，所以你只需要指定内容块：

{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="{{image}}" alt="image" class="banner-img" />
<a href="{{gitHubURL}}" class="cta-btn pt-btn">
<div class="small-icons">
GitHub <i class="fa-brands fa-github"></i>
</div>
</a>
{{ content | safe }}
</div>
{% endblock %}

在上面的代码中，你正在指定每个项目将如何显示。它将从fronttmatter获取title、image和gitHubURL，然后使用内容变量（ {{ content | safe }} ）添加其他内容。

下一步将是为每个项目的前言添加一个布局键和值：

---
layout: layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
…

当你重新加载每个项目的URL时，例如/projects/quotes-generator，你会发现它现在使用创建的布局：

项目外观与布局

项目外观与布局

如何在模板中使用集合

现在你的每个项目都能很好地显示出指定的布局，但人们如何能访问这些项目呢？你需要创建一个列表，人们可以点击它来访问每个项目。这就是集合的作用。

要使用集合，你必须在.eleventy.js配置文件中使用 addCollection() 方法定义它。

module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};

在上面的代码中， addCollection() 方法被用来定义一个叫做projects的集合。传递给 addCollection() 的回调函数使用 getFilteredByGlob() 方法返回projects目录下的所有markdown文件。

一旦你定义了一个集合，你可以在模板中使用它来生成基于该内容的页面。让我们创建一个projects.njk页面模板，它将使用base.njk布局，但其内容将是projects集合中的项目：

---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
<h2>Projects</h2>
<div class="projects-grid">
{% for project in collections.projects %}
<div class="project-card">
<div class="project-header">
<i class="fa-regular fa-folder-open folder-icon"></i>
<div class="small-icons">
<a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{{project.data.title}}</h3>
<p>{{project.data.description}}</p>
<a href="{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>

在上面的代码中，{% for %} 语句被用来循环浏览projects集合中的所有项目，并为每个项目生成一个项目卡。

你可以使用 project.data.[key] 来访问所有的变量。例如，上面的代码将显示项目的标题、描述和GitHub URL。你还可以使用 project.url 访问项目的URL。

当你运行start命令并导航到项目页面时，当你添加许多项目时，你的页面会是这个样子：

项目模板页

项目模板页

如何使用简码

短码是一种定义自定义HTML标签或JavaScript动态值的方法，你可以在你的模板中重复使用。例如，你可以定义一个简码来生成当前年份并将其添加到你的网站。

在.eleventy.js配置文件中，你可以使用 addShortcode() 方法定义一个短码。例如，下面的代码定义了一个名为year的短码：

module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};

上面的年份简码将返回当前年份，你可以将其添加到你的项目中的任何模板中。例如，你可以使用 {% year %} 动态添加年份，而不是硬编码到这个网站的页脚，所以它每年都会自我更新：

<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>

当页面被渲染时，输出将包括HTML p 标签中的当前年份。

如何在Eleventy网站上添加主题

在Eleventy网站上添加主题是一个快速定制网站外观和感觉的好方法。官方称Eleventy将主题称为启动器，但要明白它们的含义是一样的。许多网站提供免费的Eleventy主题，如官方Eleventy启动器和Jamstack主题。

你所要做的就是选择你喜欢的主题或启动器，然后访问其GitHub仓库，将其克隆到你的本地机器上。确保你阅读其文档，了解配置和定制项目的步骤。

运行 npm install 来安装所有使用的软件包，然后运行 npm start 来为你的应用程序提供本地服务，http://localhost:8080/。

如何部署一个Eleventy网站

你现在已经成功地用Eleventy创建了一个时尚的作品集静态网站。在你的本地机器上拥有这种类型的网站是不够的。你会想把它托管在网上，与任何人分享它。

众多云平台，允许你托管静态网站，包括Eleventy。这可以通过将你的代码推送到GitHub，最后部署到云服务器来完成。

推送你的Eleventy网站到GitHub

首先，在GitHub上创建一个仓库；这将使你能够访问仓库的URL。然后你就可以使用git命令来推送你的代码。

在推送文件到GitHub之前，最好先创建一个.gitignore文件，指定一些在推送代码时Git应该忽略的文件和文件夹。在你的根目录下创建一个.gitignore文件，并添加以下内容：

# dependencies
/node_modules
# run
/public

现在你可以通过打开终端，导航到包含项目的目录，并运行以下命令来初始化你的本地 Git 仓库：

git init

现在用下面的命令把你的代码添加到本地Git仓库：

git add

现在你可以使用以下命令提交你的修改：

git commit -m "my first commit"

注意：你可以用描述你的改动的简短信息来代替 “my first commit”。

最后，用以下命令将你的代码推送到GitHub：

git remote add origin [repository URL]
git push -u origin master

注意：确保用你自己的 GitHub 仓库 URL 替换”[repository URL]”。

一旦你完成了这些步骤，你的代码将被推送到GitHub，并可以通过你的仓库的URL访问。

将您的Eleventy网站部署到Kinsta上

部署到Kinsta只需几分钟时间。从 “My Kinsta” 仪表盘开始，登录或创建你的账户。接下来，你将在GitHub上对Kinsta进行授权。

然后你可以点击左侧边栏的Applications，然后点击Add service，最后从下拉菜单中点击Application：

部署到Kinsta的应用托管上

部署到Kinsta的应用托管上

会出现一个模式，你可以通过这个模式选择你想部署的仓库。如果你的版本库里有多个分支，请选择你希望部署的分支。

然后你可以为这个应用程序指定一个名称。在25个可用的数据中心中选择一个位置，然后Kinsta会自动检测启动命令。

部署Eleventy静态网站

成功部署Eleventy静态网站

你的应用程序将开始部署。在几分钟内，将提供一个链接来访问你的网站的部署版本。在这种情况下，它是https://ty-portfolio-lvjy7.kinsta.app/

小结

在这篇文章中，你已经学会了如何用Eleventy制作一个时尚的网站，如何从头开始定制一个Eleventy静态网站，以及如何建立一个漂亮的作品集网站。

无论你是要建立一个个人博客，一个作品集网站，还是一个在线商店，Eleventy都可以帮助你以最小的努力和最大的影响来实现你的目标。

评论收藏微海报
分享
分享到

相关推荐

评论留言

热门主题

热门插件

  • 什么是Eleventy？
  • 如何安装Eleventy
  • Eleventy命令和配置
  • Eleventy命令
  • 如何用Eleventy配置你的静态网站
  • 如何预览一个Eleventy网站
  • 如何用Eleventy创建一个作品集静态网站
  • 如何在Eleventy中使用模板
  • 如何在Eleventy中使用CSS和图片
  • 创建部分布局并添加到主页中
  • Hero部分
  • About部分
  • Skills部分
  • Contact部分
  • 如何在Eleventy中使用集合
  • 如何使用简码
  • 如何在Eleventy网站上添加主题
  • 如何部署一个Eleventy网站
  • 推送你的Eleventy网站到GitHub
  • 将您的Eleventy网站部署到Kinsta上
  • 小结