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

কেন React পোর্টফোলিও এবং Netlify ডিপ্লয়মেন্ট?

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

প্রথম ধাপ: React অ্যাপ সেটআপ

প্রথমে আপনার কম্পিউটারে Node.js এবং npm ইনস্টল করা আছে কিনা নিশ্চিত করুন। তারপর নিচের কমান্ড দিয়ে নতুন React অ্যাপ তৈরি করুন:

npx create-react-app my-portfolio
cd my-portfolio
npm start

এতে লোকালহোস্টে আপনার অ্যাপ রান করবে। এখন আমরা পোর্টফোলিওর বেসিক স্ট্রাকচার তৈরি করব।

দ্বিতীয় ধাপ: পোর্টফোলিও কম্পোনেন্ট ডিজাইন

আমরা কয়েকটা কম্পোনেন্ট বানাবো: Header, Hero, Projects, Skills, Contact, Footer। src ফোল্ডারে components ফোল্ডার তৈরি করে সেখানে আলাদা আলাদা ফাইল বানান। উদাহরণ হিসেবে Hero কম্পোনেন্ট:

// src/components/Hero.js
import React from 'react';

function Hero() {
  return (
    <section id='hero'>
      <h1>আমি জন, একজন ওয়েব ডেভেলপার</h1>
      <p>React, Node.js, MongoDB নিয়ে কাজ করি।</p>
    </section>
  );
}

export default Hero;

একইভাবে Projects কম্পোনেন্টে আপনার কাজের লিস্ট দেখান:

// src/components/Projects.js
import React from 'react';

function Projects() {
  const projects = [
    { title: 'প্রকল্প ১', desc: 'একটি ইকমার্স সাইট', link: '#' },
    { title: 'প্রকল্প ২', desc: 'একটি ব্লগ অ্যাপ', link: '#' },
  ];
  return (
    <section id='projects'>
      <h2>আমার প্রকল্প</h2>
      <ul>
        {projects.map((proj, idx) => (
          <li key={idx}>
            <h3>{proj.title}</h3>
            <p>{proj.desc}</p>
            <a href={proj.link}>লাইভ দেখুন</a>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default Projects;

এভাবে সব কম্পোনেন্ট তৈরি করে App.js-এ ইম্পোর্ট করে নিচে বসিয়ে দিন।

তৃতীয় ধাপ: রাউটিং এবং নেভিগেশন

সিঙ্গেল পেজ অ্যাপ্লিকেশনের জন্য React Router ব্যবহার করতে পারেন। প্রথমে ইনস্টল করুন:

npm install react-router-dom

তারপর App.js-এ রাউটিং কনফিগার করুন:

// src/App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Hero from './components/Hero';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Footer from './components/Footer';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path='/' element={<><Hero /><Projects /><Contact /></>} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

এতে হোম পেজে সব সেকশন দেখাবে। চাইলে আলাদা পেজও যোগ করতে পারেন।

চতুর্থ ধাপ: কাস্টমাইজেশন এবং স্টাইলিং

CSS ফ্রেমওয়ার্ক যেমন Bootstrap বা Tailwind ব্যবহার করতে পারেন। অথবা নিজের মতো CSS লিখুন। src/App.css ফাইল এডিট করে আপনার পছন্দের স্টাইল দিন। উদাহরণ:

/* src/App.css */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}
section {
  padding: 60px 20px;
}
h1, h2 {
  color: #333;
}

আপনার পোর্টফোলিওকে ইউনিক করতে নিজের ছবি, রং এবং ফন্ট ব্যবহার করুন। মনে রাখবেন, এই সাইট আপনার পরিচয় — তাই কেয়ারফুলি ডিজাইন করুন।

পঞ্চম ধাপ: বিল্ড তৈরি এবং Netlify-এ ডিপ্লয়

প্রথমে React অ্যাপের বিল্ড তৈরি করুন:

npm run build

এতে build নামে একটা ফোল্ডার তৈরি হবে। এখন Netlify-তে গিয়ে Sign up করুন (GitHub দিয়ে লগইন করতে পারেন)। তারপর:

• Netlify ড্যাশবোর্ডে 'Sites' থেকে 'Add new site' > 'Deploy manually' সিলেক্ট করুন।
• build ফোল্ডারটি টেনে ড্রপ করুন ড্রপ জোনে।
• কয়েক সেকেন্ডের মধ্যে আপনার সাইট লাইভ হয়ে যাবে। Netlify আপনাকে একটা র্যান্ডম সাবডোমেন দেবে (যেমন: random-name.netlify.app)।

এটাই! আপনার React portfolio website Netlify free deployment সম্পন্ন। আপনি চাইলে কাস্টম ডোমেনও যোগ করতে পারেন Netlify সেটিংস থেকে।

ষষ্ঠ ধাপ: কাস্টম ডোমেন এবং SSL (ঐচ্ছিক)

Netlify ফ্রিতে SSL সার্টিফিকেট দেয়। কাস্টম ডোমেন যোগ করতে: Site settings > Domain management > Add custom domain। আপনার ডোমেন প্রোভাইডারে DNS সেটিংসে Netlify-এর nameservers যোগ করুন। SSL অটোমেটিক এনাবল হয়ে যাবে।

উপসংহার

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

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

React ছাড়া কি অন্য কিছু দিয়ে পোর্টফোলিও বানানো যায়?

হ্যাঁ, ভ্যানিলা HTML/CSS, Vue.js, Angular ইত্যাদি দিয়েও বানানো যায়। কিন্তু React কম্পোনেন্ট ভিত্তিক হওয়ায় রিইউজ করা সহজ এবং পারফরম্যান্স ভালো।

Netlify কি সত্যিই ফ্রি?

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

কাস্টম ডোমেন যোগ করতে কি খরচ হয়?

Netlify নিজে কাস্টম ডোমেনের জন্য চার্জ করে না, তবে ডোমেন কিনতে খরচ হয় (যেমন .com ডোমেন)।

বিল্ড ফোল্ডার আপলোড না করে কি GitHub থেকে ডিপ্লয় করা যায়?

হ্যাঁ, Netlify GitHub রিপোজিটরি কানেক্ট করে অটোমেটিক ডিপ্লয় করতে পারে। সেটআপ করার পর প্রতিবার পুশ করলে অটো ডিপ্লয় হবে।

পোর্টফোলিওতে কোন কোন সেকশন রাখা ভালো?

সাধারণত Hero, About, Skills, Projects, Experience, Contact, এবং Testimonials রাখা হয়। আপনার পছন্দমতো সাজান।