Hydrogen

🎈 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.

Generate Convert Improve

Install / Use

/learn @hydrogenjs/Hydrogen

About this skill

Quality Score

0/100

README

🎈 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-dev

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 :)

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

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-commit and pre-push hooks that run tests

Roadmap

V1

[x] Debugging - How to debug a Hydrogen build process
[x] Project rewrite - To improve modularity
[x] Improve documention

Related Skills

gh-issues

339.3k

Fetch GitHub issues, spawn sub-agents to implement fixes and open PRs, then monitor and address PR review comments. Usage: /gh-issues [owner/repo] [--label bug] [--limit 5] [--milestone v1.0] [--assignee @me] [--fork user/repo] [--watch] [--interval 5] [--reviews-only] [--cron] [--dry-run] [--model glm-5] [--notify-channel -1002381931352]

node-connect

339.3k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

oracle

339.3k

Best practices for using the oracle CLI (prompt + file bundling, engines, sessions, and file attachment patterns).

tmux

339.3k

Remote-control tmux sessions for interactive CLIs by sending keystrokes and scraping pane output.