With the upward push of static web site turbines (SSGs) like Eleventy, rising a classy and surroundings pleasant static web site hasn’t ever been easier.
In this article, we’ll uncover discover ways to use Eleventy to craft a stunning and sensible static portfolio web site without having a server-side language or database.
You’re going to moreover discover ways to deploy your static web site instantly from your GitHub repository to Kinsta’s Software Website hosting platform, getting your web site are living in short on a loose .kinsta.app space.
Proper right here’s a reside demo of the static portfolio internet web site you’ll assemble with Eleventy.
You’ll get admission to this endeavor’s GitHub repository for those who occur to’d like to take a better look.
What Is Eleventy?
Eleventy, also known as 11ty, is a static internet web site generator that creates internet pages powered by the use of HTML, CSS, and JavaScript without the need for databases and backend programming languages.
Eleventy is known for its simplicity and flexibility, as it doesn’t energy you to use just one templating language or framework. It is helping more than 10 template languages and even permits you to use as many as you need in a single endeavor:
Eleventy, like most SSGs, permits you to assemble your static internet web site’s content material subject matter using reusable portions quite than rising complete HTML forms for each and every internet web page.
That is your signal to step up your portfolio recreation! 
How To Arrange Eleventy
It’s easy to position in Eleventy. Proper right here’s how:
- Be sure you have Node.js installed on your computer. You’ll check out by the use of running the command
node -von your terminal. Not available? Proper right here’s learn how to set up Node.js on your computer. - Create a brand spanking new list on your endeavor.
- Open your terminal and run the command
npm init -yon your endeavor’s list to initialize a brand spanking new Node.js endeavor, creating a package deal deal.json file with default settings. - Run the command
npm arrange @11ty/eleventy --save-devto position within the package deal deal as a construction dependency on your endeavor. - That’s it! You’ll now run Eleventy by the use of running the command
npx @11ty/eleventyon your endeavor list. This will likely most likely generate your internet web site files and output them to a _site list (or your configured list) on your endeavor folder.
Bear in mind: Whilst you run the npx @11ty/eleventy command. You’re going to get this output:
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)Proper right here, 0 files are written because of there aren’t any templates on your endeavor’s folder.
Eleventy Directions and Configuration
You at the moment have your Eleventy endeavor created, on the other hand that’s no longer all. You wish to have to create some configurations and take into accout of a few elementary directions on your static internet web site that can be served to the browser.
Eleventy Directions
Listed below are probably the most essential key Eleventy directions you will have to know:
npx eleventy: This command is used to build your internet web site and output the result to the _site folder (or regardless of folder you’ve configured as your output list).npx @11ty/eleventy --serve: This command gets began a space server so that you’ll preview your internet web site on your browser. If you find yourself making any changes on your internet web site, your endeavor will probably be routinely rebuilt and up to the moment on your browser.npx @11ty/eleventy --serve --port=8081: This command starts the Eleventy server and specifies a custom designed port on which the server will listen.npx @11ty/eleventy --watch: This command will watch your endeavor files for changes and routinely rebuild your internet web site when essential.
You do not need to memorize the ones directions because of you’ll add them to commonplace directions on your package deal deal.json file’s scripts object:
"scripts": {
"get began": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"assemble": "npx eleventy"
},Now you’ll use npm get began to serve your application as an alternative of npx @11ty/eleventy --serve, and also you’ll run npm run assemble as an alternative of npx eleventy.
How To Configure Your Static internet web site with Eleventy
Eleventy is “zero-config” by the use of default and has flexible configuration alternatives. Listed below are some key configuration alternatives you will have to know:
- input: This selection means that you can specify your endeavor files’ list. It’s absolute best practice to use src.
- output: This selection means that you can specify the list where your built internet web site will have to be output. By the use of default, Eleventy outputs to the _site folder. (Many developers use public).
- templateFormats: This selection means that you can specify which file extensions will have to be processed as templates. By the use of default, Eleventy processes .html, .njk, and .md files as templates.
The ones are just a few directions and configuration alternatives available in Eleventy. To configure your Eleventy endeavor, create a .eleventy.js file inside the root of your endeavor. Then paste this code into the file to provide your endeavor a building that includes input and output directories:
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};Bear in mind: eleventyConfig is passed as an argument, providing additional configuration alternatives that will probably be used later in this endeavor.
How To Preview an Eleventy Internet web site
You at the moment know some key directions that can be used to preview your Eleventy static web site, on the other hand whilst you run the command, similar to npx @11ty/eleventy, no longer the rest is served. It’s since you don’t have any template file.
You’ll create an src folder inside the root folder of your endeavor, then create some template files similar to index.html or use your most popular template language to represent the home internet web page:
Eleventy Static Internet web site
Hello World!
If you happen to now run the npx @11ty/eleventy command, a public folder will probably be created with the generated static file. You’re going to unquestionably want this served on your browser and allow some sizzling reloading choices. This is possible by the use of running the following command:
npx @11ty/eleventy --serveThis will likely most likely serve your internet web site on http://localhost:8080/.
The ones directions are somewhat tough to memorize and all the time use. You already added them to familiar syntax on your package deal deal.json file, so that you’ll use npm get began to serve your application to http://localhost:8080/.
How To Create a Static Portfolio Web page With Eleventy
You at the moment know how to create a static internet web site with Eleventy. Let’s create the portfolio endeavor.
You’ll create a brand spanking new Eleventy endeavor from scratch, in a different way you’ll want photos, CSS, and exact content material subject matter on your endeavor, so we’ve created a GitHub repository template that will help you tempo problems up. In GitHub, make a selection Use this template > Create a brand spanking new repository to copy the ones assets and the initial configuration files into a brand spanking new repository of your personal, then download them on your local instrument.
Your endeavor can have the following building:
├── node_modules/
├── public/
├── src/
| ├── _includes
| ├── layouts
│ ├── assets
│ ├── css
│ ├── duties
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── package deal deal.lock.json
└── package deal deal.jsonHow To Use Templates in Eleventy
When using Eleventy, there are 3 number one sorts of templates that you want to clutch. The ones templates may also be created with Nunjucks, which helps you to define variables, loops, conditionals, and other just right judgment that can be used to generate the internet web page’s content material subject matter dynamically.
- Internet web page Templates: They define the development and content material subject matter of specific particular person pages on your web site.
- Construction Templates: They define the entire building and design of your web site internet web page(s). They usually include no longer odd portions similar to headers, footers, navigation menus, and sidebars, which are shared all over a few pages.
- Partials Templates: They define small, reusable sections of your web site’s HTML markup. They’re typically used to stipulate no longer odd portions similar to headers, footers, navigation menus, and sidebars, which may also be included in layout and internet web page templates.
Now that every of numerous those templates. Let’s create templates for the static portfolio web site.
How To Create Layouts in Eleventy
Inside the src list, create a _includes list. This will likely most likely come with all our layouts and partials.
You’ll then create a layouts folder (for proper workforce) to hold your entire layouts. The ones layouts are templates and can use your most popular templating language, like Nunjucks, which we’re using proper right here.
Let’s create a base.njk file to hold your commonplace layout for your entire pages.
J.'s Portfolio
{ secure }
Inside the code above, a commonplace HTML markup is created and Font Awesome is included from a CDN so that you’ll have get admission to to its icons. Moreover, the content material subject matter variable is passed so that all the content material subject matter from any internet web page that uses this layout is included.
On the other hand that’s no longer the entire layout story. Your layout can have some sections that may appear on each and every internet web page, such for the reason that navbar and footer. Let’s create partials for every of the ones sections.
How To Use Partials in Eleventy
All partials are stored within the _includes list. For proper workforce, you’ll store them in a folder. In this case, create a portions folder within the _includes list and create navbar and footer templates.
Proper right here’s the Navbar Partials in navbar.njk:
Proper right here’s the Footer Partials in footer.njk:
Add the ones partials on your internet web page or layout template. This may also be done using the {% include %} remark. Proper right here’s what the layouts/base.njk template will seem to be whilst you include the navbar and footer templates:
J.'s Portfolio
{% include "portions/navbar.njk" %}
{ secure }
{% include "portions/footer.njk" %}
Whilst you run the npm get began command, this layout isn’t going to look because it has no longer been added to a internet web page template. Create a internet web page template and add this layout.
How To Create Internet web page Templates in Eleventy
On your src folder, create an index.njk file to serve as the home internet web page of your portfolio web site. This internet web page will use the ground layout:
---
layout: layouts/base.njk
identify: Space
---
That's the {{identify}} Internet web page.
Whilst you run the npm get began command now, your static internet web site will load on http://localhost:8080/. That’s what the output will seem to be:
How To Use CSS and Pictures in Eleventy
You at the moment know the various templates that exist, how they artwork, and the best way they can be utilized in mixture. On the other hand you’re going to comprehend that inside the layouts/base.njk file, a CSS file is hooked up to style the portfolio internet web page, but when the internet web site so much, the CSS varieties aren’t affected given that CSS file isn’t added to the public folder.
To fix this, you want to configure it on your .eleventy.js file using the eleventyConfig parameter. This makes it possible for Eleventy to clutch that the CSS file(s) exist and also sit up for possible changes to the CSS file.
Inside the src folder, you’ll create a css folder to store all CSS files you’re going to make use of on your endeavor, on the other hand for this article, you’ll use one CSS file — international.css. You’ll then configure the css folder, so it configures all files within the folder:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');The identical issue to images. If you happen to add any image on your internet web page, you’re going to comprehend it doesn’t show. For it to show, you want to configure the folder your photos are stored. Let’s create an assets folder to store all our photos and configure the assets folder.
eleventyConfig.addPassthroughCopy('src/assets');That’s what your configuration file will now seem to be:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};Whilst you run npm get began, the CSS styling will artwork, and your house internet web page will seem to be this:
Rising Partials and Together with To the Space Internet web page
You’ve gotten now succeeded in creating a layout and together with it to your house internet web page (index.njk). Let’s customize the home internet web page to hold some information about yourself, similar to additional information about you, your talents, and call information.
You’ll decide so that you could upload your codes and markup instantly to the index.njk template, on the other hand let’s create specific particular person Partials for the Space, About, talents, and call information.
The Hero Partials
That’s the number one segment beneath the Navbar, whose primary serve as is to provide shoppers some way of what the web site is ready.
Hello, I'm Joe 👋
I'm a device developer based in Lagos, Nigeria. I be aware of building (and sometimes designing) outstanding internet pages, applications, and the entire thing in between.
A few details about you may well be included inside the code above, along with some social icons to connect links on your social media profiles.
The Hero partials will have to seem to be this:
You’ll add additional content material subject matter to the Hero segment, business the kinds inside the css/globals.css file, or even create your personal fashion of this segment.
The About Partials
The About segment tells people that discuss with your portfolio additional information about you in as many paragraphs as you want. It is a separate internet web page if in case you have additional information to tell.
About Me
As a developer, I have all the time been rising elegant and environment friendly solutions to difficult problems. I have a formidable foundation in software construction, with a point of interest on web technologies similar to HTML, CSS, and JavaScript. I enjoy operating on each and every the front-end and back-end of applications, and I am all the time looking for ways to optimize potency, make stronger shopper revel in, and ensure the most efficient imaginable level of code top quality.
All over the place my career, I have worked on a lot of duties, from simple static internet pages to difficult enterprise-level applications. I am professional in operating with rather numerous construction tools and frameworks, along with React, Angular, Vue.js, Node.js, and Laravel. I am all the time willing to be told and uncover new technologies, and I am again and again on the lookout for out choices to make stronger my talents and knowledge.
The code accommodates information about you (an image and a couple of text). This is how the About segment is supposed to look:
The Skills Partials
This segment is used to turn the technologies you utilize or love using.
Skills
HTML
CSS
JavaScript
React
Node
Python
The code above creates a card to hold the font-awesome technology icon and the determine for every talent. You’ll moreover add additional varieties and keep watch over the code to make it additional attention-grabbing and distinct. This is how the talents segment is supposed to look:
The Contact Partials
Since this is a portfolio, you will have to add some way for potential customers to achieve you. One way may also be for other folks to send you an electronic mail.
Get In Touch
If you want us to artwork together, have any question or want me to speak at your fit, my inbox is all the time open. Whether or not or no longer merely need to say hi, I am going to try my absolute best imaginable to get once more to you! Cheers!
Say Hi
Trade the email take care of inside the a tag with your personal so that the button launches an electronic mail application for other folks to send a message to you.
You’ve gotten now successfully created all the Partials for your house internet web page. Next, you want to include them on your index.njk file so they can show on the space internet web page:
---
layout: layouts/base.njk
identify: Space
---
{% include "portions/hero.njk" %}
{% include "portions/about.njk" %}
{% include "portions/talents.njk" %}
{% include "portions/contact.njk" %}Whilst you run the start command, your house internet web page will display all the added Partials accordingly.
How To Use Collections in Eleventy
In Eleventy, collections are a option to workforce identical content material subject matter together with the intention to generate pages based on that content material subject matter. For instance, if in case you have markdown files of an identical content material subject matter (blog posts) stored in a blog folder of your endeavor, you’ll use collections to fetch them and display a list of all the content material subject matter. Moreover, you’ll create a layout to maintain how the ones contents are displayed.
Collections are defined inside the .eleventy.js configuration file and can include wisdom from various sources, similar to markdown or JSON files.
For this portfolio web site, let’s create a duties list inside the src list, to store the markdown content material subject matter of every endeavor. This content material subject matter will include details about the endeavor, the problem solved, technologies used, not easy eventualities encountered, and lessons came upon.
You’ll create a markdown file with the determine of the endeavor (quotes-generator.md) and paste the code beneath:
---
identify: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by the use of different authors . Quotes are routinely copied on your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
The quotes generator endeavor is a device software designed to turn random inspirational or thought-provoking quotes to shoppers. This endeavor objectives to get to the bottom of the problem of lack of motivation or inspiration by the use of providing shoppers with a to hand information a coarse and easy option to get admission to inspiring quotes.
### Technologies Used
The technologies used in this endeavor include HTML, CSS, and JavaScript. The application uses an API to fetch random quotes and display them to the patron.
### Hard eventualities and Lessons Learned
One of the vital essential number one not easy eventualities faced all over this endeavor used to be as soon as designing the patron interface to be visually attention-grabbing and responsive on different gadgets. The workforce had to consider various design portions similar to font sizes, colors, and layout to create a user-friendly and aesthetically pleasant interface.
Each different drawback used to be as soon as coping with errors and edge cases similar to neighborhood connectivity issues or invalid API responses. The workforce had to enforce error coping with and fallback mechanisms to be sure that the application would continue to function simply underneath various conditions.
All over the place the endeavor, the workforce came upon valuable lessons about front-end construction, similar to the importance of clean and surroundings pleasant code, environment friendly debugging and troubleshooting, and responsive design laws. As well as they came upon the importance of the use of APIs to get admission to and display wisdom from external sources.
Common, the quotes generator endeavor used to be as soon as a valuable finding out revel in that allowed the workforce to extend their technical and creative talents, and create a useful tool for purchasers looking for day-to-day inspiration or motivation.Bear in mind: If you happen to used the starter template, you’ll have them already, else you’ll replica them from the duties list of our starter template on GitHub.
The frontmatter at the best of the ones files, like templates, makes values available for injection into your templates.
On account of the ones Markdown files are inside the src list, Eleventy will handle them as templates and generate an HTML internet web page for every one. Their URL will probably be something like /duties/quotes-generator.
Eleventy, then again, gained’t know what layout to use for the ones pages because of they don’t however have a layout value in their frontmatter.
Let’s first create a layout for this content material subject matter previous to rising a collection and together with them as a list to a loyal duties internet web page.
Like previous to, create a layout file (endeavor.njk) inside the layouts folder. To steer clear of repetition, since this file will use the default HTML markup, you adjust the base.njk layout by the use of creating a block to indicate the segment of your layout that may business.
J.'s Portfolio
{% include "portions/navbar.njk" %}
{% block content material subject matter %}
{ secure }
{% endblock %}
{% include "portions/footer.njk" %}
The block is given a name content material subject matter because of you’ll have many blocks within your templates. You’ll now prolong this on your endeavor.njk layout, in order that you most straightforward need to specify the content material subject matter block:
{% extends "layouts/base.njk" %}
{% block content material subject matter %}
{% endblock %}Inside the code above, you may well be specifying how every endeavor will probably be displayed. It’s going to get the identify, image, and gitHubURL from the frontmatter and then add other content material subject matter using the content material subject matter variable ({ secure }).
Your next step may also be so that you could upload a layout key and price to every endeavor’s front subject:
---
layout: layouts/endeavor.njk
identify: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by the use of different authors . Quotes are routinely copied on your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
…Whilst you reload every endeavor’s URL e.g. /duties/quotes-generator, you’re going to comprehend it now uses the created layout:
How To Use Collections in Templates
Each of your duties now presentations smartly with the required layout, on the other hand how can other folks get admission to the ones duties? You wish to have to create a list that people can click on directly to take them to every endeavor. That’s the position collections are to be had in.
To use collection, you’ll have to define it inside the .eleventy.js configuration file using the addCollection() approach.
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('duties', (collection) => {
return collection.getFilteredByGlob('src/duties/*.md');
});
return {
// ...
};
};Inside the code above, the addCollection() approach is used to stipulate a collection referred to as duties. The callback function passed to addCollection() returns all markdown files inside the duties list using the getFilteredByGlob() approach.
Once you have defined a collection, you’ll use it in a template to generate pages based on that content material subject matter. Let’s create a duties.njk internet web page template, which may use the base.njk layout, on the other hand its content material subject matter will be the duties from the duties collection:
---
layout: layouts/base.njk
identify: Duties
---
Duties
{% for endeavor in collections.duties %}
{% endfor %}
Inside the code above, the {% for %} remark is used to loop by the use of all the duties inside the duties collection and generate a endeavor card for every one.
You’ll have get admission to to all variables using endeavor.wisdom.[key]. For instance, the code above will display the endeavor’s identify, description, and GitHub URL. You’ll moreover get admission to the endeavor’s URL using endeavor.url.
Whilst you run the start command and navigate to the duties internet web page, that’s what your internet web page will seem to be whilst you add many duties:
How To Use Shortcodes
Shortcodes are a option to define custom designed HTML tags or JavaScript dynamic values that you just’ll reuse all over your templates. For instance, you’ll define a shortcode to generate the prevailing year and add it on your web site.
Inside the .eleventy.js configuration file, you’ll define a shortcode using the addShortcode() approach. For instance, the following code defines a shortcode referred to as year:
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};The year shortcode above will return the prevailing year, which you’ll add to any template within your endeavor. For instance, as an alternative of onerous coding the year to the footer of this web site, you’ll add it dynamically using {% year %}, so it updates itself every year:
When the internet web page is rendered, the output will include the prevailing year within the HTML p tag.
How To Add a Theme to an Eleventy Internet web site
Together with a theme to an Eleventy internet web site may also be a great way to customize the look and feel of your internet web site in short. Officially, Eleventy refers to topic issues as starters, on the other hand understand that they suggest the identical issue. Many internet pages provide loose Eleventy topic issues, such for the reason that professional Eleventy starters and the Jamstack subject matters.
All it’s a will have to to do is make a selection your favorite theme or starter, then get admission to its GitHub repository to clone it into your local instrument. Remember to be informed its documentation for steps to configure and customize the duties.
Run npm arrange to position in all methods used, and then run npm get began to serve your application in the neighborhood to http://localhost:8080/.
How To Deploy an Eleventy Internet web site
You’ve gotten now succeeded in rising a classy portfolio static web site with Eleventy. Having this type of web site on your local instrument isn’t enough. You’d need to host it online to share it with anybody.
Kinsta is a cloud platform that permits you to host static web pages, along with Eleventy. This may also be done by the use of pushing your codes to GitHub, and after all deploying to Kinsta.
Push Your Eleventy Internet web site to GitHub
First, create a repository on GitHub; this will give you get admission to to the repository’s URL. You then’ll use git directions to push your codes.
Forward of pushing your files to GitHub, it’s absolute best you create a .gitignore file to specify some files and folders that git will have to overlook about when pushing your codes. Create a .gitignore file on your root folder and add the following:
# dependencies
/node_modules
# run
/publicYou’ll now initialize your local Git repository by the use of opening your terminal, navigating to the list that accommodates your endeavor, and dealing the following command:
git initNow add your code to the local Git repository using the following command:
git addYou’ll now commit your changes using the following command:
git commit -m "my first commit"Bear in mind: You’ll trade “my first commit” with a short lived message describing your changes.
In the end, push your code to GitHub using the following directions:
git some distance off add starting [repository URL]
git push -u starting clutchBear in mind: Remember to trade “[repository URL]” with your personal GitHub repository URL.
Once you have completed the ones steps, your code will probably be pushed to GitHub and in the market by the use of your repository’s URL.
You’ll now deploy to Kinsta!
Deploying Your Eleventy Internet web site To Kinsta
Deployment to Kinsta happens in merely minutes. Get began at the My Kinsta dashboard to log in or create your account. Next, you’re going to authorize Kinsta on GitHub.
You’ll then click on on Applications on the left sidebar, then click on on Add supplier and after all click on on Tool from the dropdown:
A modal will appear through which you’ll make a selection the repository you need to deploy. Make a choice a division you need to deploy if in case you have a few branches on your repository.
You’ll then assign a name to this application. Make a choice a knowledge heart location plenty of the 25 available, and then Kinsta will routinely find the start command.
Your application gets began deploying. Within a few minutes, a link will probably be supplied to get admission to the deployed fashion of your web site. In this case, it’s https://ty-portfolio-lvjy7.kinsta.app/
Dull portfolios begone! Use Eleventy to craft a static web site that screams “HIRE ME!” 
Summary
In this article, you might have came upon discover ways to craft a classy web site with Eleventy, the various ways you’ll customize an Eleventy static internet web site from the ground up, and discover ways to assemble a pleasing portfolio web site.
Whether or not or no longer you’re building a personal blog, a portfolio internet web site, or a internet based totally store, Eleventy will assist you to succeed in your goals with minimal effort and maximum impact. So why no longer check out it lately and see what you’ll create?
Unlock your static web site with Kinsta Software Website hosting and our Pastime Tier plan, starting at $7/month.
What’s your idea on Eleventy? Have you ever ever implemented Eleventy to build the rest? Please be at liberty to share your duties and stories with us inside the comments segment beneath.
The submit How To Craft a Trendy Static Website online with Eleventy (11ty) seemed first on Kinsta®.
0 Comments