Includes

The header with navigation and the footer are the same on every page of the site. The include command inserts the contents of another file into a template, so a shared piece of markup is written once and edited in one place.

The header in its own file

Create the folder src/includes/ and the file src/includes/header.pug in it:

header
  a.logo(href="index.html") Morning Café
  nav
    a(href="index.html") Home
    a(href="menu.html") Menu
    a(href="contacts.html") Contacts

This is an ordinary Pug template, just without the page skeleton. The build script does not touch it: it only builds src/index.pug.

Including it

Insert the header into src/index.pug with an include line:

include includes/header.pug
main
  h1 Fresh coffee every day

The path is relative to the file that contains the include. Pug put the header in place of the line:

<header><a class="logo" href="index.html">Morning Café</a>
  <nav><a href="index.html">Home</a><a href="menu.html">Menu</a><a href="contacts.html">Contacts</a></nav>
</header>
<main>
  <h1>Fresh coffee every day</h1>
</main>

Move the footer into src/includes/footer.pug the same way:

footer
  p © 2026 Morning Café

And include it at the end of src/index.pug:

include includes/header.pug
main
  h1 Fresh coffee every day
include includes/footer.pug

Now the page is made of three parts:

<header><a class="logo" href="index.html">Morning Café</a>
  <nav><a href="index.html">Home</a><a href="menu.html">Menu</a><a href="contacts.html">Contacts</a></nav>
</header>
<main>
  <h1>Fresh coffee every day</h1>
</main>
<footer>
  <p>© 2026 Morning Café</p>
</footer>

If you change a menu item in header.pug, after the build it changes on every page that includes the header.

A file with mixins

include brings in mixins too. Move the drink mixin from the previous lesson into src/mixins.pug:

mixin drink(name, price)
  .card
    h3= name
    p.price $#{price}

A file with only declarations outputs nothing, but once included, its mixins are available in src/index.pug:

include mixins.pug
+drink("Cappuccino", 3)

The call works just as before:

<div class="card">
  <h3>Cappuccino</h3>
  <p class="price">$3</p>
</div>

Including non-Pug files

A file with another extension is inserted as is, without parsing. This way you can embed a small CSS file right into the page:

style
  include style.css

The contents of src/style.css end up inside the style tag.

Common mistake

Writing the path from the project root with a leading slash:

include /includes/header.pug

The build stops with an error: paths with a slash need the basedir option, the folder they are counted from. Write paths relative to the current file (includes/header.pug, or ../includes/header.pug from src/pages/), or pass basedir: "src" to pug.renderFile().

Thanks for reading!