Gridsome – Explore plugins to make life easy

The weather in the UK, has been particularly bad in the UK for 2020, with fairly frequent storms which seem to predominantly hit over the weekend. Which has resulted in the family spending a lot of time sitting around the house for the weekend searching for things to do. So naturally following on from my previous post on Gridsome – VueJS Static Website Generator, my daughter thought it would be a great idea to see if we could further expand on her idea for blog!

We discussed what she would like to implement, and the following was her list of requirements

• Custom theme
• Content Management System to easily add new content

So we set about how to implement these in the website we previously set up.

https://github.com/garywoodfine/geekiam

Configuring Gridsome with TailwindCSS

We wanted to be able to build and fiddle with the site to develop our own theme as we go. Up until now we were making use of the default out the box theme for Gridsome.

I have recently been taking note of the buzz on twitter around a new CSS Framework called TailWindCSS but I haven't had much opportunity to try it out and explore it. I thought this would be a great opportunity to take a peak.

Initially I started reading the documentation to work out how to integrate within our project. However, I thought I would check the Gridsome Plugin directory to see if this problem had already been solved and indeed there is already the gridsome-plugin-tailwindcss which really simplified the whole process!

Once the install completed, just update the gridsome.config.js in order to make use of the plugin.

When making use of TailwindCSS you are able to define custom settings etc, by making use of an additional Tailwind Configuration file, However for our purposes we're just going to use the default styles that ship with Tailwind, so in order to do this we literally have to do nothing!

All this has already been configured because the plugin automatically imports the default tailwind.css file from the Tailwind npm package.

We will also add a new css directory and main.css to our assets directory add the following imports to our css file

We could now go ahead and create our custom Site Header that would comprise a natty 5 minute designed logo! I'm not much of a graphic designer and my limitation to Graphic Design packages comprises mostly of Gimp and creating really simple images etc.

Add a new file to components folder which we'll call SiteHeader.vue then we added the following code

Once this was complete we could update our Default.vue in our layouts directory to include our new header file and to start refactoring our design. In our Example we are going to remove the inline styles that are shipped with the default Gridsome template so we can start making use of the TailwindCSS styles etc.

At this point this is where we will stop with the gradual redesign of our website. Primarily because for us to continue we really wanted to start defining our Content Management System which will also enable to start building some additional components we need for our theme and enable easily adding additional content.

Adding the Netlify CMS

When we started our initial project, we decided to make use of Netlify  cloud computing that offers hosting and serverless backend services for static websites and I previously detailed how easy it was to set up CI/CD pipeline to help ease our development.

For this project, I thought I would also take a look at how to make use netlifyCMS the open source content management for Git workflow.

Netlify CMS enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

Getting this all configured and set up with Gridsome was really easy, because there is a really handy plugin that has been developed, gridsome-plugin-netlify-cms, which is quite well documented to help you get up and running quite quickly.

Installing the plugin was quite simple

Then we need to update gridsome.config.js to include and use our new plugin, which is essentially the JavaScript Module Pattern utilising functions and closures that hides it state and implementation, which eliminates the use of global variables helping to mitigate one of JavaScripts worst features. Which is one of the great features I like about Gridsome because it helps developers concentrate on functionality while guiding them in the use of great patterns and practices.

You'll notice we included an /admin as a public path. We need to create the admin directory in our src directory which is going to contain 3 additional files that will enable our CMS to function. config.yml, index.html and index.js.

A more detailed discussion and the finer points can be found by reviewing the Netlify CMS - Add to your site documentation . I will just discuss any Gridsome specific points further, but once completed our structure is now going to look like this.

Once we have created the files we just need to add some minor content make them work.

In the admin/index.js we need to simply import the netlify CMS

In the admin/index.html we add the following code

These are basic edits just to enable the CMS.

We are now ready to start making some of the most important edits to enable the CMS. We will be using the CMS to generate and edit Markdown files for the site content. When the these files are saved the will commited to our Source Repo which will trigger the CI/CD pipeline to redeploy our site.

The next couple of steps are crucial to making the whole process work. If you are, as in our case making use of Github as your source control repo, then it is well worth taking the time to read the documentation on netlify CMS on Authentication backends and specifically on Github backend to walk you through how to configure authentication for your CMS.

I won't duplicate the detail here, due in part that the documentation is great as it is and also the risk that it may change over time. On the whole it is super simple and I never had trouble following along. Netlify CMS also detail how to connect authentication making use of GitLab, Git Gateway and BitBucket among other popular vendors.

Once you have successfully configured the authentication for your CMS then you can update the admin/config.yml with the following information.

At this stage we committed our changes to Github and verified our build was successful. You will then be able to access your CMS system by navigating to the directory on your url. i.e. https://geekiam.co.uk/admin and after successfully logging making use of whichever Authentication Client you chose. You can now start to add content.

As you'll notice the top part of the file we stipulate the backend details of our CMS and our Repo address.

The next point we address is to enable Netlify CMS upload images directly within the editor. For this to work, the CMS needs to know where to store them. In our case we're going to upload them to folder in our static directory called uploads

We will also create the Collection for which we are going to use to store our posts and configure the fields we would like to use. Further details can be found Netlify CMS - Add to your site

Click on the New Posts button will take us to the content editing screen

Conclusion

In a matter of an hour or so of tinkering around and learning we were able to add some pretty advanced features to our simple website project to assist us greatly in the future.

We were successfully able to add a highly customisable CSS framework and a Content Management system. In the next follow up tutorial we will then look at how to make use of these to further extend the functionality, look and feel and User Experience of our website making use of Gridsome and VueJS.