Skip to content
🎈 Hydrogen. Voted (by me) the world's lightest static-site generator built with TypeScript ❀ It uses πŸ”₯ lit-html inspired templating for super duper performant template generation.
TypeScript JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.forestry
.github Create FUNDING.yml Jan 20, 2020
.vscode Minor change Feb 15, 2020
__tests__
bin
content
docs
src
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Dockerfile Hello WOrld Jan 23, 2020
LICENSE
README.md
SLA.md
jest.config.js
package.json 1.0.0 Feb 17, 2020
tsconfig.json
yarn.lock

README.md

🎈 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 Status Version codecov Downloads/week License

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 simple index.js file with below code

const page = ({ title, data, head }) => `
  <!DOCTYPE html>
  <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 the below command to generate your template to HTML

$ npx hydrogen generate index.js

The below HTML is outputted to an HTML file with the same name as the source index.html

  <!DOCTYPE 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>

If you want to see a more advanced setup using Hydrogen, checkout βš™ Advanced Setup

Development

Pull requests are more than welcome :)

  1. Install Docker
  2. Clone repo
  3. All commands are in the package.json file

Run the below commands:

$ yarn docker:setup # Builds Docker image and create Docker container

$ yarn docker:start # Starts Docker image

$ yarn docker:cli:dev # Runs CLI in dev mode

This will run your changes to the Hydrogen CLI over the Hydrogen documentation

Note: There are pre-commit and pre-push hooks that run tests

Roadmap

V1

  • Debugging - How to debug a Hydrogen build process
  • Project rewrite - To improve modularity
  • Improve documention
You can’t perform that action at this time.