I'm online!

Recently I decided to build my personal website. I wanted to have a place to display info about my work and to write some blog posts about web development, photography, and whatever else I would find worth sharing. But also to have a place for experimenting with static site generators, Headless CMS's, and VueJS.

Why Gridsome?

I had to choose between countless options of frameworks and CMS platforms. In the end, the decision fell on to Gridsome, a static site generator based on VueJS. It's a framework that:

is well documented
is rich with awesome features (progressive images, lazy loading of links, GraphQL data ...) and has bunch of plugins
works well with headless CMS's
needs no complicated hosting or DB management
generates static pages, therefore the speed and security are at a high level
is SEO friendly

Why not Gatsby?

Yes, there is also a lot of talk about Gatsby, another awesome framework for static site generators. It is really good, and on Gridsome's website, it is even stated that Gridsome is heavily inspired by Gatsby. The thing is that Gatsby relies on ReactJS, and at the moment I feel more comfortable using VueJS rather then React. Gridsome has anyway similar features as Gatsby.

The learning curve for Gridsome is not quite steep, but using it, in general, demands a good knowledge of Javascript, HTML, CSS, VueJS, and GraphQL.

Managing content

As my data source, I have used Contentful headless cms. It is free to use for one project and it is straightforward easy to model the data to suit the needs of Gridsome. There is already a plugin available for Gridsome to receive the data and load it into GraphQL.

Hosting

For my hosting, I have used Netlify, which again offers a free tier for smaller projects and personal use. Since all the code was stored on GitHub, it was very easy to set up automatic deployment on Netlify. After every commit to the selected branch on the GitHub repo, Netlify automatically starts deploying the new version of my website. Deploying of the website is also triggered with each content change in Contentful CMS. That part works with setting up webhooks in Netlify and then using them in Contentful. Setting up a domain on Netlify is also a matter of few clicks.

Forms and comments

For static sites, the issue can be when you want to create some kind of interaction with a visitor. In my case, I wanted to have a contact form and also the possibility of commenting on my blog posts. Here again, there are rather simple solutions that don't cost a dime. For comments, I have used a Disqus plugin for Gridsome, and for the contact form Formspree snippet. Both work pretty well.

Conclusion

Initial results, after doing a few tests in Chrome Lighthouse, are quite satisfactory. The site loads in less than 2 seconds and all the relevant rates are above 90, which is not bad at all. Of course, there is not much content on the website at the moment, but still, I am assured that those rates won't change a lot in the future, because Gridsome is designed to perform well, and there are still some SEO optimizations for me to do. All in all, Gridsome, I think this is the beginning of a beautiful friendship!