Use Content from Headless CMS API?

21

I’m using Netlify and Netlify Identity for handling the CMS part.

Code

Add a /static/admin/config.yml file:

backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

publish_mode: editorial_workflow

# These lines should *not* be indented
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

collections:
  - name: "pages" # Used in routes, e.g., /admin/collections/blog
    label: "Pages" # Used in the UI
    folder: "content/" # depending on how you have this setup it may be like `content/pages`
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - { label: "Layout", name: "layout", widget: "hidden", default: "page" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Body", name: "body", widget: "markdown" }

and a /static/admin/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example using NetlifyCMS</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

Then, enable Netlify Identity for the site in the Netlify dashboard. Add an email to use for testing and/or editing.

open localhost:1111/admin/index.html and input your domain. It should work!

1 Like
22

Thanks, this should be helpful! I am going to start with this then slowly squirm my way out of their services.

Still, most certainly open to spinning up a flutter solution moc/prototype if there is sufficient interest.

1 Like
23

I’m coming here for the same thing. I am interested in utilizing Zola for a media website, which currently runs as follows:

  1. User visits domain.com/{slug}

  2. Netlify re-routes that to a function, which makes an API call for a blog post where post_slug: {slug} and processes the content into an HTML response

  3. The function returns HTML for the post and loads the page.

Like @Xevion, I’m interested in:

I want to build my pages based on data stored in a database. So I’d fetch the data from an API during compilation, then create my pages based on it. In my case I have an API where clients are able post, update and delete articles. And I want to be able to build a Zola site based on that data every X minutes, or on demand.

I’m also interested a page structure/templating solution, where I can define a route or collection like domain.com/page/{slug} to have content like:

<html>
<body>
{{ post(slug="slug") }}
</div>
</body>
</html>

^ I imagine the latter could actually work with Zola right now, where a shortcode like that references some HTML which should load the page content and insert it from the API?

1 Like
24

This is how the Hugo community solved the thing: