Sergey | the little static site generator

Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to sit atop your already brilliant HTML. In essence, Sergey is HTML + partials with slots (named and default!) thrown in for good measure.

If you’ve ever had to make a change to every header on a totally static website, you’ll know how cumbersome and error-prone it is to copy and paste the changes through all the files. That’s where Sergey comes in. Sergey lets you move that header into a single, importable file, and helps you include it everywhere you need it.

Sergey is still in it's infancy, so please report any bugs and suggestions here!

Quick start

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.

Deploy to Netlify

This is the tldr; for those au fait with npm packages. There's step-by-step walkthrough a little further down the page.


$ npm install sergey

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" />


$ npm run dev

Sergey will start a dev server and watch for any changes.


$ npm start

Sergey will create a public folder ready to deploy.

What is Sergey

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).

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.

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!

The Hello, World example

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 each page.

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 <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 website directory. Then, run the following command: npm init -y

It’s time to install Sergey! Run the command: 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 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 in your website directory! It should include an index.html file with the original header in place of the <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 public/ to your .gitignore file.

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/