How to use Jackyll/Jackal/Jackle

JackalJackleJackyll Static Site Generator (SSG) bootstraps off of a few existing technologies:

1. Handlebars Templating Engine
2. Sanity IO
3. Netlify

Plus something (kinda) new: the Jackyll Compiler. OwO

What do each of these things do and why should I care, you ask? Well... For any static site generator you really need two, actually three things:

• Templating Engine. Handlebars satisfies this role.
• Data source. We're getting fancy and using Sanity IO as a CMS for our data. You could use a JSON file though.
• Somewhere to host your website! We're using Netlify and their webhooks to integrate with Github.

What's this Jackal compiler about? Well, for some static site generators, you just write an HTML file with the additional syntax that your templating engine needs. So, for HTML and Handlebars you'd do something like this:

<h1>"{{some.value}}"</h1>

some.value points to a key-value pair stored somewhere that Handlebars knows about. If the value of the property, some.value = "My heading!" Handlebars would pump out:

<h1>My heading!!!</h1>

Neat huh?

Ever since seeing what Svelte can do with a compiler I've been pretty interested in learning about them. Sooo I worked through the The Super Tiny Compiler and ended up with the Jackal syntax for writing HTML.

Why do this? Doesn't something like this already exist? Yes, check out PugJS. But I wanted to learn about compilers and static site generators, so here we are! Deal with it. I'll go into more detail about setting up all of the pieces and explaining the main build script along with the compiler on subsequent pages. So if you're ready to dive in, click the next page link below!

Basic Usage:

1. Install everything. Use Git to pull the repo and set up everything else.
2. Configure Netlify to trigger a build whenever the Git repo is updated
3. Write a JS file with a string that holds all of your Jackyll syntax
4. Define your Sanity IO schema
5. Start up the Sanity IO server
   1. Navigate to /studio and enter sanity start into the CLI.
   2. Add your data/content to the CMS
   3. Publish it!
6. Make sure you're converting any block text to HTML and that your config settings are set up
7. In the CLI type: npm run build
8. Press return/enter and you're off to the races!