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/