Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yhunlu/blogf-cmsblog
Modern Responsive Jamstack - GraphCMS Blog Web Application
https://github.com/yhunlu/blogf-cmsblog
full-stack fullstack graphcms graphql graphql-request graphqlcms headless-cms html-react-parser jamstack moment nextjs postcss react react-dom react-multi-carousel sass tailwindcss vercel vercel-deployment
Last synced: 5 days ago
JSON representation
Modern Responsive Jamstack - GraphCMS Blog Web Application
- Host: GitHub
- URL: https://github.com/yhunlu/blogf-cmsblog
- Owner: yhunlu
- License: apache-2.0
- Created: 2022-02-22T20:05:31.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-17T15:47:41.000Z (6 months ago)
- Last Synced: 2024-05-17T16:52:05.801Z (6 months ago)
- Topics: full-stack, fullstack, graphcms, graphql, graphql-request, graphqlcms, headless-cms, html-react-parser, jamstack, moment, nextjs, postcss, react, react-dom, react-multi-carousel, sass, tailwindcss, vercel, vercel-deployment
- Language: JavaScript
- Homepage: https://blogf-cmsblog.vercel.app/
- Size: 16.8 MB
- Stars: 5
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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:**
[](https://www.youtube.com/watch?v=PYa1hSfF6sE)
- **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
```shell
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.