Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 28, 2019 07:39 pm GMT

Building a static-site generator called Hydrogen

Static-site generators have been around for a while, its nothing new. In actual fact, there is a list of 100s of these tools which you can find on https://www.staticgen.com/

So what is a static-generator?

An SSG (static-site generator) is essentially a tool which makes use of a templating engine which spits out static HTML files. Below are some examples of taking a form of markup and converting it to HTML.

  • index.md -> index.html
  • index.pug -> index.html
  • index.hbs -> index.html
  • index.vue -> index.html
  • index.js -> index.html

You get the idea, you can give an SSG the required format and its job is to essentially spit out the generated markup in HTML.

Introducing Hydrogen

Hydrogen is probably the lightest static-site generator built with TypeScript. It uses JavaScript Template Literals as a templating engine which makes it unbelievably fast. Its focused purely on taking Template Literals and transforming them into HTML files, most SSGs provides too many overhead features that slow the SSG down. Essentially you can build anything on top of it as you have access to the vast JavaScript ecosystem.

Why JavaScript as a templating engine?

Before ES6, JavaScript was not considered powerful enough to manipulate large chunks of the DOM and template engines like Handlebars and Pug filled that void.

ES5

function h1(content) {  return '<h1>' + content + '</h1>';}

ES6

const h1 = (content) => `<h1>${content}</h1>`;

If you compare the two versions of JavaScript expressing the same function, the ES6 version wins hands down. ES6 was a massive game-changer for JS developers giving us so much more power than ever.

How does using JS as a templating engine make it so fast?

As we are running Hydrogen in a Node.js environment which is a server-side JavaScript runtime, Template Literals is already baked into the JS language and well optimized. Using a template engine like Pug is relatively slower compared to the native template literals.

A quick demo

First, we need to install the Hydrogen CLI via Yarn or NPM

yarn add hydrogen-cli

Create an index.js file in your root directory.

const page = ({ title, head, data }) => `  <!DOCTYPE html>  <html>    <head>      <title>${title}</title>      ${head}    </head>    <body>      <p>${data.text}</p>    </body>  </html>`;module.exports = {  title: 'Hydrogen',  page,  data: () => ({    text: 'Hydrogen: Static-site generator',  }),  head: ({ data }) => [   ['meta', { name: 'description', content: data.text }],  ],};

Run this command to convert the template to HTML

npx hydrogen generate index.js

Outputs index.html

<!DOCTYPE html><html>  <head>    <title>Hydrogen</title>    <meta name="description" content="Hydrogen: Static-site generator">  </head>  <body>    <p>Hydrogen: Static-site generator</p>  </body></html>

Build time: ~29.550ms

The hydrogen generate command is used to compile simple templates but what if you want to set up a larger project with multiples pages, and static assets. You would need the build command.

Check out the documentation for the full details: hydrogenjs.org

Please star the repo to show some support of the project

GitHub logo ShailenNaidoo / hydrogen

Hydrogen. Voted the world's lightest static-site generator built with TypeScript It uses lit-html inspired templating for super duper performant template generation.

Hydrogen

Voted the world's lightest static-site generator built with TypeScript It uses lit-html inspired templating for super duper performant template generation.

BTW Hydrogen is much faster than @11ty/eleventy

Netlify StatusVersioncodecovDownloads/weekLicense

Features

  • Millisecond Builds. With the global average attention span being 8 seconds, why wait seconds for your builds when you can wait milliseconds. Read the SLA.
  • JavaScript Templates. With ES6 template literals, who needs template engines like pug and handlebars. You now have access to the full-power of a JavaScript.
  • Use External APIs. Plug into your data with remote APIs.
  • Powerful Metadata API. Get the best SEO for your static pages.

Quick start

Add Hydrogen CLI to your project

$ yarn add hydrogen-cli

Create a

View on GitHub

Original Link: https://dev.to/shailennaidoo/building-a-static-site-generator-called-hydrogen-27h4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To