🎈 Hydrogen

A super lightweight static-site generator built with TypeScript 😻 Uses 🔥 lit-html inspired templates for super performant template generation.

New features 🎉 - Build Hooks and Debugging JavaScript Build Process

📓 Docs | v1.0.1-beta.0 | GitHub

⚡ Quick Start

Install: Hydrogen CLI

    
      $ npm install hydrogen-cli --save

Input file: index.js

    
      const page = ({ title, data, head }) => `
        <html>
          <head>
            <title>${title}</title>
            ${head}
          </head>
          <body>
            <h2>${data.project}</h2>
            <p>${data.description}</p>
          <body>
        </html>
      `

      module.exports = {
        page,
        title: 'Welcome to Hydrogen',
        data: () => ({
          project: 'Hydrogen',
          description: 'Super fast static-site generator'
        }),
        head: ({ data }) => [
          ['meta', { name: 'description', content: data.description }]
        ]
      };

Run command: generate

    
      $ npx hydrogen generate index.js

Output file: index.html

    
      <html>
        <head>
          <title>Welcome to Hydrogen</title>
          <meta name="description" content="Super fast static-site generator" />
        </head>
        <body>
          <h2>Hydrogen</h2>
          <p>Super fast static-site generator</p>
        <body> 
      </html>

🏝 Deep dive

Hydrogen is fast because it uses plain JavaScript as a template engine, no need to use something like Pug or Handlebars anymore!

The ⚡ Quick Start gave you a quick taste of what's possible with Hydrogen, all we did was write a simple JS function that renders a piece of HTML which gets saved to an HTML file.

The sweet thing about Hydrogen is that it only provides two commands generate and build. This is what makes Hydrogen so powerful, it does not provide a dev server or any overhead packages. If you want, you can build what ever configuration you want on top of it.

Checkout the docs