The creation of an Stylish Static website with Eleven (11ty) (r) (r)

Hello World!

In the event that you type the [email protectedemail protected/eleventy command and run the command the command, it will result in the creation of a public directory. is a publicly-accessible directory is created with the static file generated. Most likely, you'll want this to be accessible by your browser. You can also set some hot reloading configurations. The procedure is carried out by this procedure:

Npx @11ty/eleventy -serve

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

The commands can be 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 best to make a static portfolio site by using

The way to go is clear now. you can build an online presence with Eleventy. Begin by creating your portfolio.

Create a brand new Eleventy project at the beginning. There may be images, CSS and even the content of your app, so we've created an GitHub repository template in order to make it simpler for you to complete the process. In GitHub it's possible to choose your template to create a completely brand new repository and transfer the files together with the initial configuration files into the personal repository you control to save on your personal PC.

Your proposal should follow the following format:

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

Which are the most effective templates for use in Eleventy

If you're using Eleventy, you can find three distinct types of templates that you should know about. Templates can be designed using Nunjucks that permit users to design variables and loops, conditionals and loops, as well as any other logic which can be used to build the content of a page dynamically.

• Page Templates These templates determine the layout and design of each page on your website.
• Layout Templates The HTML0 Layout Templates specify the structure and general style of your website's page(s). The layout templates typically have elements including headers, navigation menus, footers and sidebars. These are usually shared across multiple pages.
• Partials Templates They're tiny, reusable parts of your website's HTML markup. These are usually used to define fundamental elements like the footer, navigation menus or headers along with sidebars. They are included in page layout templates as well as designs.

The basic design of these templates. The templates can be designed to build a static portfolio.

What Layouts Can I Create with Eleventy

For the directory containing src, it is possible to make the "_includes" directory. This directory includes every layout as well as any other partials.

It is then possible to create the the design directories (for the purpose of arranging) in order to storing all design. Layouts are designs. They are designed with your preferred language for design, like Nunjucks that we're employing.

Make a base.njk file to keep your layout in place for all 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. In addition, the different content used is to ensure that every aspect of the website using the design is covered. It's just not the complete whole story about design. The layout that you choose to use will have parts that appear everywhere, including the navigation bar, as well as the footer. There are partials that could be constructed from each of these areas. How do you use partials within Eleventy All partials are stored within the directory _includes. To make sure they are organized, they must be kept in separate folders. To do this then you'll have to create an individual folder in the directory _includes. You can then design templates for footer and as a navigation bar. Below are the Navbar parts that can be found in navbar.njk: J. " HTML0 Projects and Resumes Resumes Projects Resumes Following is the data from the footer that is contained in the footer.njk footer.njk: (c) % year Joel's Portfolio The portfolio of Portfolio Joel's Joel's these parts to your website. You can do this by using the add phrase . This is the format is what the layouts/base.njk template will show up when you include 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 include this layout. How to create Page Templates with Eleventy. Within the folder src, it is possible to create index.njk. index.njk. index.njk documents can be used as the homepage page of your portfolio web site. It will be constructed by using the layout you've chosen as the base layout: the 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/. The site should appear like a Page Template, without styling using CSS and images by using Eleventy. The current templates are the ones available and the way they function and the way they interact. However, in the layouts/base.njk file, the CSS file will be used to build the portfolio pages. However, as the website loads the CSS styles aren't changed due to the fact that the CSS file isn't present in the directory, which is accessible to the public. To fix this you must modify the configuration in the . eleventy.js file, using the parameter eleventyConfig. This allows Eleventy to determine whether any CSS file(s) exists as well as to keep track of any changes that could be made to the CSS file. The src folder is the place where you're able to make the CSS folder home to each CSS document you'll require for the 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 a picture on your site, you will notice the image isn't displayed. To allow the image to show, it is necessary to create the space where images will be placed into. Create the folder for assets for the images we want to show and set the folder up to hold 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 the home page of your website to display certain details about you, including details about yourself, as well as your experience and the details you've given for your contact. Add your code and add markup directly into index.njk. index.njk template. We can also create distinct Paratials to display your information website, your homepage and contact details. This Hero Paratial is the primary section of the Navbar with its main purpose is to provide users with specific information regarding the services that the site has to offer. "hero-text"Hello I'm Joe I'm Joe.I'm an experienced software developer based within Lagos, Nigeria. I'm an expert on creating (and often creating) stunning websites, applications and all other things within. Certain details about yourself are contained in the code below along with the icons from social media sites that link your profile to the hyperlinks on social networks. The Hero section on your profile should look similar to the following: Hero display It is possible to include additional information inside your Hero section. Also, you can modify the layout of the css/globals.css document, and create your personal design of your section. The About Partials About Parts Section informs people who view your profile information about your personal information, according to the information level you would like to provide. It can also be a separate page should you wish to provide additional details you wish to share. About Myself and About Myself "p>As a developer and a web developer, I've always had a keen interest in developing sophisticated and efficient solutions for complicated issues. I'm an expert in the field of software development, as well as web-based technologies, including HTML, CSS, and JavaScript. I love being involved in the front and back-end components of software. I'm constantly looking for ways to improve efficiency, enhance the user experience and make sure I'm capable to ensure the highest level of high-quality code. As a professional, I've been involved across many different roles that vary from the simplest static web pages to sophisticated enterprise-grade software. I'm skilled in utilizing various tools that are used to develop along with frameworks which include React, Angular, Vue.js, Node.js, and Laravel. I'm always trying to find and discover new technology and am always looking for innovative ways to enhance my skills and understanding. This code is an assortment of information about you (an image and specific terms). This is how that the About section will appear. Skills Parts About This section is designed to highlight the program that you make use of. Skills HTML CSS Skills HTML JavaScript HTML CSS JavaScript HTML CSS HTML3 HTML CSS HTML CSS JavaScript React Node HTML13 Python This program creates an image card that displays the stunning font icons, as well as the names of every skills. It is also possible to create different designs, as well as altering the code so that it is more attractive and unique. The Skills section needs to be a reflection of the following Parts. The Contact Parts Since this is a portfolio, it's important to provide a means for prospective clients to reach your. The best way is for clients to be in a position to contact you via email. Reach me via email if you'd prefer to work together with queries or have me speak at your next meeting, My mailbox is available at all times. In addition, if you'd would like to get together to say hello, I'll be sure that I respond to your email! Thanks! "Hello" We'd love to hear from you! Hello! Modify the email address displayed on the tag to correspond with your own email address. Use the tag with your own email address. you will be able to access an email program so that your customers can reach 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 within Eleventy It is a group of data you can utilize within Eleventy the collection feature can be used to arrange closely related content in an order, which lets you make pages upon this data. If, for example, there are markdown files with similar material (blog posts) which are saved in the blog folders in the program you are using, it's possible to make use of collections to locate the posts and display a list of every post. Additionally, you can create a layout to determine how these posts are presented. The collections are explained in the .eleventy.js configuration file. They may contain data from various sources such as Markdown file and JSON files. In order to create this portfolio site, we'll set up a specific folder for each project within the directory src to preserve the markdown files associated with every project. The content of the website must contain specific information regarding the project such as how it came up with the solution, the technology used, challenges faced, as well as experiences 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 will automatically be copied to 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 diminish the feeling of motivation and inspiration through offering users an easy and quick access to inspiring quotes. The technology used in this project comprises HTML, CSS, and JavaScript. The program uses an API that gathers random quotes, and then present the users with the quotations. Lessons learned and the challenges one of the most difficult issues to be faced throughout the process was creating the user interface to look appealing and able to be adapted to various gadgets. The group had to take into consideration various design elements such as text size along with the color scheme and layout, in order to design a pleasant and easy-to-use interface. Another challenge was dealing with the edges and errors, such as connection issues that are caused by the internet, or inconsistencies with API responses. It was vital to create the corrective and fallback procedures in order to make sure that the system can be able to perform efficiently throughout a wide range of circumstances. They learned important knowledge regarding front-end development, such as the importance of writing code that's clean and efficient and efficient in diagnosing and fixing issues, and adaptable design ideas. They also realized the importance of using APIs to gain access and present information gathered from different sources. It was a great challenge to create quotations. proved to be a valuable learning experience that allowed the team to develop their knowledge of technological innovation and in the process of creating an effective tool for people seeking inspiration and motivation throughout their lives. If you have downloaded our starter template, then you may already have them. If not, download them from the directory for your project on the starter template on GitHub. The front matter in the document, just like templates, makes it possible to incorporate them into templates. Since the Markdown documents are located in the directory src Eleventy interprets them as being templates and build an HTML web page for every one of them. Their URL will be something like /projects/quotes-generator. The appearance of the project without layout Eleventy isn't able to decide the style of these pages as they do not yet possess a layout element in their contents. At the start, it is necessary to create an outline for the content before making an array. Then, you can add an array on the dedicated page of your project. Like before, you'll need to build your outline ( project.njk) within the layouts directory. To prevent duplicates, since the layout file is built on the standard HTML markup, you're required to change it to alter the base.njk layout. It's done by generating blocks that represent what part of the layout is changing. 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 the project.njk layout. This means that you must decide the contents of the block by using "layouts/base.njk"  Block content ContentBlock Block itle "itle" It's there,It's available. It's located available on|It's available on|The block is available through} GitHub GitHub Endblock on GitHub is secure and safe. GitHub Endblock is secure and secured Secure Endblock.Endblock is safe..|It's safe.|The endblock is safe.} This code shows how you can specify how your content should be displayed. 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}). Following is adding the significance of layout and importance to every component of the front matter's code >--- design layouts/project.njk Description Summary of the Title for Quotes Generator "Helps to generate quotes by using more than 1600 quotations from diverse 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 for 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? Another option is to create a lists of the collections accessible to anyone in order to gain access to the project. The purpose of collections is because they're accessible. For a collection to be utilized, it has to create it, it must be defined in the .eleventy.js configuration file, using the 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 creating your collection, you'll be able to use templates to build pages built on the resource. Let's make the projects.njk template of a webpage that uses the base.njk layout. But, the content of it will include the projects that is 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]. As you can see in the previous example code, it will display the name of the project, its description and it's GitHub URL. In addition, you'll have the ability to browse to the project's URL through project.url. If you execute the command to start, then go to the project page and choose projects, the page will show up as follows in the event that you've designed numerous templates. Template Page to Projects Do I Use Shortcodes Shortcodes can be used to specify certain HTML tags and JavaScript dynamic variables are reusable within templates that you create. It is possible to, for example, make a shortcode to generate the date of the current year and include it on your website. Within the .eleventy.js configuration file, it is possible to specify the specific shortcode you would like to add with the help of 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 that you are not writing the year into the footer of this site You can include it with %, and it will update it each year. (c) Year Joel's Portfolio ... If the webpage renders it, the output will contain the current year's date within the HTML the tags p. Which is the most effective way include this information? Theme on an Eleventy Site A theme on the Eleventy website can be the ideal way to modify the appearance and style of. your site quickly. It is easy to get your site up and running. Eleventy brand is officially used to refer to themes as the basis for your website but be aware that both terms are used frequently to refer to the same thing. Numerous websites offer free Eleventy themes. They include Eleventy starters that are official as well as Jamstack themes. The only thing you need to do is select your preferred theme or launcher and then go to the GitHub repository and save the file on your desktop. It is recommended to read the manual 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 do you go about to set up an Eleventy website? It is possible to create a stunning portfolio website with Eleventy. It isn't possible for this type of website to be stored locally on your PC. It's not enough. It's better to host your website online to allow sharing be open to all. Start your Eleventy website on GitHub When you're finished with the process of uploading your file to GitHub and then GitHub Be sure to create your .gitignore file so that you can define specific files and folders to ensure that Git must not overlook while publishing your code. Create the .gitignore file within the root directory. It should contain the following details: # dependencies /node_modules # Run /public Now, you'll be able to begin with your own local Git repository by using your terminal. Select the directory that houses your project, then using the following steps: Git init Now add the code to your local Git repository with the above commands: git include You can then modify your code using these commands: Git commit"my initial commit "my first commit" Be aware that you can substitute "my the first commit" in the form of a concise explanation of the modifications. Finally, add your code onto GitHub by following the steps using the following steps: Remote Git add source (repository's URL) Gi push -u source master Note: Make sure you substitute "[repository URL" by your own private GitHub repository URL. Once you've completed these steps then your code will be posted to GitHub and accessible through your repository's URL. Now you can create your website to be deployable ! After that, you are able to add your Eleventy site available through the option to click on Applications in the left sidebar. Then, choose Add Service. Choose Add service, and then select the your drop-down menu. Navigate to the host of the application of's A window with a modal design is displayed which will allow you to be in a place to select the repository you'd like to set up. Choose the branch that you'd prefer to establish if there's several branches in the repository. After successful installation, Jekyll static websites will begin the process of deploying. In just a few minutes, you will receive a link for accessing the most recent version that is added to 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 building your own private blog, portfolio website, or even an online shop, Eleventy can help you reach your goals in minimal effort and the greatest effectiveness. So why not give an effort today to find out the possibilities? What do you think of Eleventy? Have you used Eleventy before to create or create something? Don't hesitate to post your ideas as well as your experience in the section of comments on the right.  My dashboard can be created easily and managed from My Dashboard. The My Dashboard support is available at all hours during the day. The most trustworthy Google Cloud Platform hardware and network that is powered by Kubernetes for the highest scalability high-end Cloudflare integration to help your business grow, as and security. Reaching the world's audience through 35 data centres that are home to 275 POPs, as well being 35 data centers.

This post first came up on here

This article first appeared on here

Article was posted on here