Why I choose Gridsome as My Static Site Generator?

May 26, 2019 ·  3 min read

background

Gridsome is a VueJS powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. It is highly inspired by Gatsby which is based on React. There are many features which are built into this project that makes a developer life much easier and more productive.

Requirements And Options

For a long time, I have been in search for a cost effective way to host webistes which doesnnot need much dynamic server side scripting. I don't want to manage servers and databases that can prone to security risks as well as cost to time. Also with CMS that uses databases usually need more optimisations and it has its speed limitation when need to query especially when caching won't work. Ofcourse, the good thing is you will get serverside dynamic rendering but for my case it is not much needed. I can simply use basic front end stuffs such as HTML, Javascript, CSS and its related libraries to build a site. But then there is an issue of managing it. I will miss out some awesome CMS features such as Custom post types, templating, layouting, optimizing etc and I don't want to lose that. What I need is I just need to focus on contents rather than styling and layout but at the same time, I must have an ability to manage these things quickly like in a CMS. fortunatley our front end technology evolves to built front end frameworks such as React, Vue, Angular and so many. And the based on that we now have powerful Static Site Generators such as Gatsby, Hugo, Jekyll, Next etc.

I have learned VueJS already and it is really good and easy to learn. Basically I like its more isolated syntac for HTML and Javascript unlike React which uses JSX syntax. Afore mentioned popular generators are mostly based on other frameworks but for vue we have Nuxt which is really skelton that cannot be compared with things such as Gatsby. Gatsby is famous for its unique integration ability with multiple sources using GraphQL layer. After a research I have learned about Gridsome which is inspired from Gatsby that has similar features but this time it is VueJS!

Gridsome Features?

  • Local development with hot-reloading - See code changes in real-time.
  • Data source plugins - Use to integrate any popular Headless CMSs, APIs or Markdown-files.
  • File-based page routing - Quickly create and manage routes with files.
  • Centralized data managment - Pull data into a local, unified GraphQL data layer.
  • Vue.js for frontend - A lightweight and approachable front-end framework.
  • Auto-optimized code - Get code-splitting and asset optimization out-of-the-box.
  • Static files generation - Deploy securely to any CDN or static web host.

The Solution

So after a long research comparing, testing and analysing different VueJS options such as VuePress, I have finally arrived at a decision to build this website on Gridsome considering the easiness and comfort I felt while developing and also experimenting above features that it offersright now. It was really a nice experience to learn and build although there were many hurdles in the development process. But everying time I was able to find a solution or a workaround. That helped to understand more about the Grdisome and its architecture. One major issue was to integrate form as you now probably now there is no backend to this site to process a form submission.

Gridsome provide me a real management power similar to a CMS but in a cost effective way without having to worry about managing a backend. Its future looks promising to me as I am seeing a good increment in its fanbase and users. Even if we search on Google for a VueJS based static site generators, most times this one comes first. community behind this project is working hard to bring latest technologies and features to it. My Kudos to the team.