স্ক্যাফোল্ড করার আগে লাইভ ডেমোটা এক ঝলক দেখে নিন — 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 yarn add @sveltepress/theme-blog pnpm install @sveltepress/theme-blog bun add @sveltepress/theme-blog থিমটি Sveltepress Vite প্লাগইন দিয়ে লোড হয়:
npm install --save @sveltepress/vite yarn add @sveltepress/vite pnpm install @sveltepress/vite bun add @sveltepress/vite এই থিমের জন্য @sveltejs/adapter-static দরকার, কারণ এটি সম্পূর্ণ স্ট্যাটিক সাইট (প্রি-রেন্ডার করা HTML, JSON, RSS, OG ইমেজ) তৈরি করে।
npm install --save @sveltejs/adapter-static yarn add @sveltejs/adapter-static pnpm install @sveltejs/adapter-static bun add @sveltejs/adapter-static Vite বিল্ডের পরে Pagefind লোকাল সার্চ ইনডেক্স তৈরি করে:
npm install --save pagefind yarn add pagefind pnpm install pagefind bun add pagefind Vite কনফিগার করুন
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[] | undefinedArray 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/' },
],
}),
}),
],
}) SvelteKit কনফিগার করুন
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,
},
} সাবপাথে ডিপ্লয় করার জন্য (যেমন GitHub Pages প্রজেক্ট সাইট) BASE_PATH ব্যবহার করা হয়। রুট পাথে ডিপ্লয় করলে এই env ভ্যারিয়েবল সেট করার দরকার নেই।
প্রথম পোস্ট লিখুন
src/posts/hello-world.md তৈরি করুন:
---
title: Hello world
date: 2026-04-17
tags: [intro]
category: meta
excerpt: নতুন ব্লগের প্রথম পোস্ট।
---
# Hello
আমার ব্লগে স্বাগতম। সবকিছুই markdown। অটো-স্ক্যাফোল্ডেড রুট
পরবর্তী vite dev বা vite build এ থিম এই ফাইলগুলো না থাকলে তৈরি করবে। যেকোনো ফাইল নির্দ্বিধায় এডিট করুন — স্ক্যাফোল্ডার শুধু অনুপস্থিত ফাইল তৈরি করে।
| পাথ | কাজ |
|---|---|
src/routes/+layout.ts | প্রি-রেন্ডার এবং trailingSlash: 'always' সক্রিয় করে |
src/routes/+layout.svelte | GlobalLayout দিয়ে পেজগুলো র্যাপ করে |
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-সহ বিল্ড স্ক্রিপ্ট যোগ করুন:
{
"scripts": {
"build": "vite build && pagefind --site dist"
}
} pnpm build Pagefind বিল্ড হওয়া সাইটে ইনডেক্স তৈরি করে যাতে বিল্ট-ইন সার্চ মডাল (⌘K / Ctrl+K) কাজ করে। বর্তমান থিম সবসময় Pagefind সার্চ রেন্ডার করে, তাই এই পোস্ট-বিল্ড ধাপটি রাখুন।
ফলাফল dist/ একটি স্ট্যাটিক বান্ডেল — যেকোনো স্ট্যাটিক হোস্টে ডিপ্লয় করা যাবে।