Cloudflare Pages হল স্ট্যাটিক সাইট হোস্ট করার জন্য একটি চমৎকার সার্ভিস। এটি সাইটের নিরাপত্তা, গতি ও অন্যান্য মানোন্নয়নের জন্য অনেক ফিচার দেয় যা GitHub Pages দেয় না। এছাড়া, আপাতদৃষ্টিতে এটি গোপনীয়তা (প্রাইভেসি) নিশ্চিত করার ক্ষেত্রেও অনেক প্রতিশ্রুতিশীল, কিন্তু আমি সন্দিহান তা ঠিক কতটুকু সত্যি! মনে রাখতে হবে, এটি একটি মার্কিন কোম্পানি। যাইহোক, তা এই লেখার আওতার বাইরে। এই গাইডে আমি আপনার Hugo সাইটটি ডেপ্লয় করার পদ্ধতি নিয়ে আলোচনা করব। মজার ব্যাপার হল, আমিও এই সার্ভিস ব্যবহার করে আমার এই সাইটটি ডেপ্লয় করেছি! ক্লাউডফ্লেয়ার আপনার স্ট্যাটিক সাইটটি Pages এ ডেপ্লয় করার জন্য তিনটি উপায় দিয়েছে। এই লেখায় আমি Git Integration ব্যবহার করে Pages এ সাইট ডেপ্লয় করার পদ্ধতি দেখাব। এক্ষেত্রে আপনি GitHub Pages এর মত আপনার কমিট পুশ করলে তা সাইটে অটোমেটিক আপলোড হয়ে যাবে। যদিও ক্লাউডফ্লেয়ারের ডকুমেন্টেশন এই প্রক্রিয়ার অনেকটাই কভার করে, তবু Hugo সাইটের জন্য কিছু জরুরি তথ্য অনুপস্থিত। তাই আমি আমার অভিজ্ঞতা থেকে সেসব তথ্য শেয়ার করব যা আপনাকে কিছু ঝামেলা থেকে বাঁচাবে। তো চলুন শুরু করা যাক!

GitHub রেপোজিটরি Pages-এ যুক্ত করুন#

  1. Cloudflare ড্যাশবোর্ডে লগ ইন করুন। অ্যাকাউন্ট না থাকলে তৈরি করে নিন।
  2. সাইডবারে Compute (Workers) এর মধ্যে থেকে Workers & Pages সিলেক্ট করুন।
  3. Create বাটনে ক্লিক করুন। তারপর Pages এর মধ্যে Import an existing Git repository অপশনে Get Started ক্লিক করুন।
  4. এবার Connect GitHub ক্লিক করুন। আপনার ব্রাউজার GitHub-এ চলে যাবে। তারপর, আপনার অ্যাকাউন্টে লগ ইন করুন।
  5. তারপর, GitHub আপনার কাছে জানতে চাইবে Cloudflare Workers and Pages কোথায় ইন্সটল করতে চান। আপনার পার্সোনাল অ্যাকাউন্ট সিলেক্ট করুন। তারপর আপনার পছন্দ অনুসারে এটিকে All repositories বা Only select repositories এ প্রবেশের অনুমতি দিন। আপনি প্রাইভেট বা পাবলিক যেকোন রেপোজিটরি বেছে নিতে পারেন। শেষে Install & Authorize ক্লিক করুন। এখন আবার Cloudflare ড্যাশবোর্ডে ফেরত যাবেন।
  6. এবার আপনার Hugo সাইটের GitHub রিপোজিটরি সিলেক্ট করুন। আপনি যখনই এই রিপোতে (git) push করবেন, Cloudflare স্বয়ংক্রিয়ভাবে আপনার সাইট Pages-এ ডেপ্লয় করবে।
  7. এবার, Begin setup ক্লিক করুন। তারপর Set up builds and deployments স্ক্রিনে আপনার ডেপ্লয়মেন্ট কাস্টমাইজ করতে পারবেন।

বিল্ড ও ডেপ্লয়মেন্ট সেটআপ#

  1. আপনার পছন্দের Project name সেট করুন। এই নামে একটি pages.dev সাবডোমেইন তৈরি হবে।
  2. এবার Production branch সিলেক্ট করুন (সাধারণত main বা master)। এই ব্রাঞ্চে প্রোডাকশন ভার্সন ডেপ্লয় হবে। অন্যান্য ব্রাঞ্চ প্রিভিউ ডেপ্লয়মেন্টের জন্য ব্যবহৃত হবে।
  3. Build settings-এ Framework preset হিসেবে Hugo বাছাই করুন।
  4. Build command এর জায়গায় hugo লিখুন।
  5. Hugo আপনার সাইট public/ ফোল্ডারে প্রকাশ করে। তাই Build output directory হবে public।
  6. Cloudflare-এ Hugo-র অনেক পুরনো ভার্সন (v0.118.2) ব্যবহার করা হয়। নতুন ভার্সন চাইলে HUGO_VERSION নামে একটি Environment Variable তৈরি করুন। তারপর Value এর জায়গায় ভার্সন নম্বর (যেমন 0.147.0) সেট করুন।
  7. এবার Save & Deploy ক্লিক করুন। Cloudflare আপনার সাইট বিল্ড করা শুরু করবে এবং তাদের গ্লোবাল নেটওয়ার্কে ডেপ্লয় করবে।
  8. ব্যস! আপনার সাইট এখন পুরো দুনিয়ার জন্য উন্মুক্ত!! এবার কাস্টম ডোমেইন যোগ করতে চাইলে, Add a custom domain ক্লিক করুন আর পরবর্তী ধাপে যান। আর নাহলে, Continue to project এ ক্লিক করে ড্যাশবোর্ডে যান যেখানে প্রজেক্ট ইনফো, ডেপ্লয়মেন্ট স্ট্যাটাস, প্রোডাকশন URL ইত্যাদি দেখতে পাবেন। আপনার সাইটের অন্যান্য কনফিগারেশনও এখান থেকে করতে পারবেন।

কাস্টম ডোমেইন সেটআপ#

  1. সংশ্লিষ্ট জায়গায় আপনার ডোমেইন নাম লিখুন।
  2. নতুন DNS রেকর্ড কনফার্ম করতে Activate domain ক্লিক করুন।
  3. এবার একটি মেসেজ দেখতে পাবেন, “https://your-domain.com is being set up. It may take up to 48 hours for DNS records to update and for your site to become viewable by visitors."। DNS আপডেট হতে ৪৮ ঘণ্টা লাগতে পারে। তবে একটু অপেক্ষা করলেই সবুজ মার্ক দেখানোর কথা। তারপর ডোমেইন সচল হবে।

সমস্যার সমাধান#

  1. URL সমস্যা: যদি Pages সাইটে আপনার URL ঠিকঠাক না দেখায়, Hugo কনফিগে baseURL সঠিকভাবে সেট করা আছে কিনা যাচাই করুন। baseURL ঠিক না থাকলে আপনার সাইটটি Production URL এ রিডিরেক্ট করতে পারে অথবা অন্যান্য অস্বাভাবিক সমস্যাও দেখা দিতে পারে।
  2. পুরনো Hugo ভার্সন: সাইট ঠিকভাবে দেখাচ্ছে না? Hugo এর অনেক ফিচার কাজ করছে না? Settings > Variables and Secrets থেকে যাচাই করুন আপনি আপনার কাঙ্ক্ষিত Hugo ভার্সন ব্যবহার করছেন কিনা।
  3. বিল্ড সমস্যা: Deployments সেকশনে View details > Build Log থেকে বিল্ড লগে দেখুন কি সমস্যা হয়েছে। পাশাপাশি, আপনার সিস্টেমে hugo কমান্ড কাজ করে কিনা নিশ্চিত করুন।

আরও জানতে Cloudflare Pages Docs দেখুন।

কাজটি করতে সমস্যা হচ্ছে? আপনার যেকোন প্রয়োজনে আমার সাহায্য চাইতে পারেন। তাছাড়া আমি পেইড সার্ভিসও দিয়ে থাকি এবং এই কাজটি আপনার জন্য পুরোপুরি করে দিতে পারি! সার্ভিস পেতে আমার সাথে যোগাযোগ করুন।

পড়ার জন্য ধন্যবাদ। টিউটোরিয়ালটি ভালো লাগলে বন্ধুদের সাথে শেয়ার করতে ভুলবেন না!