Designing an Stylish Static website with Eleven (11ty) (r) (r)

Hello World!

If you run command, the [email protected]/eleventy command and execute the command the command, the public directory will be created using the static file created. It is highly likely that you want to have this accessible to your browser and enable some hot reloading settings. It is done by using this method:

npx @11ty/eleventy --serve

This will serve your site on http://localhost:8080/.

These commands are quite difficult to recall and remember regularly. 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 create a static Portfolio Website using the aid of

It is now clear how to build an online presence with Eleventy. Let's start by creating the portfolio.

Develop a new Eleventy application from scratch, or you'll require images, CSS and even the actual content of your project, so we've created the GitHub repository template to help speed up the process. Inside GitHub you can select your templates to start a new repository and copy the assets as well as the first configuration files into the repository you personal, and then save them on your personal computer.

Your project will have this form:

+--node_modules/• public/ +/ +-- includes | Layouts +-- assets  +-- CSS  +- index.njk +- .eleventy.js +- .gitignore +- package.lock.json +- package.json

What are the best template designs to utilize in Eleventy

If you are using Eleventy, there are three types of templates you need to be aware of. Templates can be created making use of Nunjucks which permits users to design variables and loops and conditionals, as well as additional logic that can be used to generate the page's content dynamically.

• Page Templates These templates define the design and structure of each page on your site.
• Layout Templates The HTML0 Layout Templates determine the structure and general style of your site's page(s). They typically include elements, such as headers navigation menus, footers, and sidebars. These are often shared across multiple pages.
• Partials Templates: These are tiny, reusable sections of your website's HTML markup. They are typically used to define basic elements such as footers, navigation menus, or headers along with sidebars. They are included in templates for page layouts and designs.

Now you know the fundamental layout for these template. We can create templates to create a static portfolio site.

How Can I Make Layouts using Eleventy

Inside the src directory, you can create the "_includes" directory. This directory will hold every layout and any partials.

You can then create the layout directory (for an orderly method) to hold all the designs. Layouts are templates, and are able to be created with your preferred language of templating, such as Nunjucks which we're making use of.

Let's make an base.njk file to keep your layout overall for all of your pages.

J. 's  secure Safe /html|Secure | Safe Safe/html||safe Secure /html}in the code above, the basic HTML markup is created as well as Font Awesome is included from the CDN which gives you access to its icons. Additionally, the variable content is used to ensure that every element in any webpage that utilizes the layout is included. It's just not the complete all-encompassing story about layout. The layout you choose to use will include sections that appear everywhere like the navigation bar and the footer. You can make partials of each of these sections. How To Use Partials in Eleventy All partials are stored in the _includes directory. To ensure proper organization, they should be stored in a folder. For this, you need to make the component folder within the _includes directory. You can then make template templates for footer and navigation bar. Here's the Navbar partials found in navbar.njk: J. " HTML0 Resumes and Projects Resumes Resumes Projects Resume Below are the details of the footer found inside footer.njk: (c) % Year  Joel's Portfolio Joel's portfolio Joel's Portfolio Joel's Joel's Portfolio Joel's Joel's Portfolio Include these partials to your layout, or web page. This can be done through the % include phrase. This is what the layouts/base.njk template appear in the event that you add 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 by using Eleventy. Within the src folder, create index.njk. index.njk file for use as your home page of your portfolio site. It will be constructed using the layout that you have chosen for the basis:- layout layouts/base.njk Title"Home. It is an itle"itle"|"Itle" Page|page}. When you run the npm start command now, your static site will load on http://localhost:8080/. The output should appear like Page Template, without styling how to use CSS and images with Eleventy We now know which templates are available, how they work and the ways they can work together. But, you'll see that in the layouts/base.njk file, a CSS file is attached to design the portfolio page, but as the website loads the CSS styles don't change because the CSS file isn't added to the directory that's public. In order to resolve it, set up the configuration inside the . eleventy.js file using the parameter eleventyConfig. This allows Eleventy to check if there is a CSS file(s) exist and also watch for possible changes on this CSS file. In the src folder, you are able to make the CSS folder to house every CSS file you'll require for your project. However, in this particular article it is possible to use only the 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. When you insert any image to your site, you will notice the image doesn't appear. For it to display it's necessary to configure the directory where images are placed in. Let's create the assets folder that will house the images we want to show and configure the folder for assets. 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). We can customize your home page to include some details about yourself, for example more information about you as well as your expertise and the contact information you provide. You may choose to add your codes and markup directly to your index.njk template. Alternatively, we can create distinct Partials for information about you, home page, and contact details. The Hero Paratials the initial section of the Navbar and its primary goal is to provide users with information about the features that this website has to offer. "hero-text"Hello, my name is Joe I'm Joe.I'm a software designer that is based in Lagos, Nigeria. I'm specialized in developing (and occasionally developing) stunning websites, apps and all other things in between. Some details about yourself are included in the code above and also the icons of social media sites that will link your profile to the links on social networks. The Hero part of your profile should look like the following: Hero display It is possible to include additional information within your Hero section, alter the design of the css/globals.css file, or design your personal version of the area. About Partials About Parts About section informs those who view your portfolio details regarding you according to the amount of information you prefer. This can be a separate page in case you're able to provide additional details to share. About Myself About Me "p>As a developer, I have always had a passion for developing elegant, effective solutions to complex problems. I'm an expert in software development, including web technologies including HTML, CSS, and JavaScript. I love being involved in the front and back-end components of software. I are always seeking methods to improve effectiveness, improve user satisfaction as well as make sure that I am able to ensure the highest degree of quality code. Through my career I've worked in a variety of tasks that range from simple static web pages to more complex enterprise-level software. I'm proficient in using a range of tools for development and frameworks including React, Angular, Vue.js, Node.js, and Laravel. I'm always looking to explore and learn about new technologies, and constantly look for new methods to increase my capabilities and knowledge. /div> /div> The code is a collection of information about you (an image as well as certain text). This is the manner in which the About section is supposed to be displayed. Skills Partials About This section is intended to highlight the tools you utilize or are enjoying using. Skills HTML CSS Skills HTML JavaScript HTML CSS JavaScript HTML CSS HTML3 HTML CSS HTML CSS JavaScript React Node HTML13 Python The above code generates a card to display the stunning font icons as well as the name of each ability. There is the option of adding other designs, and modify the code so that it is more attractive and distinctive. The Skills section ought to be a representation of the following: Skills Parts. The Contact Parts Because it is a portfolio, there must be a means to allow potential clients to contact your. The best way is to allow clients to contact you via email. Contact me If you'd like to work together with questions or wish to have me present at your next event My inbox is always available. Or, if you'd just like to meet you and say hello, I'll be sure to reply to your message! Thanks! "Hello" Say Hello! Modify the email address displayed on the tag to match your own email address. Tag with your own email address to open an email application for visitors to reach your. Contact partials It is now possible to create every single component on your home page. 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. What is a Collection in Eleventy In Eleventy, collections can be used to arrange closely related content in order which allows you to build pages that are based off of this information. As an example when there are markdown files with similar material (blog posts) stored in a blog folder within the application you are using, you can utilize collections to find them and present a list of all the content. You can also make a layout for how these posts are presented. Collections are explained in the .eleventy.js configuration file and may comprise data from different sources such as markdown files or JSON files. To create this portfolio website we will create a directory for the project within the src directory to keep the markdown data for each project. The content should include the details about the project, such as how the project solved the problem and the technology used, challenges encountered, and lessons 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 the 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. The goal of this project is to alleviate the lack of motivation or inspiration by providing users with simple and fast access to get motivational quotes. Technology used The technology employed in this project is HTML, CSS, and JavaScript. This application makes use of an API to pull random quotes and show the quotes to the user. ### Challenges and lessons learntOne of the major challenges faced when conducting this project was designing the user interface that would appear appealing and responsive to different devices. The team had to consider diverse design elements, such as dimensions of the fonts, color and layout so that they could create a pleasing and easy-to-use interface. Another issue was managing edges or errors including connection issues with the internet or inconsistency of API responses. It was necessary to create the corrective and fallback procedures in order to ensure that the system will continue to work efficiently in a variety of situations. The group learned valuable lessons on front-end development, like the importance of writing code that is clean and efficient, effective troubleshooting and debugging methods, and adaptable design ideas. They also learned the importance of using APIs in order to access and present information gathered from other sources. The project to create quotes was an invaluable learning experience, which enabled the team to improve their skills in technology and creativity and to develop a useful tool for those seeking everyday inspiration or motivation. NOTE: If you used the starter template, then you probably already have these. If not, you can download them from the project directory on our starter template available on the GitHub. The front matter of the file, which is similar to templates, makes value available for insertion into templates. Because these Markdown files are located within the directory src Eleventy will interpret them to being templates and will create an HTML webpage for each. Their URL will be something like /projects/quotes-generator. Project appearance without layout Eleventy isn't able to determine the layout of these pages since they don't yet have an element of layout in their frontmatter. First, we need to create an outline for this content prior to creating an array, then adding them as an array to the dedicated project page. As before, you need to create a layout ( project.njk) inside the layouts folder. To avoid duplicates, as this layout file is based on standard HTML markup, it's required to change the base.njk layout by making a block that represents what part of the layout 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. You can add it to your project.njk layout. Therefore, you have to determine the content of your block by extending "layouts/base.njk" % Block content Block contentBlock content itle "itle" It's|It's available|It's} located on GitHub GitHub The GitHub secure safe Endblock: %|secure Endblock:|endblock is safe.} The above code shows that you specify how the project's content should appear. The code will display the title, image as well as the URL of the github on the front matter, and will later add more content with the variable content ( safe safe|secure|secured}). Next step is including a layout-related importance and worth to every element of the front matter code >--- layout layouts/project.njk Description: Title Description of the Quotes Generator: "Helps you generates quotes using approximately 1600 quotations written by different writers . Quotes automatically copy onto the clipboards of your personal computer." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator" image: "/assets/quotes-banner.jpeg" --- ... If you visit the URL of each project, 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? One solution is to build a lists of the projects which anyone is able to use to access the project. That is why collections are available. To use collection is to create it, it must be defined inside the .eleventy.js configuration file using 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. A callback function supplied to the method addCollection() will return all Markdown documents that are in the directory of projects with the help of the locateFilteredByGlob() method. Once you've created a collection, you'll then be allowed to utilize templates for creating pages that are based off of the resource. Let's design an projects.njk template for a page using the existing base.njk layout. However, its content will contain the project 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 above example this code, it will display the title of the project, description along with the GitHub URL. In addition, you will be able to navigate to the project's URL via project.url. If you execute the start command, then go to the project page and click on projects, you will see this webpage will appear like when you have created multiple templates: Template Page for Projects How To Use Shortcodes Shortcodes are a way to define custom HTML tags, as well as JavaScript dynamic variables that you can reuse in the templates you create. For instance, you could, define a shortcode to generate the current year's date and include it to your website. Within the .eleventy.js configuration file, you can define the specific shortcode that you wish to use with an addShortcode() function. 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. To illustrate, instead of hard-coding the year to the footer on this site, you can add it with the help of the % and it'll update it each year. (c) % year % Joel's Portfolio ... When the page is rendered, the output will include the current year's date within the HTML the p tag. What is the best way to add a Theme for an Eleventy Site The addition of a theme on the Eleventy site can be an excellent way to personalize the appearance and design of. your site quickly. Officially, Eleventy refers to themes as starting points, however be aware that both terms are used interchangeably. Many websites provide no-cost Eleventy themes, which include the official Eleventy starters and Jamstack themes. All you need to do is choose your preferred theme or launcher, then head into the GitHub repository and download it onto your personal desktop. Make sure you have read the documentation for steps to configure and alter 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 currently possible to design an impressive portfolio site using Eleventy. A website of this sort is not able to be hosted locally on your PC. It will not suffice. It's better to host your website online so that you will allow sharing to anyone. Create Your Eleventy Website on GitHub Once you're in the process of uploading your files to GitHub and later to GitHub Make sure you create the .gitignore file to specify some specific files and folders that Git must not overlook when publishing your code. Create a .gitignore file inside the root directory and include the following details: # dependencies /node_modules # run /public You can now begin your local Git repository by opening your terminal, selecting the folder that houses your project, then using the following commands: Git init Now add your code into your local Git repository with the next commands: git include Then, you are able to commit the changes you made using these commands: git commit"my first commit "my first commit" Note: You can substitute "my the first commit" with a brief description of your changes. Finally, push your code onto GitHub by following the steps Remote git add source (repository's URL) Gi push –u source master NOTE: Ensure you replace "[repository URL" with your own private GitHub repository URL. When you've finished these steps, your code will be posted to GitHub and accessible through the URL of your repository. It is now possible to make your site deployable ! Then, you can make your Eleventy site available using the click Applications on the left sidebar, and then Click Add Service. Click Add service, then click to select the service in the dropdown menu: Move to the application hosting of's The modal window will open where you are able to select the repository you would like to deploy. Select the branch you would want to put in place in case you have more than one branch within the repository. A successful deployment of Jekyll static websites It will then begin to deploy. Within minutes, a link will be provided to access the version that has been installed on your site. 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. If you're creating your own personal blog, portfolio website, or online shop, Eleventy can help you in achieving your goals with the least effort, and at maximal impact. So why not give an attempt today to discover what you can do? What are your thoughts about Eleventy? Have you used Eleventy in the past to build something? Do not hesitate to share your ideas and experience with us in the comment area to the right. The My dashboard is easy to create and maintain within My Dashboard. My Dashboard Support is accessible all hours of the day. The most reliable Google Cloud Platform hardware and network driven by Kubernetes for maximum scalability A premium Cloudflare integration to speed up your business as well as security Global audience reach with the possibility of having 35 data centers with 275 POPs, and 35 data centers.

This post was first seen on here