The advantage of Pug over plain HTML is that Pug allows you to include files. Imagine a project consisting of five static pages. Some sites of this size don't use CMS or other server solutions to manage the site template. Firstly, because it's faster, since there is no additional processing, and secondly, it lowers the project's entry threshold.
A static solution, however, has one global problem, there are too many repeated HTML blocks. Usually, these are footers, headers, menus, banners and so on. Copying HTML isn't the best solution because, sooner or later, it'll lead to differences in blocks.
This is where Pug comes in. It allows you to create separate files for repeating elements and include them inside any file. As we'll see in the lesson, this can include not only markup, but any data, up to the interpretation of other files, such as Markdown.
As an example, let's 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.
These files can be included 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 processing index.pug, the interpreter will put all the files in the right places. In this case, you don't need to compile all the files, only the main one. We've already seen a similar structure for connecting 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 type of file. The logic is simple enough, the data of any connected file will be inserted “as is”. This way, you can connect not only templates with Pug syntax, but also scripts, CSS code, 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 features, but you can also expand them with other handlers. This is achieved through interaction with jstransformer.
We'll use the addition of markdown files to the markup as an example. Markdown is a text markup language that can be converted to HTML. This way of recording texts makes them easier to read and allows people who are not familiar with layout design to mark up texts correctly.
Convert the following text:
# Hexlet. Learn to program and work in an in-demand profession
We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.
Choose Hexlet if you:
* Want to learn how to program, but aren't familiar with development
* Want to get into a new profession
* Want to develop yourself
## How it works
You choose a profession, and we'll find you an individual mentor. It'll be a programmer who currently works in the field and has teaching experience. Learning to program within a profession is combined into four modules. Each module consists of courses relating to the topic, and a practical project.
Interestingly: on Hexlet, course texts are actually written in Markdown format, and then automatically converted to HTML markup when they're uploaded to the server.
The Pug preprocessor uses the package jstransformer-markdown-it to convert Markdown to HTML. It can be set using the command
npm install jstransformer-markdown-it
To connect a module, we use the syntax :name-module. Everything inside the module will be processed by the script.
main
:markdown-it
# Hexlet. Learn to program and work in an in-demand profession
We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.
Choose Hexlet if you:
* Want to learn how to program, but are not familiar with development
* Want to get into a new profession
* Want to develop yourself
## How it works
You choose a profession, and we'll find you an individual mentor. It'll be a programmer who currently works in the field and has teaching experience. Learning to program within a profession is combined into four modules. Each module consists of courses relating to the topic, and a practical project.
<main>
<h1>Hexlet. Learn to program and get into an in-demand profession</h1>
<p>We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.</p>
<p>Choose Hexlet if you:</p>
<ul>
<li>Want to learn how to program, but aren't familiar with development</li>
<li>Want to get into a new profession</li>
<li>Want to develop yourself</li>
</ul>
<h2>How it works</h2>
<p>You choose a profession, and we'll find you an individual mentor. It'll be a programmer who currently works in the field and has teaching experience. Learning to program within a profession is combined into four modules. Each module consists of courses relating to the topic, and a practical project.</p>
</main>
Note: that I purposely format the final HTML code, so it's easy to read during the lesson. If you repeat the steps in the tutorial, Pug may give you a slightly different formatting. This isn't a problem and it's not a mistake.
Inside the modules, you can also pass a file to connect. This is a priority option, because it's better not to have the text inside the Pug files, and store them separately instead. This is a big topic devoted to application architecture, but try to 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 name of the module 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 - hands-on programming courses We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.
## Idea and motivation
We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the problem level and above, not just at the code level.
With today's abundance of study materials, courses, and books, the main question a beginner faces now is not "where to study?" but "what should I study and in what order?" There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.
Hexlet is a ready-made path from absolute beginner to your first job. Each lesson on Hexlet includes up to three steps:
1. **Theory**. A short lecture in the form of text or video. It's task-based, so unlike traditional academic theory, we focus on a specific problem that's already been solved by clever engineers and programmers, and then follow their steps to understand the solution.
2. **Test**. A test of your understanding. We don't care about memorizing facts, so the test questions are aimed at understanding the concept, not exercising 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.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
About Hexlet learning process
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.
Sign up
Programming courses for beginners and experienced developers. Start training for free
- 130 courses, 2000+ hours of theory
- 1000 practical tasks in a browser
- 360 000 students
Our graduates work in companies:
Use Hexlet to the fullest extent!
- Ask questions about the lesson
- Test your knowledge in quizzes
- Practice in your browser
- Track your progress
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.