- Notifications
You must be signed in to change notification settings - Fork9
🎈 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.
License
hydrogenjs/hydrogen
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 onlinedocumentation 📖
- Check out ourTrello board for project activity
- Want to contribute to HydrogenJS? Check out thecontributing 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 theSLA.
- 🔥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
Add Hydrogen CLI to your project
$ npm install hydrogen-cli --save-dev
Create a simpleindex.js file with below code
constpage=({ 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 sourceindex.html
<!DOCTYPE html><html><head><title>Welcome to Hydrogen</title><metaname="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
Pull requests are more than welcome :)
- InstallDocker
- 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 mode
This will run your changes to the Hydrogen CLI over the Hydrogen documentation
Note: There are
pre-commitandpre-pushhooks that run tests
- Debugging - How to debug a Hydrogen build process
- Project rewrite - To improve modularity
- Improve documention
About
🎈 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.
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.