Everything is set up, just start posting!
Do you want to create your own blog site? Starter-Template-For-Blog provides everything you need to build a complete blog site, packed with essential features. Built with Next.js, TailwindCSS, and TypeScript, this template makes setup simple: just clone the project and start adding your posts.Everything is set up—just dive in and start building your blog!
- Displays files directly from local folders, not using on a server.
- Responsive mobile design to provide a smooth experience on mobile devices.
- Easily customize it to fit your style.
git clone https://github.com/jnoncode/starter-template-for-blog.git
cd starter-template-for-blog
yarn
yarn dev
Include id, title, preview, date, and category at the top of each Markdown file. Here’s an example.
---
id: 2;
title: "An Introduction to TypeScript";
preview: "TypeScript is a statically typed superset of JavaScript that adds type safety and advanced features, making it easier to write safer and more maintainable code.";
date: "2024-11-09";
category: "TypeScript";
---
Once these are set, just add your content! Your Markdown files will automatically be converted to HTML and displayed on the site!
In custom/profile.ts
, edit blogTitle
as you want.
Change profileName
, profileIntroduction
, and profileGithubLink
in custom/navigation.ts
. For the profile picture, replace profile_pic.png
in the custom/ folder
with your image (keeping the filename the same).
Replace icon.png
in the public/
folder with your logo image.
Change the color values in custom/colors.ts
. The blog’s primary colors are generally based on primary[500]
.
Add your categories as an array in custom/category.ts
.
src/post/MarkDownPost.tsx
applies styles to parsed markdown data converted to HTML. You can customize the blog post design here.
For more detailed customization beyond what’s described, explore the src/
folder. Various components are in here, with comments added to most of the code. Feel free to edit.
If you have any questions, need help with customization, or encounter any issues, feel free to open an issue.