Strapi & Gridsome : how I manage these together

If you have not read it yet, have a look to @roozeec/studying-and-implementing-jamstack-for-static-site-generation where I introduce Strapi and gridsome to generate a static web site.

Now in this post, I will show you how I manage my website with these 2 tools.

Let's see the structure of the directories :

I have one directory for each tool : strapi and gridsome. Both are in the top directory GranitRose project

Here are the constraints I found during development :

• Images must have same height and width for my posts
• Strapi is on my local pc, so not available from remote tools such as netlify, so I need to generate a json file for all my articles.
• The images are managed by strapi tools, so I need to copy them to a jamstack tool gridsome directory in order to make them available for webpages.

One first thing is to locate the database file for strapi. For this I set up a .env file to define the DATABASE_FILENAME variable :

HOST=0.0.0.0
PORT=1337
DATABASE_FILENAME='./database/granitrose.db'

Here are the different steps to create a post. I'm working under Linux.

1. Create a screenshot of the vidéo

To have an image available for the post, I need get a screenshot. Do do this, I go on the video url, then use a screenshot tool. Personally, I use fireshot , a chrome extension.

1. Resize the image

mogrify -format png -path ./resized -resize "650x400<" -gravity center -extent 650x400 phare-ploum-exclu.png 

Here my original image is phare-ploum-exclu.png and the resized image will be with the same name in resized directory

1. Start the strapi tool

For this, I launch the npm command to start the server in strapi directory

npm run develop

As you can see there is 2 urls available :

• http://localhost:1337/admin : the administration panel
• http://localhost:1337 : the server to access data with API

1. Write the post

Now, it is time to write the post. My database has already be defined before with the fields I need for my posts :

1. Get the Posts JSON file

Once the post created, I grab the json file from my gridsome tool directory with the following command :

wget -O granitrose.json http://localhost:1337/Articles

This file is loaded with gridsome with a specific config in the file gridsome.server.js

1. Copy the images from strapi to gridsome

Gridsome needs also the images in order to generate the posts, so I copy these files from the uploads directory on strapi to uploads directory on gridsome in static/assets directory

cd /data/DEVWEB/GranitRose/gridsome/static/assets && rsync -avz ../../../strapi/public/uploads/* ./uploads/ && cd -

1. Build the code

Now it is time to build the code with the command :

gridsome build

Everything should be ok now. The website is in the dist directory on gridsome

You could load the site with your favorite browser by opening the index.html file

That's all ! 🙂
Thanks for reading
Keep safe.