Getting Started with `semantic`
Make your posts stand out with the simplicity of `semantic`.
· Build
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.
② 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 assets/images/posts, then create an .mdx file with the required frontmatter.
To update the /about page, modify src/app/about/_content/about.mdx.
④ 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.
