1 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6<!-- This site is hosted on Netlify. Anyone can build and deploy a site 7 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=44bec829-75a2-4484-a245-a34626e3f6e3 8 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 11 <link rel="stylesheet" href="/public/css/main.css" /> 12<link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/tomorrow-night-bright.css" /> 13<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli&display=swap" />
14<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
vendor: 1 bytes, line 14
14
15<script>hljs.initHighlightingOnLoad();</script>
vendor: 1 bytes, line 15
15
16<script src="/public/js/script.js"></script>
16 17<title>Docs | ð Hydrogen</title> 18 19
19<script> 20 const registerSW = async () => { 21 if (!navigator.serviceWorker) { 22 return; 23 } 24 25 const reg = await navigator.serviceWorker.register('/sw.js'); 26 27 await reg.update(); 28 } 29 30 registerSW(); 31 </script>
31 32 </head> 33 <body> 34 <nav> 35 <p class="float-ballon"><a href="/">ð</a></p> 36 </nav> 37 <main class="container"> 38 39 <h1>The lightest static-site generator</h1> 40 <hr> 41 <p> 42 Hydrogen uses JavaScript as it's templating engine, it's aimed at doing one thing really well which is converting <i>template literals</i> to HTML making it super extensible as you have the whole <span style="color: #007acc;">Node.js</span> ecosystem at your fingertips. 43 </p> 44 <p> 45 Before ES6, JavaScript was not considered powerful enough to manipulate large chunks of the DOM and template engines like Handlebars and Pug filled that void. Now that JavaScript is more powerful than ever, 46 it's time for JS to shine as a viable templating engine. 47 </p> 48 <p> 49 Hydrogen provides you with: 50 <ul> 51 <li><strong>â¡ Millisecond Builds.</strong> With the global average attention span being 8 seconds, why wait seconds for your builds when you can wait milliseconds.</li> 52 <li><strong>ð¥ JavaScript Templates.</strong> With ES6 template literals, who needs template engines like pug and handlebars. You now have access to the full-power of JavaScript.</li> 53 <li><strong>ð Use External APIs.</strong> Plug into your data with remote APIs.</li> 54 <li><strong>ð¶ Powerful Metadata API.</strong> Get the best SEO for your static pages.</li> 55 <li> 56 <strong>ð¨ Build Hooks.</strong> Customize the build process to fit your needs 57 </li> 58 <li> 59 <strong>ð¾ Service Worker friendly.</strong> Build powerful offline-first experiences 60 </li> 61 </ul> 62 </p> 63 <h2>Index</h2> 64 65 <details> 66 <summary> 67 <a href="/docs/getting-started">ð¨ Getting Started</a> 68 </summary> 69 <ul> 70 71 <li><a href="/docs/getting-started#setup-a-project">Step 1: Setup a project</a></li> 72 73 <li><a href="/docs/getting-started#install-hydrogen">Step 2: Install Hydrogen</a></li> 74 75 <li><a href="/docs/getting-started#create-a-template">Step 3: Create a template</a></li> 76 77 <li><a href="/docs/getting-started#build-the-template">Step 4: Build the template</a></li> 78 79 </ul> 80 </details> 81 82 83 <details> 84 <summary> 85 <a href="/docs/advanced-setup">â Advanced Setup</a> 86 </summary> 87 <ul> 88 89 <li><a href="/docs/advanced-setup#setting-up-a-layout">Step 1: Setting up a layout</a></li> 90 91 <li><a href="/docs/advanced-setup#setting-up-a-page">Step 2: Setting up a page</a></li> 92 93 <li><a href="/docs/advanced-setup#building-our-templates-into-html">Step 3: Building our templates into HTML</a></li> 94 95 <li><a href="/docs/advanced-setup#using-static-assets-like-css-and-js">Step 4: Using static assets like CSS and JS</a></li> 96 97 <li><a href="/docs/advanced-setup#setting-up-a-dev-server">Step 5: Setting up a dev server</a></li> 98 99 </ul> 100 </details> 101 102 103 <details> 104 <summary> 105 <a href="/docs/working-with-data">ð Working with Data</a> 106 </summary> 107 <ul> 108 109 <li><a href="/docs/working-with-data#using-synchronous-data">Using synchronous data</a></li> 110 111 <li><a href="/docs/working-with-data#using-asynchronous-data">Using asynchronous data</a></li> 112 113 </ul> 114 </details> 115 116 117 <details> 118 <summary> 119 <a href="/docs/working-with-meta-data">ð¶ Working with Metadata</a> 120 </summary> 121 <ul> 122 123 <li><a href="/docs/working-with-meta-data#using-the-head-api">Using the Head API</a></li> 124 125 <li><a href="/docs/working-with-meta-data#using-asynchronous-data-with-the-head-api">Using asynchronous data with the Head API</a></li> 126 127 </ul> 128 </details> 129 130 131 <details> 132 <summary> 133 <a href="/docs/setting-up-a-service-worker">ð¾ Setting Up a Service Worker</a> 134 </summary> 135 <ul> 136 137 <li><a href="/docs/setting-up-a-service-worker#basic-setup">Basic Setup</a></li> 138 139 <li><a href="/docs/setting-up-a-service-worker#exposing-page-routes-to-your-service-worker">Exposing page routes to your Service Worker</a></li> 140 141 <li><a href="/docs/setting-up-a-service-worker#versioning-your-service-worker-cache">Versioning your Service Worker cache</a></li> 142 143 </ul> 144 </details> 145 146 147 <details> 148 <summary> 149 <a href="/docs/hydrogen-routes">â Generate Routes Dynamically</a> 150 </summary> 151 <ul> 152 153 <li><a href="/docs/hydrogen-routes#basic-setup">Basic setup</a></li> 154 155 <li><a href="/docs/hydrogen-routes#setting-up-a-dynamic-page-template">Setting up a dynamic page template</a></li> 156 157 </ul> 158 </details> 159 160 161 <details> 162 <summary> 163 <a href="/docs/hydrogen-config">ð§ Hydrogen Config</a> 164 </summary> 165 <ul> 166 167 <li><a href="/docs/hydrogen-config#set-a-global-project-name">Set a global project name</a></li> 168 169 <li><a href="/docs/hydrogen-config#set-a-static-assets-folder">Set a static assets folder</a></li> 170 171 <li><a href="/docs/hydrogen-config#copy-extra-static-files">Copy extra static files</a></li> 172 173 <li><a href="/docs/hydrogen-config#set-global-head-tags">Set global head tags</a></li> 174 175 <li><a href="/docs/hydrogen-config#setting-a-custom-service-worker">Setting a custom Service Worker</a></li> 176 177 <li><a href="/docs/hydrogen-config#delete-dist-folder-before-build">Delete dist folder before build</a></li> 178 179 </ul> 180 </details> 181 182 183 <details> 184 <summary> 185 <a href="/docs/build-hooks">âï¸ Build hooks</a> 186 </summary> 187 <ul> 188 189 <li><a href="/docs/build-hooks#basic-setup">Basic setup</a></li> 190 191 </ul> 192 </details> 193 194 195 <details> 196 <summary> 197 <a href="/docs/debugging-build-process/">ð Debugging Build Process</a> 198 </summary> 199 <ul> 200 201 <li><a href="/docs/debugging-build-process#using-nodejs-devtools-in-chrome">Using Node.js Devtools in Chrome</a></li> 202 203 <li><a href="/docs/debugging-build-process#debugging-in-vs-code">Debugging in VS Code</a></li> 204 205 </ul> 206 </details> 207 208 209 </main> 210 </body> 211 <hr style="margin-top: 40px;"> 212 <footer style="display: flex; justify-content: space-between;"> 213 <div id="theme-toggle" style="position: fixed; bottom: 20px; right: 30px; font-size: 30px;"> 214 ð 215 </div> 216 <p> 217 Made with Hydrogen by <a style="color: #007acc;" href="https://twitter.com/shailen_naidoo">@shailen_naidoo</a> â¤ï¸ 218 </p> 219 <a href="https://www.netlify.com"> 220 <img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
220 221 </a> 222 </footer> 223 </html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.