How to automate the build process so that on each Publish/Unpublish/update/delete content in Contenful will not need a gatsby build?

Question

Usually we have to execute gatsby build or gatsby develop in order to reflect the changes (made in the content at Contentful site), into our Gatsby site.

That can never be an acceptable solution, specially when there are multiple content writer, add or modifies content using the same Contentful account.

How to automate the build process so that every time someone Publish or Unpublish or Delete a content in the Contenful site; the Gatsby build will automatically happen and content on Gatsby site will automatically gets updated?

Answer 1

How to automate the build process so that everytime someone Publish/Unpublish content in the contenful site; the gatsby build will automatically happens and content on Gatsby site will automatically updated?

Ans: Make a CI pipeline to your Gatsby codebase on GitLab and establish a connection with Webhook on Contetful site.

-> How it works behind the scene:

1. A webhook gets executed by calling an endpoint in GitLab, which then
2. Triggers a GitLab CI pipeline, and the
3. GitLab CI builds our static website in Gatsby, and
4. Gastby application gets the updated content from the Contentful Delivery API.

-> Steps to achieve this purpose:

Step1: Setup a trigger URL in GitLab CI pipeline

i. Go to your gitLab repo [gitlab.com/<OrganizationName>/<RepositoryName>/tree/<BranchName>]  
ii. Add the .gitlab-ci.yml file

.gitlab-ci.yml

image: node:latest
cache:
    paths:
      - .cache/
      - ./node_modules
      - public/
pages:
    script:
      - npm install
      - ./node_modules/.bin/gatsby build --prefix.paths
    artifacts:
        paths:
         - public
        only:
         -gitlab-ci

Step2: Setup the Webhook URL

i. In the same gitlab page Click on "Settings"(link on the bottom of the left menu) -> CI/CD -> Pipeline Triggers -> Expand -> Enter Description as lets say 'Ips Gatsby Build' -> Add Trigger
ii. Now note the "Token" and the url[under the "User Webhook" s.a. https://gitlab.com/api/v4/projects/20273592/<BranchName>/trigger/pipeline?token=<Token>]

Step3: Setup the Gitlab Webhook in the Contentful

i. Go to Contentful CMS site -> Settings -> Webhook -> Add Webhook -> Insert the details as below
    a. Name:  Ips Gitlab CI Trigger
    b. URL:   POST  the URL from Step1
    c. Triggers: Select Specific triggering events
            Event publish unpublish
    d. Filters: EnvId(sys.environment.sys.id) equals master
    e. Content Type: application/x-www-form-uriencoded; charset=utf-8
    f. Payload: Use default Payload
    Now click on Save 

Step4: Test the "Build Automation" workflow