Gridsome, Tailwind, & Forestry


Author: Rachel
November 6, 2019 | 4 mins to read

JAMstack sites have become increasingly popular lately for its speed, performance, and cost, particularly for blogs. Gridsome is a popular Vue.js powered framework for static site generation. Vuetify is a Material Design framework built with Vue that provides powerful reusable components, such as accordions, cards, and progress bars styled using Material Design. Combine the two and you have a very powerful component-packed statically generated application.

This is particularly useful for personal portfolios, blogs, and small business websites. The cost of deployment is free for most such use cases, so there's no ongoing hosting cost. You'll only need to worry about the occasional site update for maintenance.

Layer on a CMS like Netlify CMS or Forestry.io, and you can easily edit your own site with the right templates packs.

Gridsome

Gridsome makes it easy to bring in data from any CMS, markdown file, and other data sources, such as APIs, databases, etc. into a Vue.js application. It integrates seamlessly with various static web hosts and CDNs, such as Netlify, AWS Amplify, and Amazon S3, making deployment straightforward, easy, and potentially free, if you're under a certain traffic threshold.

Gridsome also abstracts data using GraphQL, allowing retrieval of only the data that's necessary for the page. It produces files that are optimized for speed by providing features such as asset optimization, progressive images, and link prefetching out of the box. It's also easy to make into a Progressive Web App (PWA), so that only the necessary HTML, CSS and Javascript load, while other pages are pre-fetched, allowing fast navigation and offline caching. Gridsome was built to be SEO-friendly, allowing search engines to crawl site content to provide a better SEO ranking before the Vue.js application is loaded.

Tailwind CSS

Tailwind CSS brands itself as a utility-first CSS framework for rapidly building custom designs. It provides building blocks, rather than built blocks. Unlike Vuetify, compared in this article, which provides a comprehensive library of components, Tailwind makes it easy to style your components, but you're ultimately implementing your own component functionality. This customization is great if you only need a few components, or want to design something that isn't quite what is offered by other frameworks.

While Tailwind is simple, it can be quite powerful for creating your own combination of styles, so you can reuse that fancy shadow box and gradient combo if you want to, but you don't have to remove it every time add in the component if you don't want it.

I used Tailwind CSS to create Meditating Dragon, my personal blog. It provided a simple and flexible option for styling. I'm not stuck using the same combination of styles for a component across pages if I don't want to. I didn't want or need the complexity of Vuetify, so Tailwind made it easy to style a new site and get it up and running quickly.

Forestry.io

Forestry is a Content Management System (CMS) that hooks into a git repository and allows you to edit the fields. It'll then commit any changes back to your repository.

This makes it easy to update fields and text information using a web interface, rather than relying on a text editor. It offers multiple users to access and edit content, allowing team collaboration, and enables full ownership/control of your own content/data.

Forestry.io is a great add-on to a static site generator like Gridsome, and it's free for up to 3 users (at the time of this writing.) For the latest pricing, check this page. Ultimately, it can be a cheaper long-term solution compared to hosting a Wordpress site.

Gridsome, Tailwind, Forestry Starter

In order to take advantage of the speed/performance of a static site generator and the flexible styles offered by Tailwind, I created a starter using Gridsome, Tailwind, and Forestry. I added Forestry to allow easy editing of content that may change on a regular basis. It's open source and can be found here.

It offers the following out of the box: Header/Footer, Navigation, Home Blog Post, Blog Page, About Page, and a Contact Page. The layout is fairly simple and offers plenty of room for customization and improvement.

Best Use Cases

This starter is great for developing a personal blog, portfolio site, about page, and basic business website. It's practically free if you can handle the edits yourself, and has a low customization cost if you need some design support.

While it's great for developers and designers, if you're a small business owner and don't want to tinker too much with the code, a more established CMS like Wordpress would be a better long-term option. I would recommend reviewing my article on First Website though to better understand whether this may be useful for you if you're in need of a website.

I also invite you to schedule a free consultation, and I'm happy to advise on the best solution based on your needs.