React দিয়ে পোর্টফোলিও ওয়েবসাইট বানিয়ে ফ্রিতে Netlify-তে ডিপ্লয় করার সম্পূর্ণ গাইড

আপনার দক্ষতা ও কাজের নমুনা বিশ্বের সামনে তুলে ধরার সবচেয়ে কার্যকরী উপায় হলো একটি ব্যক্তিগত পোর্টফোলিও ওয়েবসাইট। আর React ব্যবহার করে সেটা তৈরি করা মানে দারুণ পারফরম্যান্স, সহজ রক্ষণাবেক্ষণ আর অসাধারণ ইউজার এক্সপিরিয়েন্স। সবচেয়ে ভালো কথা হলো, Netlify-র মতো প্ল্যাটফর্মে আপনি এই সাইটটি একদম ফ্রিতে ডিপ্লয় করতে পারেন। এই আর্টিকেলে আমরা একদম শূন্য থেকে শুরু করে একটি সম্পূর্ণ React পোর্টফোলিও ওয়েবসাইট তৈরি করব এবং সেটি Netlify-তে ফ্রি হোস্ট করব। পুরো প্রক্রিয়াটি বুঝতে আপনার কোনো প্রি-রিকুইজিট দরকার নেই, শুধু বেসিক HTML, CSS আর JavaScript জানলেই হবে।

প্রথম ধাপ: React অ্যাপ তৈরি করা

প্রথমে আপনার কম্পিউটারে Node.js ইনস্টল করা আছে কিনা নিশ্চিত করুন। না থাকলে আমাদের রিসোর্স পেজ থেকে ডাউনলোড করে নিন। তারপর টার্মিনাল খুলে নিচের কমান্ডটি রান করুন:

npx create-react-app my-portfolio

এই কমান্ডটি 'my-portfolio' নামে একটি নতুন ফোল্ডার তৈরি করবে এবং React অ্যাপের জন্য প্রয়োজনীয় সব ফাইল ও ডিপেন্ডেন্সি ইনস্টল করবে। প্রক্রিয়াটি শেষ হলে, ফোল্ডারে ঢুকে লোকাল সার্ভার চালু করুন:

cd my-portfolio
npm start

এখন আপনার ব্রাউজারে http://localhost:3000 ওপেন করলে React-এর ডিফল্ট পেজ দেখতে পাবেন।

দ্বিতীয় ধাপ: পোর্টফোলিওর জন্য ফোল্ডার স্ট্রাকচার তৈরি

আমাদের পোর্টফোলিওতে সাধারণত হোম, অ্যাবাউট, প্রোজেক্টস আর কন্টাক্ট সেকশন থাকে। src ফোল্ডারের ভেতরে components নামে নতুন ফোল্ডার বানান। তারপর প্রতিটি সেকশনের জন্য আলাদা কম্পোনেন্ট তৈরি করুন:

src/
  components/
    Header.js
    About.js
    Projects.js
    Contact.js
    Footer.js

এছাড়া স্টাইলিংয়ের জন্য App.css ফাইলটি ব্যবহার করুন অথবা আলাদা CSS ফাইল তৈরি করুন। আমরা সরলতার জন্য App.css-ই ব্যবহার করব।

তৃতীয় ধাপ: কম্পোনেন্টগুলো তৈরি করা

হেডার কম্পোনেন্ট

প্রথমে Header.js লিখি:

import React from 'react';

function Header() {
  return (
    <header style={{ textAlign: 'center', padding: '50px 20px' }}>
      <h1>আমার নাম</h1>
      <p>ওয়েব ডেভেলপার | React বিশেষজ্ঞ</p>
    </header>
  );
}

export default Header;

অ্যাবাউট কম্পোনেন্ট

নিজের সম্পর্কে সংক্ষিপ্ত বিবরণ দিন:

import React from 'react';

function About() {
  return (
    <section id='about' style={{ padding: '40px 20px' }}>
      <h2>আমার সম্পর্কে</h2>
      <p>আমি একজন প্যাশনেট ওয়েব ডেভেলপার। React, JavaScript, এবং Node.js-এ দক্ষ।</p>
    </section>
  );
}

export default About;

প্রোজেক্টস কম্পোনেন্ট

আপনার কাজের নমুনা দেখান:

import React from 'react';

const projects = [
  { title: 'প্রোজেক্ট ১', description: 'একটি React অ্যাপ', link: '#' },
  { title: 'প্রোজেক্ট ২', description: 'একটি API ইন্টিগ্রেশন', link: '#' },
];

function Projects() {
  return (
    <section id='projects' style={{ padding: '40px 20px' }}>
      <h2>আমার প্রোজেক্ট</h2>
      <ul>
        {projects.map((project, index) => (
          <li key={index}>
            <h3>{project.title}</h3>
            <p>{project.description}</p>
            <a href={project.link} target='_blank' rel='noopener noreferrer'>দেখুন</a>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default Projects;

কন্টাক্ট কম্পোনেন্ট

একটি সাধারণ কন্টাক্ট ফর্ম:

import React from 'react';

function Contact() {
  return (
    <section id='contact' style={{ padding: '40px 20px' }}>
      <h2>যোগাযোগ</h2>
      <form>
        <input type='text' placeholder='আপনার নাম' required />
        <input type='email' placeholder='ইমেইল' required />
        <textarea placeholder='বার্তা' required></textarea>
        <button type='submit'>পাঠান</button>
      </form>
    </section>
  );
}

export default Contact;

ফুটার কম্পোনেন্ট

কপিরাইট তথ্য:

import React from 'react';

function Footer() {
  return (
    <footer style={{ textAlign: 'center', padding: '20px' }}>
      <p>&copy; ২০২৫ আমার নাম</p>
    </footer>
  );
}

export default Footer;

চতুর্থ ধাপ: App.js-এ সব কম্পোনেন্ট একত্র করা

এখন App.js ফাইলটি ওপেন করে নিচের কোড লিখুন:

import React from 'react';
import Header from './components/Header';
import About from './components/About';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Footer from './components/Footer';
import './App.css';

function App() {
  return (
    <div className='App'>
      <Header />
      <About />
      <Projects />
      <Contact />
      <Footer />
    </div>
  );
}

export default App;

এখন আপনার সাইটটি ব্রাউজারে দেখতে কেমন লাগছে তা দেখুন। আপনি চাইলে App.css ফাইল এডিট করে সাইটটিকে আরও আকর্ষণীয় করে তুলতে পারেন।

পঞ্চম ধাপ: প্রোডাকশন বিল্ড তৈরি

আমাদের সাইট ডিপ্লয় করার জন্য প্রথমে প্রোডাকশন বিল্ড তৈরি করতে হবে। টার্মিনালে নিচের কমান্ডটি রান করুন:

npm run build

এটি build নামে একটি ফোল্ডার তৈরি করবে, যাতে অপটিমাইজ করা HTML, CSS এবং JS ফাইল থাকবে। এই ফোল্ডারটিই আমরা Netlify-তে আপলোড করব।

ষষ্ঠ ধাপ: Netlify-তে ফ্রি ডিপ্লয়

Netlify অ্যাকাউন্ট তৈরি

প্রথমে Netlify-তে গিয়ে ফ্রি সাইন আপ করুন (GitHub, GitLab বা Bitbucket অ্যাকাউন্ট ব্যবহার করে)।

ড্র্যাগ অ্যান্ড ড্রপ ডিপ্লয়

Netlify ড্যাশবোর্ডে লগ ইন করার পর 'Sites' ট্যাবে যান। সেখানে 'Drag and drop your site folder here' অংশে আপনার build ফোল্ডারটি ড্র্যাগ করে ফেলুন। কয়েক সেকেন্ডের মধ্যে আপনার সাইট ডিপ্লয় হয়ে যাবে এবং আপনাকে একটি র্যান্ডম সাবডোমেন (যেমন: random-name.netlify.app) দেওয়া হবে।

আপনি চাইলে কাস্টম ডোমেনও সেট করতে পারেন, কিন্তু সেটি ফ্রি না। তবে Netlify-র দেওয়া সাবডোমেন দিয়েই আপনার React portfolio website deploy Netlify free সম্পন্ন হয়েছে!

সপ্তম ধাপ: (অপশনাল) GitHub থেকে অটোমেটিক ডিপ্লয়

আপনি যদি চান যে আপনার GitHub রিপোজিটরিতে কোনো পরিবর্তন করলেই স্বয়ংক্রিয়ভাবে Netlify-তে ডিপ্লয় হোক, তাহলে নিচের ধাপগুলো অনুসরণ করুন:

1. আপনার React প্রোজেক্টটি GitHub-এ পুশ করুন।
2. Netlify ড্যাশবোর্ডে 'New site from Git' বাটনে ক্লিক করুন।
3. GitHub অ্যাকাউন্ট কানেক্ট করে আপনার রিপোজিটরি সিলেক্ট করুন।
4. বিল্ড সেটিংসে 'Build command' হিসেবে npm run build এবং 'Publish directory' হিসেবে build দিন।
5. 'Deploy site' বাটনে ক্লিক করুন।

এখন থেকে আপনি যখনই আপনার GitHub রিপোজিটরিতে নতুন কোড পুশ করবেন, Netlify অটোমেটিক বিল্ড করে ডিপ্লয় করবে।

উপসংহার

এই গাইড অনুসরণ করে আপনি নিজের React পোর্টফোলিও ওয়েবসাইট তৈরি এবং Netlify-তে ফ্রি ডিপ্লয় করতে পারবেন। আপনার সাইটটি এখন বিশ্বের যেকোনো প্রান্ত থেকে দেখা যাবে। আরও উন্নত ফিচার যোগ করতে চাইলে আপনি রাউটিং, অ্যানিমেশন বা ব্লগ সেকশন যুক্ত করতে পারেন। আমাদের কোর্স পেজে React-এর আরও উন্নত টিউটোরিয়াল আছে, সেগুলো দেখতে পারেন।

সাধারণ প্রশ্নোত্তর

React পোর্টফোলিও তৈরি করতে কি কোনো পূর্ব অভিজ্ঞতা লাগবে?

বেসিক HTML, CSS এবং JavaScript জানা থাকলেই যথেষ্ট। React-এর মৌলিক ধারণাগুলো শেখার জন্য আমাদের কোর্সগুলো ফলো করতে পারেন।

Netlify-তে কি সীমাহীন ফ্রি হোস্টিং পাওয়া যায়?

Netlify-র ফ্রি প্ল্যানে ১০০GB ব্যান্ডউইথ এবং ৩০০ মিনিট বিল্ড টাইম মাসিক পাওয়া যায়, যা ছোট পোর্টফোলিও সাইটের জন্য যথেষ্ট।

আমার সাইটের কাস্টম ডোমেন লাগবে?

কাস্টম ডোমেনের জন্য Netlify চার্জ করে, তবে আপনি ফ্রি সাবডোমেন ব্যবহার করতে পারেন। কাস্টম ডোমেন কিনে সেটআপ করলে আরও পেশাদার দেখায়।

বিল্ড ফোল্ডারটি কি GitHub-এ পুশ করতে হবে?

না, বিল্ড ফোল্ডারটি শুধু ডিপ্লয় করার জন্য। GitHub-এ শুধু সোর্স কোড রাখুন এবং .gitignore ফাইলে build ফোল্ডারটি যোগ করুন।

React পোর্টফোলিওতে কি আরও ফিচার যোগ করা সম্ভব?

অবশ্যই। আপনি React Router ব্যবহার করে মাল্টি-পেজ সাইট বানাতে পারেন, অ্যানিমেশন যোগ করতে পারেন, বা একটি ব্লগ সেকশন যুক্ত করতে পারেন।