👋
Hello World
Your first Spignite web site!
Spignite project is a modern Node project. You should be somewhat familiar with the JavaScript ecosystem - this tool is not for the faint-hearted 💪.
Let's build our first website together! Btw, the example is available on our Github.
Create a new folder for your website. Create
package.json that looks like this (common fields are omitted):package.json
{
// ...
"type": "commonjs",
"scripts": {
"dev": "node spig.mjs dev",
"build": "node spig.mjs"
},
"dependencies": {
"spignite": "^<version>"
}
}
Nothing crazy, as you can see.
Spignite expects certain folder structures to be followed. We will talk more about it later; for now, just keep in mind the whole site is defined in
src subfolder.Let's make some pages! Create the content for the
index page:src/site/index.md
Hello **world**!
src/layouts/base.njk
<!doctype html>
<html>
<body>
{{ content | safe }}
</body>
</html>
The last thing is to run Spignite. Add the
spig.mjs into the root of your project:spig.mjs
import { Spig } from "spignite";
Spig
.on('/**/*.md')
._('RENDER')
.pageLinks()
.render()
.applyTemplate()
;
Spig.run();
This is the script that builds Spignite's website. We will describe it in more detail later. Still, it is quite clear that we define a certain flow of operations over input files. Something like this:
- 1.On all
mdfiles... - 2.in the
RENDERphase... - 3.make page links (i.e. change
.mdto.html)... - 4.render all
.mdcontent to HTML... - 5.and apply the template.
Easy, right?
The above syntax focuses on operations-per-files. Spignite has an alternative syntax that focuses on operations-per-phases. It looks like this:
spig-alt.mjs
import { Spig } from "spignite";
const md = Spig.on("/**/*.md")
Spig.phase("RENDER", (on) => {
on(md)
.pageLinks()
.render()
.applyTemplate();
});
Spig.run();
Both syntaxes work the same. It is your preference which one to use, and when.
We will talk more about processing a bit later.
That's all - execute the following in projects root and sit and enjoy the show!
npm install && npm run build
The output would be similar to this:
Spignite in action!
Check out the
out folder! The index.html awaits:out/index.html
<!doctype html>
<html>
<body>
<p>Hello <strong>world</strong>!</p>
</body>
</html>
Your site is ready!
Last modified 5mo ago