Gridsome – VueJS Static Website Generator

JavaScript

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, 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 Game 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.

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!

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.

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 .

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.

Deploying to Netlify

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!

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.

Gary Woodfine

Technical Director at Denizon
Gary is Technical Director at Denizon, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scalable in a way which helps them address and reduce their ecological impact.

Denizon's product line successfully integrate IoT, Artificial Intelligence and Blockchain technology to enable efficient, productive, secure and scalable solutions to help organisations address increasing energy demands, ecological impact and Health & Safety concerns of their staff.

Latest posts by Gary Woodfine (see all)