শুরু থেকে Hexo ব্লগ তৈরি করার সহজ নির্দেশিকা (২০২৪ সংস্করণ)

#ব্লগ搭建

ব্লগ ওয়েবসাইটগুলোর কুরুচিপূর্ণ ইন্টারফেস দেখে কি আপনি ক্লান্ত নন? অবিরাম ওয়েবসাইট নোটিফিকেশনে কি আপনি বিরক্ত নন? অনেকদিন ধরেই কি নিজের একটি ব্লগ তৈরি করার কথা ভাবছেন, কিন্তু জটিল টিউটোরিয়াল আর মাথা ঘুরিয়ে দেওয়া কোডের ভয়ে পিছিয়ে যাচ্ছেন? তাহলে আপনাকে অভিনন্দন, কারণ এই পোস্টটি সবচেয়ে সহজবোধ্য উপায়ে ধাপে ধাপে আপনাকে আপনার নিজের ব্লগ তৈরি করতে শেখাবে। আপনার শুধু একটু ধৈর্য প্রয়োজন, আর প্রতিটি ধাপ মনোযোগ দিয়ে অনুসরণ করতে হবে।

Hexo একটি দ্রুত, পরিচ্ছন্ন এবং কার্যকর ব্লগ ফ্রেমওয়ার্ক হিসেবে নতুনদের জন্য আশীর্বাদস্বরূপ। আর GitHub আমাদের অতিরিক্ত সার্ভার ভাড়া করা ও স্থাপনের ঝামেলা থেকে মুক্তি দেয়। অতএব, এই নিবন্ধে Hexo এবং GitHub ব্যবহার করে একটি ব্লগ তৈরি করা হবে।

আমি ২০১৮ সালে শুরু থেকে ব্লগ তৈরির সহজ নির্দেশিকা শিরোনামে একটি পোস্ট লিখেছিলাম। তবে প্লাগইন আপডেট হওয়ার কারণে কিছু পরিবর্তনে প্রয়োজন হয়েছে, তাই এটি ২০২৪ সংস্করণের একটি নতুন সহজ নির্দেশিকা।

প্রস্তুতির কাজ

স্থানীয়ভাবে Hexo স্ট্যাটিক ব্লগ সেটআপ

$ npm install -g hexo-cli
$ hexo init
$ npm install

হ্যাঁ, ব্লগের মূল অংশটি এখন সম্পূর্ণ হয়েছে। চলুন এর প্রভাব দেখি। রান করুন:

$ hexo server

এখন ব্রাউজার খুলে localhost:4000 টাইপ করলে ব্লগের বর্তমান অবস্থা দেখতে পাবেন। একটু আনন্দিত হোন, তারপর Ctrl + C চাপলে আপনি পরবর্তী ধাপে যেতে পারবেন।

ব্যক্তিগতকরণ (প্রাথমিক)

থিম পরিবর্তন

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #অথবা hexo generate
hexo server

সাইট কনফিগারেশন

# Site
title: অজানা পৃথিবী                //ব্লগের নাম
subtitle:
description:  কিছু অসাধারণ কাজ করুন //একটি স্বাক্ষর
author: LulalaP                 //লেখক
language: zh-Hans               //ওয়েবসাইটের ভাষা
timezone:

সাইডবারে প্রোফাইল ছবি সেট করা

avatar: 
    url: /uploads/avatar.jpg

ব্লগের পেজগুলো সম্পূর্ণ করা

মেনু যোগ করা

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

ক্যাটাগরি পেজ তৈরি

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

ট্যাগ ক্লাউড ইন্টারফেস তৈরি

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

“আমার সম্পর্কে” পেজ তৈরি

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

সাইডবারে সোশ্যাল লিংক সেট করা

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

GitHub-এর সাথে ব্লগ যুক্ত করা

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

এই মুহূর্তে ব্রাউজার ওপেন করে http://your-name.github.io ভিজিট করুন। অভিনন্দন, আপনার ব্লগ এখন সম্পূর্ণ সেটআপ হয়ে গেছে!

ডোমেইন যুক্ত করা

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

ডোমেইন কেনা

ডোমেইন রেজোলিউশন

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

ডোমেইন রেজোলিউশন কনফিগার করার পর, ব্লগ ডিরেক্টরিতে যান, source ডিরেক্টরির মধ্যে CNAME নামে একটি ফাইল তৈরি করুন (লক্ষ্য রাখবেন এটি বড় হাতের অক্ষরে হবে এবং কোনো এক্সটেনশন থাকবে না)। নোটপ্যাড দিয়ে ওপেন করে কেনা ডোমেইনটি লিখুন, যেমন: www.philoli.com

hexo g
hexo d

এখন ব্রাউজার ওপেন করে আপনার ডোমেইন টাইপ করে এন্টার চাপুন। অভিনন্দন, আপনার এখন নিজের একটি স্বাধীন ডোমেইনযুক্ত ব্লগ রয়েছে!

নতুন পোস্ট প্রকাশ করা

title পোস্টের শিরোনাম
date তৈরির তারিখ (ফাইলের তৈরির তারিখ)
updated পরিবর্তনের তারিখ (ফাইলের পরিবর্তনের তারিখ)
comments কমেন্ট চালু থাকবে কিনা true
tags ট্যাগ
categories ক্যাটাগরি
permalink url-এর নাম (ফাইলের নাম)
hexo g
hexo d

ব্যক্তিগতকরণ (উন্নত)

নিচে ব্লগের কিছু উন্নত ব্যক্তিগতকরণ স্টাইল সেটিংস দেওয়া হলো। নতুনরা চাইলে এই অংশটি আপাতত এড়িয়ে যেতে পারেন।

RSS যোগ করা

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

হোমপেজে পোস্ট ট্রাঙ্কেশন

    <!--more-->

পোস্টের মধ্যে উদ্ধৃতি টেক্সট সেন্টার করা

{% centerquote %}
উদ্ধৃত পাঠ্য
{% endcenterquote %}

{% centerquote %} উদ্ধৃত পাঠ্য {% endcenterquote %}

কোড ব্লকের স্টাইল পরিবর্তন

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

সাইট তৈরির সময় নির্ধারণ

since: 2024

পোস্ট লিংকের স্টাইল উন্নত করা

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

ব্লগে ব্যাকগ্রাউন্ড ইমেজ যোগ করা

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //ছবি পুরোটা না এলে পুনরাবৃত্তি হবে কিনা এবং কিভাবে
    background-attachment:fixed;    //ছবি স্ক্রল করার সাথে যাবে কিনা
    background-size: cover;         //কভার
    background-position:50% 50%;    //ছবির অবস্থান
}

ব্লগের কন্টেন্ট ব্যাকগ্রাউন্ড অর্ধ-স্বচ্ছ করা


//ব্লগের কন্টেন্ট স্বচ্ছ করা
//পোস্ট কন্টেন্টের স্বচ্ছতা সেটিংস
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


//সাইডবারের স্বচ্ছতা সেটিংস
.sidebar {
  opacity: 0.9;
}

//মেনুবারের স্বচ্ছতা সেটিংস
.header-inner {
  background: rgba(255,255,255,0.9);
}

//সার্চ বক্সের (local-search) স্বচ্ছতা সেটিংস
.popup {
  opacity: 0.9;
}

ইনলাইন কোড ব্লকের স্টাইল অপ্টিমাইজ করা

// কোড ট্যাগগুলির জন্য সৌন্দর্যবর্ধন
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

ওয়েবসাইটের নিচে ভিজিটরের সংখ্যা যোগ করা

# copyright ট্যাগটি খুঁজুন, তারপর ট্যাগটির ভিতরে কোড যোগ করুন

<div class="copyright">
# ......এখানে কিছু কনফিগারেশন ইতিমধ্যেই আছে
# এখানে নতুন কোড যোগ করুন
</div>

# যোগ করার পর এটি দেখতে এমন হবে:
<div class="copyright">
  # ......এখানে কিছু কনফিগারেশন ইতিমধ্যেই আছে
  # এখানে নতুন কোড যোগ করুন
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# সবকিছু ঠিক থাকলে প্রকাশ করুন
hexo d

রিপোজিটরিতে README.md ফাইল যোগ করা

সাধারণত প্রতিটি প্রজেক্টে একটি README.md ফাইল থাকে, কিন্তু Hexo ব্যবহার করে রিপোজিটরিতে ডিপ্লয় করার পর প্রজেক্টের README.md ফাইলটি ওভাররাইট হয়ে যায়। তাই ওভাররাইট এড়াতে কনফিগারেশন ফাইল সেট করতে হবে।

Hexo ডিরেক্টরির source রুট ডিরেক্টরিতে একটি README.md ফাইল যোগ করুন, সাইট কনফিগারেশন ফাইল _config.yml পরিবর্তন করুন, skip_render প্যারামিটারের মান সেট করুন:

skip_render: README.md

সেভ করে বেরিয়ে আসুন। এরপর যখন hexo d কমান্ড ব্যবহার করে ব্লগ ডিপ্লয় করবেন, তখন README.md ফাইলটি রেন্ডার হবে না।

কয়েকটি দরকারী প্লাগইন

সোর্স ফাইল ব্যাকআপ

# আগে সেট করা ব্লগের রিপোজিটরি ঠিকানা যোগ করুন
git remote add https://github.com/your-name/your-name.github.io.git

# বর্তমান পরিবর্তনগুলি যোগ করুন এবং সেভ করুন, একটি নোট সহ
git add .
git commit -m "সোর্স ফাইল আপডেট"

# একটি নতুন ব্রাঞ্চ তৈরি করুন এবং তাতে স্যুইচ করুন
git checkout -b source

# স্থানীয় সোর্স ব্রাঞ্চের সমস্ত কন্টেন্ট রিমোট রিপোজিটরির সোর্স ব্রাঞ্চে পুশ করুন
git push origin source:source

ভিন্ন কম্পিউটার থেকে ব্লগ লেখা

npm install -g hexo-cli
# রিপোজিটরি স্থানীয়ভাবে ক্লোন করুন
git clone https://github.com/your-name/your-name.github.io.git

# যদি স্থানীয়ভাবে ইতিমধ্যেই ক্লোন করা থাকে, তাহলে প্রতিবার ব্লগ আপডেট করার আগে সর্বশেষ ব্রাঞ্চ কন্টেন্ট পুল করতে হবে
git pull origin

# সংশ্লিষ্ট ব্রাঞ্চে স্যুইচ করুন
git checkout source

# Hexo কনফিগারেশনের অধীনে সমস্ত প্লাগইন ইনস্টল করার পর ব্লগ কন্টেন্ট এডিট করা শুরু করতে পারেন
npm install

# কন্টেন্ট পরিবর্তন করার পর দ্রুত ব্যাকআপ নিতে ভুলবেন না
git add .
git commit -m "ব্লগ আপডেট xxx"
git push origin source:source

# ডোমেইন সাইটে সর্বশেষ ব্লগ কন্টেন্ট প্রকাশ করুন
hexo clean
hexo g  # স্ট্যাটিক ফাইল তৈরি করুন
hexo s  # স্থানীয়ভাবে ব্লগের প্রভাব প্রিভিউ করুন
hexo d  # সর্বশেষ ব্লগ কন্টেন্ট প্রকাশ করুন

কয়েকটি সাধারণ কমান্ডের সংক্ষিপ্ত তালিকা

hexo g
#অথবা hexo generate, সোর্স ফাইল থেকে স্ট্যাটিক ওয়েবপেজ তৈরি করে
hexo d
#অথবা hexo deploy, GitHub Pages-এ প্রকাশ করে পুশ করে
hexo s
#অথবা hexo server, স্থানীয়ভাবে ডিপ্লয় করে পরীক্ষা করে
hexo clean
# স্ট্যাটিক ওয়েবপেজের ক্যাশে পরিষ্কার করে, তারপর hexo d পুনরায় জেনারেট করে