🔨 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 }) => `
        <html>
          <head>
            ${head}
            <title>${title}</title>
          </head>
          <body>
            <p>${data.text}</p>
          </body>
        </html>
      `;

      module.exports = {
        title: 'Hydrogen webpage',
        page,
        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

index.html

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

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.