دليل موجز لإنشاء مدونة Hexo من الصفر (إصدار 2024)

#إعداد المدونة

هل سئمتَ من الواجهات الباهتة لمواقع المدونات؟ هل ضقتَ ذرعًا بالإشعارات المتواصلة للمواقع؟ هل طالما راودك حلم امتلاك مدونتك الخاصة، لكن تعقيد الشروحات وقائمة الأكواد المربكة أوقفتك؟ إذاً، تهانينا! هذه المقالة وُضِعَت خصيصًا لتأخذ بيدك خطوة بخطوة لإنشاء مدونتك الخاصة بأبسط الطرق وأوضحها. كل ما تحتاجه هو قليل من الصبر، ومتابعة الخطوات بدقة.

باعتباره إطار عمل للمدونات سريعًا، بسيطًا، وفعالًا، فإن Hexo يُعدّ نعمة حقيقية للمبتدئين. أما GitHub، فيُريحنا من عناء استئجار الخوادم ونشرها بشكل إضافي. لذا، ستستعرض هذه المقالة كيفية بناء مدونة باستخدام Hexo و GitHub.

سبق وأن كتبتُ مقالاً في عام 2018 بعنوان دليل موجز لإنشاء مدونة من الصفر، لكن نظرًا لتحديثات الإضافات، أصبحت هناك حاجة لتعديل بعض التفاصيل، لذا أعيد إطلاق النسخة المبسطة لعام 2024 من هذا الدليل.

أعمال التحضير

إعداد مدونة 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:  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

ربط المدونة بـ 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

الآن افتح المتصفح، أدخل اسم النطاق، واضغط Enter. تهانينا، لقد أصبحت تمتلك مدونة بنطاقك المستقل الخاص بك.

نشر مقالات جديدة

title عنوان المقال
date تاريخ الإنشاء (تاريخ إنشاء الملف)
updated تاريخ التعديل (تاريخ تعديل الملف)
comments هل تفعيل التعليقات true
tags الوسوم
categories التصنيفات
permalink الاسم في الرابط (اسم الملف)
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 الموجود في المشروع. لذلك، يجب إعداد ملف التكوين لتجنب التجاوز.

في دليل 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

# ادفع كل محتوى الفرع المحلي 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

# بعد تثبيت جميع الإضافات ضمن إعدادات 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 لإعادة الإنشاء.