Making a Stylish Static website with Eleven (11ty) (r) (r)

Hello World!

When you type in the the command [email protectedemail protected/eleventy command and execute the command the command, it will create a public directory. publicly accessible directory is created with the static file created. Most likely, you'll want this to be accessible to your browser and enable some hot reloading configurations. It is done by using this procedure:

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/.

What is the best way to create a static Portfolio website with the help of

It is now clear how you can establish an online presence using Eleventy. Start by building your portfolio.

Make a new Eleventy project starting from scratch. You may need images, CSS and even the actual contents of your application, so we've created the GitHub repository template to make it easier for you to complete the process. Within GitHub it is possible to choose your templates to start an entirely new repository and transfer the files along with the initial settings files into the personal repository that you own to save on your personal PC.

Your proposal will take the following format:

+--node_modules/* public+/Includes LayoutsAssets +- CSS +- index.njk +index.njk + .eleventy.js + .gitignore +the package.lock.json package.lock.json +package.json + package.json

What are the best templates to use in Eleventy

If you're using Eleventy you will find three different kinds of templates to be aware of. Templates can be created using Nunjucks that allow users to design variables and loops, conditionals and loops as well as other logic which can be utilized to create the page's content dynamically.

• Page Templates These templates define the design and structure of every page you have on your website.
• Layout Templates The HTML0 Layout Templates define the structure and general style of your website's page(s). The layout templates typically have elements including navigation menus, headers, footers, and sidebars. They are typically shared between several pages.
• Partials Templates They're tiny, reusable sections of your website's HTML markup. They are typically used to define basic elements such as the footer, navigation menus, or headers along with sidebars. They can be found in templates for page layouts as well as designs.

The basic design of these templates. You can design templates to make a static portfolio.

What Layouts Can I Create by using Eleventy

In the directory for src you are able to create an "_includes" directory. The directory contains every layout and any partials.

It is then possible to create the the layout directories (for an orderly procedure) for the purpose of storing all design. Layouts are templates. They can be designed using your preferred language for design, like Nunjucks that we're using.

Create a base.njk file to maintain your overall layout for each of your pages.

J. 's secure Safe /htmlSecure  safe Secure /htmlin|Secure/html,in|Secure/htmlin} the above code The basic HTML markup is created in addition to Font Awesome is included from the CDN which gives you access to the icons. Additionally, the variable content is employed to guarantee that each aspect of a website that utilizes the layout is included. It's just not the complete entire story on layout. The layout you decide to utilize will contain sections that are everywhere, like the navigation bar, and also the footer. There are partials that can be made of each of these sections. How to Use Partials In Eleventy All partials are stored in the _includes directory. To ensure an orderly organization, they must be kept in a separate folder. In order to do that, you'll need to make the component folder within the _includes directory. It is then possible to create template templates for the footer as well as navigation bar. Here's the Navbar partials that are within navbar.njk: J. " HTML0 Resumes and Projects Resumes Resumes Projects Resume The following is the information from the footer that is located within footer.njk: (c) % year Joel's Portfolio the portfolio for Joel's Joel's portfolio Joel's Joel's Add these partials to your on your website. It is possible to do this using the  include phrase . This is what is what the layouts/base.njk template will appear on after you add footer and navbar templates in the following format. '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. Make a template page and add this layout. How to create Page Templates with Eleventy. Inside the src folder you can create an index.njk. index.njk files can serve as the home page for your portfolio website. It will be constructed using the layout that you've chosen as the base: layout layouts/base.njk Title"Home. It's an itle"itle"|"Itle" Page|page|page|Page}. When you run the npm start command now, your static site will load on http://localhost:8080/. It should look like a Page Template, without styling how to use CSS and images with Eleventy The templates we have now are what are available, how they operate and how they interact. But, you'll see that in the layouts/base.njk file the CSS file is used to design the portfolio pages, but when the site loads, the CSS styles do not change since the CSS file hasn't been included in the directory which is publicly accessible. To fix this you must set the configuration inside the . eleventy.js file by using the eleventyConfig parameter. This permits Eleventy to determine whether any CSS file(s) exist and to monitor any possible modifications to this CSS file. The src folder is where you can create the CSS folder home to each CSS file you'll require to complete your project. However, in this particular article it is possible to make use of only single 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 upload an image on your site, you will notice the image doesn't appear. In order for it to be displayed, it is necessary to set up the location where images will be placed in. We'll create the asset folder to house the pictures we want to show and set the folder up 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). It is possible to customize your home page to include some details about yourself including more information regarding you, as well as your experience and details you have provided for your contact. You can add your codes and markup directly to the index.njk template. We can also create distinct Partials for information about you, homepage, as well as contact information. The Hero Paratial is the primary section of the Navbar and its primary goal is to provide users with details about the functions that this website has to offer. "hero-text"Hello My name is Joe I'm Joe.I'm an experienced software developer who is located in Lagos, Nigeria. I'm an expert in the creation of (and often developing) amazing websites, applications and all other things in between. A few details about you can be found in the code below along with the icons from social media websites that connect your profile with the links on social networks. The Hero section of your profile should look similar to the following: Hero display It is possible to include additional information in your Hero section. You can also alter the design of the css/globals.css document, and create your personal version of the section. About Partials About Parts About Section informs people who view your portfolio details concerning you, based on what information level you would like to share. It can also be a separate page should you wish to provide additional details you wish to provide. About Myself and About Myself "p>As a developer, I have always been interested in creating elegant and effective solutions for complex issues. I'm a specialist in software development and web-based technologies, including HTML, CSS, and JavaScript. I am a fan of being involved in the front and back-end components of software. I am always looking for methods to increase efficiency, enhance the user experience and make sure that I am capable of ensuring the highest degree of quality code. In my professional career, I've been involved across a myriad of roles which range from basic static web pages to sophisticated enterprise-grade software. I'm proficient in using various tools used for development as well as frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I'm constantly looking to discover and discover new technology as well as constantly seeking new methods to increase my skills and understanding. This code is an assortment of data about you (an image and specific words). This is how that the About section should appear. Skills Parts About This section is intended to spotlight the software you use or enjoy making use of. Skills HTML CSS Skills HTML JavaScript HTML CSS JavaScript HTML CSS HTML3 HTML CSS HTML CSS JavaScript React Node HTML13 Python This code creates a card to display the beautiful font icons aswell with the names of every skill. You can also consider creating other types of designs and modify the code so it looks more beautiful and distinctive. The Skills section should reflect the following Skills Parts. The Contact Parts Because it's a portfolio it is essential to have a way for potential customers to contact your. The best way is for clients to be able to reach your email. Contact me If you'd like to work together with inquiries or would like to have me speak at your next meeting, My mailbox is available at all times. Also, if you'd like to meet you and say hello I'll make sure to respond to your email! Thanks! "Hello" Speak to us! Hello! Modify the email address displayed on the tag to correspond with your own email address. Use the tag with your personal email address and you will be able to access an email program for your visitors to contact you. Contact partials It's now possible to create every single element on 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. What are collections in Eleventy It is a collection of information that you can use in Eleventy the collection feature can be used to arrange closely related content in order which allows you to build pages that are based off of this information. For instance, if there are markdown files with similar material (blog posts) that are stored in the blog folder of the software you use it is possible to use collections to locate the posts and then display a listing of each post. You can also make a layout to determine how these posts are presented. Collections are explained inside the .eleventy.js configuration file and may contain data from various sources like Markdown file or JSON files. To create this portfolio website we'll make an appropriate directory for each project in the directory src to preserve the markdown files for each project. The website's content must include information about the project including how it came up with the solution, the technology used, challenges faced, as well as 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 aim of this project is to reduce the feeling of inspiration and motivation through providing users with easy and quick access to motivational quotes. Technology employed in this project includes HTML, CSS, and JavaScript. The program makes use of an API to gather random quotes and present users the quotes. The challenges and lessons learnedOne of the main issues encountered during the project was constructing a user interface that would appear attractive and adaptable to various devices. The team had to consider different design elements, like the dimensions of text, colors and layout to ensure that they could design a pleasant and easy-to-use interface. The other issue was tackling the edges and errors, such as connection issues with the internet or inconsistency between API responses. It was essential to design the corrective and fallback procedures so that the system would continue to function efficiently in a variety of situations. They learned important knowledge about front-end development such as the necessity in writing code that's clean and efficient, effective techniques for troubleshooting and debugging and flexible design concepts. They also understood the necessity of using APIs to gain access and display information from other sources. The task of creating quotations was a great educational experience that allowed the team to enhance their skills in technology and imagination and create a useful tool for those looking for inspiration and motivation in their daily lives. Be aware that if you downloaded the starter template, you probably already have these. If not, download them directly from the project directory on our starter template available via GitHub. The front matter in the document, like templates, provides it possible to insert them into templates. As the Markdown files reside within the directory src Eleventy will interpret them to being templates and will create an HTML website for each. Their URL will be something like /projects/quotes-generator. Project appearance without layout Eleventy can't decide the design of these pages because they don't yet have a layout element within their content. In the beginning, it is necessary to create an outline for the content before making an array and by adding the array on the project's dedicated page. As before, you need to build an outline ( project.njk) in your layouts directory. In order to avoid duplicates, since the layout file is built on the standard HTML markup, you're required to alter the base.njk layout. This is done by creating a block that represents which part of the layout changes. 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. Add it to the project.njk layout. Therefore, you have to decide the contents of the block using "layouts/base.njk" % Block content Block contentBlock itle "itle" It'sIt's available|it's there,|Available. It's} located available on GitHub GitHub The GitHub Endblock is secure and safe  Secure Endblock.|Endblock is safe.|It's safe.} The above code shows that you define how your project's contents 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 the importance of layout and value to each component of the front matter's code >--- design layouts/project.njk Description Title Description of Quotes Generator "Helps you generates quotes using around 1600 quotes written by different writers . Quotes are automatically copied onto clipboards of the personal computers you use." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator" image: "/assets/quotes-banner.jpeg" --- ... If you go to the URL of every the 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? Another option is to create a lists of the collections that anyone can access to use to access the project. The reason for collections is that they are available. For a collection to be used, it must create it, it must be declared in the .eleventy.js configuration file by using addingCollection() 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. After you've made the collection, you'll be able to use templates to create pages based off of this resource. Let's create a projects.njk template for a page with the current base.njk layout. But, the content of it 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. Furthermore, you'll be able navigate to the project's URL via project.url. If you execute the start command, go to the project page and select projects, you will see this page appear as the following when you've made multiple templates. Template Page for Projects Do I Use Shortcodes Shortcodes can be used to specify specific HTML tags and JavaScript dynamic variables are reusable in templates you design. You could, for instance create a shortcode that will create the date of the current year and include it on your website. Within the .eleventy.js configuration file, you are able to define the particular shortcode you would like to include using the 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. In order to illustrate, rather than writing the year into the footer of this website, you can add it by using % and it'll update it each year. (c)  Year  Joel's Portfolio ... If the page renders, the output will include the year's current date in the HTML the tags p. How do you best to include the Theme for an Eleventy Site A theme on the Eleventy site can be a great way to alter the look and feel of. your site quickly. The Eleventy brand officially refers to themes as starting points but be aware that both words are often employed interchangeably. Numerous websites offer free Eleventy themes. These include the Eleventy starters that are official and Jamstack themes. The only thing to do is pick your preferred theme or launcher, then head to the GitHub repository to save it to your desktop. You must 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/. What is the best way to set up an Eleventy site It's feasible to build a striking portfolio site with Eleventy. This kind of website can't be stored locally on your PC. This will not be sufficient. It is better to host your website on the internet to let sharing be open to all. Make Your Eleventy Website on GitHub After you're in the process of uploading your file to GitHub and later to GitHub Make sure you create your .gitignore file in order to define specific files and folders that Git must not overlook while publishing your codes. Create the .gitignore file in the root directory and include the following details: # dependencies /node_modules # run /public Now, you can start your local Git repository through your terminal. selecting the folder which houses your project, then using the below steps: Git init Now add your code into your local Git repository by using the following commands: git add Then you're able to make changes to your code with these commands: Git commit"my initial commit "my first commit" Be aware that you can substitute "my the first commit" by providing a short description of your changes. Last, upload your code onto GitHub using the following steps: Remote Git Add Source (repository's URL) Gi push -u source master NOTE: Ensure you substitute "[repository URL" with your personal GitHub repository URL. When you've finished these actions, your code will be posted to GitHub and is accessible via your repository's URL. Now you can make your site deployable ! Then, you can make your Eleventy website available by clicking option to click on Applications in the left sidebar, and click Add Service. Select Add service and select the option in the dropdown menu. Move to the application hosting of's A modal window will appear where you'll be in a position to choose the repository that you wish to deploy. Select the branch you would prefer to set up when you've got more than one branch within the repository. The successful installation of Jekyll static sites will then begin to deploy. In just a few minutes, you will receive a link will be provided to access the latest version added to 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. If you're building your own personal blog, portfolio website, or even an online shop, Eleventy can help you to achieve your goals using the least amount of effort and with the most impact. So why not give an attempt today to discover what you can do? What are your thoughts about Eleventy? Have you ever used Eleventy in the past to build something? Do not hesitate to share your ideas as well as your experience in the section of comments on the right. The My dashboard can be created easily and manage within My Dashboard. My Dashboard Support is accessible all times of all hours of the day. Most reliable Google Cloud Platform hardware and network powered by Kubernetes for maximum scalability A top-quality Cloudflare integration that can speed up your business, as and security. Global audience reach by having 35 data centers that have the 275 POPs as well as 35 data centres.

This post was first seen on here

Article was first seen on here