Metablog
Nextjs Blog Template
Installation

Getting Started

Project structure

The project is structured as a monorepo and includes the following packages:

  • headless-wp: main site built with Next.js and Tailwind CSS. You will deploy headless-wp
  • ui: a package that provides a Blog UI library, built using Tailwind CSS.
  • eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
  • tsconfig: tsconfig.jsons used throughout the monorepo

Prerequisites

Before installing Metablog, please ensure that you have the latest version of pnpm, npm, or yarn installed on your system. You can install the latest version of pnpm, npm, or yarn by running the following command in your terminal:

  • pnpm Installation (Recommended)
npm install pnpm@latest -g

Quick Start Video

Installation

Installing Metablog is easy and straightforward. If you're using pnpm, simply run the following command in your terminal from the project root:

pnpm install
💡

If you're using npm or yarn and you want to change the workspace setting in your package.json file, you can do so by modifying the following line: From: "@metablog/ui": "workspace:* To: "@metablog/ui": "*"

Configure the Environment Variables

  • Create a .env.local file in the apps/headless-wp directory.

  • Copy the contents of example.env into .env.local.

  • Replace the values with your own.

# API Config
NEXT_PUBLIC_API_URL="https://your_wordpress_site.com"
API_ENDPOINT="https://your_wordpress_site.com"
 
# Dynamic Category Slug
NEXT_PUBLIC_FEATURED_CATEGORY="featured_category_slug"
NEXT_PUBLIC_TRENDING_CATEGORY="trending_category_slug"
NEXT_PUBLIC_EDITOR_CATEGORY="editor_category_slug"
NEXT_PUBLIC_WEEKLY_CATEGORY="weekly_category_slug"
ℹ️

Note: I you want to add the category_slug at the .env file, please check the documentation Dynamic Category Post Section.

💡

Note: Ensure that you have included all key-value pairs in the .env.local file located in the apps/headless-wp directory.

Build

To build all apps and packages, run the following command:

cd my-project
pnpm run build

Develop

To develop all apps and packages, run the following command:

cd my-project
pnpm run dev

These commands will start a local development server and allow you to start developing your Metablog-powered blog.

Thank you for choosing Metablog as your headless blog theme! If you have any questions or issues, please contact our support team.

IntroductionWordPress Configuration