Build a simple website with Gatsby
This guide will walk you through setting up Portway as an easy-to-use headless CMS and adding your Portway data to a simple Gatsby website.
Setting up your local development environment
Clone the Portway example website repo
Run the following commands in your terminal:
$ git clone https://github.com/portway/portway-example-website.git $ cd portway-example-website $ npm install $ cp example.env .env
Setup a Portway project
- Create a Portway project for website content
- Name your project (this will be the title of your website)
- Navigate to the Project Settings page and choose the "API Keys" from the menu
- Select "Add Project Key" and give your key a name, such as "Portway Gatsby Website Key." Make sure your key has the "Reader" role so it can only read data from your project.
- Copy the key and in your
.envfile you created earlier, add the value to
- Now add the
.envfile as well. You can find the project id by looking at the url in Portway when you're viewing the project. You will see a url like
https://portway.app/d/project/44, the number after
project/is the project ID.
Create some pages
To create a page for your website, make a new document in your Portway project. Any text and images you add to this document will get translated to HTML and added to your site. If you want to add an author name to the post, add a string field and name it
author-name. If you want an author avatar, create an image field and name it
author-avatar. When you're finished with your documents, don't forget to publish each one.
Run the Portway website generator app
You should now be able to run the Gatsby server to pull down data from your Portway project and display it on your site.
To create a preview of your site on your local machine run:
npx gatsby develop
Now, after the gatsby site is done building, go to http://localhost:8000 in your browser and check out your posts!
Automate your deployment with webhooks!
With webhooks, you can easily automate your Gatsby build and deployment on hosting platforms such as Netlify. Check out the Netlify Build Hook Docs to create a build hook, then enter that hook url in Portway as a webhook. Once you enable this webhook on your Portway project, publishing a document will trigger a new build and deployment of your site with the updated changes.