آموزش گام به گام ساخت وبلاگ هگزو (Hexo) از صفر (نسخه ۲۰۲۴)

#راه‌اندازی وبلاگ

آیا از رابط‌های کاربری بی‌روح و نازیبای وبلاگ‌های قدیمی خسته شده‌اید؟ آیا از اعلان‌های بی‌پایان وب‌سایت‌ها کلافه شده‌اید؟ آیا مدت‌هاست که رویای داشتن یک وبلاگ شخصی را در سر می‌پرورانید، اما آموزش‌های پیچیده و کدهای سردرگم‌کننده شما را از این کار بازداشته است؟ پس تبریک می‌گویم! این مقاله دقیقاً برای شماست تا به ساده‌ترین و قابل‌فهم‌ترین شکل ممکن، گام به گام به شما کمک کند تا وبلاگ شخصی خودتان را بسازید. تنها کافی است کمی صبر داشته باشید و مرحله به مرحله با ما همراه شوید.

هگزو (Hexo)، به عنوان یک چارچوب وبلاگ‌نویسی سریع، ساده و کارآمد، واقعاً نعمتی برای مبتدیان است. و گیت‌هاب (GitHub) هم ما را از دردسر اجاره و راه‌اندازی سرورهای اضافی بی‌نیاز می‌کند. بنابراین، در این مقاله از هگزو و گیت‌هاب برای ساخت وبلاگ استفاده خواهیم کرد.

من قبلاً در سال ۲۰۱۸ یک آموزش مختصر برای ساخت وبلاگ از صفر نوشته بودم. اما به دلیل به‌روزرسانی افزونه‌ها، نیاز به تغییراتی در برخی جزئیات وجود داشت؛ از این رو، نسخه ۲۰۲۴ این آموزش مختصر را مجدداً منتشر می‌کنیم.

آماده‌سازی

ساخت وبلاگ استاتیک هگزو به صورت محلی

$ 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:  Do something cool // یک شعار یا جمله کوتاه
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

اتصال وبلاگ به گیت‌هاب

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 بروید. تبریک می‌گویم، وبلاگ شما تا این مرحله کاملاً آماده شده است.

اتصال دامنه

تا این مرحله، وبلاگ کاملاً راه‌اندازی شده و از طریق دامنه گیت‌هاب نیز قابل دسترسی است. برای اینکه کار عالی‌تر شود، حالا یک دامنه کوتاه‌تر را به این وبلاگ متصل می‌کنیم.

خرید دامنه

تنظیمات DNS دامنه

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

پس از اتمام تنظیمات DNS، وارد دایرکتوری وبلاگ شوید. در پوشه source، یک فایل جدید به نام CNAME (به حروف بزرگ و بدون پسوند) ایجاد کنید. آن را با Notepad باز کرده و دامنه خریداری شده خود را در آن بنویسید، مثلاً: www.philoli.com

hexo g
hexo d

حالا مرورگر خود را باز کنید، دامنه خود را وارد کرده و Enter را فشار دهید. تبریک می‌گویم، شما اکنون یک وبلاگ با دامنه مستقل خود دارید!

انتشار مقالات جدید

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)
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 موجود در پروژه بازنویسی می‌شود. بنابراین، برای جلوگیری از این بازنویسی، باید فایل پیکربندی را تنظیم کنید.

در پوشه ریشه source در دایرکتوری Hexo، یک فایل 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

# تمامی محتوای شاخه source محلی را به شاخه 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

# پس از نصب تمامی افزونه‌های پیکربندی هگزو، می‌توانید شروع به به‌روزرسانی و ویرایش محتوای وبلاگ کنید
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 برای تولید مجدد