আগে লাইভ ডেমো দেখুন

স্ক্যাফোল্ড করার আগে লাইভ ডেমোটা এক ঝলক দেখে নিন — sveltepress.github.io/sveltepress/blog-demo। এই পেজে যা কিছু বর্ণনা করা হয়েছে, সব সেখানে ইতিমধ্যেই চালু অবস্থায় আছে।

ন্যাভবারের ব্লগ ডেমো সেই সম্পূর্ণ প্রদর্শনী। ন্যাভবারের প্লেগ্রাউন্ড ফিচার ডিরেক্টরি খোলে। কনফিগারেশন, পোস্ট লেখা, ফিচারসমূহ এবং কাস্টমাইজেশন হলো সেই ব্লগ থিম এন্ট্রি যেগুলো Blog starter আপনাআপনি চালু করে। এই শুরু করার পাতা কোনো প্লেগ্রাউন্ড এন্ট্রি নয় এবং এতে Open in Playground নেই।

সোর্স: monorepo-এর packages/example-blog। রেপো ক্লোন করে রুট থেকে pnpm install এবং pnpm --filter @sveltepress/example-blog dev চালান। ডেমোটি http://localhost:36739-এ চালু হবে।

@sveltepress/theme-blog হলো ম্যাগাজিন-স্টাইলের একটি ব্লগ থিম — বাম পাশে সাইডবার, ম্যাসনরি পোস্ট গ্রিড, প্রতি পোস্টের জন্য OG ইমেজ, RSS, Pagefind সার্চ এবং Giscus কমেন্ট সাপোর্ট করে। এই পেজে একটি কাজ করা ব্লগ স্ক্যাফোল্ড করার ধাপগুলো দেখানো হয়েছে।

ইনস্টল

npm install --save @sveltepress/theme-blog
sh
yarn add @sveltepress/theme-blog
sh
pnpm install @sveltepress/theme-blog
sh
bun add @sveltepress/theme-blog
sh

থিমটি Sveltepress Vite প্লাগইন দিয়ে লোড হয়:

npm install --save @sveltepress/vite
sh
yarn add @sveltepress/vite
sh
pnpm install @sveltepress/vite
sh
bun add @sveltepress/vite
sh

এই থিমের জন্য @sveltejs/adapter-static দরকার, কারণ এটি সম্পূর্ণ স্ট্যাটিক সাইট (প্রি-রেন্ডার করা HTML, JSON, RSS, OG ইমেজ) তৈরি করে।

npm install --save @sveltejs/adapter-static
sh
yarn add @sveltejs/adapter-static
sh
pnpm install @sveltejs/adapter-static
sh
bun add @sveltejs/adapter-static
sh

Vite বিল্ডের পরে Pagefind লোকাল সার্চ ইনডেক্স তৈরি করে:

npm install --save pagefind
sh
yarn add pagefind
sh
pnpm install pagefind
sh
bun add pagefind
sh

Vite কনফিগার করুন

vite.config.ts
import { import blogThemeblogTheme } from '@sveltepress/theme-blog'
import { const sveltepress: (options?: SveltepressVitePluginOptions) => PluginOptionsveltepress } from '@sveltepress/vite'
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct

UserConfig

object, or a function that returns it. The function receives a

ConfigEnv

object.

defineConfig
} from 'vite'
export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct

UserConfig

object, or a function that returns it. The function receives a

ConfigEnv

object.

defineConfig
({
UserConfig.plugins?: PluginOption[] | undefined

Array of vite plugins to use.

plugins
: [
function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress({ SveltepressVitePluginOptions.theme?: ResolvedTheme | undefinedtheme: import blogThemeblogTheme({ title: stringtitle: 'My Blog', description: stringdescription: 'Thoughts on Svelte and the web.', base: stringbase: 'https://example.com',
author: {
    name: string;
    avatar: string;
    bio: string;
    socials: {
        github: string;
        twitter: string;
        rss: string;
    };
}
author
: {
name: stringname: 'Your Name', avatar: stringavatar: '/avatar.png', bio: stringbio: 'সাইডবারে দেখানোর জন্য সংক্ষিপ্ত বায়ো।',
socials: {
    github: string;
    twitter: string;
    rss: string;
}
socials
: {
github: stringgithub: 'your-handle', twitter: stringtwitter: 'your-handle', rss: stringrss: '/rss.xml', }, },
navbar: {
    title: string;
    to: string;
}[]
navbar
: [
{ title: stringtitle: 'হোম', to: stringto: '/' }, { title: stringtitle: 'টাইমলাইন', to: stringto: '/timeline/' }, { title: stringtitle: 'ট্যাগ', to: stringto: '/tags/' }, ], }), }), ], })
ts

SvelteKit কনফিগার করুন

svelte.config.js
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  extensions: ['.svelte'],
  preprocess: [vitePreprocess()],
  kit: {
    adapter: adapter({
      pages: 'dist',
      assets: 'dist',
      fallback: '404.html',
    }),
    prerender: {
      handleMissingId: 'ignore',
      handleUnseenRoutes: 'ignore',
    },
    paths: {
      base: process.env.BASE_PATH ?? '',
      relative: false,
    },
  },
  compilerOptions: {
    runes: true,
  },
}
js

সাবপাথে ডিপ্লয় করার জন্য (যেমন GitHub Pages প্রজেক্ট সাইট) BASE_PATH ব্যবহার করা হয়। রুট পাথে ডিপ্লয় করলে এই env ভ্যারিয়েবল সেট করার দরকার নেই।

প্রথম পোস্ট লিখুন

src/posts/hello-world.md তৈরি করুন:

src/posts/hello-world.md
---
title: Hello world
date: 2026-04-17
tags: [intro]
category: meta
excerpt: নতুন ব্লগের প্রথম পোস্ট।
---

# Hello

আমার ব্লগে স্বাগতম। সবকিছুই markdown।
md

অটো-স্ক্যাফোল্ডেড রুট

পরবর্তী vite dev বা vite build এ থিম এই ফাইলগুলো না থাকলে তৈরি করবে। যেকোনো ফাইল নির্দ্বিধায় এডিট করুন — স্ক্যাফোল্ডার শুধু অনুপস্থিত ফাইল তৈরি করে।

পাথকাজ
src/routes/+layout.tsপ্রি-রেন্ডার এবং trailingSlash: 'always' সক্রিয় করে
src/routes/+layout.svelteGlobalLayout দিয়ে পেজগুলো র‍্যাপ করে
src/routes/+page.{server.ts,svelte}পেজিনেটেড হোম
src/routes/page/[n]/...তালিকার ২ নং ও পরবর্তী পেজ
src/routes/posts/[slug]/...আলাদা পোস্ট পেজ
src/routes/tags/+page.svelteট্যাগ ইনডেক্স
src/routes/tags/[tag]/...নির্দিষ্ট ট্যাগের পোস্ট
src/routes/categories/[cat]/...নির্দিষ্ট ক্যাটাগরির পোস্ট
src/routes/timeline/+page.svelteআর্কাইভ টাইমলাইন

বিল্ড

package.json-এ Pagefind-সহ বিল্ড স্ক্রিপ্ট যোগ করুন:

package.json
{
  "scripts": {
    "build": "vite build && pagefind --site dist"
  }
}
txt
pnpm build
bash

Pagefind বিল্ড হওয়া সাইটে ইনডেক্স তৈরি করে যাতে বিল্ট-ইন সার্চ মডাল (⌘K / Ctrl+K) কাজ করে। বর্তমান থিম সবসময় Pagefind সার্চ রেন্ডার করে, তাই এই পোস্ট-বিল্ড ধাপটি রাখুন।

ফলাফল dist/ একটি স্ট্যাটিক বান্ডেল — যেকোনো স্ট্যাটিক হোস্টে ডিপ্লয় করা যাবে।