Skip to content

yhunlu/blogf-cmsblog

Repository files navigation

Modern Responsive Jamstack Blog Web Application

Using GraphCMS, graphql, nextjs, tailwindcss, sass is a web application that allows users to create and manage blog posts from a dedicated content management system. The web application uses the following technologies:

Check out below video:

graphCMS JamStack Responsive Blog App

  • GraphCMS: A headless content management system based on GraphQL technology enabling seamless integration with any application. GraphCMS allows users to define their own content models, schemas, and relations, and query them using GraphQL. Users can also use GraphCMS to upload images, videos, and other media files to their blog posts.
  • GraphQL: A query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
  • NextJS: A React framework for production that enables hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. NextJS allows users to create fast and SEO-friendly web applications with minimal configuration and code.
  • TailwindCSS: A utility-first CSS framework for rapidly building custom designs. TailwindCSS provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. TailwindCSS also supports responsive design, dark mode, custom forms, animations, and more.
  • Sass: A preprocessor that extends CSS with features like variables, nested rules, mixins, functions, and more. Sass helps users write more concise and maintainable CSS code, and also allows them to use advanced features like loops, conditionals, and inheritance.

Some features such as:

  • Featured and recent posts, categories, full markdown articles, comments.
  • Dynamic and static rendering of pages for optimal performance and SEO.
  • Modern and responsive UI design with custom themes and animations.
  • Easy deployment and hosting on platforms like Vercel.

Please include file of the following tasks:

File: root of application

.env

NEXT_PUBLIC_GRAPHCMS_ENDPOINT=https://api-us-east-1.graphcms.com/v2/ckxxxxxxxxxxcl/master
GRAPHCMS_TOKEN=eyJhbxxxxxmtB-3FA
Note: Replace 'xxxx' with your own.

The Note that:

Using Content Management System is 'https://app.graphcms.com/', Please create account as free, and get necessary tokens as per above.