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.
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
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.
admin/index.js we need to simply import the netlify CMS
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
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
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.