Strapi Legacy Gatsby Blog

screenshot of Strapi Legacy Gatsby Blog
gatsby
react

Strapi Starter Gatsby Blog

Overview:

The Strapi Starter Gatsby Blog is a repository that allows users to create a blog using Strapi and Gatsby. It is fully customizable and open source, making it open to contributions. The repository provides instructions on how to deploy the backend on Heroku and Cloudinary, and how to deploy the frontend on Netlify, Gatsby Cloud, and Vercel. It includes features such as 2 content types (Article and Category), responsive design using UIkit, and multiple pages for displaying articles and categories.

Features:

  • Customizable Blog: Users can customize all aspects of the blog to suit their needs.
  • Open Source: The repository is open source, allowing users to contribute and add new features.
  • Content Types: Two content types are available - Article and Category.
  • Responsive Design: The blog has a responsive design using UIkit.
  • Multiple Pages: There are multiple pages available, including a home page that displays all articles, an article page that displays a single article, and a category page that displays articles based on the selected category.

Deploying the Backend:

  1. Create a free Heroku account.
  2. Create a free Cloudinary account.
  3. Click on the "Deploy" button to deploy the Strapi instance.
  4. Once deployed, configure the necessary settings in the Strapi admin panel.

Deploying the Frontend:

On Netlify:

  1. Create a free Netlify account.
  2. Add the URL of your Heroku instance (without the trailing slash) as a parameter to the given URL.
  3. Visit the URL to deploy your application on Netlify.

On Vercel:

This feature is coming soon and instructions will be provided once available.

On Gatsby Cloud:

  1. Fork the Strapi Starter Gatsby Blog repository to your own Github account.
  2. Create a new site on Gatsby Cloud, choosing the option "I already have a Gatsby site".
  3. Select the forked repository as the repository to use and specify the Gatsby project folder (frontend).
  4. Copy the webhook URL provided.
  5. Paste your Strapi API_URL for both Builds Environment variables and Preview Environment variables.
  6. Create a Webhook on your Strapi server by going to the Strapi admin panel and navigating to /admin/settings/webhooks.
  7. Create a new Webhook with the following properties:
    • Name: Gatsby Cloud
    • URL: The first Webhook URL provided by Gatsby Cloud in the Gatsby Dashboard Sites. It should be something like this: https://webhook.gatsbyjs.com/hooks/data_source/ (without the /publish/).
    • Check every Events for Entry and Media.

Getting started:

Backend:

Refer to the full instructions provided in the repository for setting up the backend.

Frontend:

Start the frontend server by running the command:

gatsby develop

The Gatsby server will be running at http://localhost:8000.

Enjoy using this starter and customize it according to your needs!

Summary:

The Strapi Starter Gatsby Blog is an open source repository that allows users to create a customizable blog using Strapi and Gatsby. It provides features such as customizable blog design, multiple content types, and responsive UI. The installation process involves deploying the backend on Heroku and Cloudinary, and the frontend on platforms like Netlify or Gatsby Cloud. Users can follow the provided instructions to set up their own blog and customize it according to their requirements.

gatsby
Gatsby

GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components