Hugo vs Jekyll: مقارنة شاملة في بناء قوالب مواقع الويب الساكنة

في عالم تطوير الويب سريع التطور، برزت مولدات المواقع الساكنة (Static Site Generators) كحلول قوية وفعالة لإنشاء مواقع سريعة وآمنة وقابلة للتوسع. من بين هذه المولدات، يتربع Hugo و Jekyll على عرش الصدارة، حيث يقدم كل منهما مجموعة فريدة من الميزات والمنهجيات لبناء قوالب المواقع. في هذا المقال، سنغوص في تفاصيل إنشاء القوالب لكلا المنصتين، مستعرضين الفروقات الدقيقة والتشابهات الجوهرية بينهما.

لقد خضت مؤخرًا تحدي تصميم قالب موقع توثيقي لمشروعين مختلفين. كان كلا المشروعين يتطلبان نفس الميزات الأساسية، لكن أحدهما يعتمد على Jekyll والآخر على Hugo. وكما يقتضي المنطق الهندسي، كان هناك خيار واحد واضح: قررت إنشاء نفس القالب لكلا الإطارين لتقديم مقارنة شاملة لك أيها القارئ الكريم.

هذا المقال ليس دليلاً شاملاً لبناء القوالب من الألف إلى الياء، بل هو مقدمة تهدف إلى تعريفك بالعملية الأساسية لإنشاء قالب في أي من المولدين. سنستكشف المحاور التالية:

• كيفية تنظيم ملفات القوالب.
• أين تضع المحتوى الخاص بك.
• آلية عمل أنظمة القوالب (Templating).
• إنشاء قائمة علوية باستخدام كائن pages.
• إنشاء قائمة بروابط متداخلة من قائمة بيانات.
• تجميع أجزاء القالب معًا.
• كيفية إنشاء الأنماط (Styles).
• كيفية التهيئة والنشر على GitHub Pages.

إليك رسم تخطيطي مبسط (wireframe) للقالب الذي سنقوم بإنشائه:

إذا كنت تخطط للمتابعة خطوة بخطوة، فقد يكون من المفيد تشغيل القالب محليًا أثناء بنائه – وكلا المولدين يوفران هذه الوظيفة. لتشغيل Jekyll محليًا، استخدم الأمر jekyll serve، ولـ Hugo، استخدم hugo serve.

يتكون القالب من عنصرين رئيسيين: منطقة المحتوى الرئيسية، والقائمة الجانبية بالغة الأهمية. لإنشائهما، ستحتاج إلى ملفات قوالب تخبر مولد الموقع بكيفية إنشاء صفحة HTML. لتنظيم ملفات قوالب المظهر بطريقة منطقية، تحتاج أولاً إلى معرفة بنية الدليل التي يتوقعها مولد الموقع.

كيفية تنظيم ملفات القوالب

يعد فهم بنية الدليل (Directory Structure) أمرًا حيويًا لبناء قوالب فعالة ومنظمة. دعنا نستعرض كيف يتعامل كل من Jekyll و Hugo مع تنظيم الملفات.

تنظيم ملفات القوالب في Jekyll

يدعم Jekyll القوالب المستندة إلى حزم Gem، والتي يمكن للمستخدمين تثبيتها كأي حزم Ruby أخرى. تخفي هذه الطريقة ملفات القالب داخل الحزمة، ولأغراض هذه المقارنة، لن نستخدم القوالب المستندة إلى حزم Gem.

عند تشغيل الأمر jekyll new-theme <name>، سيقوم Jekyll بإنشاء هيكل قالب جديد لك. إليك كيف تبدو هذه الملفات:

.
├── assets
├── Gemfile
├── _includes
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── LICENSE.txt
├── README.md
├── _sass
└── <name>.gemspec

أسماء الأدلة وصفية بشكل مناسب. دليل _includes مخصص لأجزاء صغيرة من التعليمات البرمجية التي تعيد استخدامها في أماكن مختلفة، تمامًا كما تضع الزبدة على كل شيء (هل أنا الوحيد؟). يحتوي دليل _layouts على قوالب لأنواع مختلفة من الصفحات على موقعك. مجلد _sass مخصص لملفات Sass المستخدمة لبناء ورقة أنماط موقعك.

تنظيم ملفات القوالب في Hugo

يمكنك إنشاء قالب Hugo جديد عن طريق تشغيل الأمر hugo new theme <name>. يحتوي على هذه الملفات:

.
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials
│       ├── footer.html
│       ├── header.html
│       └── head.html
├── LICENSE
├── static
│   ├── css
│   └── js
└── theme.toml

يمكنك ملاحظة بعض أوجه التشابه. توجد ملفات قوالب صفحات Hugo في دليل layouts/. لاحظ أن نوع الصفحة _default يحتوي على ملفات لـ list.html و single.html. على عكس Jekyll، يستخدم Hugo أسماء الملفات المحددة هذه للتمييز بين صفحات القائمة (مثل صفحة تحتوي على روابط لجميع منشورات مدونتك) والصفحات الفردية (مثل أحد منشورات مدونتك). يحتوي دليل layouts/partials/ على الأجزاء القابلة لإعادة الاستخدام، وملفات ورقة الأنماط لها مكان مخصص في static/css/.

هياكل الدليل هذه ليست ثابتة، حيث يسمح كلا المولدين ببعض التخصيص. على سبيل المثال، يتيح لك Jekyll تعريف المجموعات (collections)، ويستخدم Hugo حزم الصفحات (page bundles). تتيح لك هذه الميزات تنظيم المحتوى الخاص بك بطرق متعددة، ولكن في الوقت الحالي، دعنا نلقي نظرة على مكان وضع بعض الصفحات البسيطة.

أين تضع المحتوى الخاص بك؟

يعد تحديد مكان تخزين المحتوى الخاص بك خطوة أساسية لضمان تنظيم الموقع وسهولة إدارته. يتبع كل من Jekyll و Hugo منهجيات مختلفة في هذا الصدد.

لإنشاء قائمة موقع تبدو كالتالي:

Introduction
Getting Started
Configuration
Deploying
Advanced Usage
All Configuration Settings
Customizing
Help and Support

ستحتاج إلى قسمين (“Introduction” و “Advanced Usage”) يحتويان على أقسامهما الفرعية الخاصة. دعنا نرى كيف يتم ذلك في كل من Jekyll و Hugo.

تحديد مكان المحتوى في Jekyll

لا يفرض Jekyll قيودًا صارمة على موقع المحتوى. يتوقع وجود الصفحات في جذر موقعك، وسيقوم ببناء أي شيء موجود هناك. إليك كيف يمكنك تنظيم هذه الصفحات في جذر موقع Jekyll الخاص بك:

.
├── 404.html
├── assets
├── Gemfile
├── _includes
├── index.markdown
├── intro
│   ├── config.md
│   ├── deploy.md
│   ├── index.md
│   └── quickstart.md
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── LICENSE.txt
├── README.md
├── _sass
├── <name>.gemspec
└── usage
    ├── customizing.md
    ├── index.md
    ├── settings.md
    └── support.md

يمكنك تغيير موقع مصدر الموقع في تهيئة Jekyll.

تحديد مكان المحتوى في Hugo

في Hugo، يُتوقع أن يكون كل المحتوى الذي سيتم عرضه موجودًا في مجلد content/. هذا يمنع Hugo من محاولة عرض صفحات لا تريدها، مثل 404.html، كمحتوى للموقع. إليك كيف يمكنك تنظيم دليل content/ الخاص بك في Hugo:

.
├── _index.md
├── intro
│   ├── config.md
│   ├── deploy.md
│   ├── _index.md
│   └── quickstart.md
└── usage
    ├── customizing.md
    ├── _index.md
    ├── settings.md
    └── support.md

بالنسبة لـ Hugo، فإن _index.md و index.md يعنيان أشياء مختلفة. قد يكون من المفيد معرفة نوع حزمة الصفحة (Page Bundle) التي تريدها لكل قسم: Leaf (التي ليس لها أطفال)، أو Branch (التي تحتوي على أطفال). الآن بعد أن أصبح لديك فكرة عن مكان وضع الأشياء، دعنا نلقي نظرة على كيفية بناء قالب صفحة.

كيف تعمل أنظمة القوالب (Templating)

تُعد أنظمة القوالب هي القلب النابض لأي مولد مواقع ساكنة، حيث تسمح لك بفصل المحتوى عن التصميم. يستخدم كل من Jekyll و Hugo لغات قوالب مختلفة، ولكن المفهوم الأساسي يظل واحدًا.

القوالب في Jekyll: لغة Liquid

تُبنى قوالب صفحات Jekyll باستخدام لغة قوالب Liquid. تستخدم الأقواس المعقوفة لإخراج محتوى متغير إلى صفحة، مثل عنوان الصفحة: {{ page.title }}. يمكن لـ Liquid أيضًا التعامل مع المنطق. تستخدم صيغة العلامات (tags syntax) للدلالة على عمليات المنطق:

{% if user %}
  Hello {{ user.name }}!
{% endif %}

القوالب في Hugo: قوالب Go

تستخدم قوالب Hugo أيضًا الأقواس المعقوفة، ولكنها مبنية باستخدام قوالب Go (Go Templates). الصيغة متشابهة، ولكنها مختلفة: {{ .Title }}. تضع قوالب Go دوالها ووسائطها داخل صيغة الأقواس المعقوفة:

{{ if .User }}
  Hello {{ .User }}!
{{ end }}

مقارنة قوالب الصفحة الافتراضية

تسمح لك لغات القوالب ببناء هيكل صفحة HTML واحد، ثم إخبار مولد الموقع بوضع محتوى متغير في المناطق التي تحددها. دعنا نقارن قالبين افتراضيين محتملين لـ default لـ Jekyll و Hugo.

قالب default الافتراضي لـ Jekyll مجرد، لذا سننظر إلى قالبهم المبتدئ Minima. إليك ملف _layouts/default.html في Jekyll (باستخدام Liquid):

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
  {%- include head.html -%}
  <body>
    {%- include header.html -%}
    <main class="page-content" aria-label="Content">
      <div class="wrapper">
        {{ content }}
      </div>
    </main>
    {%- include footer.html -%}
  </body>
</html>

إليك قالب Hugo الافتراضي layouts/_default/baseof.html (باستخدام قوالب Go):

<!DOCTYPE html>
<html>
  {{- partial "head.html" . -}}
  <body>
    {{- partial "header.html" . -}}
    <div id="content">
      {{- block "main" . }}{{- end }}
    </div>
    {{- partial "footer.html" . -}}
  </body>
</html>

صيغة مختلفة، لكن الفكرة واحدة. كلا القالبين يستدعيان أجزاء قابلة لإعادة الاستخدام لـ head.html و header.html و footer.html. تظهر هذه الأجزاء في العديد من الصفحات، لذا من المنطقي عدم تكرار التعليمات البرمجية. يحتوي كلا القالبين أيضًا على مكان للمحتوى الرئيسي، على الرغم من أن قالب Jekyll يستخدم متغيرًا ({{ content }}) بينما يستخدم Hugo كتلة ({{- block "main" . }}{{- end }}). الكتل هي مجرد طريقة أخرى يتيح لك Hugo من خلالها تعريف أجزاء قابلة لإعادة الاستخدام. الآن بعد أن عرفت كيف تعمل أنظمة القوالب، يمكنك بناء قائمة الشريط الجانبي للقالب.

إنشاء قائمة علوية باستخدام كائن pages

يمكنك إنشاء قائمة علوية برمجياً من صفحاتك. ستبدو كالتالي:

Introduction
Advanced Usage

إنشاء قائمة علوية في Jekyll

يمكنك عرض روابط لصفحات الموقع في قالب Liquid الخاص بك عن طريق التكرار عبر كائن site.pages الذي يوفره Jekyll وإنشاء قائمة:

<ul>
  {% for page in site.pages %}
    <li>
      <a href="{{ page.url | absolute_url }}">{{ page.title }}</a>
    </li>
  {% endfor %}
</ul>

يعيد هذا الكود جميع صفحات الموقع، بما في ذلك تلك التي قد لا ترغب فيها، مثل 404.html. يمكنك تصفية الصفحات التي تريدها بالفعل باستخدام بضعة وسوم إضافية، مثل تضمين الصفحات بشرط إذا كان لديها معلمة section: true مضبوطة:

<ul>
  {% for page in site.pages %}
    {%- if page.section -%}
      <li>
        <a href="{{ page.url | absolute_url }}">{{ page.title }}</a>
      </li>
    {%- endif -%}
  {% endfor %}
</ul>

إنشاء قائمة علوية في Hugo

يمكنك تحقيق نفس التأثير باستخدام تعليمات برمجية أقل قليلاً في Hugo. قم بالتكرار عبر كائن .Pages الخاص بـ Hugo باستخدام إجراء range الخاص بقوالب Go:

<ul>
  {{ range .Pages }}
    <li>
      <a href="{{.Permalink}}">{{.Title}}</a>
    </li>
  {{ end }}
</ul>

يستخدم هذا القالب كائن .Pages لإرجاع جميع الصفحات العلوية في دليل content/ لموقع Hugo الخاص بك. نظرًا لأن Hugo يستخدم مجلدًا محددًا لمحتوى الموقع الذي تريد عرضه، فلا يلزم تصفية إضافية لإنشاء قائمة بسيطة لصفحات الموقع.

إنشاء قائمة بروابط متداخلة من قائمة بيانات

يمكن لكلا مولدَي المواقع استخدام قائمة بيانات معرفة بشكل منفصل من الروابط لعرض قائمة في قالبك. هذا أكثر ملاءمة لإنشاء روابط متداخلة، مثل هذه:

Introduction
Getting Started
Configuration
Deploying
Advanced Usage
All Configuration Settings
Customizing
Help and Support

القوائم المتداخلة في Jekyll

يدعم Jekyll ملفات البيانات بعدة تنسيقات، بما في ذلك YAML. إليك تعريف القائمة أعلاه في ملف _data/menu.yml:

section:
  - page: Introduction
    url: /intro
    subsection:
      - page: Getting Started
        url: /intro/quickstart
      - page: Configuration
        url: /intro/config
      - page: Deploying
        url: /intro/deploy
  - page: Advanced Usage
    url: /usage
    subsection:
      - page: Customizing
        url: /usage/customizing
      - page: All Configuration Settings
        url: /usage/settings
      - page: Help and Support
        url: /usage/support

إليك كيفية عرض البيانات في قالب الشريط الجانبي:

{% for a in site.data.menu.section %}
  <a href="{{ a.url }}">{{ a.page }}</a>
  <ul>
    {% for b in a.subsection %}
      <li>
        <a href="{{ b.url }}">{{ b.page }}</a>
      </li>
    {% endfor %}
  </ul>
{% endfor %}

تسمح لك هذه الطريقة ببناء قائمة مخصصة، بعمق مستويين من التداخل. تقتصر مستويات التداخل على حلقات for في القالب. للحصول على إصدار تكراري (recursive) يتعامل مع مستويات أعمق من التداخل، راجع Nested tree navigation with recursion.

القوائم المتداخلة في Hugo

يقوم Hugo بشيء مشابه مع قوالب القوائم. يمكنك تعريف روابط القائمة في إعدادات موقع Hugo، وحتى إضافة خصائص مفيدة يفهمها Hugo، مثل الترجيح (weighting). إليك تعريف القائمة أعلاه في ملف config.yaml:

sectionPagesMenu: main
menu:
  main:
    - identifier: intro
      name: Introduction
      url: /intro/
      weight: 1
    - name: Getting Started
      parent: intro
      url: /intro/quickstart/
      weight: 1
    - name: Configuration
      parent: intro
      url: /intro/config/
      weight: 2
    - name: Deploying
      parent: intro
      url: /intro/deploy/
      weight: 3
    - identifier: usage
      name: Advanced Usage
      url: /usage/
    - name: Customizing
      parent: usage
      url: /usage/customizing/
      weight: 2
    - name: All Configuration Settings
      parent: usage
      url: /usage/settings/
      weight: 1
    - name: Help and Support
      parent: usage
      url: /usage/support/
      weight: 3

يستخدم Hugo المعرف identifier، والذي يجب أن يتطابق مع اسم القسم، جنبًا إلى جنب مع المتغير parent للتعامل مع التداخل. إليك كيفية عرض القائمة في قالب الشريط الجانبي:

<ul>
  {{ range .Site.Menus.main }}
    {{ if .HasChildren }}
      <li>
        <a href="{{ .URL }}">{{ .Name }}</a>
      </li>
      <ul class="sub-menu">
        {{ range .Children }}
          <li>
            <a href="{{ .URL }}">{{ .Name }}</a>
          </li>
        {{ end }}
      </ul>
    {{ else }}
      <li>
        <a href="{{ .URL }}">{{ .Name }}</a>
      </li>
    {{ end }}
  {{ end }}
</ul>

تقوم الدالة range بالتكرار عبر بيانات القائمة، ويتعامل متغير .Children الخاص بـ Hugo مع الصفحات المتداخلة نيابة عنك.

تجميع أجزاء القالب معًا

بعد أن قمنا بإنشاء الأجزاء المختلفة للقالب، حان الوقت لتجميعها في قالب الصفحة الرئيسي. سيتم دمج قائمة الشريط الجانبي القابلة لإعادة الاستخدام (_includes/sidebar.html لـ Jekyll و partials/sidebar.html لـ Hugo) في قالب default.html أو baseof.html.

تجميع القالب في Jekyll

في Jekyll، سيكون التجميع كالتالي:

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
  {%- include head.html -%}
  <body>
    {%- include sidebar.html -%}
    {%- include header.html -%}
    <div id="content" class="page-content" aria-label="Content">
      {{ content }}
    </div>
    {%- include footer.html -%}
  </body>
</html>

تجميع القالب في Hugo

في Hugo، سيكون التجميع كالتالي:

<!DOCTYPE html>
<html>
  {{- partial "head.html" . -}}
  <body>
    {{- partial "sidebar.html" . -}}
    {{- partial "header.html" . -}}
    <div id="content" class="page-content" aria-label="Content">
      {{- block "main" . }}{{- end }}
    </div>
    {{- partial "footer.html" . -}}
  </body>
</html>

عند إنشاء الموقع، ستحتوي كل صفحة على جميع التعليمات البرمجية من ملف sidebar.html الخاص بك، مما يضمن اتساق التصميم عبر الموقع.

إنشاء الأنماط (Styles)

تُعد الأنماط جزءًا أساسيًا من أي موقع ويب، حيث تمنحه مظهره الجذاب. يدعم كلا مولدَي المواقع استخدام Sass لإنشاء أوراق أنماط CSS. يتمتع Jekyll بمعالجة Sass مدمجة، بينما يستخدم Hugo ما يُعرف بـ Hugo Pipes. كلا الخيارين لهما بعض الخصائص المميزة.

Sass و CSS في Jekyll

لمعالجة ملف Sass في Jekyll، قم بإنشاء تعريفات الأنماط الخاصة بك في دليل _sass. على سبيل المثال، في ملف باسم _sass/style-definitions.scss:

$background-color: #eef !default;
$text-color: #111 !default;

body {
  background-color: $background-color;
  color: $text-color;
}

لن يقوم Jekyll بإنشاء هذا الملف مباشرة، لأنه يعالج فقط الملفات التي تحتوي على front matter. لإنشاء مسار الملف الناتج لورقة أنماط موقعك، استخدم عنصرًا نائبًا (placeholder) مع front matter فارغ حيث تريد ظهور ملف .css. على سبيل المثال، assets/css/style.scss. في هذا الملف، قم ببساطة باستيراد أنماطك:

---
---
@import "style-definitions";

يتميز هذا التكوين، الذي قد يبدو غير تقليدي بعض الشيء، بميزة: يمكنك استخدام علامات ومتغيرات قوالب Liquid في ملف العنصر النائب الخاص بك. هذه طريقة رائعة للسماح للمستخدمين بتعيين المتغيرات من ملف _config.yml الخاص بالموقع، على سبيل المثال. سيكون مسار ورقة أنماط CSS الناتجة في موقعك الذي تم إنشاؤه هو /assets/css/style.css. يمكنك الربط به في ملف head.html الخاص بموقعك باستخدام:

<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}" media="screen">

Sass و Hugo Pipes في Hugo

يستخدم Hugo ميزة Hugo Pipes لمعالجة Sass إلى CSS. يمكنك تحقيق ذلك باستخدام دالة معالجة الأصول (asset processing function) الخاصة بـ Hugo، وهي resources.ToCSS، والتي تتوقع مصدرًا في دليل assets/. تأخذ ملف SCSS كوسيطة. مع تعريفات الأنماط الخاصة بك في ملف Sass في assets/sass/style.scss، إليك كيفية الحصول على Sass ومعالجته وربطه في ملف head.html الخاص بقالبك:

{{ $style := resources.Get "/sass/style.scss" | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" media="screen">

تتطلب معالجة أصول Hugo استخدام Hugo Extended، والذي قد لا يكون لديك افتراضيًا. يمكنك الحصول على Hugo Extended من صفحة الإصدارات.

التهيئة والنشر على GitHub Pages

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

تهيئة Jekyll

إليك ملف _config.yml مبسط لـ Jekyll:

title: Your awesome title
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
theme: # for gem-based themes
remote_theme: # for themes hosted on GitHub, when used with GitHub Pages

باستخدام remote_theme، يمكن استخدام أي قالب Jekyll مستضاف على GitHub مع المواقع المستضافة على GitHub Pages. يحتوي Jekyll على تهيئة افتراضية، لذا فإن أي معلمات تُضاف إلى ملف التهيئة الخاص بك ستتجاوز الإعدادات الافتراضية. إليك إعدادات تهيئة إضافية.

تهيئة Hugo

إليك مثال مبسط لملف config.yml الخاص بـ Hugo:

baseURL: https://example.com/ # The full domain your site will live at
languageCode: en-us
title: Hugo Docs Site
theme: # theme name

لا يفترض Hugo أي شيء، لذا إذا كانت معلمة ضرورية مفقودة، فسترى تحذيرًا عند بناء موقعك أو تشغيله. إليك جميع إعدادات التهيئة لـ Hugo.

النشر على GitHub Pages

يقوم كلا المولدين ببناء موقعك باستخدام أمر واحد. لـ Jekyll، استخدم jekyll build. اطلع على خيارات البناء الإضافية هنا. لـ Hugo، استخدم hugo. يمكنك تشغيل hugo help أو الاطلاع على خيارات البناء الإضافية هنا.

سيتعين عليك اختيار مصدر موقع GitHub Pages الخاص بك. بمجرد الانتهاء، سيتم تحديث موقعك في كل مرة تدفع فيها بناءً جديدًا. بالطبع، يمكنك أيضًا أتمتة بناء GitHub Pages باستخدام GitHub Actions. إليك أحدهما للبناء والنشر باستخدام Hugo، ووآخر للبناء والنشر باستخدام Jekyll.

النتائج النهائية: معركة العمالقة

تكمن جميع الاختلافات الجوهرية بين هذين المولدين تحت الغطاء، أي في طريقة عملهما الداخلية. ومع ذلك، دعنا نلقي نظرة على القوالب النهائية، بتنوعين لونيين.

إليك قالب Hugo:

وهنا قالب Jekyll:

من الفائز؟

يمتلك كل من Hugo و Jekyll خصائصه ومزاياه الفريدة. من منظور المطور، يعد Jekyll خيارًا عمليًا للمواقع البسيطة التي لا تتطلب احتياجات تنظيمية معقدة. إذا كنت تبحث عن عرض بعض المنشورات ذات الصفحة الواحدة في قالب متاح واستضافة موقعك على GitHub Pages، فإن Jekyll سيوفر لك بيئة عمل سريعة.

شخصيًا، أستخدم Hugo. أحب القدرات التنظيمية التي توفرها حزم الصفحات (Page Bundles)، وهو مدعوم من قبل فريق متخصص وواعٍ يسعى حقًا لتسهيل الأمور على مستخدميه. يتجلى ذلك في العديد من وظائف Hugo، والحيل المفيدة مثل معالجة الصور (Image Processing) والأكواد المختصرة (Shortcodes). يبدو أنهم يصدرون إصلاحات وإصدارات جديدة بنفس وتيرة إعدادي لكوب قهوة جديد – وهذا، اعتمادًا على حالة استخدامك، قد يكون رائعًا أو مزعجًا.

إذا كنت لا تزال غير قادر على اتخاذ قرار، فلا تقلق. قالب توثيق OpenGitDocs الذي أنشأته متاح لكل من Hugo و Jekyll. ابدأ بأحدهما، وقم بالتبديل لاحقًا إذا أردت. هذه هي فائدة وجود الخيارات.

الخلاصة التقنية

في هذه المقارنة الشاملة بين Hugo و Jekyll لبناء قوالب المواقع الساكنة، يتضح أن كلا الأداتين تقدمان حلولًا قوية، لكنهما تختلفان في فلسفة التصميم والتعامل مع المحتوى. Jekyll، بكونه أقدم وأكثر بساطة في بعض الجوانب، يتفوق في السرعة والسهولة للمشاريع الصغيرة أو المدونات التي لا تتطلب بنية معقدة، خاصة مع تكامله السلس مع GitHub Pages. من ناحية أخرى، يقدم Hugo أداءً فائق السرعة وقدرات تنظيمية متقدمة من خلال ميزات مثل Page Bundles و Hugo Pipes، مما يجعله خيارًا ممتازًا للمشاريع الأكبر أو تلك التي تتطلب مرونة أكبر في إدارة الأصول والمحتوى. يعتمد الاختيار الأمثل بينهما على حجم المشروع، تعقيد المحتوى، وتفضيلات المطور من حيث بيئة العمل والتحكم في التفاصيل.