GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hydrogenjs → Hydrogen

hydrogenjs / Hydrogen

Licence: mit
🎈 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.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
es6
455 projects
es7
32 projects

Labels

nodejsapidatastatic-site-generatorstatic-sitetemplate-engine

Projects that are alternatives of or similar to Hydrogen

voldemort
A simple static site generator using Jinja2 and Markdown templates.
Stars: ✭ 48 (-40%)
Mutual labels:  static-site-generator, template-engine, static-site
Awesome Jamstack
Carefully curated list of awesome Jamstack resources
Stars: ✭ 1,012 (+1165%)
Mutual labels:  static-site-generator, static-site
Ng Static Site Generator
ng-static-site-generator is a webpack-based command line build tool that builds an Angular app and Jekyll-style blog entry html files into a static html and css website. It also supports building a client app so you can have static pages that are also capable of running dynamic functionality coded in Angular.
Stars: ✭ 42 (-47.5%)
Mutual labels:  static-site-generator, static-site
Rtimes
R wrapper for NYTimes API for government data - ABANDONED
Stars: ✭ 55 (-31.25%)
Mutual labels:  api, data
Jmmasw
Just make me a static website
Stars: ✭ 13 (-83.75%)
Mutual labels:  static-site-generator, static-site
Slate
Beautiful static documentation for your API
Stars: ✭ 33,447 (+41708.75%)
Mutual labels:  api, static-site-generator
Awesome Web Cv
📝 Single Page Web Application for Your Outstanding CV
Stars: ✭ 50 (-37.5%)
Mutual labels:  static-site-generator, static-site
Microsite
Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
Stars: ✭ 632 (+690%)
Mutual labels:  static-site-generator, static-site
Elderjs
Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
Stars: ✭ 1,102 (+1277.5%)
Mutual labels:  static-site-generator, static-site
Fredr
An R client for the Federal Reserve Economic Data (FRED) API
Stars: ✭ 61 (-23.75%)
Mutual labels:  api, data
Hepek
Web content generators in Scala. Intuitive, scalable, powerful.
Stars: ✭ 69 (-13.75%)
Mutual labels:  static-site-generator, template-engine
Generator Infinitely Static
💫 Static page generator with routes support thats infinitely awesome
Stars: ✭ 11 (-86.25%)
Mutual labels:  static-site-generator, static-site
Gatsby Starter Ghost
A starter template to build lightning fast websites with Ghost & Gatsby
Stars: ✭ 752 (+840%)
Mutual labels:  static-site-generator, static-site
Shoebill
Web-based editor for Pelican and Nikola
Stars: ✭ 30 (-62.5%)
Mutual labels:  static-site-generator, static-site
Forty Jekyll Theme
A Jekyll version of the "Forty" theme by HTML5 UP.
Stars: ✭ 695 (+768.75%)
Mutual labels:  static-site-generator, static-site
Generator Http Fake Backend
Yeoman generator for building a fake backend by providing the content of JSON files or JavaScript objects through configurable routes.
Stars: ✭ 49 (-38.75%)
Mutual labels:  api, data
Flybook
✈️ FlyBook is a simple utility to generate static website such as gh-pages, manual of you projects
Stars: ✭ 76 (-5%)
Mutual labels:  static-site-generator, static-site
Headlesscms.org
Source for headlesscms.org
Stars: ✭ 628 (+685%)
Mutual labels:  static-site-generator, static-site
Octo Cli
CLI tool to expose data from any database as a serverless web service.
Stars: ✭ 653 (+716.25%)
Mutual labels:  api, data
Hugo Boilerplate
A Hugo boilerplate for building modern websites
Stars: ✭ 58 (-27.5%)
Mutual labels:  static-site-generator, static-site
View All Similar Projects ➔

🎈 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.
  • 🔨 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 :)

  1. Install Docker
  2. Clone repo
  3. 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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].