Gatsby allows for the creation of static sites in a simple, straightforward manner. In this tutorial, we will show you how to create a Gatsby project and deploy it to IPFS thanks to Fleek.
Creating a Gatsby Project
Let’s start by installing the Gatsby CLI.
npm i -g gatsby-cli
Now we can create a Gatsby project.
Gatsby new name_of_project
This will create a new sample gatsby project which can be modified according to your needs. You can run npm run develop
to see the page in the browser by going to http://localhost:8000.
For now, let’s make some changes to the basic starter site.
Beautiful!
Deploying Through Fleek
We must create a GitHub repository to store our site so Fleek can pick it up. For this tutorial, we will use the following repo: https://github.com/SamueleA/gatsby-fleek
Now, we must log to Fleek and add a new site.
We select the GitHub repo containing the Gatsby project.
Fleek will determine which build settings to use. It has automatically detected the Gatsby framework and filled the docker image with fleek/gatsby
. This image has Gatsby installed with the latest node.js version. However, my gatsby app requires node 11, therefore I changed the docker image to fleek/gatsby:node-11
.
Click on “DEPLOY SITE” to proceed to the next step.
You will be redirected to the site’s page. We must now wait for the site to be built and deployed.
Once the deployment is over the site can be accessed and shared. For this tutorial, the site can be seen here: https://aged-paper-1829.on.fleek.co/
Note: You might run into pathing issues if you try to view the site through an IPFS gateway which has the IPFS hash in the url path. EG: ipfs.io/ipfs/qm…
The simple solution for this is to use a Gatsby plugin.
Explore more
… and that’s it! Deploying a Gatsby site to Fleek is quick and easy.
As mentioned previously, Gatsby is very useful, among other things, for blog creation. In the documentation section at the bottom of this post, we have left some links to learn more about this aspect and what other features Gatsby has to offer.
Once you are done, come back to Fleek to share your work!