🔨 Getting Started

Hydrogen is available on Yarn and NPM and requires Node.js 8 and higher. We will be using Yarn as the package manager throughout the documentation

Step 1: Setup a project

We need a folder to store our project files

      $ mkdir hydrogen-sample
      $ cd hydrogen-sample

Step 2: Install Hydrogen

Our project needs a package.json. We can use Yarn to make one

      $ yarn init -y
Add Hydrogen to the package.json
      $ yarn add hydrogen-cli

Step 3: Create a template

Let's create a simple template which we will store in index.js file

      const page = ({ title, head, data }) => `

      module.exports = {
        title: 'Hydrogen webpage',
        data: () => ({
          text: 'Hello from Hydrogen',
          css: 'https://main.css',
        head: ({ data }) => [
          ['link', { rel: 'stylesheet', href: data.css }],
          ['script', { src: 'https://script.js' }, true],
          ['style', {}, 'body { font-size: 10px; }'],

Step 4: Build the template

We need to run the generate command to build the index.js template. The output of template will be stored in a file of the same name as the template but with the .html extension.

      $ npx hydrogen generate index.js
          <link rel="stylesheet" href="https://main.css" />
          <script src="https://script.js"></script>
          <style>body { font-size: 10px; }</style>
          <title>Hydrogen webpage</title>
          <p>Hello from Hydrogen</p>

The generate command is more of a lower-level template generator, for a more advanced setup we use the build command for working with more larger projects. Find out more in the Advanced Setup section.