JSON Schema blog

to https://github.com/json-schema-org/website

A fork from https://github.com/asyncapi/website at 34eba91120505a5065715337f73c66bfcf126736 In effort to avoid having to build a whole new blog and get something up quickly! With complements of the AsyncAPI team!

TODO: Initial setup, Update link / info / description for JSON Schema in files such as...

scripts/build-rss.js
change favicon in the /public folders
update main description/keywords etc for page in the components/Head
update desc for footer in the components/Footer
Search whole repo for mention of AsyncAPI.
Google analytics tracking?
Include first article

Overview

This repository contains the sources of JSON Schema blog website:

It's powered by Next.js
It uses Tailwind CSS framework
It is deployed using cloudflare pages

Requirements

Use the following tools to set up the project:

Node.js v14.17+
yarn v1.22+

We recommend using Volta to easily use the correct versions of node and yarn

For image compression to webp you can use the cwebp CLI. Maybe this can be automated as a GitHub Action?

Usage

Install dependencies

To install all dependencies, run this command:

yarn

Yarn automagically installs the correct dependencies you need, develop by default.

Develop

Launch the development server with the hot reloading functionality that allows any change in files to be immediately visible in the browser (code only, not content). Use this command:

yarn dev

You can access the live development server at localhost:8080/blog.

Build

To build a production-ready website, run the following command:

yarn build

Generated files of the website go to the .next folder.

Project structure

This repository has the following structure:

  ├── .github                     # Definitions of Github workflows, pull request and issue templates
  ├── components                  # Various generic components such as "Button", "Figure", etc.
  ├── config                      # Transformed static data to display on the pages such as blog posts etc.
  ├── context                     # Various React's contexts used in website
  ├── css                         # Various CSS files
  ├── lib                         # Various JS code for preparing static data to render in pages
  ├── pages                       # Website's pages source. Only the blog!
  │    ├── blog                   # Blog posts
  ├── public                      # Data for site metadata and static content such as images
  ├── scripts                     # Scripts used in the build and dev processes
  ├── next.config.js              # Next.js configuration file
  ├── postcss.config.js           # PostCSS configuration file
  └── tailwind.config.js          # TailwindCSS configuration file

json-schema-org/blog