Getting Started with `semantic`

Welcome to semantic — a clean, modern blog starter built with Next.js and Static Site Generation (SSG). Create a content-focused blog that looks great and performs even better.

① Fork the Repository

Visit the GitHub repository and fork the project to create your own version of semantic.

If you find the project helpful, remember to ⭐ the repo ☺️

② Clone the Repository

Clone the forked repository to your local machine:

git clone [forked-repo-git-url]

That's it — your own semantic project is now ready to begin.

③ Customize

Open the project in your favorite IDE — such as VSCode or WebStorm — and start editing.

Edit Metadata

Key files are located under /src/constants:

• menu.ts: Menu items for the sidebar and header

• metadata.ts: Site and author information

• profile.ts: Profile card details on the main page

These files control how your site looks and feels — make them your own.

Create a Post

To write a new blog post, add a folder (your post's slug) inside /content/posts, then create an .mdx file with the required frontmatter.

The following frontmatter fields are available for posts:

(Fields marked with * are required)

• title*: Main title of the post

• subtitle*: Short description or subtitle

• createdAt*: Original publication date

• modifiedAt*: Last updated date

• coverImage*: Top cover image (supports relative or absolute paths)

• category*: Single category assigned to the post

• tags: One or more keywords for filtering

• comments: Enable comments via Giscus (default: false)

To update the /about page, simply modify the /content/pages/about.mdx file.

④ Run the Project

Let's run the project and get it up and running locally.

While semantic uses pnpm, you're free to use npm or yarn. We'll use pnpm for this guide:

pnpm install
pnpm dev

Your development server should now be live at http://localhost:1113.

To build the static site for production, simply run:

pnpm build

This generates the output in the out directory — ready to be deployed.

In the next post, we'll cover how to deploy your blog using GitHub Pages, with automatic builds and no local setup required.

Need help? Open an issue and we'll be happy to assist you.