Gridsome – Getting started with Static Website Generator

November 2019 has been a particularly rain sodden month, even for the UK. Parts of the northern parts of the UK have particularly affected with flooding. However, in the South West England, where I am based its just been raining.

It was on a particularly rain drenched Saturday morning, the family were trapped in doors and we were all just sitting around doing whatever to take our minds of the boredom.

I was sat typing some blog posts, when my 8 year old daughter asked me what I was doing. Most parents, will know when an 8 year old, starts a question there is bound to be another 100 to follow. Therefore, it started the dreaded 8 year old interrogation when I foolishly responded that I was typing up a blog post!

As one might guess, the questioning was much along the lines of Simon Sineks – Start with Why: How Great Leaders Inspire Everyone to Take Action !

I can’t remember the how, but somewhere in the haze of all the Why’s I found myself starting a new side project, in assisting my daughter in starting a Kids Toys, Computer Game and Books Review blog!

She’s the gamer of the family, and loves playing and types of games from Board games to video games. When I introduced the concept, of all the technology behind blogging and that people from all over the world could read your stuff. She was hooked, all of sudden I could see the lights switch on as she made the connection to why she was spending all that time in school learning to read and write!

Content Generation

It was when I told her, that people make websites and blogs from all sorts of interests and hobbies, that she asked if people made websites about games and stuff. When I showed her some examples of Video Game review sites, she decided she wanted to do it!

I made her a deal that if she would write a game review, I would create a blog for her! Well I was surprised when she fired up the family Asus Chromebook Flip and started furiously typing away! – ( Well as much as an 8 year old can furiously type away)

She became consumed by writing, spending at least an hour or more dedicated to the task!

The least I could was create a website for her efforts! So I started exploring some options. To see what we could do together.

What are Static Website Generators

Typically, for any blog type project I would just recommend to most people to use WordPress, TSO Host WordPress Hosting and be done with it. However, for this particular project I felt that this would probably be way too much, and if I was going to involved in this, I wanted to take the opportunity to learn something new myself.

During the week I read an article on Gridsome – A Vue.js framework for static websites and more! and thought I sounded pretty cool! I had also read about Netlify and the JAMStack and decided that this might be a chance to further explore and play with these options.

There are a number of static website generators available these days, of which Gatsby seems to be a favourite in the community. My only issue with Gatsby, is that it mainly targets React and I really don’t like React, it’s just one of those tools that everybody is using because everybody is using it. I use it if I get paid to use it, but if I have a choice I’d rather not use it!

Static Site Generators are a new, hybrid approach to web development that allows you to build a powerful, website locally on your computer but pre-builds the site into static files for deployment.

I thought I would give Gridsome a whirl, based on the fact it is based on Vue.JS which is a framework I do like to use.

What is the JAMStack


The JAM stack stands for :
* JavaScript
* APIs
* (pre-rendered) Markup

There is no dependency on a Web Server

What is Gridsome

Gridsome is a Vue-powered static site generator for building blazing fast static websites. It is data-driven meaning it uses a GraphQL layer to get data from different sources in order to dynamically generate pages from it.

Gridsome is the Vue alternative to Gatsby for React.js.

Why Gridsome

Gridsome ships with a lot of great features that makes building a static site with Gridsome a great choice.

Features included:

  • Hot-reloading development – Changes in real-time while developing.
  • Vue.js for front-end – Ultra lightweight and approachable front-end framework.
  • GraphQL data layer – Centralized data management for all your data.
  • Automatic page routing – Quickly create and manage pages with files.
  • Progressive image support – Auto resize, optimize & lazy load images.
  • Auto page prefetching – Pages are loaded in the background for fast browsing.
  • Auto optimized code – Get code-splitting and asset optimization out-of-the-box.
  • Fast static page generating – Deploy securely and fast to any Static Web Host.
  • Data source plugins – Add data from popular Headless CMSs, APIs or Markdown-files.

How Gridsome Works

Gridsome is a website framework that enables creating and developing fast blazing static sites fetching data from data sources like CMS’s, local files or external APIs and store the data in a local database.

GraphQL acts as a centralized data management system that manages the data and gives you the ability to extract and use data within your vue components.

Gridsome provides a command gridsome develop that starts the local server with hot-reloading and a GraphQL data layer. And for production, the gridsome build command prepares the site for production by bundling and generating HTML files that can be hosted and deployed to any global CDN or FTP.

Installing Gridsome

Girdsome is super simple to install and is available via either npm or yarn:

Shell

Once installed creating a new project is super simple. The website we’re going to create is geekiam.co.uk, which my daugther has decided is going to have Game and Toy Reviews.

So we used the Gridsome CLI to generate the project.

Shell

Once the project was created and some basic edits I created a GitHub repository for version control .

Understanding the Gridsome File Structure

Once your project has been generated, you’ll notice your Gridsome project has a number of files to help you develop a lot faster.

Shell

  • package.json – This is where all the dependencies for the project will be stored.
  • gridsome.config.js – This file serves as a configuration file for the gridsome site where you configure plugins.
  • gridsome.server.js: This file is optional and is used to hook into various parts of the Gridsome server.
  • /src directory: This folder is where most of the code lives, we have:
    • main.js – This file contains the application configuration such that it plugs in other parts of the app into the gridsome API.
    • Layouts/ – Layout components are used to wrap pages and templates. The layout component is located in the src/layouts folder and should be indicated as the global component. It also requires a slot component which inserts the content of pages and template components into the layout.
    • Pages/ – The pages are individual components, every component in the pages directory becomes a page on the website. Each page will get its path based on the .vue file location. i.e src/pages/Index.vue will become the homepage and src/pages/about will be rendered as the about page.
    • Templates/ – Templates are used for single post views to GraphQL collections. To add a template create .vue file with the same name as a GraphQL collection to src/templates.
  • /static directory: This directory can be used to store files that will be copied directly to the dist/ folder after the build for example /static/robot.txt.

Deploying Gridsome

I know this sounds counter-intuitive but I really wanted to sort out the deployment of the site before we spent too much time developing it. The boss (daughter) wanted to see the website up and running. If you have an 8 year old in the house, you’ll be acutely aware that patience is not a virtue they possess and when you tell them you’ve created a website they want to see it on the web in that same instant.

I therefore needed to implement a robust CI/CD process in order to satisfy the impatient management. It was with this in mind that I turned to netlify because, if you would forgive the pun, they make implementing a CI/CD pipeline child’s play!

What is netlify

 Netlify is a web hosting infrastructure and automation technology company based in San Francisco. What’s cool is that JAMstack was initially brought to life by Netlify’s Co-founder, Mathias Biilmann. Netlify provides next-generation web hosting and automation that’s very affordable. They also offer web hosting infrastructure for JAMstack websites.  

Netlify works by connecting to your GitHub repository to pull your source code, then it typically runs a build process to pre-render all of your pages in static HTML. The resulting HTML, CSS, and JS are then deployed and distributed across a large number of content delivery networks. When a visitor tries to access your website, it automatically chooses the data center closest to you and serves you the static files.  

Deploying to Netlify

For our simple project the Free Plan was more than adequate and it provides the ability to create a deployment process straight from your Git Hub repo.

In our case, we already had an old domain of mine which I had registered a few years ago and which was the original title of my blog before I opted for the vanity with my name. If I hadn’t already of had a domain,you can Get your own address on the web with Namecheap, who incidentally are running a promotion to help you Save big on your kid’s first domain name!

I simply created a Netlify account by registering with my Github account then we registered our domain name with and configured the DNS to point to netlify. This was probably the most cumbersome process of the afternoon!

Once we had all the formalities configured it was a simple process of going into the build and deploy tab of the netlify settings for the website.

Once configured it really a simple process of commit your changes to the repository and in a couple of minutes they are automatically deployed to the website.

Publishing

For the initial version of the website and to try and curb the excitement of my daughter who could wait for her little article to be published on the internet! We just copy and pasted the content she had created into the index.vue file. Committed the changes to the repository and waited for the magic to happen.

Summary

We realize that we are not going to win any design awards and probably Pulitzer prizes for the content are not going to come anytime soon, but we did manage to have some fun on a cold and rainy November Saturday afternoon collaborating on this little project.

Personally, it was great fund spending time teaching my daughter about tech and blogging and it has definitely ignited something in her imagination and her inner entrepreneur as she has another 2 articles in process and a whole bunch of ideas she would like to implement on the site.

In the follow up Gridsome –Explore Plugins to make life easy we’ll take a look at how to integrate Tailwind CSS an open source highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Along with the implementing Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. 

Latest posts by Gary Woodfine (see all)