✨ Azimuth Gatsby Contentful Theme ✨

This Stackbit's "Azimuth" theme built with Gatsby theme powered by Contentful.

Click the button below to create a new website from this theme using Stackbit:

Quick Start 🏎

Create a site from this theme using Stackbit.

Stackbit will execute following steps for you

• Create a new GitHub repository with the contents of this repository.
• Create a new Contentful project.
• Create Netlify site connected to the GitHub repo
• Deploy the Netlify site.
• Create a Stackbit project that will allow you edit your website via on-page visual editing experience.

Additionally, Stackbit will connect all services together:

• Create a "commit" webhook in GitHub that will trigger Netlify deployment as soon as new commit is pushed to GitHub.
• Create a "publish" webhook in Contentful that will trigger Netlify deployment as soon as content is published in Contentful.

Editing Content 📝

Once Stackbit creates a site, you can start editing the content using the free on-page editing experience provided by the Stackbit Studio.

Here's a few resources to get you started:

• 📺   Editing Content
• 📺   Adding, Reordering and Deleting Items
• 📺   Collaboration
• 📺   Publishing
• 📚   Stackbit Documentation

If you need a hand, make sure to check the Stackbit support page.

Develop Locally

1. Create a site from this theme using Stackbit.

2. Stackbit will create a new GitHub repository, a Contentful project, and deploy the site via the selected serverless deployment platform (e.g., Netlify).

3. Once finished, you will be redirected to Stackbit Studio where you will be able to edit the content using the free on-page editing experience, and publish new versions of your site

4. To develop your site locally, clone the generated repository.

5. Install npm dependencies:

    npm install
   

6. Set the following environment variables locally.

   • CONTENTFUL_SPACE_ID - Contentful Space ID. You can acquire the space ID from Contentful's app URL: https://app.contentful.com/spaces/<SPACE_ID>.
   • CONTENTFUL_ACCESS_TOKEN - Content Delivery API - access token. You can acquire from Contentful's app in API Key's section - "Settings" => "API Keys" => "Content delivery / preview tokens" => "Add API Key" or pick one Stackbit generated for you.

7. Start the Gatsby local development server (run from project root):

    npm run develop
   

8. Open http://localhost:8000/ in the browser. You can now edit the site contents, and the browser will live-update your changes. 🎉

Building for production 🏗

To build a static site for production, run the following command

npm run build

The exported site will be written to the public folder. The contents of this folder can be deployed by serverless deployment platform such as Netlify.

Contributing 🙏

To contribute to this theme please follow the following steps:

1. Clone this repository locally

2. Create a new Space in Contentful

3. Create new Contentful Personal Access Tokens here

4. Install dependencies

    npm install
   

5. Import Contentful data stored in contentful/export.json to the new space by running the following command. Replace the <management_token> placeholder with your Personal Access Token and the <space_id> placeholder with the new space ID.

   ./contentful/import.js <management_token> <space_id>

6. Create "Content Delivery API - Access Token" via Contentful app "Settings" => "API Keys" => "Content delivery / preview tokens" => "Add API Key".

7. Define following environment variables to allow Gatsby to fetch the content from Contentful when developing or building the site. Replace {SPACE_ID} with your Space ID and {CDA} with the mew Content Delivery API - access token.

   export CONTENTFUL_SPACE_ID={SPACE_ID}
   export CONTENTFUL_ACCESS_TOKEN={CDA}
   

8. Lastly, run the development server (from project folder):

    npm run develop
   

   Navigate to http://localhost:8000 to see the site. Update site code, and the content in Contentful.

9. Once you finish updating the code and contents, export the contents back to the contentful/export.json file by running the following command. Replace the <management_token> placeholder with your Personal Access Token and the <space_id> placeholder with the new space ID.

   ./contentful/export.js <management_token> <space_id>

10. Commit, push and submit a pull-request 🎉

Learn More 📚

To learn more about Stackbit, take a look at the following resources:

• Stackbit Documentation
• Configure your theme using stackbit.yaml

To learn more about Gatsby, take a look at the following resources:

• Gatsby Documentation - learn about Gatsby features and API.

To learn more about Contentful, take a look at the following resources:

• Contentful Docs
• Importing and exporting content with the Contentful CLI

To learn more about Netlify, take a look at the following resources:

• Netlify Docs