Directus 9 CMS + Gridsome
How to create a Directus module which lets a user re-generate their site.
Directus is a headless CMS. It allows you to create a nice interface to data.
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?
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!
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.
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,
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:
Based on https://github.com/avatarbabe/gridsome-source-directus9, updated to work differently with images Based on…
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
Example for both can be found in the following repo:
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
Running your CMS
Have both your
/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.
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.