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 😜
- ⚡ 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.
- 🔌 Use External APIs. Plug into your data with remote APIs.
- 🕶 Powerful Metadata API. Get the best SEO for your static pages.
Add Hydrogen CLI to your project
$ yarn add hydrogen-cli
Create a simple
index.js file with below code
const page = `<!DOCTYPE html><html><head><title></title></head><body><h2></h2><p></p><body></html>`;moduleexports =pagetitle: 'Welcome to Hydrogen'project: 'Hydrogen'description: 'Super fast static-site generator''meta' name: 'description' content: datadescription
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
Welcome to HydrogenHydrogenSuper fast static-site generator
If you want to see a more advanced setup using Hydrogen, checkout ⚙ Advanced Setup
Pull requests are more than welcome :)
- Install Docker
- Clone repo
- All commands are in the
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-pushhooks that run tests
- Debugging - How to debug a Hydrogen build process
- Project rewrite - To improve modularity
- Improve documention