সম্প্রতি আমি আমার 2048 গেমের ওপেন সোর্স সংস্করণকে নতুন করে সাজিয়েছি এবং এটিকে Next.js এবং React 18-এ স্থানান্তর করার সিদ্ধান্ত নিয়েছি। বিদ্যমান গেমটি কোনো কাস্টম ডোমেইন ছাড়াই GitHub পেজে প্রকাশ করা হয়েছে। আমি ভার্সেলে মোতায়েন করার কথা ভাবছিলাম কিন্তু এটি Google থেকে অর্গানিক ট্র্যাফিক হারাবে যা গত 3 বছরে তৈরি হয়েছিল। এর মানে হল আমাকে গিটহাব পৃষ্ঠাগুলিতে স্থাপনার সাথে পরীক্ষা করার প্রয়োজন ছিল এবং আজ আমি যা শিখেছি তা শেয়ার করব। আপনি যদি পুরো নিবন্ধটি পড়ার আগে শেষ ফলাফল দেখতে চান তবে আপনি পারেন . এটি এখানে পরীক্ষা করুন দ্রুত ভূমিকা আমি দুটি গিটহাব বৈশিষ্ট্য ব্যবহার করব - গিটহাব অ্যাকশন এবং গিটহাব পেজ। আপনি যদি সেগুলি না শুনে থাকেন তবে আমাকে দ্রুত ব্যাখ্যা করতে দিন: ছোট ওয়ার্কফ্লোগুলির মতো যা আপনার প্রকল্পগুলিতে কাজ করতে পারে। এটি এমন একজন সাহায্যকারী থাকার মতো যা আপনি যা করতে বলেন তা স্বয়ংক্রিয়ভাবে করে। আপনি পরীক্ষা চালানোর জন্য, গুণমান পরীক্ষা করার জন্য বা আপনার অ্যাপ্লিকেশন তৈরি করতে অ্যাকশন ব্যবহার করতে পারেন। আমার ক্ষেত্রে, আমি স্থাপনার পাইপলাইন স্বয়ংক্রিয় করতে এই ওয়ার্কফ্লো ব্যবহার করেছি। গিটহাব অ্যাকশনগুলি কি? ডেভেলপার এবং ওপেন সোর্স প্রজেক্টের জন্য একটি ওয়েব হোস্টিং বিকল্পের মত তাদের চিন্তা করুন। আপনি আপনার পোর্টফোলিও শেয়ার করতে, আপনার ওপেন সোর্স প্রোজেক্টের ওয়েবসাইট হোস্ট করতে বা আমার মত আপনার পোষা প্রোজেক্ট প্রকাশ করতে GitHub পেজ ব্যবহার করতে পারেন। GitHub পেজ এখন শুরু করা যাক. ধাপ 1 - আপনার সংগ্রহস্থলের জন্য GitHub পৃষ্ঠাগুলি সক্রিয় করুন আমাদের Next.js অ্যাপ্লিকেশানটি প্রকাশ করতে, আমাকে প্রকল্পের সংগ্রহস্থলের জন্য GitHub পৃষ্ঠাগুলি সক্রিয় করতে হবে। আপনি সেটিংস ট্যাবে খুঁজে পেতে পারেন (নীচের ছবিতে 1), তারপর বাম দিকের মেনু থেকে নির্বাচন করুন (2), এবং ড্রপডাউন মেনুটি সন্ধান করুন যা আমাদের স্থাপনার (3) নির্দিষ্ট করতে দেয়। পৃষ্ঠাগুলি উত্স এখন আপনাকে স্থাপনার পরিবর্তন করতে হবে। GitHub অ্যাকশনে উৎস এখন থেকে, আপনার প্রকল্পের একটি উত্সর্গীকৃত পৃষ্ঠা আছে। আপনি শুধুমাত্র সেখানে বিষয়বস্তু প্রকাশ করতে হবে. ধাপ 2 – Next.js বিল্ড প্রসেস কনফিগার করুন Next.js অ্যাপটি স্থাপন করার আগে, বিল্ড আউটপুট পরিবর্তন করা গুরুত্বপূর্ণ। ডিফল্টরূপে, Next.js অ্যাপ্লিকেশন চালানোর জন্য Node.js ব্যবহার করে এবং এটি GitHub পৃষ্ঠাগুলির সাথে সামঞ্জস্যপূর্ণ নয়। GitHub পেজগুলি স্ট্যাটিক ফাইলগুলি হোস্ট করার জন্য ডিজাইন করা হয়েছে, যার মানে আমরা সেখানে শুধুমাত্র HTML, CSS, JavaScript (এবং অন্যান্য স্ট্যাটিক ফাইল) প্রকাশ করতে পারি। তাই আমাদের Next.js-এ স্ট্যাটিক পেজ জেনারেশন সক্ষম করতে হবে। এটি করার জন্য, আপনি ভিতরে করতে আউটপুট মোড পরিবর্তন করবেন: next.config.js export /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; এখন চালানোর পরে, Next.js আপনার অ্যাপের জন্য স্ট্যাটিক সম্পদ ধারণকারী একটি ফোল্ডার তৈরি করবে। পরবর্তী ধাপে, আমরা এই ডিরেক্টরিটি নেব এবং এটি GitHub পেজে আপলোড করব। next build out ধাপ 3 - অনুপস্থিত ছবি ঠিক করুন পৃষ্ঠাগুলি একটি ডোমেনের একটি উপ-পাথের অধীনে প্রকাশিত হয় এবং একটি উপ-পাথ হিসাবে প্রকল্পের নাম নেয়। বিভ্রান্তিকর? একটি উদাহরণ হিসাবে আমার 2048 গেমের একটি URL-এ একটি লুকিয়ে নেওয়া যাক: https://mateuszsokola.github.io/2048-in-react/ Github আমার ব্যবহারকারীর জন্য নামে একটি ডেডিকেটেড সাবডোমেন তৈরি করেছে। কিন্তু প্রকল্পটি সাব-পাথের অধীনে প্রকাশিত হয়েছে, যা আমার ক্ষেত্রে । দুর্ভাগ্যবশত, এটি অনুপস্থিত ছবি এবং শৈলীর সমস্যাগুলির দিকে পরিচালিত করবে৷ mateuszsokola (আমার ব্যবহারকারীর নাম) /2048-in-react ডিফল্টরূপে, Next.js ডোমেনের সমস্ত স্ট্যাটিক সম্পদকে ম্যাপ করে। এর মানে হল ফাইলটি এর পরিবর্তে এ সমাধান করা হবে। favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon এটি ঠিক করতে, আমরা ফাইলের ভিতরে যোগ করে একটি পাথ প্রিফিক্স সেট আপ করতে পারি: next.config.js basePath /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; আমার ক্ষেত্রে, এটি হল যেহেতু আমার প্রকল্পকে বলা হয়। ) অন্তর্ভুক্ত করতে ভুলবেন না। /2048-in-react 2048-in-react প্রজেক্ট ডিরেক্টরির শুরুতে ( / ধাপ 4 - Github অ্যাকশন তৈরি করুন Next.js ডিপ্লয়মেন্ট আর্টিফ্যাক্ট তৈরি করছে যা GitHub পেজে প্রকাশ করা যেতে পারে। এখন তাদের প্রকাশ করার জন্য Github অ্যাকশন সেট আপ করার উপযুক্ত সময়। পুনঃব্যবহারযোগ্যতা প্রচারের জন্য আমি দুটি পৃথক কর্মে স্থাপনার সিদ্ধান্ত নিয়েছি: অ্যাকশন Node.js সেট আপ করবে এবং সমস্ত নির্ভরতা ইনস্টল করবে। Node.js সেটআপের জন্য একটি স্বতন্ত্র অ্যাকশন থাকা আমাকে অন্যান্য পাইপলাইনের জন্য এটি পুনরায় ব্যবহার করার অনুমতি দেবে। উদাহরণস্বরূপ, আমার কাছে পাইপলাইন আছে যা চালায় এবং . সম্ভবত আপনি একাধিক অ্যাকশনও রাখতে চান। setup-node কোড লিন্টার পরীক্ষা অ্যাকশনটি Next.js আর্টিফ্যাক্ট তৈরি করবে এবং প্রতিবার যখন আমরা ব্রাঞ্চে কোড মার্জ করব তখন সেগুলি GitHub পেজে প্রকাশ করবে। publish main আমাকে অ্যাকশন ব্যাখ্যা করে শুরু করা যাক। এখানে কোড আছে: setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : আপনার প্রকল্পের ডিরেক্টরিতে এই ফাইলটি তৈরি করুন। এটি কল করতে ভুলবেন না। গুরুত্বপূর্ণ .github/workflows/setup-node action.yml এই স্নিপেট কি করে? এটি একটি ক্রিয়া তৈরি করে। অ্যাকশন আপনাকে একক অ্যাকশনে একাধিক ওয়ার্কফ্লো ধাপ বান্ডিল করতে দেয়। যদি এটি পরিষ্কার না হয় তবে আমরা দ্বিতীয় অ্যাকশনে গেলে আপনি এটি বুঝতে পারবেন। composite composite এটি Node.js 20 ব্যবহার করে একটি নতুন বিল্ড পরিবেশ তৈরি করে এবং প্রকল্প নির্ভরতা ইনস্টল করে। এগুলি অ্যাকশনের সবচেয়ে গুরুত্বপূর্ণ অংশ। এখন, অ্যাকশনে যাওয়া যাক: setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 আপনার প্রকল্পের ডিরেক্টরিতে এই ফাইলটি তৈরি করুন। আপনি আপনার পছন্দ মতো ফাইলটির নাম দিতে পারেন – আমি আমার বলেছি। .github/workflows publish.yml এর মানে কি? প্রতিবার নতুন কোড পুশ করা বা শাখায় একত্রিত করার সময় এই ক্রিয়াটি ট্রিগার হয়। main এটি পরিবেশ সেট আপ করতে অ্যাকশন ব্যবহার করে। অ্যাকশন আমি আগের অ্যাকশনে তৈরি করেছি। এখন আপনি জানেন কিভাবে আপনার ক্রিয়াগুলিকে অন্যান্য ক্রিয়াগুলিতে অন্তর্ভুক্ত করতে হয়৷ setup-node composite composite অ্যাকশনের দুটি ধাপ রয়েছে: প্রথম পর্যায়ে, Next.js অ্যাপ তৈরি করা হচ্ছে। দ্বিতীয় পর্যায়ে, প্রথম পর্যায়ের শিল্পকর্মগুলি GitHub পেজে আপলোড করা হয়। এগুলি স্থাপনার পাইপলাইনের সবচেয়ে গুরুত্বপূর্ণ দিক। সমস্ত গিটহাব পেজ স্থাপনার জন্য সেগুলি অপরিবর্তিত থাকার কারণে আমি অনুমতিগুলি এবং একযোগে সেটআপ এড়িয়ে গিয়েছি। এখন, কর্ম ব্যবহারের জন্য প্রস্তুত. কমিট এবং পুশ আপনার পরিবর্তনগুলি কমিট করার পরে এবং শাখায় ঠেলে দেওয়ার পরে, GitHub স্বয়ংক্রিয়ভাবে GitHub পৃষ্ঠাগুলিতে স্থাপনার স্পিন আপ করবে। main প্রক্রিয়াটি পরিদর্শন করতে, ট্যাবে নেভিগেট করুন (নীচের ছবিতে 1), এবং বাম দিকের মেনু থেকে অ্যাকশন নির্বাচন করুন (2) আপনি স্ক্রিনে আপনার সমস্ত স্থাপনা দেখতে পাবেন (এগুলিকে বলা হয়)। অ্যাকশন প্রকাশ-টু-গিথুব-পৃষ্ঠা । ওয়ার্কফ্লো এখন সেই ওয়ার্কফ্লোগুলির মধ্যে প্রথমটি নির্বাচন করুন এবং আপনি একটি দুই-পর্যায়ের স্থাপনা দেখতে পাবেন। পর্যায়ে, আপনি গিটহাব পৃষ্ঠাগুলিতে আপনার ওয়েবসাইটের একটি লিঙ্ক খুঁজে পেতে পারেন। স্থাপনার উপসংহার লক্ষ লক্ষ ভিউ সহ ওয়েবসাইট হোস্ট করার জন্য Github পৃষ্ঠাগুলি যথেষ্ট নয়। কিন্তু আপনার পোর্টফোলিও বা আপনার ওপেন সোর্স প্রকল্পের জন্য একটি ওয়েবসাইট হোস্ট করার জন্য এটি একটি নিখুঁত পছন্দ। আমাদের ওয়েবসাইট যেমন Vercel হোস্ট করার জন্য অনেক বিনামূল্যের বিকল্প আছে, কিন্তু আমি আপনাকে একটি বিকল্প দেখাতে চেয়েছিলাম। গিটহাব পৃষ্ঠাগুলি বিকাশকারীদের জন্য তৈরি করা হয়েছে এবং আমি মনে করি প্রতিটি বিকাশকারীর এটির সাথে পরিচিত হওয়া উচিত। যদি এই নিবন্ধটি আপনাকে সাহায্য করে তবে দয়া করে এটি আপনার সামাজিক মিডিয়াতে ভাগ করুন। এবং আপনি কোথায় আপনার আবেদন স্থাপন করবেন? এটা সবসময় Vercel? প্রতিক্রিয়া 18 এবং Next.js জানুন আপনি প্রতিক্রিয়া বা Next.js এর সাথে শক্তিশালী বোধ করেন না? Udemy আমার অনলাইন কোর্সে যোগদান করুন! আমি আপনাকে একটি সম্পূর্ণ কার্যকরী 2048 গেম তৈরি করে প্রতিক্রিয়া শুরু করতে সাহায্য করব। আমি বিশ্বাস করি গেম তৈরি করা শেখাকে আরও মজাদার করে তোলে এবং আপনার বন্ধুদের দেখানোর জন্য আপনার কাছে চমৎকার কিছু থাকবে। 👇👇👇👇 🧑🎓 যোগ দিন প্রতিক্রিয়া 18 এবং Udemy নেক্সট.js কোর্স - শুধুমাত্র এই সপ্তাহে 80% ছাড়।
