Directus 9 CMS + Gridsome
How to create a Directus module which lets a user re-generate their site.
The what?
Directus is a headless CMS. It allows you to create a nice interface to data.
Gridsome is a static site generator. It takes data ie from GraphQL, and generates HTML which can be served a service like S3 or Netlify for cheap, with maximum uptime.
I will explain how to get these tools to work nicely together, to have a website any user can edit / publish.
Why these specific tools?
I have been a Vue / Node developer for some time now, and wanted tools that use these technologies in case I needed to work on their code. Turns out I did.
Why would you want a static site generator? Because you are likely to make changes to your website a lot less often than a user will view it. Having a static site, rather than loading data from a database on every page view, means it’s fast, and cheap to host. It’s also not going to get hacked!
The problem
As a developer it was easy enough to work with these tools:
- Edit some information in Directus
- Run Gridsome from the command line to create static site
- Upload new site to S3 (and CloudFront invalidation)
But the power of a CMS should be that anyone with access can update the the site, not just a developer.
The solution
What we want
What we want is a way for a user to be able to publish a site, and hopefully a staging site as well, from the Directus interface. As an example:
- User goes to
https://cms.mysite.com— logs in, and changes information. - They then click a deploy button in Directus which does generation, upload to S3, and invalidation.
- Doing this as a stage step will let them see it at
https://stage.mysite.combefore they deploy it to the real site,https://mysite.com
Getting Gridsome to read data from Directus
Grisome has many source plugins, including for Directus. Directus 9 is currently quite new, and is still in development though.
To get the data, and images assets, from Directus I ended up writing my own plugin, based on this great work. You can download it here:
Note this needs a lot of work before it is easy to use. Hopefully a nicer solution is created once Directus 9 reaches a stable point.
Directus Modules / Endpoints
We have the directory structure set up something like this:
To add some UI to Directus you have to create a Custom Module. This is written in Vue, and thus needs to be compiled.
To add a custom endpoint to Directus, which we use for both getting data about deployments, and doing the build / deploy, you add a file in cms/extensions/endpoints/
Example for both can be found in the following repo:
Running your CMS
Have both your /cms and /gridsome directories uploaded to a server. Make sure that the server starts the CMS when it starts with something like:
cd ./cms && node ./node_modules/.bin/directus start
If your server is set up correctly you should then be able to access your CMS.
Conclusion
Hopefully this is helpful and gets you started. This may not be the best solution to the problem, but it should work for you with some code tweaks.
