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.
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
sergey to your start and
sergey --watch to your dev scripts in
_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
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:
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
in your website directory! It should include an index.html file with the original header in place of the
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