Designing an Stylish Static Website using Eleventy (11ty) (r) (r)
Hello World!
If you now run this the npx@11ty/eleventy command and you run the command, a public folder will be created using the created static file. You will definitely want this served to your browser and enable some hot reloading options. It is done by using this procedure:
npx @11ty/eleventy --serveThis will serve your site on http://localhost:8080/.
These commands are quite difficult to remember and use consistently. You already added them to familiar syntax in your package.json file, so you can use npm start to serve your application to http://localhost:8080/.
How Do I Make a static Portfolio Website with the help of
It is now clear how to build an online site using Eleventy. Let's start by creating the portfolio.
Create a completely new Eleventy application from scratch, or you'll need images, CSS and the actual content to your project, so we've developed the GitHub repository template to speed things up. Within GitHub you can select the template to Create a new repository to copy these assets and the initial configuration files into a repository that is your own, then save them on your personal computer.
Your project will have the following form:
+-- node_modules/
+-- public/
+-- src/
| +-- _includes
| +-- layouts
| +-- assets
| +-- css
| +-- projects
| +-- index.njk
+-- .eleventy.js
+-- .gitignore
+-- package.lock.json
+-- package.jsonWhat are the best templates to use in Eleventy
When using Eleventy, there are three main kinds of templates are important to know about. Templates can be made by using Nunjucks, which allows the user to create variables and loops, conditionals as well as other logic which can be used to generate the page's content dynamically.
- Page Templates: They define the design and structure of each pages on your website.
- Layout Templates The HTML0 Layout Templates define the general structure and style of your site's page(s). These are typically common elements such as headers, footers, navigation menus and the sidebars. These are often shared across several pages.
- Partials Templates: They are small, reusable sections of your website's HTML markup. They typically serve for defining common elements like footers, headers or navigation menus as well as sidebars. They are included in page layout templates and layouts.
You now know the basic structure of these templates. Let's make templates for the static portfolio website.
How Do I Create Layouts in Eleventy
Inside the src directory, create the "_includes" directory. This directory will hold all our layouts and partials.
You can then create the design folder (for an organized system) to hold all your designs. Layouts are templates, and are able to be created using your preferred language for templating, such as Nunjucks that we are making use of here.
Let's make an base.njk file to store your overall layout for your entire pages.
J. 's Portfolio
Content || secure|safe}
Safe
/html>
In the above code the general HTML markup is made and Font Awesome is included from a CDN which gives you access to its icons. Additionally, the variable content is passed so that all content on any page that uses the layout will be contained.
It's just not the complete the story of layout. The layout you choose to use will include sections that appear everywhere like the navigation bar and the footer. We can create partials of each of these sections.
How To Use Partials in Eleventy
All partials are stored within the in the _includes directory. For proper organization they can be stored in a folder. In this case, create the components folder inside the _includes directory. You can then make footer and navbar templates.
Here's the Navbar Partials in navbar.njk:
J. "> HTML0
Projects
Resume
Resume Resume
Projects Resume
•
Below are the footer's details found in footer.njk:
(c) % year % Joel's Portfolio
Joel's Portfolio Joel's Portfolio
Joel's Portfolio
Joel's Portfolio Joel's Portfolio
Joel's Portfolio
Include these partials on your layout or web page. This can be done using the % include % phrase. This is how will the layouts/base.njk template will look like when you include the footer and navbar templates:
J. 's Portfolio
% include "components/navbar.njk" %
content
% include "components/footer.njk" %
If you execute the NPM launch command, this layout will not appear because it's not included in a template page. Create a page template and include this layout.
How To Create Page Templates using Eleventy
Within your the src folder, create the index.njk file to serve as your home page of your portfolio site. The page will be built using the layout that you have chosen for your base:
---
layout layouts/base.njk
title: Home.
This is the itle|"itle"|"Itle"} Page.
When you run the npm start command now, your static site will load on http://localhost:8080/. What the output will look like
Page Template, without styling
How To Use CSS and images in Eleventy
It is now clear what templates that exist, how they work and the ways they can use together. However, you'll notice within the layouts/base.njk file, a CSS file is attached to design the portfolio page, but when the site starts loading the CSS styles do not change because the CSS file isn't added to the public folder.
For this to be fixed fix it, you must configure the configuration in the . eleventy.js file by using the eleventyConfig parameter. This makes it possible for Eleventy to know whether the CSS file(s) exists and also watch for possible changes on this CSS file.
In the src folder, you are able to make the css folder for storing every CSS files that you'll need in your project, but in this particular article it is possible to use just one CSS file -- global.css. It is then possible to set up the CSS folder to can be configured to use all the files in the folder:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
Same thing applies is true for images. If you add any image to your site, you will notice the image doesn't appear. In order for it to display the image, you have to set the folder your images are stored. Let's create the assets folder to store the images we want to display and then configure the assets folder.
eleventyConfig.addPassthroughCopy('src/assets');
This is what your configuration file should have:
module.exports = function (eleventyConfig)
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return
dir:
input: 'src',
output: 'public',
,
;
;
When you run npm begin then the CSS styling will work as well, and your home page appears like this:
Layout appearance is after template has been included
Creating Partials and Adding To the Home Page
You have now succeeded in designing a layout, and then adding it to your homepage ( index.njk). Let's customize the home page to hold some information regarding yourself, for example more information about you, your skills, and your contact details.
You may choose to add your codes and markup directly to your index.njk template, instead, we can create separate Partials for the home, about, skills and contact details.
The Hero Partials
This is the first section under the Navbar and its primary goal is to provide users with a sense of the things that this website about.
"hero-text"Hello, my name is Joe
I'm Joe.I'm a developer of software based within Lagos, Nigeria. I'm specialized in developing (and occasionally creating) amazing websites, apps as well as everything else in between.
Certain details about you can be found in the above code as well as some icons for social media that connect your links to profile on social media.
The Hero partials should look as follows:
Hero display
It is possible to add additional content in the Hero section, alter the stylings in the css/globals.css file, or develop your personal version of the section.
The About Partials
The About section tells people who visit your portfolio information about you, in the number of paragraphs you want. This can be a separate page should you have additional details to share.
About Myself
About Me
"p>As a developer, I have always had a passion for finding elegant, efficient solutions to complex problems. I'm a solid expert in software development, which includes web technologies, such as HTML, CSS, and JavaScript. I am a fan of working on the front-end and back-end of software, and am always looking for ways to increase efficiency, increase user satisfaction as well as ensure the best degree of code quality. Through my career, I have been involved in a variety of tasks, ranging from basic static websites to complex enterprise-level applications. I'm proficient in using a range of development tools and frameworks, such as React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore the latest technologies and always seek out new ways to enhance my skills as well as my knowledge.
/div>
/div>
The code is a collection of information about you (an image as well as some text). This is the way that the About section is supposed to appear.
About partials
The skills Partials
This area is designed to display the technologies you use or enjoy using.
Skills HTML CSS Skills
HTML
CSS JavaScript HTML
CSS JavaScript HTML CSS
HTML3
HTML CSS HTML CSS JavaScript
React
Node HTML13
Python
The above code generates a card to hold the awesome font icon as well as the name for each skill. It is possible to add additional designs and alter the code so that it looks more appealing and distinct. The skills section is supposed to look like:
Skills partials
The Contact Partials
Since this is a portfolio you must include a method to allow potential clients to contact you. One way would be for individuals to write you an email.
Send me a message
If you'd like us to collaborate and have any questions or wish to have me speak at your next event, my inbox is always open. Whether just would like to meet you and say hello, I'll be sure to respond to you! Thank you!"Hello"
Say Hello!
Change the email address on the tag with your own email address. tag with your own so that it opens an email program for users to contact you.
Contact partials
It is now possible to create every single part of your homepage. Next, you need to incorporate them into your index.njk file so they appear on the home page:
---
layout: layouts/base.njk
title: Home
---
% include "components/hero.njk" %
% include "components/about.njk" %
% include "components/skills.njk" %
% include "components/contact.njk" %
When you run the start command, the homepage will display the additional Partials accordingly.
How to Use Collections in Eleventy
In Eleventy, collections are used to organize closely related content in order that you can create pages based on that information. As an example, if there are markdown files with similar material (blog posts) stored in a blog folder of your application, you may make use of collections to retrieve them and then display a list of all the content. Also, you can create a layout to handle the way these content are presented.
Collections are described within the .eleventy.js configuration file and may contain data from various sources, such as markdown or JSON files.
In order to create this portfolio website we will build a project directory inside the src directory, to store the markdown information of every project. This content will include details of the project, including the solution to the problem, the technologies employed, challenges encountered, and the lessons that were learned.
You can create a markdown file with the name of the project (quotes-generator.md) and paste the code below:
---
title: Quotes Generatordescription: "Helps you generates quotes of around 1600 quotes by various authors . Quotes automatically copy onto 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 lacking motivation or inspiration by providing users with simple and fast access to get inspirational quotes. ### Technologies Used
The technology employed in this project are HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display the quotes for the user. ### Challenges and lessons learnedOne major challenge faced when working on this project was to design the interface for users to be visually appealing and responsive on different platforms. The team had to consider different design elements like the size of fonts, colors and layout in order to design a user-friendly and aesthetically pleasing interface. Another challenge was handling errors or edge situations such as connection issues to the network or incorrect API responses. The team needed to establish error handling and fallback mechanisms to ensure that the application would continue to function efficiently under different situations. The team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective troubleshooting and debugging techniques, as well as flexible design concepts. They also learned the importance of using APIs in order to get access and display data taken from outside sources. The quotes generator project was an invaluable learning experience, which enabled the team to improve their skills in technology and creativity and to create a valuable device for those seeking everyday inspiration or motivation.
NOTE: If you used the starter template, you should already have them. If not, you can copy them from the projects directory on our starter template on GitHub.
The front matter on top of these files, similar to templates, makes values available to insert into templates.
Because these Markdown files reside within the directory src, Eleventy will consider them to be templates and generate an HTML page for each one. Their URL will be something like /projects/quotes-generator.
Project appearance without layout
Eleventy won't be able to determine the layout on these pages since they don't yet have an element of layout in their frontmatter.
Let's first create an outline for this content prior to creating a collection, and adding them as an array to the dedicated project page.
As before, you need to you must create a layout ( project.njk) in your layouts folder. To prevent repetition, because this layout file is based on the standard HTML markup, it is necessary to modify to the base.njk layout by making a block that represents what section of the layout which will alter.
J. 's Portfolio
% include "components/navbar.njk" %
% block content %
safe
% endblock %
% include "components/footer.njk" %
The block is given a name content due to the fact that you are able to have multiple blocks within your template. It is possible to add this to the project.njk layout, so you only need to define the block's content:
% extends "layouts/base.njk" %
Block content
Block contentBlock content itle|"itle"}
It's on
GitHub GitHub
The GitHub
safe |secure|safe}
Endblock: %
In the above code, you are specifying what each project should be presented. It will get the titles, image as well as the URL of the github in the frontmatter and later add more content with the content variable ( safe |secure|safe}).
The next step would be adding a layout-related important and worth to every front matter of the project:
Code >---
layout layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes using approximately 1600 quotations written by various authors . Quotes automatically copy onto the clipboards of your computer." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
...
If you load each project's URL e.g. /projects/quotes-generator, you will notice it now uses the created layout:
Layout and appearance of the project
How to Use Collections in Templates
Your projects are all is displayed in a pleasing manner with the chosen layout, but how can users access the projects? The best solution is to make the list of projects that anyone can use to navigate into each project. This is where collections are available.
To use collection, you must define it within the .eleventy.js configuration file with the addCollection() method.
module.exports = function (eleventyConfig)
// ...
eleventyConfig.addCollection('projects', (collection) =>
return collection.getFilteredByGlob('src/projects/*.md');
);
return
// ...
;
;
In the code above, in the code above, use of the addCollection() method is employed to create a collection called projects. The callback function passed to the addCollection method() returns all markdown documents in the projects directory using method findFilteredByGlob() method.
After you've established a collection, then you are able to use it as templates to create pages based on that material. Let's design a projects.njk page template using an existing base.njk layout, however its content will include those projects in the collection.
---
layout: layouts/base.njk
title: Projects
---
Projects
% for project in collections.projects %
project.data.title
project.data.description
Read more
% endfor %
In the code above, the % for % phrase is used to go through the entire projects from the collection to generate a new plan card each one.
Access to all variables using project.data.[key[key]. In the example above, the code above will show the title of the project, description, as well as the GitHub URL. Additionally, you can access the project's URL through project.url.
If you execute the start command, and then navigate to the page for projects and click on projects, you will see this webpage will appear like after you create multiple projects:
Template page for Projects
How To Use Shortcodes
Shortcodes are a way to define custom HTML tags as well as JavaScript dynamic values that you can reuse across your templates. You can, for instance, define a shortcode to generate the current year's date and include it to your website.
In the .eleventy.js configuration file You can specify the shortcode you want to use using the addShortcode() method. For example, the following code defines a specific shortcode known as year:
module.exports = function (eleventyConfig)
// ...
eleventyConfig.addShortcode('year', () =>
return `$new Date().getFullYear()`;
);
return
// ...
;
;
The year shortcode above returns the year currently in use and you are able to add it to any template in the scope of your work. As an example instead of hard-coding the year to the footer on this site, you can add it by through the % year% and it'll update it every year.
(c) % year % Joel's Portfolio
// ...
Once the page has been rendered, the output will include the current year's date within the HTML p tag.
How Do I Add A Theme for an Eleventy Site
Adding a theme to the Eleventy site can be a great way to customize your site's appearance and style. your site quickly. Officially, Eleventy refers to themes as starters, but understand that they mean identically. Numerous websites offer free Eleventy themes, including the official Eleventy starters and Jamstack themes.
The only thing you'll need to do is choose your preferred theme or start-up, and then go to the GitHub repository and copy it onto your personal computer. Ensure you read its documentation for steps to configure and modify the themes.
Run npm install to install all packages used, and then run npm start to serve your application locally to http://localhost:8080/.
How To Deploy an Eleventy Site
It is now possible to designing a beautiful portfolio website using Eleventy. A website of this sort locally on your computer does not suffice. It's best to host it online to be able to share it with anyone.
Make Your Eleventy Website to GitHub
When you are ready to upload your files to GitHub and then to GitHub, make sure to make the .gitignore file to specify some files and folders that git shouldn't ignore when pushing your codes. Make an .gitignore file in the root directory and include the following information:
# dependencies
/node_modules
# run
/public
Now you can start your local Git repository by opening your terminal, selecting the directory which contains your project, and using the following command:
Git init
Now add your code into the local Git repository using the following commands:
git add
You can now commit your changes using these commands:
git commit"my first commit "my first commit"
Note: You can replace "my first commit" by a short text describing your modifications.
Finally, push your code on GitHub with the following instructions:
Remote git add origin [repository URL]
Gi push -u source master
NOTE: Ensure you replace "[repository URL" by your personal GitHub repository URL.
When you've finished these steps, your code will be uploaded into GitHub, and is accessible via the URL of your repository.
It is now possible to deploy !
Then, you can deploy your Eleventy site to
Click Applications in the left-hand sidebar, and then Click Add Service, click Add service, and thenclick the application from the dropdown:
Moving to the application hosting of's
A modal will appear where you are able to select the repository you would like to deploy. Select the branch you would like to deploy if you have multiple branches in the repository.
The successful deployment of Jekyll static web site
The application will begin to deploy. Within a few minutes, a link will be provided to access the version that has been deployed of your website. In this case, it is https://ty-portfolio-lvjy7..app/
Summary
In this article you will learn how to craft a stylish site using Eleventy, as well as different ways to modify an Eleventy static website starting from scratch, and how to build an attractive portfolio site.
Whether you're building a personal blog, portfolio site, or an online store, Eleventy can help you to achieve your goals using minimal effort and with maximum impact. Why not give it a go now and discover what you can do?
What do you think of Eleventy? Have you utilized Eleventy to construct anything? Please feel free to share your projects and experiences with us in the comment section to the right.
The My dashboard is easy to set up and manage in My Dashboard. My dashboard
Support is available 24/7.
The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
A high-end Cloudflare integration for speed as well as security
Global audience reach with the possibility of 35 data centers, and around 275 POPs