Hylia, a tool for easily generating and deploying a static website

— 4 minute read

Introduction permalink

This tutorial will help you with setting up your own website / blog, using Hylia. While other services allow you to make your own website, they are either paywalled, riddled with ads, or limited in functionality. Using a static site generator such as Hylia (or equivalent) will give you full control over what goes on your website.

Requirements permalink

This tutorial requires that you have completed the setup tutorial, or that you at least have a GitHub account and text editor.

Definitions permalink

According to the official site, Hylia is an Eleventy starter kit with Netlify CMS preconfigured. Let's break down what that means:

  • Eleventy is a static site generator. This means you can quickly and easily type up content, and then run eleventy to convert it into a website. A static site is a site that does not retain information, meaning you cannot make user accounts or other dynamic content. If you wish to change the website (such as add a blog post), you must code it in yourself and then run eleventy to re-build the site. This sounds harder than it is, because Eleventy ensures the process is easy!
  • Netlify is a service that lets you deploy a GitHub repository as a website. This means you as a developer push your website's code to your repository, Eleventy builds it, and then Netlify distributes it for the world to see.
  • Netlify CMS is a content manager, which essentially makes adding a new post or extra content to your site extremely easy.

Combined, these technologies form the basis of Hylia, so as you can see Hylia gives you the best of both worlds; an easily-accessible and free way to build a website, and control over the most minute details of your site when you need it.

Getting started permalink

If you'd like a video tutorial, this is a very good one.

  1. Go on the Hylia website and click the deploying Hylia to Netlify button.
  2. You will be asked for your GitHub credentials, which you will need to enter to make a new repository
  3. You will be prompted to name your repository. The kebab-style naming is typical for GitHub repositories (eg my-website-name).
  4. Netlify will begin building the site, once it is done you can click the randomly-generated url, and see that your website is up and running!

Identity permalink

To enable some features we must first enable Identity by going to your website's page on Netlify, clicking the Settings tab, then Identity in the left-hand list, and clicking the blue Enable button.

Afterwards scroll all the way down and click on "Enable Git Gateway"

Lastly, click the Identity tab at the top, click on "Invite Users", and enter your own email.

Check your email for the invite link, and set up a password for your admin account.

Content Manager permalink

Now if you go on your site, and visit the /admin page (eg https://awesome-jang-410844.netlify.com/admin), you will see an interface for posting and managing your site. From this point on I advise playing around. Check the following links to know how to configure your site, and how to use Markdown if you arent familiar.

Cloning and updating your website locally permalink

While the content manager offers many features, if you wish to have full control over the look and content of your website, you can clone your Github repository to your compute, and open up the project in your favorite text editor.

Clone the repository permalink

Using GitHub Desktop, clone your repository to a folder on your computer that you will remember (organization is key!), and then click on the "Open in Visual Studio Code" button, if you chose VSCode as your preferred editor.

Modifying the website permalink

From here, you can see the entire makeup of your website. Things such as your website's theme, posts, etc. are all accessible and customizeable here.

If you wish to test and build your website locally, you can do so by installing the eleventy CLI tool from npm, the node package manager. If you already installed NodeJS, then you have npm, and can install eleventy by entering npm install -g @11ty/eleventy.

See this link for documentation on how to use eleventy.

Push your changes permalink

Once you have made your changes, commit and push your changes using the GitHub Desktop application, to update your actual website.

BONUS! Dark Theme permalink

The default theme for Hylia is nice, but wouldnt it be sweet if it you changed it into a Dark-Mode style theme? See if you can clone the project to your local machine, and then mess around with the theme to customize it the way you want!