Installing the package #
Hydrogen runs behind the scenes using Node.js. In order to install Hydrogen on your project, you'll need to have Node and NPM installed on your machine. From there, inside of a command prompt/terminal window, navigate to the root of your project and run the installation command.
Once the command finishes, you'll be able to run Hydrogen's commands from your project. If you'd like to dig a little deeper into Hydrogen's code, you'll be able to find the installation inside of your project's node_modules folder.
1
npm install @hydrogen-css/hydrogen --save-dev
Beta releases #
Depending on what's next in the roadmap, Hydrogen offers occasional beta releases for testing upcoming features. You can view the most recent beta releases on Hydrogen's NPM package page. If you'd like to install a beta release on your project, you can do so using a modified version of the installation command.
1
npm install @hydrogen-css/hydrogen@beta --save-dev
Initialization #
Once Hydrogen has successfully installed, you can run the initialization command from the root folder of your project. This command will prompt you to enter a few details about your project's markup and output directory, after which it will automatically create a configuration file for you. This configuration file contains everything you'll need to customize Hydrogen to your brand, including examples and default values.
1
npx h2-init
Loading Hydrogen #
To get started using Hydrogen attributes, you'll need to add a data-h2 attribute to your html or body element. You can also apply this attribute to a section or component if you only need Hydrogen in a localized context.
Finally, you'll need to add Hydrogen's CSS file to your project's head tag. The path you use here should reflect the path you specified as your output directory, followed by hydrogen.css.
You're all set to start developing with Hydrogen.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html data-h2>
<head>
...
<link rel="stylesheet" href="path/to/hydrogen.css">
...
</head>
<body>
...
</body>
</html>