🎈 Hydrogen
Voted the world's lightest static-site generator built with TypeScript ❤ It uses 🔥 lit-html inspired templating for super duper performant template generation.
- Check out the online documentation 📖
- Check out our Trello board for project activity
- Want to contribute to HydrogenJS? Check out the contributing doc
BTW Hydrogen is much faster than @11ty/eleventy 😜
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.
- 🔨 Build Hooks. Customize the build process to fit your needs
- 💾 Service Worker friendly. Build powerful offline-first experiences
Quick start
Add Hydrogen CLI to your project
$ npm install hydrogen-cli --save-devCreate 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.jsThe 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 :)
- Install Docker
- Clone repo
- All commands are in the
package.jsonfile
Docker is optional and if you want to debug the build process refer to 🐛 Debugging Build Process
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 modeThis will run your changes to the Hydrogen CLI over the Hydrogen documentation
Note: There are
pre-commitandpre-pushhooks that run tests
Roadmap
V1
- Debugging - How to debug a Hydrogen build process
- Project rewrite - To improve modularity
- Improve documention
