DEV Community

loading...

Use global data as site's configuration in Eleventy

phongduong profile image Phong Duong Originally published at phongduong.dev ・1 min read

I have used Gridsome and Vuepress for my static sites. I liked them a lot. I want to try Eleventy for my CSS library document. It's simple and easy to use. But its configuration file is only for how the data and templates are processed. It doesn't provide configuration for the information about my site. This is cumbersome if you have many layouts. It is hard to manage information.

Luckily, Eleventy lets you define your data and access it from templates. In this tutorial, I will show you how to use global data to set your site's configuration

In your global data directory, you create a file named siteConfig.json. This file contains your site information like below

{
  "title": "Phong Duong",
  "description": "Experiment new things and create programming tutorials",
  "keywords": "javascript, programming tutorials",
  "author": "Phong Duong"
}
Enter fullscreen mode Exit fullscreen mode

In your template, you can access this information by specifying the property siteConfig.* in any template you need. Below is the example in Pug

doctype html

html
  head
    title= siteConfig.title
    meta(name="description" content=siteConfig.description)
    meta(name="keywords" content=siteConfig.keywords)
    meta(name="author" content=siteConfig.author)
Enter fullscreen mode Exit fullscreen mode

If you want to use Javascript, you export an object

module.exports = {
  "title": "Phong Duong",
  "description": "Experiment new things and create programming tutorials",
  "keywords": "javascript, programming tutorials",
  "author": "Phong Duong"
}
Enter fullscreen mode Exit fullscreen mode

Eleventy allows you to export a variety of values in Javascript. You can read more in the document

Global data files

Javascript data files

Discussion (0)

pic
Editor guide