DEV Community

Bigi Lui
Bigi Lui

Posted on • Edited on • Originally published at bigi.dev

Miner - Blog Framework Based on Sapper/Svelte

I open sourced the framework that powers my blog, and called it Miner!

The README of the repo describes pretty well what it is and the story behind making it. It's based on Sapper, the web app framework based on the Svelte UI framework.

Sapper supports regular SPA mode (Single Page Application), as well as server-side-rendering options, or even all the way to static site generation. The static site generator mode is what I use out of it.

Now, Sapper is a great web app framework, but it's not specific for creating a blog. There are many basic features one would want for a blog, such as managing each post in Markdown files, defining meta-data for each post (e.g. as YAML Frontmatter), OpenGraph social tags for social network sharing optimizations, sharing icons, comments widget, and more.

The Miner framework provides all of this out of the box. Quite literally, you can grab the repo, start writing Markdown files in the posts directory and you'll have a blog running.

The Name

I'm not great at naming and I thought for a while what to name it. I ended up with Miner -- admittedly in this day and age, it's going to make folks think of crypto miners.

In reality, it's an extension of the name Sapper. Miners are a specific type of sappers in war that attack forts. I thought it's appropriate since Miner is a framework for building sites of a specific narrow category (a blog).

Doing my part to push Svelte

If you've been reading my blog, you know I'm a fan of Svelte. As a modern frontend framework, I think it's the one that makes the most sense among Angular, React, Vue, and now Svelte. Admittedly, out of these, I've only had extensive experience with React and Svelte; and only a cursory exploration with Angular and Vue in the past. From my experience though, a web app built on Svelte has the most concise code. Components have the cleanest code among different frameworks.

Svelte is still relatively small, but if you look at the community, there's already a lot of things built upon it. Case in point, searching on npm for a Svelte component for a specific thing usually yields some results. The other day, I was looking for a color picker and found one. If you're looking for a calendar component, there's one.

If you've really been reading my blog, you probably also realize it's not a secret that I dislike React. Right now, the tech industry as a whole basically develops frontend in React. I'd like to do my part to push for other frameworks to be viable, employable skillsets. Or, if you'd like to hear ir phrased more negatively, I'd like to do my part to dethrone React's monopoly status as the frontend framework of choice in the tech industry/among startups. Getting just one more developer comfortable and in favor of Svelte is another step toward that goal.

Other Svelte Blogging Frameworks

Because Sapper stops short of providing features of a blog, many people who've built a blog with Svelte wrote tutorials to build a blog with Svelte/Sapper, or in some cases even provided a sample repo, which is quite similar to Miner actually.

However, I believe that a batteries-included framework can contribute a lot to adoption of a technology. Learning of any new tech takes ramp up time and effort. As individual elements, Svelte and Sapper may be easy to learn; and then once you've learned them, building basic features like those for a blog may be easy tasks; and finally wrapping your head around static site generation and a Netlify deploy may be simple once you've taken the time to read about it.

But add all those together, now you've got a pretty high barrier of entry, if all you're trying to do is to start a blog. You could start one on Wordpress, or another static site blog generator that's more popular like Hugo (written in go) or Jekyll (written in ruby)... or you could take your time and learn all of above about Svelte, and then pick Sapper. I think most people would avoid this last route, given the options.

However, what if you look at Jekyll's "Get up and running in seconds." tagline, see the 4 commands it takes to start a blog:

gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve
Enter fullscreen mode Exit fullscreen mode

And compare it to Miner, which also involves just 4 commands to start:

npx degit "bigicoin/miner#master" my-blog
cd my-blog
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Now you start to have competition. Now you're talking! That, at the end of the day, is what I'm trying to achieve.

Top comments (0)