প্লেইন এইচটিএমএল এবং সিএসএস-এ আমার ওয়েবসাইট পুনরায় লেখা

15 জানুয়ারী, 2025

এই সপ্তাহে, আমি সরল HTML এবং CSS ব্যবহার করে আমার ওয়েবসাইট পুনরায় লেখার সিদ্ধান্ত নিয়েছি। যখন আমি মূলত এটা তৈরিআমি সরলতার জন্য SvelteKit ব্যবহার করেছি। আমি যখন কাজ শুরু করি তখন এটি আমার প্রত্যাশার চেয়ে আরও আকর্ষণীয় প্রকল্প ছিল তাই আমি অভিজ্ঞতার বিষয়ে আমার চিন্তাভাবনা শেয়ার করতে চেয়েছিলাম।

কেন?

আমি পুনর্লিখন করার সিদ্ধান্ত নেওয়ার অনেক কারণ রয়েছে। একটি হল যে আমি বর্তমানে বেকার তাই পাশের প্রকল্পগুলির জন্য আমার প্রচুর সময় আছে। আরেকটি হল, আপনি দেখতে পাচ্ছেন, এই ওয়েবসাইটটি বেশ সহজ তাই আমি SvelteKit ব্যবহার করে খুব একটা লাভ করছিলাম না। আমি সাইটটিকে ক্লাউডফ্লেয়ার পৃষ্ঠাগুলিতে সরাতে চেয়েছিলাম তাই কিছু পরিবর্তন করার জন্য এটি একটি উপযুক্ত সময় ছিল।

যাইহোক, আমি কিছু পরিবর্তন করার সিদ্ধান্ত নেওয়ার প্রাথমিক কারণ হল যে আমি জাভাস্ক্রিপ্ট বান্ডলার এবং বিল্ডিং ইকোসিস্টেম খুঁজে পেয়েছি অবিশ্বাস্যভাবে
ব্যবহারে উত্তেজক। উদাহরণ স্বরূপ, আমি আমার পুরানো ওয়েবসাইট সেট আপ করেছি তা হল মার্কডাউন পোস্টের সেট থেকে ব্লগ বিভাগ তৈরি করা। আমি ধরে নিয়েছিলাম এটি করা সহজ হবে। SvelteKit এবং Vite আপনাকে আপনার ওয়েবসাইট প্রি-রেন্ডার করার অনুমতি দেয় এবং বিল্ড টাইমে আমার কাছে ফাইলের একটি সেট ছিল – সেগুলিকে রূপান্তর করার জন্য আমার কিছু যুক্তি যোগ করতে হবে। পরিবর্তে, নির্মাণের সময় আমার গাছের ফাইলগুলির একটি সেটের হ্যান্ডেল পাওয়ার উপায় খুঁজে বের করা খুবই কঠিন ছিল (আমাকে সতর্ক করতে দিন যে আমি ফ্রন্টএন্ড ডেভ নই এবং সম্ভবত আমি স্পষ্ট কিছু মিস করেছি)। এই ভয়ঙ্কর কোডটি নিয়ে আসতে আমার কয়েক ঘন্টা গুগলিং করা এবং বিভিন্ন বিকল্প চেষ্টা করতে লেগেছে যা একটি ফাইলের বিষয়বস্তু লোড করতে এবং আমার পৃষ্ঠায় দিতে কাজ করে:

import type { PageLoad } from "./$types";

export const load: PageLoad = async ({ params }) => {
  const file = await import(
    `../../../../lib/assets/posts/${params.slug}.md`
  );

  return { content: file.default, ...file.metadata };
};

SvelteKit ব্যবহার করে আমি যে ক্ষুদ্র পরিমাণে লাভ করছিলাম তার জন্য আমি এই জাতীয় জিনিসগুলির সাথে মোকাবিলা করতে করতে ক্লান্ত ছিলাম। এবং তাই, আমি অবশেষে সিদ্ধান্ত নিয়েছি এটি একটি পুনর্লিখনের জন্য সময় ছিল।

কিভাবে?

আমি মনে করি হ্যাকার নিউজে খুব বেশি সময় ব্যয় করা আমাকে ভুল ধারণা দিয়েছে যে 2025 সালে প্লেইন HTML এবং CSS ব্যবহার করে একটি ওয়েবসাইট লেখা একটি অপেক্ষাকৃত সুপ্রশস্ত পথ হবে। আমি গাইড বা এটি করার একটি “প্রাকৃতিক” উপায় খুঁজতে কিছু সময় কাটিয়েছি। এবং পাওয়া গেছে যে সত্যিই একটি নেই. যে কারণে, আমি শুধু একটি খালি ডিরেক্টরি দিয়ে স্ক্র্যাচ থেকে শুরু করার এবং সেখান থেকে যাওয়ার সিদ্ধান্ত নিয়েছি। আমার ওয়েবসাইটটি যথেষ্ট ছোট যে আমি স্ট্যাটিক এইচটিএমএল হিসাবে অনেক পৃষ্ঠা রিমেক করতে সক্ষম হয়েছি।

যাইহোক, আমি মার্কডাউনে ব্লগ পোস্ট লিখতে পছন্দ করি। এইচটিএমএল থেকে লেখা সহজ, আমি আমার বিদ্যমান ওবসিডিয়ান ভল্ট থেকে পোস্টগুলি বের করতে পারি এবং আমি এটিকে আরও সুবিধাজনক মনে করি। অতএব, আমার মার্কডাউন ব্লগ পোস্টগুলিকে HTML সামগ্রীতে পরিণত করার জন্য আমার কিছু ধরণের স্ক্রিপ্ট দরকার ছিল। আমি এর জন্য কিছু বিকল্প তদন্ত করেছি এবং পেয়েছি প্যান্ডোক. Pandoc মার্কআপ ফরম্যাট রূপান্তর করার জন্য একটি সর্বজনীন নথি রূপান্তরকারী। এটি মার্কডাউন থেকে এইচটিএমএল (অন্যান্য অনেক ফরম্যাটের সাথে) নথিগুলিকে রূপান্তর করার জন্য একটি লাইব্রেরি এবং একটি CLI প্রদান করে।

স্ক্রিপ্টটি লিখতে, আমি যতটা সম্ভব হালকা কিছু চেয়েছিলাম কিন্তু ব্যাশ স্ক্রিপ্টের চেয়ে ব্যবহার করা সহজ। এটি আমাকে পাইথনে নিয়ে গেছে এবং uv. আমি খুঁজে পেয়েছি যে ইউভি মূলত পাইথন পরিবেশকে এমনভাবে বিমূর্ত করে দেয় যা এইরকম একটি ছোট প্রকল্পের জন্য সত্যিই সুবিধাজনক। পাইথন ব্যবহার করে আমাকে আমার ওয়েবসাইটটি ব্যবহার করে পরিবেশন করার একটি বিনামূল্যে উপায় দিয়েছে http.server মডিউল অবশেষে, আমি একটি ছোট মেকফাইল লিখেছিলাম তাই আমাকে সার্ভ কমান্ডটি মনে রাখতে হবে না।

ফলাফল

দ ফলাফল ছিল না সর্বাধিক বিপ্লবী কারণ আমার ওয়েবসাইট প্রথম স্থানে সত্যিই সহজ ছিল. কিন্তু আমার “সংকলিত” ওয়েবসাইটের সম্পদের আকার ~356kb থেকে ~88kb হয়েছে৷ আমার প্রজেক্ট ট্রি অনেক সহজ হয়ে গেছে এবং সাইটে এখন একমাত্র জাভাস্ক্রিপ্ট কোড হাইলাইট করা। আমি জিনিষের অবস্থা সম্পর্কে শুধু খুশি. আমি মনে করি আমি বুঝতে পারি যে আমার সাইট কীভাবে এবং কেন কাজ করে (যেখানে আগে আমি অংশগুলি বুঝতাম কিন্তু পুরো রহস্য নয়)।

আগে, SvelteKit সঙ্গে	পরে, প্লেইন এইচটিএমএল দিয়ে

পরবর্তী পদক্ষেপ

আমি এ পর্যন্ত খুঁজে পেয়েছি যে দুটি downside আছে. আমি এগুলি ঠিক বা উন্নত করার উপায়গুলি তদন্ত করতে চাই৷

• আরো কোড ডুপ্লিকেশন. SvelteKit এর একটি কম্পোনেন্ট সিস্টেম আছে তাই আমি আমার নেভিগেশন বারকে একটি কম্পোনেন্ট হিসেবে তৈরি করতে পারি এবং এটি পুনরায় ব্যবহার করতে পারি। যখন আমি এটি সরিয়ে ফেললাম, তখন আমাকে কয়েকটি জায়গায় সেই কোডটি নকল করতে হয়েছিল। সৌভাগ্যবশত খরচটা খুবই সামান্য ছিল কারণ আমার কাছে সত্যিই চারটি HTML পেজ আছে। আমি সচেতন যে ওয়েব উপাদান ব্যবহার করে এটি করার কিছু উপায় আছে। এটি এমন কিছু যা আমি আমার পরবর্তী পার্শ্ব প্রকল্পগুলির মধ্যে একটি হিসাবে দেখতে চাই।
• লাইভ রিলোডিং নেই। এখন এটি পুনর্নির্মাণের জন্য আমাকে ওয়েবসাইটটিকে হত্যা করতে হবে। আমি নিশ্চিত যে এটি ঠিক করার জন্য আমি খুঁজে পেতে পারি এমন একটি টুল আছে, অথবা হয়তো ফাস্টএপিআই-এর মতো কিছু ব্যবহার করুন যাতে স্বয়ংক্রিয়ভাবে পুনরায় লোড হয়। কিন্তু যতক্ষণ না আমি এটি সম্পর্কে কিছু করি, প্রতিবার যখন আমি একটি পরিবর্তন করি তখন একটি সামান্য অতিরিক্ত খরচ থাকে।

এছাড়াও, আমি মনে করি যে এই সংগ্রহস্থলটি এখন এমন একজনের জন্য একটি যুক্তিসঙ্গতভাবে ভাল টেমপ্লেট যা জেনারেটর ব্যবহার না করে কিছু মার্কডাউন ব্লগ পোস্টের সাথে একটি সাধারণ ওয়েবসাইট তৈরি করতে চায়। আমি বিস্মিত হয়েছিলাম যখন আমি এই প্রকল্পটি শুরু করেছি কিভাবে একটি ফ্রেমওয়ার্ক ছাড়া আপনার সাইট লিখতে হয় সে সম্পর্কে একটি গাইড খুঁজে পাওয়া কতটা কঠিন ছিল। আশা করি এটি অন্য কিছু লোককে সাহায্য করতে পারে।