The advantage of Pug over plain HTML is that it allows you to include files. Imagine a project with five static pages. Some sites of this size do not use CMS or other server solutions to manage the site template. Firstly, it is faster because there is no additional processing, and secondly, it lowers the entry threshold for the project.
However, a static solution has a global problem — too many repeated blocks of HTML. These are usually footers, headers, menus, banners, and more. Copying HTML is not the best solution because you end up with different blocks at some point.
It is where Pug comes in. It allows you to create separate files for repeating elements and include them in any file. As we will see in this lesson, it can contain markup and any data, including Markdown and other interpretations of files.
For example, let us create some Pug files with header and footer markup:
//- includes/header.pug
header
a.logo(href='#') Hexlet
nav
a(href='/programs') Programs
a(href='/courses') Courses
a(href='/pricing') Pricing
a(href='/teams') Teams
//- includes/footer.pug
footer
p Hexlet Ltd.
We can include these files within any other Pug files by using the include construct and giving the path to the file to be included:
//- index.pug
doctype html
html
head
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(rel='icon' type='image/x-icon' href='favicon.ico')
title Hexlet
link(rel='stylesheet' href='./styles/app.css')
body
//- Connecting the website header
include includes/header.pug
main
h1 Learn to program and work in an in-demand profession
//- Connecting the site footer
include includes/footer.pug
When the interpreter processes index.pug file, it puts all the files in their proper places. In this case, you can compile only the most essential files instead of all. We have already seen a similar structure for linking files in the course on the SASS preprocessor:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta rel="icon" type="image/x-icon" href="favicon.ico">
<title>Hexlet</title>
<link rel="stylesheet" href="./styles/app.css">
</head>
<body>
<header>
<a class="logo" href="#">Hexlet</a>
<nav>
<a href="/programs">Programs</a>
<a href="/courses">Courses</a>
<a href="/pricing">Pricing</a>
<a href="/teams">Teams</a>
</nav>
</header>
<main>
<h1>Learn to program and work in an in-demand profession</h1>
</main>
<footer>
<p>Hexlet Ltd.</p>
</footer>
</body>
</html>
Pug allows you to connect any file type. The logic is simple enough — we insert the data of any attached file as it is. In this way, you can link not only templates with Pug syntax but also scripts, CSS code, and text data:
/* Basis Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
color: #666;
font: 2em/1.5 'Headers', sans-serif;
}
doctype html
html
head
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(rel='icon' type='image/x-icon' href='favicon.ico')
title Hexlet
style
include styles/basis.css
link(rel='stylesheet' href='./styles/app.css')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta rel="icon" type="image/x-icon" href="favicon.ico">
<title>Hexlet</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
color: #666;
font: 2em/1.5 'Headers', sans-serif;
}
</style>
<link rel="stylesheet" href="./styles/app.css">
</head>
</html>
Additional modules
When working with Pug, you can use the built-in functions extending them with other handlers. You can do this by interacting with jstransformer.
We'll use the addition of markdown files to the markup as an example. Markdown is a text markup language that we can convert to HTML. When we use this type of writing, we make it easier to read. This way, people unfamiliar with layout design can mark up text correctly.
For example, let us convert the following text:
# Hexlet. Learn to code and work in an in-demand profession
We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.
Choose Hexlet if you:
* Want to learn to code but aren't familiar with the development
* Want to enter a new profession
* Want to develop yourself
## How it works
You choose a profession, and we will find you a personal mentor. It will be a programmer working in the field and having teaching experience. The learning of programming within a profession consists of four modules. Each module includes courses on the topic and a practical project.
By the way, Hexlet authors write their text courses in Markdown format, which is automatically converted to HTML markup when uploaded to the server.
The Pug preprocessor uses the package jstransformer-markdown-it to convert Markdown to HTML. We can set it using the command:
npm install jstransformer-markdown-it
To connect a module, we use the syntax :name-module. The script will process everything inside the module:
main
:markdown-it
# Hexlet. Learn to code and work in an in-demand profession
We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.
Choose Hexlet if you:
* Want to learn to code but aren't familiar with the development
* Want to enter a new profession
* Want to develop yourself
## How it works
You choose a profession, and we will find you a personal mentor. It will be a programmer working in the field and having teaching experience. The learning of programming within a profession consists of four modules. Each module includes courses on the topic and a practical project.
<main>
<h1>Hexlet. Learn to code and work in an in-demand profession</h1>
<p>We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.</p>
<p>Choose Hexlet if you:</p>
<ul>
<li>Want to learn to code but aren't familiar with the development</li>
<li>Want to enter a new profession</li>
<li>Want to develop yourself</li>
</ul>
<h2>How it works</h2>
<p>You choose a profession, and we will find you a personal mentor. It will be a programmer working in the field and having teaching experience. The learning of programming within a profession consists of four modules. Each module includes courses on the topic and a practical project.</p>
</main>
We intentionally format the final HTML code so you can easily read it during the lesson. If you repeat the steps in the tutorial, Pug may give you a slightly different formatting. It isn't a problem or a mistake.
Inside the modules, you can also pass a file to connect. It is a priority option because it is better not to have the text inside the Pug files and store them separately instead. It is a big topic devoted to application architecture, but you should keep the text and the output separate. The less text Pug contains, the easier it is to work with.
To connect a file to a module, we use include again, followed by the module name and the file to be connected:
main
include:markdown-it main.md
Additional assignment
Create a basic HTML page markup using Pug and add the following markdown text:
# About Hexlet
Hexlet is a platform for hands-on programming courses. We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.
## Idea and motivation
We believe a real programmer should understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the problem level and above, not just at the code level.
The main question for a beginner is not "where to study" but "what to study and in what order," given today's abundance of study materials, courses, and books. There are many opinions on this subject. Some advise starting with mathematics, others with specific languages and technologies.
Hexlet is a ready-made path from absolute beginner to your first job. Each lesson on Hexlet contains up to three steps:
1. **Theory**. It is a short lecture in text or video form. It's task-based. Unlike traditional academic theory, we focus on a specific problem solved by engineers and programmers. Our students follow their steps to understand the solution.
2. **Test**. It is a test of your comprehension. We don't care about memorizing facts, so we design the questions to test your understanding of the concept, not your memory.
3. **Practice**. Programming exercises in a real development environment, accessible through the browser. Not a simulation or a toy, but rather on a real machine with databases, frameworks, servers, and other tools.
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
