একটি ব্যক্তিগত ওয়েবসাইট বজায় রাখার জন্য অলস প্রোগ্রামারের গাইড

অনেক ডেভেলপারদের হয় একটি ব্যক্তিগত ওয়েবসাইট আছে বা একটি থাকতে চান।

যদিও কোডিং দক্ষতা ছাড়াই একটি সুন্দর ওয়েবসাইট তৈরি করার জন্য অনেকগুলি দুর্দান্ত বিকল্প রয়েছে, আমরা সফ্টওয়্যার বিকাশকারী, তাই আমরা আমাদের দক্ষতা প্রদর্শন করতে চাই এবং স্ক্র্যাচ থেকে কিছু তৈরি করতে চাই৷

ওয়েবসাইট কোডিং একটি জিনিস, এবং আপনি এটি 1-2 দিনের মধ্যে সম্পন্ন করতে পারেন। কিন্তু একবার আপনার ওয়েবসাইট লাইভ হলে, এটি উপলব্ধ, আপ-টু-ডেট এবং সুরক্ষিত আছে তা নিশ্চিত করার জন্য আপনাকে এটি বজায় রাখতে হবে।

নিম্নলিখিতটিতে, তাই আমরা 10টি সহজ ধাপে ন্যূনতম প্রচেষ্টার সাথে কীভাবে একটি ব্যক্তিগত ওয়েবসাইট তৈরি এবং বজায় রাখতে হয় তা দেখব। কারণ, যদিও আমরা কোডিং পছন্দ করতে পারি, আমরা কম্পিউটার থেকে দূরে থাকা সময়ও পছন্দ করি। 🌳🤸🍝

আমি আমার ওয়েবসাইটটি ব্যবহার করব যা আমি সম্প্রতি একটি উদাহরণ হিসাবে প্রতিক্রিয়াতে পুনর্নির্মাণ করেছি। আপনি আমার GitHub সংগ্রহস্থলে সোর্স কোড খুঁজে পেতে পারেন।

নিম্নলিখিত টিপস এবং কৌশলগুলি একটি অতি সাধারণ, স্ট্যাটিক ওয়েবসাইট অনুমান করে যা শুধুমাত্র একটি ফ্রন্ট-এন্ড অংশ নিয়ে গঠিত। যাইহোক, আপনি এই ধারণাগুলিকে ব্যাকএন্ড, ডাটাবেস বা অন্যান্য অবকাঠামো সহ আরও জটিল প্রকল্পগুলিতে সহজেই প্রসারিত করতে পারেন।

আমরা উল্লিখিত প্রযুক্তিগুলির কোনওটির জন্য বিশদে যাব না, বরং এটিকে প্রযুক্তি-অজ্ঞেয়বাদী রাখতে একটি উচ্চ-স্তরের ওভারভিউ দেব।

1. একটি সংগ্রহস্থল সেট আপ করুন

গিটহাব বা গিটল্যাবের মতো একটি উন্নয়ন প্ল্যাটফর্ম চয়ন করুন এবং একটি নতুন, খালি সংগ্রহস্থল সেট আপ করুন। একটি লাইসেন্স অন্তর্ভুক্ত করা এবং একটি README যোগ করা নিশ্চিত করুন, যাতে সম্প্রদায় জানে যে তারা আপনার কোড দিয়ে কী করতে পারে৷

2. একটি JS ফ্রেমওয়ার্ক চয়ন করুন৷

আপনার ওয়েবসাইট তৈরির জন্য ব্যবহার করার জন্য একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক বা লাইব্রেরি বেছে নিন যেমন রিঅ্যাক্ট, ভিউ বা স্ভেল্ট। অথবা না, এবং ভ্যানিলা এইচটিএমএল এবং জাভাস্ক্রিপ্টের সাথে যান যদি এমন কিছু হয় যা আপনি চেষ্টা করতে চান।

কোন ফ্রেমওয়ার্ক বাছাই করার সময়, সবচেয়ে গুরুত্বপূর্ণ বিষয় হল এটি এমন কিছু হওয়া উচিত যার সাথে কাজ করা আপনি উপভোগ করেন।

এটি আপনার ওয়েবসাইট, এবং আপনি যে কোনো টুল ব্যবহার করতে পারবেন। আপনি এমন কিছু নিয়ে যেতে পারেন যা আপনি ইতিমধ্যেই জানেন এবং পছন্দ করেন বা সম্পূর্ণ নতুন কিছু চেষ্টা করতে পারেন যা সম্পর্কে আপনি কৌতূহলী ছিলেন।

আমি Vue.js-এ আমার প্রথম ব্যক্তিগত হোমপেজ তৈরি করেছি। প্রায় এক বছর পরে, আমি এটিকে রিএক্টে পুনরায় তৈরি করেছি কারণ আমি আরও হ্যান্ডস-অন রিঅ্যাক্ট অভিজ্ঞতা পেতে এবং কিছু প্রতিক্রিয়া লাইব্রেরি ব্যবহার করে দেখতে চেয়েছিলাম।

কিছু বয়লারপ্লেট কোড তৈরি করতে আপনার JS ফ্রেমওয়ার্কের বিল্ড টুল ব্যবহার করুন এবং লোকালহোস্টে একটি সাধারণ হ্যালো ওয়ার্ল্ড-স্টাইলের উদাহরণ পান।

3. একটি UI উপাদান লাইব্রেরি চয়ন করুন৷

এই পদক্ষেপটি ঐচ্ছিক, কিন্তু যেহেতু আমরা এখানে প্রচেষ্টাকে ন্যূনতম রাখার বিষয়ে কথা বলছি, তাই আমি আপনার প্রকল্পে মেটেরিয়াল UI বা বুটস্ট্র্যাপের মতো একটি UI উপাদান লাইব্রেরি অন্তর্ভুক্ত করার পরামর্শ দেব। আমি আমার ওয়েবসাইটের জন্য চক্র UI বেছে নিয়েছি।

এই লাইব্রেরিগুলি UI উপাদানগুলির একটি সেটের পাশাপাশি বিন্যাস এবং স্টাইলিংয়ের জন্য ইউটিলিটিগুলির সাথে আসে এবং আপনাকে অতি দ্রুত তৈরি করতে দেয়৷

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

4. সুপার সিম্পল কিছু তৈরি করুন

আপনার হোমপেজে আপনি যে তথ্যগুলি প্রদর্শন করতে চান সেগুলি সম্পর্কে চিন্তা করুন এবং তারপরে আপনার UI উপাদান লাইব্রেরি থেকে উপাদানগুলি ব্যবহার করে কিছু তৈরি করুন৷ এটা অতিরিক্ত চিন্তা করবেন না.

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

যদি আপনার কাছে অনেক কিছু বলার থাকে এবং আপনার ওয়েবসাইটে কী দেখাতে হয় তার জন্য অনেক ধারনা থাকে, তবে এটি দুর্দান্ত! এগিয়ে যান এবং তৈরি করুন, তবে আপনার সামগ্রী কীভাবে সংগঠিত করবেন তার জন্য প্রথমে একটি পরিকল্পনা তৈরি করুন - চিন্তা করুন রাউটিং, বিভিন্ন দৃষ্টিভঙ্গি, বিভাগ, লেআউট, নেভিগেশন এবং আরও অনেক কিছু।

কিন্তু আপনি যদি আমার মতো কিছু হন তবে আপনি নিজেকে জিজ্ঞাসা করতে পারেন, এই মুহুর্তে, আপনার হোমপেজে কী রাখবেন এবং কেন আপনার এটি তৈরি করা উচিত কারণ কে যত্ন নেবে?! 😳

আপনার অনুভূতি সম্পূর্ণভাবে বৈধ, কিন্তু আমি আপনাকে বলতে চাই, অনলাইনে উপস্থিতির জন্য আপনার কারো অনুমতি বা অভিনব সামগ্রীর প্রয়োজন নেই৷

এটি অত্যন্ত সহজ রাখুন, এবং শুধুমাত্র নিজের সম্পর্কে কিছু জিনিস শেয়ার করুন যা আপনি দর্শকদের সাথে শেয়ার করতে স্বাচ্ছন্দ্য বোধ করেন (যা ইন্টারনেটে অ্যাক্সেস থাকতে পারে - এটি মনে রাখবেন)।

আমার ওয়েবসাইটের জন্য, আমি নিজের সম্পর্কে একটি ছবি এবং ট্যাগলাইন, আমার প্রযুক্তিগত স্ট্যাকের একটি তালিকা, আমার পছন্দের কিছু জিনিস এবং কয়েকটি বইয়ের সুপারিশ সহ এটিকে খুব কম রেখেছি। 📚 আমি আমার LinkedIn এবং GitHub-এর লিঙ্কও অন্তর্ভুক্ত করেছি।

5. মজার কিছু যোগ করুন

ধাপ 4-এ, আমরা অতি সাধারণ কিছু তৈরি করেছি, কিন্তু সহজ মানে বিরক্তিকর নয়। তাই এখন, এর ইন্টারেক্টিভ পেতে. 🚀

আপনার ওয়েবসাইট ভিজিট আরো মজার এবং আকর্ষণীয় করতে কিছু সহজ উপায় চিন্তা করার চেষ্টা করুন. এতে অ্যানিমেশন, ব্যবহারকারীর মিথস্ক্রিয়া বা রঙের স্কিম পরিবর্তনের মতো জিনিস অন্তর্ভুক্ত থাকতে পারে। যদিও চাকা পুনরায় উদ্ভাবন করবেন না.

আপনার যদি ধারনা থাকে যে কি করতে হবে, সম্ভাবনা আছে ইতিমধ্যেই একটি npm প্যাকেজ আছে যা ঠিক তাই করে।

আমি নেভিগেশন বারের জন্য একটি স্ক্রোল অ্যানিমেশন, একটি সুন্দর ট্রানজিশন সহ অন্ধকার এবং হালকা মোডের মধ্যে টগল করার জন্য একটি বোতাম এবং একটি আইকন বোতাম যা ব্যবহার করে একটি চমকপ্রদ কনফেটি পার্টি শুরু করে

প্রতিক্রিয়া-কনফেটি

এবং এটাই, আপনি নিজেই একটি ওয়েবসাইট তৈরি করেছেন! 🥳 আসুন পরবর্তীতে দেখা যাক কিভাবে এটি স্থাপন এবং বজায় রাখা যায়।

6. স্থাপন

নেটলিফাই, ভার্সেল, বা গিটহাব পেজগুলির মতো সম্পূর্ণ বিনামূল্যে ইন্টারনেটে কীভাবে আপনার ওয়েবসাইট স্থাপন করবেন তার জন্য অনেকগুলি বিকল্প রয়েছে।

সঠিক পদক্ষেপগুলি আপনার চয়ন করা প্রদানকারীর উপর নির্ভর করবে, তাই আপনার ওয়েবসাইট কিছু URL এর অধীনে লাইভ না হওয়া পর্যন্ত নির্দেশিকাগুলি অনুসরণ করুন৷

আমি Netlify এর সাথে গিয়েছিলাম এবং এটি সেট আপ করা অবিশ্বাস্যভাবে সহজ পেয়েছি।

একটি ঐচ্ছিক পদক্ষেপ হিসাবে, আপনি একটি কাস্টম ডোমেন নাম কেনার সিদ্ধান্ত নিতে পারেন এবং আপনি যে স্বেচ্ছাচারী URL পেয়েছেন তা প্রতিস্থাপন করতে আপনার প্রদানকারীর DNS এর সাথে এটি সংযুক্ত করতে পারেন৷ আপনাকে এটি করতে হবে না, কিন্তু আমি একটি কাস্টম ডোমেন নাম একটি চমৎকার স্পর্শ খুঁজে পাই, এবং একটি ডোমেন কেনার জন্য 10$/বছরের বেশি খরচ করা উচিত নয়।

7. CI/CD সেট আপ করুন

এখন যেহেতু আপনার ওয়েবসাইটটি ইন্টারনেটে লাইভ, আপনি নিশ্চিত করতে চান যে আপনি ভবিষ্যতের প্রতিশ্রুতি দিয়ে ভুলবশত এটি ভেঙে ফেলবেন না। এছাড়াও আপনি আপনার main শাখার সর্বশেষ সংস্করণটি স্বয়ংক্রিয়ভাবে স্থাপন করতে চান।

আপনার ডেভেলপমেন্ট প্ল্যাটফর্ম ইতিমধ্যেই CI/CD টুলের সাথে আসতে পারে, যেমন GitHub অ্যাকশন বা GitLab CI/CD।

আমি গিটহাব অ্যাকশন ব্যবহার করছি যেহেতু আমার সংগ্রহস্থল গিটহাবে থাকে।

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

এছাড়াও অনেকগুলি টেমপ্লেট উপলব্ধ রয়েছে, উদাহরণস্বরূপ, আমি কোডকিউএল এর সাথে দুর্বলতাগুলি আবিষ্কার করতে একটি পূর্ব-নির্মিত গিটহাব অ্যাকশন ব্যবহার করি।

ক্রমাগত স্থাপনার জন্য, আপনি আপনার নিজস্ব ডিপ্লোয় স্ক্রিপ্ট সেট আপ করতে পারেন যা সমস্ত চেক শেষ হওয়ার পরে প্রতিটি পুশ থেকে main চলে। কিন্তু ধাপ 6 এ আপনি যে হোস্টিং প্রদানকারীকে বেছে নিয়েছেন তার উপর নির্ভর করে আপনাকে কিছু করতে হবে না।

Netlify, উদাহরণস্বরূপ, GitHub এর সাথে সুন্দরভাবে সংহত করে যাতে main শাখা স্বয়ংক্রিয়ভাবে স্থাপন করা হয়।

8. আপনার নির্ভরতা আপ-টু-ডেট রাখতে Dependabot ব্যবহার করুন

আমরা একটি ওয়েবসাইট তৈরি করেছি, আমরা এটি লাইভ সেট করেছি, এবং এখন আমরা যা করতে চাই তা হল চিল৷ কিন্তু JS ইকোসিস্টেম দ্রুত বিকশিত হয়, এবং এর দুর্বলতাগুলিও তাই।

আমরা নিশ্চিত করতে চাই যে আমাদের অ্যাপ্লিকেশন সুরক্ষিত রাখতে আমাদের নির্ভরতাগুলি আপ-টু-ডেট আছে, কিন্তু npm নির্ভরতা ব্যবস্থাপনা বেদনাদায়ক হতে পারে এবং আমরা অবশ্যই প্রতিদিন আপডেটের জন্য চেক করতে চাই না।

সৌভাগ্যবশত, Dependabot নামে একটি উজ্জ্বল ছোট টুল রয়েছে যা আমাদের জন্য সেই সমস্ত কিছুর যত্ন নিতে পারে। 🤖 ডিপেন্ডাবট হল স্বয়ংক্রিয় নির্ভরতা আপডেটের জন্য গিটহাবের তৈরি একটি টুল। এখন গিটল্যাবের জন্য একটি সংস্করণ উপলব্ধ রয়েছে।

আপনাকে যা করতে হবে তা হল একটি dependabot.yml ফাইল যোগ করুন এবং আপনার ব্যবহার করা প্যাকেজগুলির একটি নতুন সংস্করণ উপলব্ধ হলে GitHub স্বয়ংক্রিয়ভাবে পুল অনুরোধ তৈরি করবে। আপনি YAML ফাইলে Dependabot কনফিগার করতে পারেন, উদাহরণ স্বরূপ PR-এর জন্য অ্যাসাইনি এবং সর্বাধিক সংখ্যক খোলা পিআর সেট করতে।

যেহেতু আমরা ধাপ 7-এ PR-এর জন্য কিছু স্বয়ংক্রিয় চেক সেট আপ করেছি, সেগুলি প্রতিটি Dependabot PR-এর সাথে চলবে এবং আমরা নিশ্চিত হতে পারি যে একটি নতুন সংস্করণ আমাদের ওয়েবসাইট ভাঙবে না।

রিপোজিটরি নিরাপত্তা সেটিংসে, আপনি আপনার নির্ভরতাগুলির কোনও দুর্বলতা সম্পর্কে আপনাকে সতর্ক করতে ডিপেন্ডাবট কনফিগার করতে পারেন।

9. অ্যাক্সেসিবিলিটি সমস্যাগুলির জন্য পরীক্ষা করুন৷

অ্যাক্সেসযোগ্যতা একটি অদ্ভুত বিষয় - এটি অত্যন্ত গুরুত্বপূর্ণ, তবুও প্রায়ই উপেক্ষিত হয়, যদিও একটি ওয়েবসাইটের অ্যাক্সেসযোগ্যতা উন্নত করার ক্ষেত্রে অনেক কম ঝুলন্ত ফল রয়েছে৷

আপনি যদি একটি JS ফ্রেমওয়ার্ক এবং একটি UI উপাদান লাইব্রেরি ব্যবহার করেন তবে আপনার অ্যাক্সেসিবিলিটি স্কোর সম্পূর্ণ ভয়ঙ্কর হওয়া উচিত নয়। এটি সম্ভবত এখনও উন্নত করা যেতে পারে, বিশেষ করে যদি আপনি কাস্টম ফন্ট বা রঙের স্কিম অন্তর্ভুক্ত করেন।

সম্ভাব্য উন্নতিগুলি আবিষ্কার করতে আপনি Chrome ডেভ টুলে Lighthouse এর মতো একটি টুল চালাতে পারেন৷ বাতিঘর আপনার জন্য একটি প্রতিবেদন তৈরি করবে এবং অ্যাক্সেসযোগ্যতা উন্নত করতে পরিবর্তনের পরামর্শ দেবে।

এই পরামর্শগুলি সাধারণত কার্যকর করা সহজ, যেমন ফন্টের আকার বাড়ানো, পাঠ্য এবং পটভূমির মধ্যে বৈসাদৃশ্য পরিবর্তন করা, বা DOM-এ HTML উপাদানগুলির ক্রম পুনর্বিন্যাস করা।

বাতিঘর পারফরম্যান্স, সর্বোত্তম অনুশীলন এবং এসইওর জন্য প্রতিবেদন তৈরি করতে পারে। 🆒

10. আপনার ওয়েবসাইট পিং করার জন্য একটি ক্রোন কাজ চালান

আমি আমার ওয়েবসাইট লাইভ সেট করার পরে, আমি দিনে অন্তত একবার চেক করার তাগিদ অনুভব করেছি যে এটি এখনও আছে কিনা। 🕵️‍♀️

প্রথমে, আমি যতবার দেখলাম আমার ওয়েবসাইটটি এখনও উপলব্ধ ছিল তখন আমি খুশি হয়েছিলাম, কিন্তু তারপরে এটি দ্রুত বিরক্তিকর হয়ে ওঠে।

আপনার ওয়েবসাইট যে কোনো কারণে বন্ধ হয়ে গেলে আপনি স্বয়ংক্রিয়ভাবে বিজ্ঞপ্তি পান তা নিশ্চিত করতে, আপনি একটি ক্রোন কাজ সেট আপ করতে পারেন যা নিয়মিত বিরতিতে আপনার ওয়েবসাইটের URL পিং করে।

যদি আপনার প্রকল্পে একটি ব্যাকএন্ড এবং DB অন্তর্ভুক্ত থাকে, তাহলে আপনি কিছু মৌলিক ধোঁয়া পরীক্ষাও সেট আপ করতে পারেন যা কার্যকর করে যেমন আপনার API-তে কিছু GET অনুরোধ।

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

উপসংহার

এবং আমরা সম্পন্ন! আপাতত, অন্তত।

আমার জন্য, আমার ওয়েবসাইটটি প্রথম এবং সর্বাগ্রে একটি খেলার মাঠ হিসাবে কাজ করে যাতে আমি কৌতূহলী প্রযুক্তিগুলি ব্যবহার করে দেখতে পারি, তাই আমি মাঝে মাঝে এটি সংশোধন করতে চাই৷ আমি আপনাকে নিয়মিত আপনার ওয়েবসাইটের কোড পুনরায় দেখার জন্য উত্সাহিত করব এবং এটির সাথে মজা করব৷ 💃

আমি আশা করি এই নির্দেশিকাটি আপনাকে একটি ব্যক্তিগত হোমপেজ তৈরি এবং বজায় রাখা কতটা সহজ হতে পারে তার একটি ধারণা দিয়েছে। আপনি সম্ভবত 1-2 দিনের মধ্যে সহজ কিছু তৈরি করতে পারেন (আপনি যদি আমার মতো হন, CSS লেআউটটি সঠিক করতে আরও দুই দিন যোগ করুন 🙄)।

আপনার ওয়েবসাইট স্থাপন করা এবং রক্ষণাবেক্ষণ একটি হাওয়া করার জন্য কিছু অটোমেশন যোগ করা 2 ঘন্টার মধ্যে করা যেতে পারে।

আপনি তৈরি করবেন এমন সব আশ্চর্যজনক ওয়েবসাইট দেখার জন্য উন্মুখ! 🤩