/developer-blog

A basic developer blog template based on NextJS and Sanity.

Primary LanguageTypeScript

Developer Blog Template

Table of contents

IMPORTANT: Live Editing

Live Editing is assembled but not working at the moment

Getting started

Clone this repo and install the dependencies

git clone https://github.com/ferlarag/developer-blog.git
cd your-repo
npm install
npm run dev

Running Development Servers

npm run dev

This command will start the development server for both the Sanity Studio (localhost:3333) and NextJS app (localhost:3000)

Quick deployment

You can deploy the NextJS app on vercel. If you don't plan on collaborating with others using the Sanity Studio, there's no need to deploy it and you'll probably be fine making changes locally.

If you want others to access the Studio, then you'll need to deploy it.

File Structure

This monorepo is using turbo and follows the following structure:

Apps and Packages

  • apps/cms: a Sanity Studio app
  • apps/portfolio: a Next.js app
  • packages/@repo/ui: a stub React component library shared by both web and docs applications
  • packages/eslint-config: eslint configurations (includes packages/eslint-config-next and eslint-config-prettier)
  • packages/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Tech stack

  • NextJS
  • Sanity
  • Typescript
  • TailwindCSS
  • Shadcn

Customizing this project

Schemas

There's two things you are going to change:

  • Schema: the schemas are located in apps/cms/schemas. When you add/modify the shcema, you'll have to run the npm run schema (make sure you run it in the app/cms directory). This will grab the all the files that contain a Sanity schema object and it will generate a json file (it will be useful later for generating the types!).
  • Queries: the queries are located in the app/portfolio/src/sanity/lib/queries.ts file. Every time you add/modify a query to the queries.ts file, you'll need to run the npm run generate command (make sure you are running this command in the apps/portfolio directory).

Stylizing

This project uses tailwindcss, @portabletext/react, react-refractor.

This template is made with developers in mind. Sanity Studio is configured to used their @sanity/code-input plugin and on the Front-end the project uses @portabletext/react to render the Portable Text content. @portabletext/react uses react-refractor to stylize the code in the blog (you can change the style and use a theme from prism or other community themes for prism)

Everything else is pretty standard. Basic knowlege of TailwindCSS and React will be enough to customize the Front-end.

Deploying this project

Coming soon!

Resources

This project followed the official documentation of each product