Websites with SSG + CMS - The missing piece.
Some time ago I tried Ghost as CMS connected to Gatsby as headless CMS.
It was a very interesting setup.
But I was looking for a way to integrate CMS with HUGO/Astro:
CMS
Content Management Systems (CMS):
- Tina
- GHOST + GATSBY
- Strapi
- Supports GraphQL or RESTful API.
- Decap CMS (formerly Netlify CMS)
- Directus
- Directus turns SQL databases into REST and GraphQL APIs with an intuitive no-code app.
decapCMS
https://astro.build/themes/details/astros/ –» decap CMS https://astros.zank.studio/blog/introducing-decap-cms-your-go-to-solution-for-content-management/
https://github.com/gxanshu/astro-decap-cms-starter https://astro-decapcms-starter.netlify.app/ https://decapcms.org/docs/working-with-a-local-git-repository/
netlifyCMS === decapCMS
Create a Custom Blog with Astro & NetlifyCMS in MINUTES! https://www.youtube.com/watch?v=3yip2wSRX_4
payloadCMS
https://github.com/payloadcms/payload
MIT | Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://github.com/mooxl/astroad/tree/main
tinaCMS + astro
TinaCMS + Astro
https://docs.astro.build/en/guides/cms/wordpress/
https://www.youtube.com/watch?v=5Opvp6z1uSc https://github.com/tinacms/tina-self-hosted-demo
It can also work with HUGO as seen during the mechanism docs
Static CMS
https://github.com/MatthiesenXYZ/astro-ghostcms
GPLv3 | The most intuitive Static Site CMS designed for SEO-optimized and privacy-focused websites.
Headless CMS
API Based
GIT Based
Gitlab provides with up to 10 GB for repository, artifacts and LFS
Github provides with Max 5GB per repo, with a limit of 100mb per file.
How many cool things can be done with those generous free tiers?
KeyStatic CMS
MIT | First class CMS experience, TypeScript API, Markdown & YAML/JSON based, no DB
Keystatic CMS is a modern, open-source, headless content management system designed to work directly with your codebase.
KeyStatic key features 📌
Core Concepts:
- Code-First CMS:
- Keystatic is built to integrate tightly with your existing development workflow. It works directly with files in your repository, such as Markdown, YAML, and JSON.
- This approach allows developers to maintain control over their content structure and versioning.
- Git-Based:
- It leverages Git for content storage and version control. This means your content is stored alongside your code, providing a robust history and collaborative workflow.
- Headless:
- Keystatic is a headless CMS, meaning it focuses on providing content through an API rather than dictating how that content is displayed. This allows you to use your preferred frontend framework (like Astro, Next.js, or Remix) to build your website or application.
- Local and Cloud Editing:
- It offers flexibility in how you edit content. You can edit content locally during development or use Keystatic Cloud for remote editing, especially when your site is deployed.
- Content Structuring:
- Keystatic allows you to define content schemas, ensuring consistency and organization. This is done through configuration files that define content collections and singletons.
- User-Friendly Interface:
- Despite its code-first approach, Keystatic provides a user-friendly admin UI for content editors, making it accessible to non-technical users.
Key Advantages:
- Developer-Friendly:
- Its integration with Git and codebase-centric approach makes it ideal for developers.
- Version Control:
- Git integration provides robust version control and collaboration features.
- Flexibility:
- Headless architecture allows for flexibility in frontend development.
- Performance:
- Working directly with files can lead to fast performance.
In essence:
Keystatic is a CMS that bridges the gap between developers and content editors, providing a seamless workflow for managing content within a codebase:
npm create @keystatic@latestWhat I like about KeyStatic
It has fully local mode, but also Github Mode
How I learnt about KeystaticCMS?
And due to Mizar landing Page
Static CMS
A Git-based CMS for Static Site Generators
Decap CMS
https://github.com/decaporg/decap-cms
MIT | A Git-based CMS for Static Site Generators
TinaCMS
Apache v2 | A fully open-source headless CMS that supports Markdown and Visual Editing
Conclusions
KeyStatic CMS with Astro
When you deploy the static site, the whateverdomain.com/keystatic path will still be there:
But you wont be able to make any changes, as the server (API) is NOT running.
FAQ
Icons?
MIT | A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
Where to get Domains?
- https://developer.godaddy.com/getstarted
- Hostinger
- https://porkbun.com/api/json/v3/documentation#Domain%20Pricing
- Cloudflare domains…
What are Static Site Generators?
Apache v2 | Static Site Generator with Go backend and Svelte frontend
What are NginX Static Routes?
Making Webs with AI
MIT | Generate React and Tailwind components using AI
How to setup Strapi?
STRAPI
FROM node:18-alpine
# Installing libvips-dev for sharp Compatibility
RUN apk update && apk add --no-cache build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev git
ARG NODE_ENV=development
ENV NODE_ENV=${NODE_ENV}
WORKDIR /opt/
COPY package.json yarn.lock ./
RUN yarn global add node-gyp
RUN yarn config set network-timeout 600000 -g && yarn install
ENV PATH /opt/node_modules/.bin:$PATH
WORKDIR /opt/app
COPY . .
RUN chown -R node:node /opt/app
USER node
RUN ["yarn", "build"]
EXPOSE 1337
CMD ["yarn", "develop"]