Welcome to Zen

~ 2 min read

Welcome to Zen

This is your new personal blog built with Astro and powered by Inkdrop. A minimalist, performance-first approach to personal blogging.

Features

Zen comes packed with carefully selected features that enhance your writing and reading experience.

Terminal Aesthetics

The Solarized Osaka dark theme gives your blog a distinctive terminal feel that developers love.

Color Palette

The carefully crafted color palette includes:

  • Cyan for accents and highlights
  • Blue for links and interactive elements
  • Muted tones for secondary content

Typography

BlexMono Nerd Font provides excellent readability with monospace charm.

Press Cmd+K (or Ctrl+K) to instantly search through all your posts.

Powered by Pagefind

Pagefind creates a static search index at build time, making searches lightning fast with zero runtime dependencies.

Multilingual Support

Write in English or Vietnamese - the blog handles both seamlessly.

Language Switching

The language switcher in the header lets readers toggle between available translations.

Getting Started

Ready to start your Zen journey? Here’s what you need to know.

Prerequisites

Before you begin, make sure you have:

  • Node.js 18+ installed
  • Inkdrop (optional, for CMS features)
  • A Cloudflare account for deployment

Installation

  1. Clone the repository
  2. Run yarn install
  3. Start developing with yarn dev

Writing Posts

Create your content in Inkdrop or directly in markdown files.

Frontmatter

Each post needs frontmatter with title, description, date, and tags.

Content Tips

  • Use clear headings to structure your content
  • Add code examples where relevant
  • Include images sparingly but effectively

Code Example

Here’s a simple TypeScript function:

function greet(name: string): string {
  return `Hello, ${name}! Welcome to Zen.`;
}

console.log(greet('Developer'));

Customization

Make Zen your own with these customization options.

Theme Colors

Edit the CSS variables in global.css to change the color scheme.

Layout Options

Modify the layout components in src/layouts/ to adjust the structure.

Deployment

Deploy your blog to the edge with Cloudflare Pages.

Build Command

Run yarn build to generate the production build.

Environment Variables

Set up your environment variables in the Cloudflare dashboard.

What’s Next?

  • Customize the theme colors in tailwind.config.mjs
  • Update your profile in src/pages/about.astro
  • Connect your Inkdrop account for seamless publishing

Happy writing!