Mit dem Aufkommen von Static Site Generators (SSGs) wie Eleventy war es noch nie so einfach, eine elegante und effiziente statische Website zu erstellen.
In diesem Artikel zeigen wir dir, wie du mit Eleventy eine beeindruckende und funktionale statische Portfolio-Website erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu benötigen.
Außerdem erfährst du, wie du deine statische Website direkt von deinem GitHub-Repository auf der Kinsta Anwendungs-Hosting-Plattform bereitstellst, damit deine Website schnell unter der kostenlosen Domain .kinsta.app online gehen kann.
Hier siehst du eine Live-Demo der statischen Portfolio-Website, die du mit Eleventy erstellst.
Du kannst auf das GitHub-Repository dieses Projekts zugreifen, wenn du einen genaueren Blick darauf werfen möchtest.
Was ist Eleventy?
Eleventy, auch bekannt als 11ty, ist ein Generator für statische Websites, der Websites mit HTML, CSS und JavaScript erstellt, ohne dass Datenbanken und Backend-Programmiersprachen erforderlich sind.
Eleventy ist bekannt für seine Einfachheit und Flexibilität, da es dich nicht zwingt, nur eine Vorlagensprache oder ein Framework zu verwenden. Es unterstützt mehr als 10 Vorlagensprachen und erlaubt dir sogar, so viele wie du willst in einem einzigen Projekt zu verwenden:
Eleventy ermöglicht es dir, wie die meisten SSGs, den Inhalt deiner statischen Website mit wiederverwendbaren Komponenten aufzubauen, anstatt für jede Seite ein komplettes HTML-Dokument zu erstellen.
So installierst du Eleventy
Die Installation von Eleventy ist ganz einfach. So geht’s:
- Stelle sicher, dass du Node.js auf deinem Computer installiert hast. Das kannst du überprüfen, indem du den Befehl
node -vin deinem Terminal ausführst. Nicht verfügbar? Hier erfährst du , wie du Node.js auf deinem Computer installierst. - Erstelle ein neues Verzeichnis für dein Projekt.
- Öffne dein Terminal und führe den Befehl
npm init -yim Verzeichnis deines Projekts aus, um ein neues Node.js-Projekt zu initialisieren und eine package.json-Datei mit Standardeinstellungen zu erstellen. - Führe den Befehl
npm install @11ty/eleventy --save-devaus, um das Paket als Entwicklungsabhängigkeit in deinem Projekt zu installieren. - Das war’s! Jetzt kannst du Eleventy starten, indem du den Befehl
npx @11ty/eleventyin deinem Projektverzeichnis ausführst. Dadurch werden deine Site-Dateien erzeugt und in einem _site-Verzeichnis (oder dem von dir konfigurierten Verzeichnis) in deinem Projektordner ausgegeben.
Hinweis: Wenn du den Befehl npx @11ty/eleventy ausführst. Du erhältst diese Ausgabe:
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)Hier werden 0 Dateien geschrieben, weil sich keine Vorlagen im Ordner deines Projekts befinden.
Eleventy-Befehle und Konfiguration
Du hast jetzt dein Eleventy-Projekt erstellt, aber das ist noch nicht alles. Du musst noch einige Konfigurationen erstellen und einige grundlegende Befehle für deine statische Website kennen, die an den Browser gesendet werden können.
Eleventy-Befehle
Hier sind einige der wichtigsten Eleventy-Befehle, die du kennen solltest:
npx eleventy: Mit diesem Befehl baust du deine Website auf und gibst das Ergebnis im _site-Ordner aus (oder in einem anderen Ordner, den du als Ausgabeverzeichnis festgelegt hast).npx @11ty/eleventy --serve: Mit diesem Befehl wird ein lokaler Server gestartet, damit du eine Vorschau deiner Website in deinem Browser sehen kannst. Wenn du Änderungen an deiner Seite vornimmst, wird dein Projekt automatisch neu erstellt und in deinem Browser aktualisiert.npx @11ty/eleventy --serve --port=8081: Mit diesem Befehl startest du den Eleventy-Server und gibst einen benutzerdefinierten Port an, auf dem der Server lauschen soll.npx @11ty/eleventy --watch: Dieser Befehl überwacht deine Projektdateien auf Änderungen und baut deine Website bei Bedarf automatisch neu auf.
Du musst diese Befehle nicht auswendig lernen, denn du kannst sie zu den allgemeinen Befehlen im Skriptobjekt deiner package.json-Datei hinzufügen:
"scripts": {
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"build": "npx eleventy"
},Jetzt kannst du npm start anstelle von npx @11ty/eleventy --serve verwenden, um deine Anwendung zu bedienen, und du kannst auch npm run build anstelle von npx eleventy ausführen.
Wie du deine statische Website mit Eleventy konfigurierst
Eleventy ist standardmäßig „Zero-Config“ und hat flexible Konfigurationsoptionen. Hier sind einige wichtige Konfigurationsoptionen, die du kennen solltest:
- eingabe: Mit dieser Option kannst du das Verzeichnis für deine Projektdateien angeben. Am besten ist es, src zu verwenden.
- output: Mit dieser Option kannst du das Verzeichnis angeben, in dem deine erstellte Website ausgegeben werden soll. Standardmäßig gibt Eleventy die Dateien im Ordner _site aus. (Viele Entwickler verwenden public).
- templateFormats: Mit dieser Option kannst du festlegen, welche Dateierweiterungen als Vorlagen verarbeitet werden sollen. Standardmäßig verarbeitet Eleventy .html-, .njk– und .md-Dateien als Vorlagen.
Dies sind nur einige der Befehle und Konfigurationsoptionen, die in Eleventy zur Verfügung stehen. Um dein Eleventy-Projekt zu konfigurieren, erstelle eine .eleventy.js-Datei im Stammverzeichnis deines Projekts. Füge dann diesen Code in die Datei ein, um deinem Projekt eine Struktur zu geben, die Eingabe- und Ausgabeverzeichnisse enthält:
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};Hinweis: eleventyConfig wird als Argument übergeben und bietet weitere Konfigurationsoptionen, die später in diesem Projekt verwendet werden.
Vorschau einer Eleventy-Website
Du kennst jetzt einige wichtige Befehle, mit denen du eine Vorschau deiner statischen Eleventy-Website erstellen kannst. Wenn du jedoch einen Befehl wie npx @11ty/eleventy ausführst, wird nichts angezeigt. Das liegt daran, dass du keine Vorlagendatei hast.
Du kannst einen src-Ordner im Stammverzeichnis deines Projekts anlegen und dann einige Vorlagendateien wie index.html erstellen oder deine bevorzugte Vorlagensprache verwenden, um die Startseite darzustellen:
<!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>Wenn du nun den Befehl npx @11ty/eleventy ausführst, wird ein öffentlicher Ordner mit der erzeugten statischen Datei erstellt. Du wirst diese Datei auf jeden Fall in deinem Browser anzeigen lassen und einige Hot-Reloading-Funktionen aktivieren wollen. Das ist möglich, indem du den folgenden Befehl ausführst:
npx @11ty/eleventy --serveDamit wird deine Website auf http://localhost:8080/ bereitgestellt.
Diese Befehle sind ziemlich schwer zu merken und immer zu verwenden. Du hast sie bereits in deiner package.json Datei zur vertrauten Syntax hinzugefügt, also kannst du npm start verwenden, um deine Anwendung auf http://localhost:8080/ zu serven .
Wie du eine statische Portfolio-Website mit Eleventy erstellst
Du weißt jetzt, wie du eine statische Website mit Eleventy erstellen kannst. Lass uns das Portfolio-Projekt erstellen.
Du kannst ein neues Eleventy-Projekt von Grund auf erstellen, oder du möchtest Bilder, CSS und aktuelle Inhalte für dein Projekt, deshalb haben wir eine Vorlage für das GitHub-Repository erstellt, damit du schneller vorankommst. Wähle in GitHub die Option Diese Vorlage verwenden > Neues Repository erstellen, um diese Assets und die anfänglichen Konfigurationsdateien in ein eigenes Repository zu kopieren und dann auf deinen lokalen Rechner herunterzuladen.
Dein Projekt wird die folgende Struktur haben:
├── node_modules/
├── public/
├── src/
| ├── _includes
| ├── layouts
│ ├── assets
│ ├── css
│ ├── projects
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.jsonWie du Vorlagen in Eleventy verwendest
Bei der Verwendung von Eleventy gibt es drei Haupttypen von Vorlagen, die du verstehen musst. Diese Vorlagen können mit Nunjucks erstellt werden. Damit kannst du Variablen, Schleifen, Bedingungen und andere Logik definieren, mit denen du den Inhalt der Seite dynamisch generieren kannst.
- Seitenvorlagen: Sie definieren die Struktur und den Inhalt der einzelnen Seiten deiner Website.
- Layout-Vorlagen: Sie definieren die Gesamtstruktur und das Design deiner Website-Seite(n). Sie enthalten normalerweise gemeinsame Elemente wie Kopf- und Fußzeilen, Navigationsmenüs und Seitenleisten, die auf mehreren Seiten verwendet werden.
- Partialvorlagen: Sie definieren kleine, wiederverwendbare Abschnitte des HTML-Markups deiner Website. Sie werden in der Regel verwendet, um gemeinsame Elemente wie Kopf- und Fußzeilen, Navigationsmenüs und Seitenleisten zu definieren, die in Layout- und Seitenvorlagen aufgenommen werden können.
Jetzt kennst du jeden dieser Vorlagentypen. Lass uns nun Vorlagen für die statische Portfolio-Website erstellen.
So erstellst du Layouts in Eleventy
Erstelle innerhalb des src-Verzeichnisses ein _includes-Verzeichnis. Darin werden alle Layouts und Teilvorlagen gespeichert.
Dann kannst du einen Ordner „layouts“ erstellen (für eine gute Organisation), in dem alle Layouts gespeichert werden. Diese Layouts sind Vorlagen und können deine bevorzugte Vorlagensprache verwenden, z. B. Nunjucks, die wir hier verwenden.
Erstellen wir eine Datei base.njk, in der das allgemeine Layout für alle Seiten gespeichert wird.
<!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>Im obigen Code wird ein allgemeines HTML-Markup erstellt und Font Awesome von einem CDN eingebunden, damit du Zugriff auf die Icons hast. Außerdem wird die Variable content übergeben, damit alle Inhalte aller Seiten, die dieses Layout verwenden, enthalten sind.
Aber das ist noch nicht die ganze Geschichte des Layouts. Dein Layout wird einige Abschnitte haben, die auf jeder Seite erscheinen, z. B. die Navigationsleiste und die Fußzeile. Für jeden dieser Abschnitte werden wir Teilbereiche erstellen.
So verwendest du Teilbereiche in Eleventy
Alle Teilbereiche werden im Verzeichnis _includes gespeichert. Um sie zu organisieren, kannst du sie in einem Ordner speichern. In diesem Fall erstellst du einen Komponenten-Ordner im _includes-Verzeichnis und erstellst Vorlagen für die Navigationsleiste und die Fußzeile.
Hier sind die Navbar Partials in 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>Hier sind die Fußzeilenvorlagen in 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>Füge diese Partials zu deiner Seite oder Layoutvorlage hinzu. Das kannst du mit der Anweisung {% include %} tun. So sieht die Vorlage layouts/base.njk aus, wenn du die Vorlagen navbar und footer einfügst:
<!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>Wenn du den Befehl npm start ausführst, wird dieses Layout nicht angezeigt, weil es keiner Seitenvorlage hinzugefügt wurde. Erstelle eine Seitenvorlage und füge dieses Layout hinzu.
So erstellst du Seitenvorlagen in Eleventy
Erstelle in deinem src-Ordner eine index.njk-Datei, die als Startseite für deine Portfolio-Website dient. Diese Seite wird das Basislayout verwenden:
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>Wenn du jetzt den Befehl npm start ausführst, wird deine statische Seite auf http://localhost:8080/ geladen . So sieht die Ausgabe aus:
Wie du CSS und Bilder in Eleventy verwendest
Du kennst jetzt die verschiedenen Vorlagen, die es gibt, wie sie funktionieren und wie sie zusammen verwendet werden können. Aber du wirst feststellen, dass in der Datei layouts/base.njk eine CSS-Datei verlinkt ist, um die Portfolioseite zu stylen, aber wenn die Seite geladen wird, werden die CSS-Stile nicht beeinflusst, weil die CSS-Datei nicht zum öffentlichen Ordner hinzugefügt wurde.
Um dieses Problem zu beheben, musst du es in deiner.eleventy.js-Datei mit dem Parameter eleventyConfig konfigurieren. Auf diese Weise weiß Eleventy, dass die CSS-Datei(en) vorhanden sind, und achtet auch auf mögliche Änderungen an der CSS-Datei.
Im src-Ordner kannst du einen css-Ordner anlegen, in dem du alle CSS-Dateien speicherst, die du in deinem Projekt verwendest. Für diesen Artikel kannst du jedoch nur eine CSS-Datei verwenden – global.css. Dann kannst du den css-Ordner so konfigurieren, dass er alle Dateien innerhalb des Ordners konfiguriert:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');Das Gleiche gilt für Bilder. Wenn du ein Bild zu deiner Seite hinzufügst, wirst du feststellen, dass es nicht angezeigt wird. Damit es angezeigt wird, musst du den Ordner konfigurieren, in dem die Bilder gespeichert sind. Legen wir einen Ordner „Assets“ an, in dem wir alle unsere Bilder speichern, und konfigurieren wir den Ordner „Assets„.
eleventyConfig.addPassthroughCopy('src/assets');So sieht deine Konfigurationsdatei jetzt aus:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};Wenn du npm start aufrufst, wird das CSS-Styling funktionieren und deine Homepage wird so aussehen:
Partials erstellen und zur Startseite hinzufügen
Du hast nun erfolgreich ein Layout erstellt und es zu deiner Homepage (index.njk) hinzugefügt. Jetzt kannst du die Startseite anpassen, um einige Informationen über dich zu speichern, z. B. weitere Informationen über dich, deine Fähigkeiten und Kontaktinformationen.
Du kannst deine Codes und Markups direkt in die index.njk-Vorlage einfügen, aber wir werden einzelne Partials für die Home-, About-, Skills- und Kontaktinformationen erstellen.
Die Hero-Partials
Dies ist der erste Bereich unterhalb der Navigationsleiste, der den Nutzern einen Eindruck davon vermitteln soll, worum es auf der Website geht.
<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>Der obige Code enthält einige Angaben zu deiner Person sowie einige soziale Symbole, die Links zu deinen Social-Media-Profilen enthalten.
Die Hero-Teile sollten wie folgt aussehen:
Du kannst dem Hero-Abschnitt weitere Inhalte hinzufügen, die Stile in der Datei css/globals.css ändern oder sogar deine eigene Version dieses Abschnitts erstellen.
Die Über-Teilseiten
Im Abschnitt „Über“ erfährt der Besucher deines Portfolios in beliebig vielen Absätzen mehr über dich. Das kann eine eigene Seite sein, wenn du mehr Informationen zu erzählen hast.
<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>Der Code enthält Informationen über dich (ein Bild und etwas Text). So soll der Abschnitt Über dich aussehen:
Die Skills Partials
In diesem Abschnitt werden die Technologien angezeigt, die du benutzt oder gerne benutzt.
<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>Der obige Code erstellt eine Karte, auf der das Technologie-Symbol und der Name für jede Fertigkeit stehen. Du kannst auch weitere Stile hinzufügen und den Code ändern, um ihn ansprechender und eindeutiger zu gestalten. So soll der Bereich der Fähigkeiten aussehen:
Die Kontakt-Teilbereiche
Da es sich um ein Portfolio handelt, solltest du potenziellen Kunden die Möglichkeit geben, dich zu erreichen. Eine Möglichkeit wäre, dass sie dir eine E-Mail schicken.
<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>Ersetze die E-Mail-Adresse im a Tag durch deine eigene, damit die Schaltfläche eine E-Mail-Anwendung startet, mit der man dir eine Nachricht schicken kann.
Du hast nun erfolgreich alle Partials für deine Homepage erstellt. Als Nächstes musst du sie in deine index.njk-Datei einbinden, damit sie auf der Startseite angezeigt werden können:
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}Wenn du den Startbefehl ausführst, werden auf deiner Startseite alle hinzugefügten Partials entsprechend angezeigt.
Wie du Sammlungen in Eleventy verwendest
In Eleventy sind Sammlungen eine Möglichkeit, zusammengehörige Inhalte zu gruppieren, so dass du Seiten auf Basis dieser Inhalte erstellen kannst. Wenn du zum Beispiel Markdown-Dateien mit ähnlichen Inhalten (Blog-Posts) in einem Blog-Ordner deines Projekts gespeichert hast, kannst du Sammlungen verwenden, um sie abzurufen und eine Liste aller Inhalte anzuzeigen. Außerdem kannst du ein Layout erstellen, um zu bestimmen, wie diese Inhalte angezeigt werden sollen.
Sammlungen werden in der Konfigurationsdatei .eleventy.js definiert und können Daten aus verschiedenen Quellen enthalten, z. B. aus Markdown- oder JSON-Dateien.
Für diese Portfolio-Website erstellen wir ein Projektverzeichnis im src-Verzeichnis, um die Markdown-Inhalte der einzelnen Projekte zu speichern. Dieser Inhalt enthält Details über das Projekt, das gelöste Problem, die verwendeten Technologien, die aufgetretenen Herausforderungen und die gemachten Erfahrungen.
Du kannst eine Markdown-Datei mit dem Namen des Projekts erstellen (quotes-generator.md) und den unten stehenden Code einfügen:
---
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.Hinweis: Wenn du die Startvorlage verwendet hast, solltest du sie bereits haben. Andernfalls kannst du sie aus dem Verzeichnis projects unserer Startvorlage auf GitHub kopieren.
Das Frontmatter am Anfang dieser Dateien stellt wie die Vorlagen Werte für die Injektion in deine Vorlagen zur Verfügung.
Da sich diese Markdown-Dateien im src-Verzeichnis befinden, behandelt Eleventy sie als Vorlagen und erstellt für jede eine HTML-Seite. Ihre URL lautet dann etwa /projects/quotes-generator.
Eleventy weiß jedoch nicht, welches Layout es für diese Seiten verwenden soll, weil sie noch keinen Layout-Wert in ihrem Frontmatter haben.
Lass uns zuerst ein Layout für diese Inhalte erstellen, bevor wir eine Sammlung anlegen und sie als Liste zu einer eigenen Projektseite hinzufügen.
Wie zuvor erstellst du eine Layout-Datei (project.njk) im Ordner layouts. Um Wiederholungen zu vermeiden, da diese Datei das Standard-HTML-Markup verwendet, passt du das Layout base.njk an, indem du einen Block erstellst, der den Abschnitt deines Layouts kennzeichnet, der geändert werden soll.
<!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>Der Block erhält einen Namen, weil du viele Blöcke in deinen Vorlagen haben kannst. Du kannst dies nun auf dein project.njk-Layout ausdehnen, sodass du nur noch den content-Block angeben musst:
{% 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 %}Im obigen Code legst du fest, wie jedes Projekt angezeigt werden soll. Es holt sich den Titel, das Bild und die gitHubURL aus dem Frontmatter und fügt dann über die Inhaltsvariable ({{ content | safe }}) weitere Inhalte hinzu.
Der nächste Schritt besteht darin, einen Layout-Schlüssel und einen Wert für das Frontmatter eines jeden Projekts hinzuzufügen:
---
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"
---
…Wenn du die URL jedes Projekts neu lädst, z. B. /projects/quotes-generator, wirst du feststellen, dass es jetzt das erstellte Layout verwendet:
So verwendest du Sammlungen in Vorlagen
Jedes deiner Projekte wird jetzt schön mit dem angegebenen Layout angezeigt, aber wie können die Leute auf diese Projekte zugreifen? Du musst eine Liste erstellen, auf die man klicken kann, um zu den einzelnen Projekten zu gelangen. Hier kommen die Sammlungen ins Spiel.
Um Sammlungen zu verwenden, musst du sie in der Konfigurationsdatei .eleventy.js mit der Methode addCollection() definieren.
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};Im obigen Code wird die Methode addCollection() verwendet, um eine Sammlung namens projects zu definieren. Die Callback-Funktion, die an addCollection() übergeben wird, liefert alle Markdown-Dateien im Verzeichnis projects mit der Methode getFilteredByGlob() zurück.
Sobald du eine Sammlung definiert hast, kannst du sie in einer Vorlage verwenden, um Seiten zu erstellen, die auf diesem Inhalt basieren. Erstellen wir eine Seitenvorlage projects.njk, die das Layout base.njk verwendet, deren Inhalt aber die Projekte aus der Sammlung projects sind:
---
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>Im obigen Code wird die Anweisung {% for %} verwendet, um eine Schleife durch alle Projekte in der Projektsammlung zu ziehen und eine Projektkarte für jedes Projekt zu erstellen.
Mit project.data.[key] hast du Zugriff auf alle Variablen. Im obigen Code werden zum Beispiel der Titel, die Beschreibung und die GitHub-URL des Projekts angezeigt. Auf die URL des Projekts kannst du auch über project.url zugreifen.
Wenn du den Startbefehl ausführst und zur Projektseite navigierst, sieht deine Seite so aus, wenn du viele Projekte hinzufügst:
Wie man Shortcodes verwendet
Mit Shortcodes kannst du benutzerdefinierte HTML-Tags oder dynamische JavaScript-Werte definieren, die du in deinen Vorlagen wiederverwenden kannst. Du kannst zum Beispiel einen Shortcode definieren, um das aktuelle Jahr zu generieren und in deine Website einzufügen.
In der Konfigurationsdatei .eleventy.js kannst du einen Shortcode mit der Methode addShortcode() definieren. Der folgende Code definiert zum Beispiel einen Shortcode namens year:
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};Der obige Shortcode year gibt das aktuelle Jahr zurück, das du in jede Vorlage deines Projekts einfügen kannst. Anstatt das Jahr fest in die Fußzeile dieser Website zu kodieren, kannst du es zum Beispiel mit {% year %} dynamisch hinzufügen, sodass es sich jedes Jahr selbst aktualisiert:
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>Wenn die Seite gerendert wird, enthält die Ausgabe das aktuelle Jahr im HTML p Tag.
So fügst du ein Theme zu einer Eleventy-Website hinzu
Das Hinzufügen eines Themes zu einer Eleventy-Website ist eine gute Möglichkeit, das Aussehen deiner Website schnell anzupassen. Offiziell bezeichnet Eleventy Themes als „Starter“, aber damit ist eigentlich dasselbe gemeint. Viele Websites bieten kostenlose Eleventy-Themes an, wie zum Beispiel die offiziellen Eleventy-Starter und die Jamstack-Themes.
Du musst nur dein Lieblings-Theme oder Starter auswählen und dann auf das GitHub-Repository zugreifen, um es auf deinen lokalen Rechner zu klonen. Lies dir unbedingt die Dokumentation durch, um die Projekte zu konfigurieren und anzupassen.
Führe npm install aus, um alle benötigten Pakete zu installieren, und führe dann npm start aus, um deine Anwendung lokal auf http://localhost:8080/ bereitzustellen .
Wie du eine Eleventy-Website bereitstellst
Du hast es jetzt geschafft, mit Eleventy eine elegante statische Portfolio-Website zu erstellen. Es reicht nicht aus, diese Art von Website auf deinem lokalen Rechner zu haben. Du möchtest sie online hosten, um sie mit anderen zu teilen.
Kinsta ist eine Cloud-Plattform, auf der du statische Websites hosten kannst, darunter auch Eleventy. Dazu musst du deinen Code auf GitHub pushen und anschließend auf Kinsta bereitstellen.
Pushe deine Eleventy-Website auf GitHub
Erstelle zunächst ein Repository auf GitHub; so erhältst du Zugriff auf die URL des Repositorys. Dann kannst du Git-Befehle verwenden, um deine Codes zu pushen.
Bevor du deine Dateien an GitHub weitergibst, solltest du eine .gitignore-Datei erstellen, in der du einige Dateien und Ordner angibst, die Git beim Pushen deines Codes ignorieren soll. Erstelle eine .gitignore-Datei in deinem Stammordner und füge Folgendes hinzu:
# dependencies
/node_modules
# run
/publicDu kannst nun dein lokales Git-Repository initialisieren, indem du dein Terminal öffnest, in das Verzeichnis mit deinem Projekt navigierst und den folgenden Befehl ausführst:
git initFüge nun deinen Code mit dem folgenden Befehl zum lokalen Git-Repository hinzu:
git addJetzt kannst du deine Änderungen mit dem folgenden Befehl übertragen:
git commit -m "my first commit"Hinweis: Du kannst „my first commit“ durch eine kurze Nachricht ersetzen, die deine Änderungen beschreibt.
Zum Schluss kannst du deinen Code mit den folgenden Befehlen auf GitHub veröffentlichen:
git remote add origin [repository URL]
git push -u origin masterHinweis: Ersetze „[Repository URL]“ durch deine eigene GitHub Repository URL.
Sobald du diese Schritte abgeschlossen hast, wird dein Code auf GitHub veröffentlicht und ist über die URL deines Repositorys zugänglich.
Du kannst jetzt auf Kinsta deployen!
Bereitstellen deiner Eleventy-Website auf Kinsta
Die Bereitstellung auf Kinsta ist in wenigen Minuten erledigt. Beginne im My Kinsta-Dashboard, um dich anzumelden oder dein Konto zu erstellen. Als Nächstes musst du Kinsta auf GitHub autorisieren.
Dann klickst du in der linken Seitenleiste auf Anwendungen, dann auf Dienst hinzufügen und schließlich auf Anwendung aus dem Dropdown-Menü:
Es erscheint ein Modal, in dem du das Repository auswählen kannst, das du bereitstellen möchtest. Wähle einen Zweig aus, den du bereitstellen möchtest, wenn du mehrere Zweige in deinem Repository hast.
Anschließend kannst du dieser Anwendung einen Namen geben. Wähle unter 25 einen Standort für das Rechenzentrum aus, dann erkennt Kinsta automatisch den Startbefehl.
Deine Anwendung wird nun bereitgestellt. Innerhalb weniger Minuten erhältst du einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. In diesem Fall ist es https://ty-portfolio-lvjy7.kinsta.app/
Zusammenfassung
In diesem Artikel hast du gelernt, wie du eine stilvolle Website mit Eleventy erstellst, wie du eine statische Eleventy-Website von Grund auf anpasst und wie du eine schöne Portfolio-Website erstellst.
Ganz gleich, ob du einen persönlichen Blog, eine Portfolioseite oder einen Online-Shop erstellen willst, mit Eleventy kannst du deine Ziele mit minimalem Aufwand und maximaler Wirkung erreichen.
Warum probierst du es also nicht noch heute aus und stellst es kostenlos auf Kinsta bereit? Wir haben eine „Hello World“-Vorlage von Eleventy, die du verwenden kannst, um noch schneller mit dem Erstellen zu beginnen.
Jetzt bist du dran: Was hältst du von Eleventy? Hast du schon etwas mit Eleventy erstellt? Teile uns deine Projekte und Erfahrungen gerne in den Kommentaren mit.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar