I built my own static site generator.

Hi everyone,
I'm writing my first article on dev.to and it's about the static site generator I have been building.

About a month ago, I saw a website called StaticGen(StaticGen has a list of static site generators for Jamstack sites). There were a lot of static sites generators that I thought why not challenge myself to build a static site generator.

I knew that ssg generates static sites from markdown and other formats of files but I had no idea how. So, I did what must of us programmers do. I searched in google, "How to build static site generator". I found one useful blog which was a tutorial about creating a static site generator.

After researching a bit, I begin to create my own static site generator. I was going to use mustache as a templating engine but I thought why not create my own templating engine. I used vm module of nodejs and some regex to create a simple templating engine.

Roshan💥 JavaScript 💥

@acharyaroshanji

Compile and run javascript code within V8 Virtual Machine contexts using vm module.

#100DaysOfCode #Nodejs #webdev #javascript #CodeNewbie

13:00 PM - 17 Jul 2020

6 4

I used some npm packages like frontmatter, remarkable to parse markdown files. Then I built a live reload development server form scratch for my static site generator using chokidar and ws.

I named my static site generator as ulka (meteor) and my templating engine as ulka-parser and published them to npm. Then I created a new npm package create-ulka-app which clones a default starter (https://ulka-starter-default.netlify.app/) from GitHub and installs the npm packages.

ulka: https://github.com/ulkajs/ulka
ulka-parser: https://github.com/ulkajs/ulka-parser

Ulka's working methodology is simple. It parses markdown and ulka files and creates html files. It changes the name of all assets and store in a single folder. Also, you can use javascript inside markdown files. Ulka also provides feature postParse and preParse that accepts array of functions that will run before(prePrase) or after(postParse) parsing markdown files.

It's not completed yet, but my exams are coming soon. So, I will continue working on this after 1 month. It was fun creating it while learning.

Comments

[Tobias Nickel]

cool, When I was last time refactoring my website, I also checked a bunch of SSG's. ended up with hexo.js, because I wanted one in node.js.

but it has bad error logging and when building it can be hard to find the corrupted file in my source.

it's code has for my taste actually to many unnecessary abstractions. what is making debugging hard. but it was always good enough that I don't start over. I also managed to make a plugin for it. But it's APIs made it more difficult than needed.

I did not know the VM module, will definitely check? it out. Once a colleague needed a template engine, So I wrote him this code:

function render(template,  data) {
  return template.split('{{').map((part, i)=>{
    if(!i) return part;
    const [key, rest] = part.split('}}') ;
    return data[key] + rest;
  }).join('');
}
console.log(render('Hallo {{name}}!! ', {name:'Tobias'})) 

Still advising to use underscore template,...

thanks for this post, I will check out your project.

[Roshan Acharya]

Thank you Tobias Nickel for sharing your experience with SSG. SSG I built also doesn't have a good error logging, but I'm working on it. Never used underscore template. I will check surely check that out.

And also thank you for that code.🥰

[sauravgautam320]

wow i tried it out...no words, its like a simplified version of all other SSG. So easy to use.
loved it.

[Roshan Acharya]

Thank you sauravgautam320 for your kind words. This type of reviews really inspires and motivates me to not give in to the stress, mind boggling moments and sudden urge to smash the keyboard [ LOL ] while coding. This kind of review really nullifies all the stress and anxiety I went through while working on this project. Thank you again, keep supporting. thank you ❤️.

[[e-mail]]

Wow, cool.
I checked that out and it's so much easier to setup than other SSG.

[Roshan Acharya]

Thank you sagar karki. It was so nice of you to say so. ♥️

[shadowtime2000]

Extremely cool! Is there any specific usage for ulka?

[Roshan Acharya]

Thank you shadowtime2000. For now, I can't exactly point out the specific usage. I am still working on it.

[rajeevpaudel]

i was also intrested in ssg and was thinking about building one. It is a good reference project to look on.

[Roshan Acharya]

Thank you mate. Good luck ♥️

[John Bokma]

Building an SSG is a great exercise. I had specific requirements so I made tumblelog: github.com/john-bokma/tumblelog. I use it for my (mostly) link blog plurrrr.com/.