---

Hi, I'm Mike Hoang and this is my personal website built with Astro

📌 Table Of Contents

• 📌 Table Of Contents
• 🦙 Tina CMS
• 💪 Features:
• ⚙️ Stack
• 👨🏻‍💻 Running Locally
• 📐 Configure
• 🧞 Commands

🦙 Tina CMS

By default, this template comes pre-configured with Tina CMS.

Now you can create your posts directly from the CMS without the need to do it manually.

If you decide to use Tina, it's not necessary to add any properties to the Markdown files, Tina does it automatically.

The documentation for Tina CMS can be found here

Tina is completely optional, and you can remove it, and it will still function in the same way.

💪 Features:

• ✅ Minimal styling
• ✅ Mobile responsive
• ✅ 100/100 Lighthouse performance
• ✅ SEO-friendly with canonical URLs and OpenGraph data
• ✅ Sitemap support
• ✅ RSS Feed support
• ✅ Markdown & MDX support
• ✅ Syntax highlighting
• ✅ Image optimization
• ✅ Table of contents
• ✅ Dark mode
• ✅ Reading Time
• ✅ Pagefind static search library integration
• ✅ Related posts
• ✅ Share posts (Linkedin, twitter)
• ✅ Draft mode
• ✅ Copy code block
• ✅ CMS in the repository (Tina CMS)
• ✅ Pagination
• ✅ ViewTransition (new)

⚙️ Stack

• ASTRO + Typescript - Astro is the all-in-one web framework designed for speed.
• Tailwind CSS + Tailwind-Merge + clsx - Tailwind CSS is a utility-first CSS framework.
• Tabler Icons - A open source SVG icons.
• Eslint - ESLint is an open source project that helps you find and fix problems.
• Prettier - Code formatter.
• Search Library - Static search library integration.
• Motion - Motion One is the smallest fully-featured animation library for the web.
• Tina CMS - CMS.

👨🏻‍💻 Running Locally

Recommended extensions for VSCode:

• Tailwind CSS IntelliSense.
• Astro.

1. Clone or fork the repository:

[email protected]:danielcgilibert/blog-template.git

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm dev

📐 Configure

• Edit the configuration file src/data/site.config.ts for the basic blog metadata.
• Update the astro.config.mjs file at the root of the project with your own domain.
• Modify the files in the /public folder:
  • favicon
  • robots.txt -> update the Sitemap url to your own domain
  • open-graph -> the open-graph is the image that will be displayed when sharing the blog link. For posts, the preview image is the post cover.
• Edit the social networks in the Header component - src/components/Header.astro, change the URL to your social network.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:3000
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run format:check	Check code format with Prettier
pnpm run format	Format codes with Prettier
pnpm run sync	Generates TypeScript types for all Astro modules. Learn more.
pnpm run lint	Lint with ESLint