{"id":15105556,"url":"https://github.com/andy-set-studio/hylia","last_synced_at":"2025-09-27T05:30:41.696Z","repository":{"id":44400990,"uuid":"191442745","full_name":"Andy-set-studio/hylia","owner":"Andy-set-studio","description":"Hylia is a lightweight Eleventy starter kit to help you to create your own blog or personal website.","archived":true,"fork":false,"pushed_at":"2021-10-15T19:09:18.000Z","size":1091,"stargazers_count":907,"open_issues_count":32,"forks_count":229,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-04-10T15:06:44.642Z","etag":null,"topics":["eleventy","eleventy-theme","sass"],"latest_commit_sha":null,"homepage":"https://hylia.website","language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Andy-set-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-11T20:15:02.000Z","updated_at":"2024-03-31T01:27:48.000Z","dependencies_parsed_at":"2022-07-15T04:46:53.324Z","dependency_job_id":null,"html_url":"https://github.com/Andy-set-studio/hylia","commit_stats":null,"previous_names":["hankchizljaw/hylia"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andy-set-studio%2Fhylia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andy-set-studio%2Fhylia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andy-set-studio%2Fhylia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andy-set-studio%2Fhylia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Andy-set-studio","download_url":"https://codeload.github.com/Andy-set-studio/hylia/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219871882,"owners_count":16554465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eleventy","eleventy-theme","sass"],"created_at":"2024-09-25T20:40:56.144Z","updated_at":"2025-09-27T05:30:36.651Z","avatar_url":"https://github.com/Andy-set-studio.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A simple starter kit for Eleventy\n\nHylia is a lightweight [Eleventy](https://11ty.io) starter kit with [Netlify CMS](https://www.netlifycms.org/) pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend it for yourself.\n\nGet started now by **[deploying Hylia to Netlify.][deploy-to-netlify]**\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy-to-netlify]\n\n\u003cimg src=\"https://hankchizljaw.imgix.net/hylia-github.jpg?auto=format\u0026q=60\" width=\"550\" /\u003e\n\n## Features\n\nHylia version 0.7.0 features:\n\n✍️ A pre-configured [Netlify CMS](https://www.netlifycms.org/) setup  \n🎨 Customisable design tokens to make it your own  \n🌍 Customisable global data and navigation  \n📂 Tags and tag archives  \n✅ Progressively enhanced, semantic and accessible  \n🎈 _Super_ lightweight front-end  \n🚰 Sass powered CSS system with utility class generator  \n⚙️ Service worker that caches pages so people can read your articles offline  \n🚀 An RSS feed for your posts  \n💌 A basic contact form, ready for [Netlify Forms](https://docs.netlify.com/forms/setup/#html-forms)\n\n## Roadmap\n\n💬 [Netlify Forms](https://www.netlify.com/docs/form-handling/) powered comments  \n💡 ~~Dark/Light mode toggle~~ [Added in 0.4.0](https://github.com/hankchizljaw/hylia/releases/tag/0.4.0)  \n🗣 Webmentions  \n📖 Pagination  \n🐦 Web sharing API integration  \n🗒 Offline mode with links to cached pages  \n📄 Documentation site  \n💅 Proper Sass documentation  \n✍️ Proper CMS documentation  \n🖼 A facility for you to be able to add your logo / branding  \n\n---\n\n## Getting started\n\n### Method one: One-Click Deploy to Netlify\n\nYou can [deploy Hylia to Netlify with one click][deploy-to-netlify] and you’ll be up and running in minutes!\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy-to-netlify]\n\nI recorded a quick start video of me deploying Hylia to Netlify and getting the CMS set up. [Check it out here](https://youtu.be/0hM_0BH-Y_A).\n\n### Method two: Clone / Fork\n\n1. Clone or fork this repo: `git clone https://github.com/hankchizljaw/hylia`\n2. `cd` into the project directory and run `npm install`\n3. Once all the dependencies are installed run `npm start`\n4. Open your browser at `http://localhost:8080` and away you go!\n\n## Terminal commands\n\n### Serve the site locally\n\n```bash\nnpm start\n```\n\n### Build a production version of the site\n\n```bash\nnpm run production\n```\n\n### Compile Sass\n\n```bash\nnpm run sass:process\n```\n\n### Re-generate design tokens for Sass\n\n```bash\nnpm run sass:tokens\n```\n\n## Getting started with the CMS\n\nBefore you can use the CMS, you need to do some config in Netlify. Luckily they provide a [very handy guide to get started](https://www.netlify.com/docs/identity/).\n\nIn short, though:\n\n- Once you’ve set up the site on Netlify, go to “Settings” \u003e “Identity” and enable Identity\n- Scroll down to the “Git Gateway” area, click “Enable Git Gateway” and follow the steps\n- Click the “Identity” tab at the top\n- Once you’ve enabled identity, click “Invite Users”\n- Check the invite link in your inbox and click the link in the email that’s sent to you\n- Set a password in the popup box\n- Go to `/admin` on your site and login\n- You’re in and ready to edit your content!\n\n## Design Tokens and Styleguide\n\n### Design Tokens\n\nAlthough Hylia has a pretty simple design, you can configure the core design tokens that control the colours, size ratio and fonts.\n\n---\n\n**Note**: _Credit must be given to the hard work [Jina Anne](https://twitter.com/jina) did in order for the concept of design tokens to even exist. You should watch [this video](https://www.youtube.com/watch?v=wDBEc3dJJV8), then [read this article](https://the-pastry-box-project.net/jina-bolton/2015-march-28) and then sign up for [this course](https://aycl.uie.com/virtual_seminars/design_tokens_scaling_design_with_a_single_source_of_truth) to expand your knowledge._\n\n---\n\nTo change the design tokens in the CMS, find the “Globals” in the sidebar then in the presented options, select “Theme Settings”.\n\nTo change the design tokens directly, edit [`_src/data/tokens.json`](https://github.com/hankchizljaw/hylia/blob/master/src/_data/tokens.json).\n\nThe tokens are converted into maps that the Sass uses to compile the front-end CSS, so make sure that you maintain the correct structure of `tokens.json`.\n\n### Styleguide\n\nYour version of Hylia ships with a Styleguide by default. You can see a demo of the Styleguide at \u003chttps://hylia.website/styleguide/\u003e.\n\nYou can edit the Styleguide by opening [`src/styleguide.njk`](https://github.com/hankchizljaw/hylia/blob/master/src/styleguide.njk). If you don’t want the Styleguide, delete that file and the page will vanish.\n\n## Sass\n\nHylia is based on the [WIP v2 version of Stalfos](https://github.com/hankchizljaw/stalfos/tree/feature/v2), which currently has no documentation (I know, I’m bad). Here is some very basic documentation for elements of the new framework that you will encounter on this project.\n\n### Configuration\n\nThe whole Sass system is powered by central config file, which lives here: [`_src/scss/_config.scss`](https://github.com/hankchizljaw/hylia/blob/master/src/scss/_config.scss).\n\nBefore Sass is compiled, a `_tokens.scss` file is generated from the [design tokens config](https://github.com/hankchizljaw/hylia/blob/master/src/_data/tokens.json) which is required.\n\nKey elements:\n\n- `$stalfos-size-scale`: A token driven size scale which by default, is a “Major Third” scale\n- `$stalfos-colors`: A token driven map of colours\n- `$stalfos-util-prefix`: All pre-built, framework utilities will have this prefix. Example: the wrapper utility is '.sf-wrapper' because the default prefix is 'sf-'\n- `$metrics`: Various misc metrics to use around the site\n- `$stalfos-config`: This powers everything from utility class generation to breakpoints to enabling/disabling pre-built components/utilities\n\n### How to create a new utility class with the generator\n\nThe utility class generator lets you generate whatever you want, with no opinions on class name or properties affected.\n\nTo add a new class, add another item to the exists `$stalfos-config` map. This example adds a utility for floating elements.\n\n```scss\n'float':('items':('left':'left','right': 'right'\n  ),\n  'output': 'responsive',\n  'property': 'float'\n);\n```\n\nThe `output` is set to `responsive` which means every breakpoint will generate a prefixed class for itself. If you only wanted elements to float left in the `md` breakpoint, you’d now be able to add a class of `md:float-left` to your HTML elements.\n\nIf you only want standard utility classes generating, set the `output` to `standard`.\n\n### Functions\n\n#### `get-color($key)`\n\nFunction tries to match the passed `$key` with the `$stalfos-colors` map. Returns null if it can’t find a match.\n\n#### `get-config-value($key, $group)`\n\nReturns back a 1 dimensional (key value pair) config value if available.\n\n#### `get-size($ratio-key)`\n\nFunction tries to match the passed `$ratio-key` with the `$stalfos-size-scale`. Returns null if it can’t find a match.\n\n### Mixins\n\n#### `apply-utility($key, $value-key)`\n\nGrabs the property and value of one of the `$stalfos-config utilities` that the generator will generate a class for.\n\n#### `media-query($key)`\n\nPass in the key of one of your breakpoints set in `$stalfos-config['breakpoints']` and this mixin will generate the `@media` query with your configured value.\n\n## CMS\n\nHylia has [Netlify CMS](https://www.netlifycms.org/) pre-configured as standard. You can customise the configuration by editing [`src/admin/config.yml`](https://github.com/hankchizljaw/hylia/blob/master/src/admin/config.yml).\n\n### Content that you can edit\n\nThe basic CMS setup allows you to edit the following:\n\n- **Home page**: Edit the content on your homepage\n- **Posts**: Create and edit blog posts\n- **Generic pages**: Create generic pages that use a similar layout to posts\n- **Global site data**: Various bits of global site data such as your url, title, posts per page and author details\n- **Navigation**: Edit your primary navigation items\n- **Theme**: Edit the design tokens that power the site’s theme\n\n## Get involved\n\nThis project is _super_ early and feedback is very much welcome. In order to keep things running smooth, please consult the [contribution guide and code of conduct](https://github.com/hankchizljaw/hylia/blob/master/contributing.md).\n\nThe stuff that I need the most help with is:\n\n- Documentation\n- [Webmentions](https://www.w3.org/TR/webmention/)\n- Performance\n\n[deploy-to-netlify]: https://app.netlify.com/start/deploy?repository=https://github.com/hankchizljaw/hylia\u0026stack=cms\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandy-set-studio%2Fhylia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandy-set-studio%2Fhylia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandy-set-studio%2Fhylia/lists"}