শুরু করা

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

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

সোর্স: 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

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

npm install --save @sveltepress/vite
sh

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

npm install --save @sveltejs/adapter-static
sh

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

npm install --save pagefind
sh

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

vite.config.ts
import {  } from '@sveltepress/theme-blog'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : 'My Blog',
        : 'Thoughts on Svelte and the web.',
        : 'https://example.com',
        : {
          : 'Your Name',
          : '/avatar.png',
          : 'সাইডবারে দেখানোর জন্য সংক্ষিপ্ত বায়ো।',
          : {
            : 'your-handle',
            : 'your-handle',
            : '/rss.xml',
          },
        },
        : [
          { : 'হোম', : '/' },
          { : 'টাইমলাইন', : '/timeline/' },
          { : 'ট্যাগ', : '/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/ একটি স্ট্যাটিক বান্ডেল — যেকোনো স্ট্যাটিক হোস্টে ডিপ্লয় করা যাবে।