0

We have worked on a static site. we have used the javascript client-side and HTML. I am a beginner to jam-stack and static site generators. we have common code for all pages i.e header and footer related code. How can I use common header/footer for all pages with using the static site generaters

Raju Gaddam
  • 128
  • 3
  • 14

1 Answers1

3

I can't answer for all static site generators, but for Eleventy you would use a layout file. This is documented well but here's an example.

First, ensure you've got an _includes folder, this is where Eleventy looks for layouts and includes by default. (You can change this.) Create a layout file using the template language of your choice, so for example: main.liquid:

<html>
<head>
</head>

<body>
{{ content }}
</body>
</html>

In this template, the contents of your page will be in the content variable. To use this layout, in your regular markdown files, reference it in the front matter:

---
layout: main
---

## Hello World

Im markdown!

This assumes you want a "wrapper" for your layout. You can also just create a file called header.liquid (or use the extension of the template language you prefer) and footer.liquid and then include them from your files.

Eleventy is very flexible and gives you a lot of options.

Raymond Camden
  • 10,661
  • 3
  • 34
  • 68