Met de opkomst van statische sitegenerators (SSG’s) zoals Eleventy is het maken van een stijlvolle en efficiënte statische website nog nooit zo eenvoudig geweest.
In dit artikel onderzoeken we hoe je met Eleventy een prachtige en functionele statische portfoliowebsite kunt maken zonder dat je een server-side taal of database nodig hebt.
Ook leer je hoe je je statische website direct vanuit je GitHub repository kunt deployen naar Kinsta’s Statische Site Hosting, zodat je website snel live is op een gratis .kinsta.page domein.
Hier is een live demo van de statische portfoliosite die je met Eleventy bouwt.
Je hebt toegang tot de GitHub repository van dit project als je het nader wilt bekijken.
Wat is Eleventy?
Eleventy, ook bekend als 11ty, is een statische sitegenerator die websites maakt op basis van HTML, CSS en JavaScript zonder dat daar databases en backend programmeertalen voor nodig zijn.
Eleventy staat bekend om zijn eenvoud en flexibiliteit, omdat het je niet dwingt om slechts één templatetaal of framework te gebruiken. Het ondersteunt meer dan 10 templatetalen en je kunt er zelfs zoveel gebruiken als je wilt in een enkel project:
Eleventy, zoals de meeste SSG’s, staat je toe de inhoud van je statische site op te bouwen met herbruikbare componenten in plaats van complete HTML documenten te maken voor elke pagina.
Zo installeer je Eleventy
Eleventy installeren is eenvoudig. Dit is hoe je het doet:
- Zorg ervoor dat je Node.js op je computer hebt geïnstalleerd. Je kunt dit checken door het commando
node -vin je terminal uit te voeren. Niet beschikbaar? Zo installeer je Node.js op je computer. - Maak een nieuwe map aan voor je project.
- Open je terminal en voer het commando
npm init -yuit in de map van je project om een nieuw Node.js project te initialiseren, waarbij een package.json bestand met standaardinstellingen wordt aangemaakt. - Voer het commando
npm install @11ty/eleventy --save-devuit om het pakket als ontwikkelingsdependency in je project te installeren. - Dat was het! Je kunt Eleventy nu draaien door het commando
npx @11ty/eleventyin je projectdirectory uit te voeren. Dit zal je sitebestanden genereren en uitvoeren naar een _site map (of je geconfigureerde map) in je projectmap.
Opmerking: Als je het commando npx @11ty/eleventy uitvoert. Krijg je deze output:
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)Hier worden 0 bestanden geschreven omdat er geen templates in de map van je project staan.
Eleventy commando’s en configuratie
Je hebt nu je Eleventy project gemaakt, maar je bent er nog niet. Je moet nu enkele configuraties maken en op de hoogte zijn van enkele basic commando’s voor de statische site die naar de browser kan worden geleverd.
Eleventy commando’s
Hier zijn enkele van de belangrijkste Eleventy commando’s die je moet kennen:
npx @11ty/eleventy: Dit commando wordt gebruikt om je site te bouwen en het resultaat uit te voeren naar de map _site (of welke map je ook hebt geconfigureerd als je outputmap).npx @11ty/eleventy --serve: Dit commando start een lokale server zodat je je site in je browser kunt bekijken. Als je wijzigingen aanbrengt aan je site, wordt je project automatisch opnieuw opgebouwd en bijgewerkt in je browser.npx @11ty/eleventy --serve --port=8081: Dit commando start de Eleventy server en specificeert een aangepaste poort waarop de server luistert.npx @11ty/eleventy --watch: Dit commando let op veranderingen in je projectbestanden en bouwt je site automatisch opnieuw op als dat nodig is.
Je hoeft deze commando’s niet te onthouden, want je kunt ze toevoegen aan algemene commando’s in het scripts object van je package.json bestand:
"scripts": {
"build": "npx @11ty/eleventy",
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch"
},Nu kun je npm start gebruiken om je applicatie te leveren in plaats van npx @11ty/eleventy --serve, en ook kun je npm run build uitvoeren in plaats van npx @11ty/eleventy.
Zo configureer je statische sites met Eleventy
Eleventy is standaard “zero-config” en heeft flexibele configuratie-opties. Hier zijn enkele belangrijke configuratie-opties die je moet kennen:
- input: Met deze optie kun je de map van je projectbestanden opgeven. Het is het beste om src te gebruiken.
- output: Met deze optie kun je de map opgeven waar je gebouwde site moet worden uitgevoerd. Standaard voert Eleventy uit naar de map _site. (Je hoeft dit niet te veranderen).
- templateFormats: Met deze optie kun je opgeven welke bestandsextensies als template moeten worden verwerkt. Standaard verwerkt Eleventy .html, .njk en .md bestanden als template.
Dit zijn slechts enkele commando’s en configuratie-opties die beschikbaar zijn in Eleventy. Om je Eleventy project te configureren, maak je een .eleventy.js bestand aan in de root van je project. Plak vervolgens deze code in het bestand om je project een structuur te geven die een input directory bevat:
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
},
};
};Opmerking: eleventyConfig wordt als argument doorgegeven, waardoor meer configuratie-opties ontstaan die later in dit project gebruikt zullen worden.
Een voorbeeld van een Eleventy site
Je kent nu enkele belangrijke commando’s die je kunt gebruiken om je statische Eleventy website te previewen, maar wanneer je het npm run build (npx @11ty/eleventy) commando uitvoert, wordt er niets geleverd. Dit komt omdat je geen template bestand hebt.
Je kunt een src map maken in de hoofdmap van je project, en dan enkele templatebestanden maken zoals index.html of de templatetaal van je voorkeur gebruiken om de homepage weer te geven:
<!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>Als je nu het npm run build commando uitvoert, wordt er een _site map aangemaakt met het gegenereerde statische bestand. Je wilt dit natuurlijk naar je browser sturen en een aantal hot reloading features inschakelen. Dit kan door het commando npx @11ty/eleventy --serve uit te voeren, dat je nu hebt geconfigureerd als npm start. Dit zal je site aanbieden op http://localhost:8080/.
Zo maak je een statische portfoliowebsite met Eleventy
Je weet nu hoe je een statische site maakt met Eleventy. Laten we het portfolio project gaan maken.
Je kunt een nieuw Eleventy project vanaf de grond opzetten, of onze starterbestanden gebruiken die de afbeeldingen, CSS en content voor dit project bevatten om je te helpen de dingen te versnellen. In GitHub, selecteer Use this template > Create a new repository om deze assets en de initiële configuratiebestanden naar een nieuwe eigen repository te kopiëren, en download ze dan naar je lokale machine.
Je project zal de volgende structuur hebben:
├── node_modules/
├── public/
├── src/
├── _includes
├── layouts
├── assets
├── css
├── projects
└── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.jsonZo gebruik je templates in Eleventy
Wanneer je Eleventy gebruikt, zijn er drie belangrijke typen templates die je moet begrijpen. Deze templates kun je maken met Nunjucks, waarmee je variabelen, loops, conditionals en andere logica kunt definiëren die gebruikt kunnen worden om de inhoud van de pagina dynamisch te genereren.
- Page templates: Deze definiëren de structuur en inhoud van individuele pagina’s op je website.
- Layout templates: Deze definiëren de algemene structuur en vormgeving van je website pagina(‘s). Ze bevatten meestal gemeenschappelijke elementen zoals headers en footers, navigatiemenu’s en zijbalken, die tussen meerdere pagina’s worden gedeeld.
- Partial templates: Deze definiëren kleine, herbruikbare delen van de HTML opmaak van je website. Ze worden gebruikt om gemeenschappelijke elementen te definiëren, zoals headers en footers, navigatiemenu’s en zijbalken, die kunnen worden opgenomen in layout- en page templates.
Nu je elk van deze typen templates begrijpt is het tijd om de templates te maken voor de statische portfoliowebsite.
Zo doe je de markup in Eleventy
Maak in de map src een map _includes. Deze zal al onze layouts en partial bestanden bevatten.
Je kunt een layouts map maken voor het organiseren van al je templates, met behulp van de templating taal van je voorkeur, zoals Nunjucks.
Maak een base.njk bestand voor de algemene lay-out van al je pagina’s.
<!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>In de bovenstaande code wordt een algemene HTML opmaak aangemaakt en Font Awesome van een CDN opgenomen, zodat je toegang hebt tot de pictogrammen ervan. Ook wordt de contentvariabele doorgegeven zodat alle inhoud van elke pagina die deze opmaak gebruikt wordt opgenomen.
Maar dat is niet het hele verhaal wat betreft opmaak. Je opmaak zal enkele delen bevatten die op elke pagina verschijnen, zoals de navbar en de footer. Laten we voor elk van deze secties partials maken.
Hoe gebruik je partials in Eleventy?
Alle deelbestanden worden opgeslagen in de map _includes. Voor een goede organisatie kun je ze opslaan in een componentenmap in de map _includes. Maak een navbar.njk en sla de onderstaande code op voor je Navbar Partials.
<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>Maak vervolgens een bestand footer.njk voor je Footer Partials:
<hr />
<div class="footer-container">
<p>© 2023 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>Voeg deze gedeelten toe aan je pagina of layout template met behulp van het {% include %} statement. Zo ziet de layouts/base.njk template eruit als je de Navbar en Footer partials toevoegt:
<!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>Wanneer je het commando npm start uitvoert, verschijnt deze opmaak niet omdat hij niet is toegevoegd aan een paginatemplate. Maak een paginatemplate en voeg deze opmaak toe.
Zo maak je paginatemplates aan in Eleventy
Maak in je src map een index.njk bestand aan dat dient als startpagina van je portfoliowebsite. Deze pagina zal de basislayout gebruiken:
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>Als je het commando npm start uitvoert, zal je statische site laden op http://localhost:8080/. Zo ziet de uitvoer eruit:
Zo gebruik je CSS en afbeeldingen in Eleventy
Je zult zien dat in het layouts/base.njk bestand een CSS-bestand is gekoppeld om de portfoliopagina op te maken, maar wanneer de site wordt geladen, worden de CSS-stijlen niet beïnvloed omdat het CSS-bestand niet is toegevoegd aan de map _site.
Om CSS te laten werken, configureer je het in je .eleventy.js bestand met de eleventyConfig parameter. Dit maakt het mogelijk dat Eleventy weet dat het (de) CSS bestand(en) bestaan en ook let op eventuele wijzigingen in het CSS bestand.
In de src map kun je een css map maken om alle CSS bestanden die je in je project gaat gebruiken op te slaan, maar voor dit artikel kun je één CSS bestand gebruiken – global.css. Je kunt dan de css map configureren, zodat hij alle bestanden binnen de map configureert:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');Hetzelfde geldt voor afbeeldingen. Als je een afbeelding toevoegt aan je pagina, zal deze niet worden weergegeven totdat je de map waarin je afbeeldingen worden opgeslagen hebt geconfigureerd. Maak een assets map om al onze afbeeldingen in op te slaan en configureer de assets map.
eleventyConfig.addPassthroughCopy('src/assets');Zo ziet je configuratiebestand er nu uit:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
},
};
};Wanneer je npm start uitvoert, zal de CSS styling nu wel werken werken, en zal je startpagina er zo uitzien:
Partials maken en toevoegen aan de homepagina
Je bent er nu in geslaagd een opmaak te maken en die toe te voegen aan je homepagina (index.njk). Laten we de homepagina aanpassen om wat informatie over jezelf te delen, zoals meer informatie over jou, je vaardigheden en contactgegevens.
Je kunt besluiten je code en opmaak rechtstreeks aan de index.njk template toe te voegen, maar laten we individuele Partials maken voor de Hero, About, Skills en Contactinformatie.
De hero partials
Dit is de eerste sectie onder de Navbar, die primair bedoeld is om gebruikers een idee te geven waar de website over gaat.
<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>Bovenstaande code bevat wat informatie over jou, samen met wat sociale pictogrammen om links naar je sociale media profielen te tonen.
De Hero gedeeltes moeten er zo uitzien:
Je kunt meer content aan de Hero sectie toevoegen, de stijlen in het bestand css/globals.css veranderen, of zelfs een eigen versie van deze sectie maken.
De About partials
De About sectie vertelt mensen die je portfolio bezoeken meer informatie over jou – in zoveel alinea’s als je wilt. Dit kan een aparte pagina zijn als je meer dingen te vertellen hebt.
<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>De code bevat informatie over jou (een afbeelding en wat tekst). Zo hoort de About sectie er uit te zien:
De Skills partials
Deze sectie wordt gebruikt om de technologieën weer te geven die je gebruikt of graag gebruikt.
<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>De code hierboven maakt een kaart om het technologie-icoontje van font-awesome en de naam voor elke skill op te nemen. Je kunt meer stijlen toevoegen en de code aanpassen om het aantrekkelijker en duidelijker te maken. Dit is hoe de Skills sectie eruit hoort te zien:
De Contact partials
Omdat dit een portfolio is, moet je een manier toevoegen waarop potentiële klanten/werkgevers je kunnen bereiken. Je zou bijvoorbeeld een e-mail kunnen toevoegen.
<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:[email protected]" class='cta-btn'>Say Hello</a>
</div>Vervang het e-mailadres in de a tag door je eigen adres, zodat de knop een e-mailprogramma lanceert waarmee mensen je een bericht kunnen sturen.
Je hebt met succes alle partials voor je homepage gemaakt. Vervolgens moet je ze opnemen in je index.njk bestand, zodat ze op de homepage getoond kunnen worden:
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}Wanneer je het npm start commando uitvoert, zal je startpagina alle toegevoegde partials dienovereenkomstig laten zien.
Zo gebruik je collections in Eleventy
In Eleventy zijn collections een manier om verwante content te groeperen, zodat je pagina’s kunt genereren op basis van die content. Als je bijvoorbeeld markdown-bestanden met vergelijkbare content (blogberichten) hebt opgeslagen in een blogmap van je project, kun je collections gebruiken om ze op te halen en een lijst van alle inhoud weer te geven. Ook kun je een layout maken om af te handelen hoe deze content wordt weergegeven.
Collections worden gedefinieerd in het configuratiebestand .eleventy.js en kunnen gegevens bevatten uit verschillende bronnen, zoals markdown- of JSON bestanden.
Laten we voor deze portfolio website een projects map aanmaken in de src map, om de markdown content van elk project op te slaan. Deze content zal details bevatten over het project, het opgeloste probleem, gebruikte technologieën, ondervonden uitdagingen en geleerde lessen.
Je kunt een markdown-bestand maken met de naam van het project (quotes-generator.md) en de onderstaande code plakken:
---
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.Opmerking: Als je de startertemplate hebt gebruikt, zou je deze al moeten hebben, anders kun je ze kopiëren uit de projects map van onze startertemplate op GitHub.
De frontmatter bovenaan deze bestanden maakt de waarden beschikbaar voor injectie in je templates.
Omdat deze Markdown bestanden in de src map staan, zal Eleventy ze behandelen als templates en voor elk een HTML pagina genereren. Hun URL zal iets zijn als /projects/quotes-generator.
Eleventy zal echter niet weten welke opmaak deze pagina’s moeten gebruiken, omdat ze nog geen markupwaarde hebben in hun frontmatter.
Laten we eerst een opmaak maken voor deze inhoud voordat we een collection maken en ze als lijst toevoegen aan een speciale projectenpagina.
Maak net als voorheen een markupbestand (project.njk) aan in de map layouts. Om herhaling te voorkomen, omdat dit bestand de standaard HTML opmaak zal gebruiken, pas je de basic.njk markup aan door een blok te maken om aan te geven welk deel van je markup zal veranderen.
<!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>Het blok krijgt een naam “content” omdat je binnen je templates veel blokken kunt hebben. Je kunt dit nu uitbreiden naar je project.njk markup, zodat je alleen het contentblok hoeft aan te geven:
{% 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 %}In bovenstaande code geef je aan hoe elk project wordt weergegeven. Het haalt de titel, afbeelding en gitHubURL uit de frontmatter en voegt dan andere inhoud toe met behulp van de inhoudsvariabele ({{ content | safe }}).
De volgende stap is om de opmaak toe te voegen aan de frontmatter van elk project:
---
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"
---
…Wanneer je de URL van elk project opnieuw laadt, b.v. /projects/quotes-generator, zul je zien dat het nu de gemaakte layout gebruikt:
Het gebruik van collections in templates
Elk van je projecten wordt nu mooi weergegeven met de opgegeven opmaak, maar hoe krijgen mensen toegang tot deze projecten? Je moet een lijst maken waarop mensen kunnen klikken om ze naar elk project te brengen. Dit is waar collections je kunnen helpen.
Om collection te gebruiken, definieer je het in het .eleventy.js configuratiebestand met de addCollection() methode.
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};In de bovenstaande code wordt de methode addCollection() gebruikt om een collection genaamd projects te definiëren. De callbackfunctie die wordt doorgegeven aan addCollection() geeft alle markdownbestanden in de map projecten terug met behulp van de methode getFilteredByGlob().
Als je eenmaal een collection hebt gedefinieerd, kun je die gebruiken in een template om pagina’s te genereren op basis van die inhoud. Laten we een projects.njk paginatemplate maken, dat de layout base.njk zou gebruiken:
---
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>In de bovenstaande code wordt het {% for %} statement gebruikt om door alle projecten in de collectie te lopen en voor elk project een projectkaart te genereren.
Met project.data.[key] heb je toegang tot alle variabelen. De bovenstaande code toont bijvoorbeeld de titel, beschrijving en GitHub URL van het project. Je hebt ook toegang tot de URL van het project met project.url.
Als je het npm start commando uitvoert en naar de Projects pagina navigeert, ziet je pagina er zo uit als je veel projecten toevoegt:
Zo gebruik je shortcodes
Shortcodes zijn een manier om custom HTML tags of dynamische JavaScript waarden te definiëren die je in je templates kunt hergebruiken. Je kunt bijvoorbeeld een shortcode definiëren om het huidige jaar te genereren en aan je website toe te voegen.
In het configuratiebestand .eleventy.js kun je een shortcode definiëren met de methode addShortcode(). De volgende code definieert bijvoorbeeld een shortcode met de naam year:
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};De bovenstaande shortcode year geeft het huidige jaar terug, die je kunt toevoegen aan elk template binnen je project. Bijvoorbeeld, in plaats van het jaartal te hardcoden in de footer van deze website, kun je het dynamisch toevoegen met {% year %}, zodat het zichzelf elk jaar bijwerkt:
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>Wanneer de pagina wordt weergegeven, zal de uitvoer het huidige jaartal bevatten in de HTML p tag.
Een thema toevoegen aan een Eleventy website
Het toevoegen van een thema aan een Eleventy site kan een goede manier zijn om het uiterlijk van je site snel aan te passen. Officieel verwijst Eleventy naar thema’s als starters (ze hetzelfde betekenen). Veel websites bieden gratis Eleventy thema’s aan, zoals de officiële Eleventy starters en de Jamstack thema’s.
Alles wat je hoeft te doen is je favoriete thema of starter selecteren, en dan de GitHub repository ervan openen om het naar je lokale machine te klonen. Zorg ervoor dat je de documentatie ervan leest voor stappen om de projecten te configureren en aan te passen.
Voer npm install uit om alle gebruikte pakketten te installeren, en voer dan npm start uit om je applicatie lokaal te leveren op http://localhost:8080/.
Zo deploy je een Eleventy site
Je bent er nu in geslaagd om een stijlvolle statische portfoliowebsite te maken met Eleventy. Het is niet genoeg om zo’n website op je lokale machine te hebben. Je wilt hem online hosten om hem te delen met je publiek.
Kinsta is een cloudplatform waarmee je statische websites kunt hosten, waaronder Eleventy. Dit kun je doen door je code te pushen naar de Git provider van je voorkeur (Bitbucket, GitHub of GitLab), en uiteindelijk te deployen naar Kinsta.
Voordat je je bestanden naar een Git provider pusht, maak je een .gitignore bestand in de root van je project om de bestanden en mappen op te geven die Git moet negeren bij het pushen van je code:
# dependencies
/node_modules
# run
/_siteJe Eleventy site naar GitHub pushen
Voor deze handleiding gebruiken we GitHub. Maak een repository aan op GitHub, dan kun je git commando’s gebruiken om je code te pushen.
Initialiseer je lokale Git repository door je terminal te openen, naar de map te navigeren die je project bevat en het volgende commando uit te voeren:
git initVoeg nu je code(s) toe aan de lokale Git repository met het volgende commando:
git add .Je kunt nu je wijzigingen committen met het volgende commando:
git commit -m "my first commit"Opmerking: Vervang ” my first commit” door een korte boodschap die je wijzigingen beschrijft.
Als laatste push je je code naar GitHub met de volgende commando’s:
git remote add origin [repository URL]
git push -u origin masterOpmerking: Vervang [repository URL] door de URL van je GitHub repository.
Als het gelukt is, kun je nu deployen naar Kinsta!
Je Eleventy site deployen naar Kinsta
Deployen naar Kinsta gebeurt in slechts enkele seconden. Zodra je repo klaar is, volg je deze stappen om je statische site te deployen naar Kinsta:
- Login of maak een account aan om je MyKinsta’s dashboard te bekijken.
- Autoriseer Kinsta met je Git provider.
- Klik op Statische sites in de linker zijbalk, klik dan op Site toevoegen.
- Selecteer de repository en de branch waarvan je wilt deployen.
- Geef je site een unieke naam.
- Voeg de bouwinstellingen toe in het volgende formaat:
- Build commando:
npm run build - Node versie:
18.16.0 - Publish directory:
_site
- Build commando:
- Klik ten slotte op Create site.
En dat is het! Je hebt nu binnen een paar seconden een gedeployde site. Je krijgt een link waarmee je naar de gedeployde versie van je site kunt gaan.
Als alternatief voor Statische Site Hosting kun je ervoor kiezen om je statische site te deployen met Kinsta’s Applicatie Hosting, die meer flexibiliteit biedt bij het hosten, een breder scala aan voordelen en toegang tot robuustere features. Bijvoorbeeld schaalbaarheid, custom deployen met behulp van een Dockerfile en uitgebreide analytics met real-time en historische gegevens.
Samenvatting
In dit artikel heb je geleerd hoe je een stijlvolle website maakt met Eleventy, hoe je een Eleventy statische site vanaf de grond aanpast, en hoe je een mooie portfoliowebsite bouwt.
Of je nu een persoonlijke blog, een portfoliosite of een online winkel bouwt, Eleventy kan je helpen je doelen te bereiken met minimale inspanning en maximale impact.
Dus waarom zou je het vandaag niet proberen en gratis hosten bij Kinsta? We hebben een Eleventy “Hello World” template dat je kunt gebruiken om je nog sneller op weg te helpen.
Nu is het jouw beurt: wat vind jij van Eleventy? Heb je Eleventy gebruikt om iets te bouwen? Deel gerust je projecten en ervaringen met ons in de commentsectie hieronder.
Laat een reactie achter