Welcome!
29 |Our page content.
30 |
3 |
4 | 
5 |
6 |
15 |
17 |
5 |
6 |
15 |
5 |
6 |
15 | Our page content.
30 |Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to sit atop your already brilliant 11 | HTML. In essence, Sergey is HTML + partials with slots (named and default!) thrown in for good measure.
12 |If you’ve ever had to make a change to every header on a totally static website, you’ll know how cumbersome and 13 | error-prone it is to copy and paste the changes through all the files. That’s where Sergey comes in. Sergey lets you 14 | move that header into a single, importable file, and helps you include it everywhere you need it.
15 |Sergey is still in it's infancy, so please report any bugs and suggestions here!
16 |Deploying to Netlify is the quickest way to get started with Sergey. Give the button below a click, and an example website will be instantly deployed for you to play around with! It'll look a bit like this.
22 |
23 |
24 | 
25 |
26 |
This is the tldr; for those au fait with npm packages. There's step-by-step walkthrough a little further down the page.
32 |
33 | $ npm install sergey
34 |
35 |
36 |
37 | Add sergey to your start and sergey --watch to your dev scripts in package.json.
Create an _imports folder, and place a header.html file inside.
Import it into your other files with <sergey-import src="header" />
41 |
42 | $ npm run dev
43 |
44 |
45 | Sergey will start a dev server and watch for any changes.
46 |
47 |
48 | $ npm start
49 |
50 |
51 | Sergey will create a public folder ready to deploy.
Sergey is a static site generator, albeit, a very basic one. That's intentional. There are some incredible SSG's out there (I'm a big fan of Hugo, Nuxt and 11ty).
57 |They're all fantastic in their own ways, but also pretty large and in charge. Often when I'm prototyping a website, I don't know if I'll need half the features they offer, nor do I want to spend hours configuring them or reading docs. I just want to get my hands dirty with HTML.
58 |Sergey is a no-configuration SSG that will render your HTML, include partials, and render out slots. It'll compile the files and copy your assets into a public folder ready to be Deployed.
Will it do more in the future? Who knows! Perhaps, but if you need to do more, that's probably a good time to look at some of the illustrious SSG's listed above. Feel free to use Sergey as a springboard, a prototyping tool, or a full-blown production generator. It's up to you!
60 | 61 |Our starting point is an index.html file.
This is lovely, clean HTML. But it becomes problematic when we add a few more pages and need to update the header on 69 | each page.
70 | 71 |Let’s move the header into it’s own file: _imports/header.html
Then we can import it in to our original file with the
76 | <sergey-import src=“header” /> tag.
If you’ve already got a package.json file, feel free to ignore this point!
You’ll need to have Node.js installed to use Sergey. Once that’s done, open terminal/command line and cd into your
83 | website directory. Then, run the following command: npm init -y
It’s time to install Sergey! Run the command:
86 | npm install sergey
Now we need to add the build and dev commands to the scripts section of the package.json file. All in all, it should
89 | look a bit like this:
Wonderful! Let’s run Sergey with the command: npm run start. If it’s all gone well, you should have a new public folder
94 | in your website directory! It should include an index.html file with the original header in place of the
95 | <sergey-import />.
This public folder is the one to upload to your web server. If you’re deploying via Git (say to Netlify), you can add 98 | public/ to your .gitignore file.
99 | 100 |When you're ready to create a new page, create new folder (say 'about') and place copy of the index.html file in there. That'll become available at yourdomain.com/about/
Links are a practical way to show your users where they are in your navigation. They're completely opt-in, so if you prefer to use classic HTML links, go for it!
13 |Knowledge of markdown is often a requirement for static site generators, but Sergey treats markdown as an opt-in feature. So if you'd like to format some or all of your content in markdown, here's how to do it:
12 |Slots are a very useful way to re-use components. Let's explore them a little further...
13 |Any _imports file can have a special tag inside called a <sergey-slot />. This slot provides a neat way to inject content within the component.
Let's take a <head> of the page example. Here's our markup:
Our SEO senses tell us that a page title per page would be a good thing. But now we're using Sergey, all of the <title> tags are stored away in the one file.
To kick off, we can swap in a <sergey-slot /> tag:
To fill that slot with content, we alter our original <sergey-import /> tag in a very HTML-y way:
That's it! If you pass in a title (or any other tags), it'll render it in place of the slot.
35 | 36 |If you want some default content to render when nothing's passed into the slot, expand the <sergey-slot /> tag to include that content:
The humble slot is great, but sometimes it's handy to pass multiple bits of data into a component. This is where named slots come in.
49 | 50 |Note, named slots are a more advanced feature, so don't feel you have to rush to use them, only break them out when you need to. They are comprised of two parts:
51 | 52 |<sergey-template name="slotName" /><sergey-slot name="slotName" />You can kinda think of these as variables. The template is the 'variable definition' and is used within a sergey-import tag. It's where you define the content that'll get injected into the slot.
The slot with the name attribute tells Sergey where you'd like to put the content. Top tip, you can have multiple slots per template! This is really handy for meta titles and descriptions.
60 | 61 |Here's a blog preview example. We've defined two slots for the page title and author:
62 | 63 | 64 | 65 |To fill them in, we pass in two templates wherever we import the head.html file:
One neat thing you can do with slots is build page templates!
74 | 75 |Let's create _imports/template.html file:
Note that _imports can include other imports! This template pulls in a head (with a slot), header and a footer. It also leaves space for a slot.
80 | 81 |In our index.html file, instead of calling in all those imports individually, we can simply wrap our page-specific content in one <sergey-import /> and it'll get squirted into the template. Look how tiny our page has become!
To create a new page, all you need to do is copy/paste those three lines into a new file, and start writing!
86 | 87 |If we really wanted to supercharge this, we could use named slots to control various parts of the template! The sky's the limit!
88 | 89 |Paragraph
'; 81 | 82 | const input = wrapper('Content
'; 189 | 190 | const desiredOutput = `${header()} 191 | ${content} 192 | ${footer()}`; 193 | 194 | const output = compileTemplate(`Content
'; 204 | 205 | const desiredOutput = header(content); 206 | const output = compileTemplate(`Content
'; 215 | primeImport( 216 | testImport('header.html'), 217 | header(`Content is great.
`; 298 | 299 | const output = compileTemplate( 300 | '<article>
325 | <sergey-import src="code" as="markdown" />
326 | </article>