С появлением генераторов статических сайтов (SSG), таких как Eleventy, создание стильного и эффективного статического сайта стало как никогда простым.
В этой статье мы рассмотрим, как использовать Eleventy для создания потрясающего и функционального статического сайта портфолио без использования серверного языка или базы данных.
Вы также узнаете, как развернуть статический сайт прямо из репозитория GitHub на платформе хостинга приложений Kinsta, чтобы быстро запустить сайт на бесплатном домене .kinsta.app.
Вот демонстрация статического сайта портфолио, который вы создадите с помощью Eleventy.
Создание стильного статического веб-сайта с Eleventy (11ty)
Вы можете получить доступ к репозиторию GitHub этого проекта, если хотите взглянуть на него поближе.
Оглавление
Что такое Eleventy?
Eleventy, также известный как 11ty, является генератором статических сайтов, который создает веб-сайты на основе HTML, CSS и JavaScript без необходимости использования баз данных и внутренних языков программирования.
Eleventy известен своей простотой и гибкостью, поскольку он не заставляет вас использовать только один язык шаблонов или фреймворк. Он поддерживает более 10 языков шаблонов и даже позволяет использовать столько языков, сколько вы хотите, в одном проекте:
Одиннадцать языков шаблонов
Eleventy, как и большинство SSG, позволяет создавать содержимое статического сайта с помощью многократно используемых компонентов, а не создавать полные HTML-документы для каждой страницы.
Установить Eleventy очень просто. Вот как:
- Убедитесь, что на вашем компьютере установлен Node.js. Вы можете проверить это, выполнив команду node -v в терминале. Не установлен? Вот как установить Node.js на ваш компьютер.
- Создайте новый каталог для вашего проекта.
- Откройте терминал и выполните команду npm init -y в директории вашего проекта, чтобы инициализировать новый проект Node.js, создав файл package.json с настройками по умолчанию.
- Выполните команду npm install @11ty/eleventy --save-dev, чтобы установить пакет в качестве зависимости разработки в вашем проекте.
- Вот и все! Теперь вы можете запустить Eleventy, выполнив команду npx @11ty/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: Эта команда будет следить за изменениями в файлах проекта и автоматически перестраивать сайт, когда это необходимо.
Вам не нужно запоминать эти команды, потому что вы можете добавить их к общим командам в объект scripts вашего файла package.json:
"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 имеет ”нулевую конфигурацию” и гибкие возможности настройки. Вот некоторые ключевые параметры конфигурации, которые вы должны знать:
- ввод: Эта опция позволяет вам указать каталог файлов вашего проекта. Лучше всего использовать 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, будет создана общая папка со сгенерированным статическим файлом. Вы обязательно захотите, чтобы он был передан в ваш браузер и включил некоторые функции горячей перезагрузки. Это можно сделать, выполнив следующую команду:
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, который позволяет вам определять переменные, циклы, условия и другую логику, которая может быть использована для динамической генерации содержимого страницы.
- Шаблоны страниц: Они определяют структуру и содержание отдельных страниц вашего сайта.
- Шаблоны макетов: Они определяют общую структуру и дизайн страницы (страниц) вашего сайта. Они обычно включают общие элементы, такие как верхние и нижние колонтитулы, навигационные меню и боковые панели, которые используются совместно на нескольких страницах.
- Шаблоны разделов: Они определяют небольшие, многократно используемые разделы 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="https://kinsta.com/../../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="http://kinsta.com/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</html>В приведенном выше коде создается общая HTML-разметка и включается Font Awesome из CDN, чтобы вы могли получить доступ к его иконкам. Также передается переменная content, чтобы все содержимое любой страницы, использующей этот макет, было включено.
Но это еще не вся история макета. В вашем макете будут некоторые разделы, которые будут появляться на каждой странице, например, панель навигации и нижний колонтитул. Давайте создадим партиции для каждого из этих разделов.
Как использовать разделы в Eleventy
Все части хранятся в каталоге _includes. Для правильной организации вы можете хранить их в папке. В этом случае создайте папку components в каталоге _includes и создайте шаблоны navbar и footer.
Вот партиклы Navbar в файле navbar.njk:
<div class="nav-container">
<div class="logo">
<a href="https://kinsta.com/">
J.
</a>
</div>
<div class="nav">
<a href="http://kinsta.com/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, если включить в него шаблоны navbar и footer:
<!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="https://kinsta.com/../../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="http://kinsta.com/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/. Вот как будет выглядеть вывод:
Шаблон страницы без стилей
Как использовать CSS и изображения в Eleventy
Теперь вы знаете, какие существуют шаблоны, как они работают и как их можно использовать вместе. Но вы заметили, что в файле layouts/base.njk файл CSS связан со стилями страницы портфолио, но когда сайт загружается, стили CSS не затрагиваются, потому что файл CSS не добавлен в общую папку.
Чтобы исправить это, необходимо настроить его в файле .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, но давайте создадим отдельные Частицы для разделов Главная, О себе, навыки и контактная информация.
Разделы о герое
Это первый раздел под Navbar, основная цель которого - дать пользователям представление о том, о чем сайт.
<div class="hero-container">
<img src="https://kinsta.com/blog/eleventy/../../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, изменить стили в файле css/globals.css или даже создать свою собственную версию этого раздела.
Разделы "О компании
Раздел ”О себе” предоставляет людям, которые посещают ваше портфолио, больше информации о вас в любом количестве абзацев. Это может быть отдельная страница, если вам нужно рассказать больше информации.
<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="https://kinsta.com/../../assets/about.jpeg" class="profile-img" alt="Joe and animal relaxing and having fun" />
</div>
</div>
</div>Код содержит информацию о вас (изображение и немного текста). Вот как должен выглядеть раздел ”О вас”:
О частицах
Парциальные навыки
Этот раздел используется для отображения технологий, которые вы используете или любите использовать.
<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>Приведенный выше код создает карточку для хранения иконки технологии font-awesome и названия каждого навыка. Вы также можете добавить дополнительные стили и изменить код, чтобы сделать его более привлекательным и четким. Вот как должен выглядеть раздел навыков:
Навыки партиципации
Контактные частицы
Поскольку это портфолио, вам следует добавить способ, с помощью которого потенциальные клиенты могут связаться с вами. Одним из способов может быть отправка вам электронного письма.
<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="https://kinsta.com/blog/eleventy/mailto:[email protected]" class="cta-btn">Say Hello</a>
</div>Замените адрес электронной почты в теге a на свой собственный, чтобы кнопка запускала приложение электронной почты, с помощью которого люди смогут отправить вам сообщение.
Контактные частицы
Теперь вы успешно создали все части для главной страницы. Далее вам нужно включить их в файл 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, на вашей домашней странице будут отображаться все добавленные Коллекции.
Как использовать коллекции в Eleventy
В Eleventy коллекции - это способ сгруппировать связанный контент вместе, чтобы вы могли создавать страницы на его основе. Например, если у вас есть файлы с похожим содержимым (записи блога), хранящиеся в папке блога вашего проекта, вы можете использовать коллекции, чтобы получить их и отобразить список всего содержимого. Также вы можете создать макет для обработки отображения этого содержимого.
Коллекции определяются в файле конфигурации .eleventy.js и могут включать данные из различных источников, таких как файлы markdown или JSON.
Для этого сайта-портфолио создадим каталог projects в каталоге src, чтобы хранить содержимое каждого проекта в формате markdown. Это содержимое будет включать подробную информацию о проекте, решенной проблеме, использованных технологиях, возникших проблемах и извлеченных уроках.
Вы можете создать файл markdown с именем проекта (quotes-generator.md) и вставить в него приведенный ниже код:
---
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.Примечание: Если вы использовали стартовый шаблон, они у вас уже должны быть, в противном случае вы можете скопировать их из каталога projects нашего стартового шаблона на GitHub.
frontmatter в верхней части этих файлов, как и в шаблонах, делает значения доступными для вставки в ваши шаблоны.
Поскольку эти файлы Markdown находятся в каталоге src, Eleventy будет рассматривать их как шаблоны и генерировать HTML-страницу для каждого из них. Их URL будет выглядеть примерно так: /projects/quotes-generator.
Внешний вид проекта без верстки
Однако Eleventy не знает, какой макет использовать для этих страниц, потому что у них еще нет значения макета в frontmatter.
Давайте сначала создадим макет для этого содержимого, прежде чем создавать коллекцию и добавлять их в виде списка на специальную страницу проектов.
Как и раньше, создайте файл макета (project.njk) в папке layouts. Чтобы избежать повторений, поскольку этот файл будет использовать 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="https://kinsta.com/../../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="http://kinsta.com/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, поэтому вам нужно указать только блок content:
{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="https://kinsta.com/blog/eleventy/{{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 %}В приведенном выше коде вы указываете, как будет отображаться каждый проект. Он получит заголовок, изображение и gitHubURL из frontmatter, а затем добавит другое содержимое с помощью переменной content ({{ content | safe }}).
Следующим шагом будет добавление ключа и значения layout в frontmatter каждого проекта:
---
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(), возвращает все файлы уценки в каталоге projects с помощью метода getFilteredByGlob().
Определив коллекцию, вы можете использовать ее в шаблоне для генерации страниц на основе этого содержимого. Давайте создадим шаблон страницы 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="https://kinsta.com/blog/eleventy/{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>В приведенном выше коде оператор {% for %} используется для перебора всех проектов в коллекции projects и создания карточки проекта для каждого из них.
Вы получите доступ ко всем переменным с помощью project.data.[key]. Например, приведенный выше код отобразит название проекта, его описание и URL GitHub. Вы также можете получить доступ к URL проекта с помощью project.url.
Когда вы выполните команду start и перейдете на страницу проектов, вот как будет выглядеть ваша страница, когда вы добавите много проектов:
Страница шаблона проектов
Как использовать шорткоды
Шорткоды - это способ определения пользовательских HTML-тегов или динамических значений JavaScript, которые вы можете повторно использовать в своих шаблонах. Например, вы можете определить шорткод для генерации текущего года и добавить его на свой сайт.
В конфигурационном файле .eleventy.js можно определить шорткод с помощью метода addShortcode(). Например, следующий код определяет шорткод под названием year:
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};Приведенный выше шорткод year возвращает текущий год, который вы можете добавить в любой шаблон вашего проекта. Например, вместо жесткого кодирования года в футере этого сайта, вы можете добавить его динамически, используя {% 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. Иметь такой сайт на локальной машине недостаточно. Вы захотите разместить его в Интернете, чтобы поделиться им с кем угодно.
Kinsta - это облачная платформа, которая позволяет размещать статические веб-сайты, включая Eleventy. Это можно сделать, разместив свои коды на GitHub, а затем развернув их на Kinsta.
Перенесите сайт 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"Примечание: Вы можете заменить ”мой первый коммит” на краткое сообщение, описывающее ваши изменения.
Наконец, отправьте свой код на GitHub с помощью следующих команд:
git remote add origin [repository URL]
git push -u origin masterПримечание: Убедитесь, что вы заменили ”[URL репозитория]” на URL вашего собственного репозитория GitHub.
После выполнения этих шагов ваш код будет размещен на GitHub и доступен по URL вашего репозитория.
Теперь вы можете развернуть сайт на Kinsta!
Развертывание вашего сайта Eleventy на Kinsta
Развертывание на Kinsta происходит всего за несколько минут. Начните с приборной панели My Kinsta, чтобы войти в систему или создать свой аккаунт. Затем вы авторизуете Kinsta на GitHub.
Затем нажмите Приложения на левой боковой панели, затем нажмите Добавить сервис и, наконец, выберите Приложение из выпадающего списка:
Развертывание на хостинге приложений Kinsta
Появится модальное окно, в котором можно выбрать хранилище, которое вы хотите развернуть. Выберите ветвь, которую вы хотите развернуть, если у вас несколько ветвей в репозитории.
Затем вы можете присвоить имя этому приложению. Выберите местоположение центра обработки данных из 25 доступных, после чего Kinsta автоматически определит команду запуска.
Успешное развертывание статического сайта Jekyll
Начнется развертывание вашего приложения. В течение нескольких минут будет предоставлена ссылка для доступа к развернутой версии вашего сайта. В данном случае это https://ty-portfolio-lvjy7.kinsta.app/.
Скучные портфолио прочь! Используйте Eleventy для создания статического сайта, который будет кричать “HIRE ME!”.
Резюме
В этой статье вы узнали, как создать стильный сайт с помощью Eleventy, о различных способах настройки статического сайта Eleventy с нуля, а также о том, как создать красивый сайт-портфолио.
Создаете ли вы личный блог, сайт портфолио или интернет-магазин, Eleventy поможет вам достичь ваших целей с минимальными усилиями и максимальным эффектом. Так почему бы не попробовать его сегодня и не посмотреть, что вы можете создать?
Что вы думаете об Eleventy? Использовали ли вы Eleventy для создания чего-либо? Пожалуйста, не стесняйтесь поделиться с нами своими проектами и опытом в разделе комментариев ниже.