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 Content Management System (CMS) like Netlify CMS or Forestry.io, and you can easily edit your own site with the right templates packs.
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 Content Delivery Networks (CDN), such as Netlify, AWS Amplify, and Amazon S3, making deployment straightforward, easy, and potentially free, if you're under a certain traffic threshold.
Vuetify is a comprehensive Material Design Component Framework, built with Vue. It provides a lot of common components found in modern web applications. It also speeds up development for complex websites.
It works well with other frameworks, such as Electron (for desktop application development), and Cordova (for mobile app development). Themes are easy to define, allowing seamless conversion of theme colors to match a specific brand. It also supports accessibility and internationalization.
Common components include: Alert windows, Avatars, Badges, Banners, Navigation Bars, Buttons, Calendars, Chips, Dialog Windows, Expansion Panels, Form Styles/Layouts, Menus, Lists, Paginations, Parallax, Tabs, Steppers, Timelines, and much more! For a comprehensive list of all the components, check our their documentation.
Gridsome + Vuetify Starter
In order to take advantage of the speed/performance of a static site generator and the comprehensive component library offered by Vuetify, I've created a starter using Gridsome and Vuetify components. 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.