Build a simple website with Gatsby

Intro

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

  1. Create a Portway project for website content
  2. Name your project (this will be the title of your website)
  3. Navigate to the Project Settings page and choose the "API Keys" from the menu
  4. 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.
  5. Copy the key and in your .env file you created earlier, add the value to PORTWAY_KEY=key
  6. Now add the PORTWAY_PROJECT_ID=projectId to the .env file 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!

In October we added webhooks to Portway. This means you can easily automate your Gatsby build on hosting platforms such as Netlify. Once you enable a webhook on your Portway project, publishing a document will trigger a new build of your site to reflect your changes.