Markdown on kenji.blog

مقدمة إلى منشئ المواقع الثابتة باستخدام Hugo (خطوات الانتقال من WordPress)

Sun, 13 Sep 2026 02:00:00 +0900

في تطوير الويب وإدارة المدونات الحديثة، أصبحت سرعة عرض الموقع والأمان وقابلية الصيانة عوامل في غاية الأهمية. لطالما حظي “WordPress”، الذي استحوذ على حصة ساحقة كأساس للمدونات ومواقع الشركات لفترة طويلة، بشعبية لدى العديد من المستخدمين بفضل نظام الإضافات المرن وواجهة الإدارة البديهية. ومع ذلك، نظراً لأنه يتضمن الاتصال بقاعدة البيانات وتوليد الصفحات ديناميكياً على جانب الخادم (المعالجة بواسطة PHP)، فإنه يواجه تحديات مثل الضعف أمام الزيادات المفاجئة في حركة المرور وتأخير العرض (زمن الانتقال).

لذلك، وفي السنوات الأخيرة، انتشر “منشئ المواقع الثابتة (SSG: Static Site Generator)” بسرعة. في هذه المقالة، سنتعمق في “Hugo"، والذي تم تطويره بلغة Go ويُعرف بسرعة بنائه الهائلة من بين العديد من منشئات المواقع الثابتة. سنشرح بالتفصيل مقارنة البنية التقنية مع أنظمة إدارة المحتوى الديناميكية (CMS) مثل WordPress، وخطوات الانتقال المحددة، وتقييم الأداء باستخدام النماذج الرياضية، وحتى هيكل الدليل الفريد لـ Hugo وترتيب البحث عن القوالب.

1. الاختلافات التقنية بين نظام إدارة المحتوى الديناميكي (WordPress) ومنشئ المواقع الثابتة (Hugo)

تتخذ WordPress و Hugo مناهج مختلفة جذرياً في آلية تقديم المواقع الإلكترونية.

1.1 بنية WordPress (التوليد الديناميكي)

WordPress هو ممثل نموذجي لأنظمة إدارة المحتوى الديناميكية التي تقوم بتجميع الصفحات على جانب الخادم مع كل طلب. عندما يصل المستخدم (المتصفح) إلى صفحة، يقوم خادم الويب (مثل Apache أو Nginx) بتنفيذ برامج PHP النصية ويرسل استعلامات إلى قاعدة بيانات علائقية مثل MySQL (أو MariaDB). يقوم بدمج المحتوى المسترجع من قاعدة البيانات (بيانات المقالات، الفئات، العلامات، إعدادات الموقع، إلخ) مع ملفات القوالب، وينشئ ملف HTML النهائي ويعيده إلى العميل.

تتميز هذه الآلية بميزة القدرة على توليد محتوى مختلف في الوقت الفعلي لكل زائر (مثل: عربة التسوق في مواقع التجارة الإلكترونية، صفحات خاصة بالمستخدمين المسجلين للدخول)، ولكن ما لم يتم تصميم آلية التخزين المؤقت (مثل البروكسي العكسي أو الإضافات) بشكل مناسب، فإنها تستهلك موارد الخادم بشكل كبير.

1.2 بنية Hugo (التوليد المسبق وقت البناء)

من ناحية أخرى، وكما يوحي الاسم “منشئ المواقع الثابتة”، يقوم Hugo بتوليد المحتوى في “وقت البناء” وليس في “وقت الطلب”. يتم الاحتفاظ بالمحتوى ليس في قاعدة بيانات، بل كملفات “Markdown” محلية يتم التحكم في إصداراتها بواسطة أنظمة مثل Git. عندما ينفذ المطور الأمر (hugo)، يقوم Hugo بقراءة ملفات Markdown، ويصب البيانات في قوالب HTML المحددة (ملفات التخطيط)، لإنشاء مجموعة مكتملة من ملفات HTML/CSS/JS النقية.

يمكن تسليم مجموعة الملفات التي تم إنشاؤها (الأصول الثابتة) ببساطة عن طريق وضعها في “بيئة استضافة ثابتة” مثل Amazon S3 أو Cloudflare Pages أو Netlify أو Vercel أو حتى خادم Nginx بسيط. نظراً لعدم الحاجة إلى قاعدة بيانات أو لغة جانب الخادم (مثل PHP)، تنخفض المخاطر الأمنية (مثل حقن SQL ونقاط الضعف في PHP) بشكل كبير، وتزيد سرعة التوصيل إلى أقصى حد من خلال التخزين المؤقت على العقد الطرفية لشبكة توصيل المحتوى (CDN).

فيما يلي توضيح للاختلافات بين البنيتين باستخدام مخطط Mermaid.

flowchart TD
subgraph WordPress["نظام إدارة المحتوى الديناميكي (WordPress)"]
direction TB
Req1["طلب المستخدم"] --> WebServer1["خادم الويب (Nginx/Apache)"]
WebServer1 --> PHP["معالجة PHP"]
PHP <--> DB["قاعدة البيانات (MySQL)"]
PHP --> HTML1["توليد HTML"]
HTML1 --> Res1["إرجاع الاستجابة"]
end
subgraph Hugo["منشئ المواقع الثابتة (Hugo)"]
direction TB
Dev["المطور / CI・CD"] --> HugoBuild["عملية بناء Hugo"]
Markdown["مجموعة ملفات Markdown"] --> HugoBuild
Templates["القوالب (HTML)"] --> HugoBuild
HugoBuild --> StaticFiles["مجموعة الملفات الثابتة (HTML/CSS/JS)"]
StaticFiles --> CDN["CDN / الاستضافة الثابتة"]
Req2["طلب المستخدم"] --> CDN
CDN --> Res2["إرجاع استجابة فورية"]
end

2. تقييم الأداء باستخدام النماذج الرياضية

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

ينقسم الوقت المستغرق لاكتمال تحميل الصفحة (Load Time: $T_{load}$) بشكل أساسي إلى وقت استجابة الخادم (TTFB: Time To First Byte) ووقت عرض المتصفح واسترداد الموارد ($T_{render}$).

$$ T_{load} = T_{ttfb} + T_{render} $$

في حالة نظام إدارة المحتوى الديناميكي (WordPress)، فإن $T_{ttfb}$ هو مجموع العناصر التالية: تأخير الشبكة ($T_{network}$)، وقت تنفيذ البرنامج النصي من جانب الخادم ($T_{php}$)، ووقت معالجة استعلام قاعدة البيانات ($T_{db}$).

$$ T_{ttfb\_wp} = T_{network} + T_{php} + T_{db} $$

في ظل ظروف الوصول الكثيف (الحمل العالي)، يزداد كل من $T_{php}$ و $T_{db}$ بشكل غير خطي، مما قد يؤدي إلى اختناق النظام بأكمله. عند التعبير عنها رياضياً، يمكن ملاحظة التدهور التالي في وقت الاستجابة نسبة إلى عدد الطلبات ($N$) (حيث $k$ هو معامل عبء المعالجة الإضافي).

$$ T_{php}(N) \approx O(N^k), \quad T_{db}(N) \approx O(N^k) \quad \text{where } k > 1 $$

من ناحية أخرى، في بنية تجمع بين منشئ المواقع الثابتة (Hugo) و CDN، لا توجد معالجة ديناميكية على جانب الخادم (PHP أو استعلامات DB). نظراً لأنه يتم تخزين المحتوى مؤقتاً على خوادم طرفية موزعة حول العالم، فإن $T_{ttfb}$ يعتمد فقط على تأخير الشبكة من العميل إلى أقرب خادم طرفي ($T_{edge}$).

$$ T_{ttfb\_hugo} = T_{edge} $$

ونتيجة لذلك، يتحقق $T_{edge} \ll (T_{network} + T_{php} + T_{db})$، ويتم تقليل TTFB بشكل كبير إلى بضعة ميلي ثانية إلى عشرات الميلي ثانية. كما أنه حتى مع زيادة عدد الطلبات $N$، يظل وقت الاستجابة ثابتاً تقريباً ($O(1)$) بفضل وظيفة موازنة الحمل في الخوادم الطرفية.

$$ \lim_{N \to \infty} T_{ttfb\_hugo}(N) \approx \text{Constant} $$

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

3. الهيكل الأساسي ومبدأ عمل Hugo

لإتقان استخدام Hugo، من الضروري فهم هيكل الدليل الفريد الخاص به، بالإضافة إلى مفاهيم “Front Matter” و “Template Lookup Order” (ترتيب البحث عن القوالب).

3.1 شرح مفصل لهيكل الدليل

عند إنشاء مشروع Hugo جديد (hugo new site mysite)، يتم إنشاء هيكل الدليل التالي.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


mysite/
├── archetypes/ # قوالب عند إنشاء محتوى جديد (نماذج لـ Front Matter)
├── assets/ # مجموعة الملفات التي ستتم معالجتها بواسطة Hugo Pipes (مثل SCSS/Sass و JavaScript)
├── content/ # محتوى الموقع الفعلي (مجموعة ملفات Markdown). هذا هو بديل قاعدة البيانات.
├── data/ # البيانات والإعدادات الخارجية المستخدمة في جميع أنحاء الموقع (مثل JSON و TOML و YAML و CSV)
├── layouts/ # مجموعة قوالب HTML التي تحدد مظهر الموقع (باستخدام Go html/template)
├── public/ # المكان الذي يتم فيه إخراج الملفات الثابتة الناتجة بعد تشغيل أمر البناء
├── static/ # الملفات الثابتة التي يتم نشرها كما هي (الصور، favicon، ملفات نصية للروبوتات، إلخ)
├── themes/ # أدلة القوالب (الثيمات) من طرف ثالث أو التي تم إنشاؤها ذاتياً
└── hugo.toml # ملف الإعدادات للموقع بأكمله (سابقاً كان config.toml هو السائد)

في WordPress، يتم تخزين المحتوى في جدول wp_posts في MySQL، بينما في Hugo يتم إدارة كل شيء كملفات نصية (بشكل رئيسي Markdown) داخل دليل content/. هذا يسهل التحكم في إصدارات المحتوى (Git).

3.2 إدارة المحتوى: Markdown و Front Matter

يتكون كل ملف مقالة في Hugo من كتلة بيانات وصفية في الأعلى تسمى “Front Matter” (المقدمة)، يليها النص الأساسي (Markdown). يمكن كتابة Front Matter باستخدام TOML أو YAML أو JSON، ولكن YAML هو الأكثر استخداماً.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


---
title: "فهم التصنيف (Taxonomy) في Hugo"
date: 2026-09-13T10:00:00+09:00
draft: false
categories:
 - "شروحات تقنية"
tags:
 - "Hugo"
 - "Go"
aliases:
 - "/old-category/hugo-taxonomy/"
---
من هنا يبدأ النص الأساسي. سيتم كتابته باستخدام **Markdown**.
سنشرح الميزات القوية لـ Hugo...

ما يجب ملاحظته هنا هو مفتاح aliases. عند الانتقال من WordPress، إذا تغيرت الروابط الدائمة (URL)، فسيكون لذلك تأثير سلبي كبير على تحسين محركات البحث (SEO). باستخدام ميزة الأسماء المستعارة (aliases) في Hugo، يمكنك ببساطة تحديد عنوان URL القديم، وسيقوم Hugo تلقائياً بإنشاء HTML لإعادة التوجيه (التحويل باستخدام meta refresh). هذا مريح للغاية لأنه يلغي الحاجة إلى إعدادات إعادة التوجيه على جانب الخادم (مثل .htaccess).

3.3 ترتيب البحث عن القوالب (Template Lookup Order)

إحدى ميزات Hugo القوية هي آلية البحث المرنة عن القوالب (Template Lookup Order). عند عرض صفحة معينة، يبحث Hugo في الأدلة وأسماء الملفات بترتيب معين للعثور على القالب الأمثل.

على سبيل المثال، عند عرض مقالة مفردة (Single Page) مثل content/post/hello-world.md، يبحث Hugo عموماً عن ملفات التخطيط بالترتيب التالي:

layouts/post/single.html
layouts/post/list.html (هذا ليس خطأً، ولكنه عادةً ما يكون للقوائم)
layouts/_default/single.html
themes/<THEME_NAME>/layouts/post/single.html
themes/<THEME_NAME>/layouts/_default/single.html

يمكن للمطورين تجاوز (override) قوالب السمة (الثيم) بمجرد إنشاء ملف بنفس الاسم في دليل layouts/ الخاص بمشروعهم، دون الحاجة إلى تعديل الكود المصدري للسمة مباشرة. يتيح ذلك إجراء تخصيصات فريدة دون إعاقة تحديثات السمة الأساسية.

3.4 التصنيف (Taxonomy)

يُطلق على نظام التصنيف المعادل لـ “الفئات (categories)” و “العلامات (tags)” في WordPress اسم “التصنيف (Taxonomy)” في Hugo. يدعم Hugo التصنيفين categories و tags افتراضياً، ولكن من خلال تعديل hugo.toml، يمكنك إضافة تصنيفات مخصصة بحرية (مثل: series, authors، إلخ).

1
2
3
4
5
6


# مثال على hugo.toml
[taxonomies]
 category = "categories"
 tag = "tags"
 series = "series"
 author = "authors"

يتيح ذلك تنظيم المحتوى وإدراجه بناءً على محاور متنوعة.

4. عملية الانتقال (الترحيل) من WordPress إلى Hugo

مفتاح النجاح في الانتقال من WordPress إلى Hugo هو كيفية تحويل المحتوى الديناميكي في قاعدة البيانات إلى ملفات ثابتة نظيفة (Markdown + Front Matter) مع الحفاظ على هيكل URL الحالي.

فيما يلي، نعرض سير عمل خط أنابيب الانتقال العام.

flowchart LR
WPDB["قاعدة بيانات WP"] -->|إضافة| Exporter["أداة التصدير"]
Exporter -->| استخراج النصوص، \nالبيانات الوصفية، الصور | ZipFile["ملف مضغوط / مجلد"]
ZipFile -->|فك الضغط| MarkdownFiles["ملفات Markdown \n(content/)"]
ZipFile -->|فك الضغط| ImageFiles["الصور \n(static/wp-content/)"]
MarkdownFiles --> Formatting["المراجعة والتنسيق \n(إصلاح الأكواد القصيرة)"]
Formatting --> Git["تأكيد التغييرات إلى Git"]

4.1 استخراج البيانات وتحويلها إلى Markdown

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

استخدام إضافة Jekyll Exporter نظراً لأن بنية البيانات في Hugo تشبه إلى حد كبير Jekyll، وهو أيضاً منشئ مواقع ثابتة، فإن استخدام إضافة “Jekyll Exporter” لـ WordPress يعد نهجاً شائعاً. عند تثبيت هذه الإضافة وتشغيلها، يتم تحويل جميع المقالات والصفحات الثابتة إلى ملفات Markdown مع Front Matter، ويمكن تنزيلها كملف ZIP جنباً إلى جنب مع ملفات الصور.
برامج نصية مخصصة باستخدام واجهة برمجة تطبيقات WordPress (WordPress API) هذه طريقة لإنشاء برنامج نصي باستخدام Python أو Node.js وما إلى ذلك لاستدعاء واجهة برمجة تطبيقات REST الخاصة بـ WordPress (/wp-json/wp/v2/posts)، وتحليل بيانات JSON، وإنشاء ملفات Markdown الخاصة بك. هذا مفيد للمواقع التي تستخدم بكثافة حقولاً مخصصة معقدة (مثل ACF) والتي لا يمكن التعامل معها بواسطة الإضافات.
الاستفادة من أداة wp2hugo هناك أيضاً نهج يستخدم أداة سطر أوامر (CLI) مكتوبة بلغة Go وما شابهها للتحويل المباشر من ملف تصدير XML الخاص بـ WordPress (WXR) إلى تنسيق Hugo.

4.2 الحفاظ على هيكل الروابط الدائمة (URL)

للحفاظ على تقييم تحسين محركات البحث (SEO)، من المهم للغاية الحفاظ على عناوين URL الخاصة بفترة استخدام WordPress كما هي. إذا كانت إعدادات الروابط الدائمة في WordPress مثل https://example.com/2026/09/13/my-post/، حدد هيكل الروابط الدائمة في ملف hugo.toml الخاص بـ Hugo.

1
2


[permalinks]
 post = "/:year/:month/:day/:slug/"

بدلاً من ذلك، من الممكن أيضاً تثبيت عنوان URL إجبارياً عن طريق تحديد المعلمة url مباشرة في الـ Front Matter لكل مقالة. بالإضافة إلى ذلك، بالنسبة للصفحات التي تتغير عناوين URL الخاصة بها، قم بإعداد عمليات إعادة التوجيه باستخدام aliases المذكورة سابقاً.

4.3 تحويل الأكواد القصيرة (Shortcodes)

غالباً ما تبقى الأكواد القصيرة الخاصة بـ WordPress (مثل [gallery], [caption] والأكواد الفريدة للإضافات المختلفة) كسلاسل نصية كما هي عند التصدير، لذلك يجب التعامل معها. يتم نقلها إما بحذفها دفعة واحدة باستخدام برامج نصية للاستبدال (مثل sed أو Python)، أو بالاستفادة من ميزة الأكواد القصيرة المخصصة القوية في Hugo (من خلال إنشاء تخطيطات مخصصة داخل layouts/shortcodes/) بحيث يتم عرضها بشكل صحيح على جانب Hugo.

5. أدوات سطر الأوامر (CLI) الخاصة بـ Hugo والبناء والنشر

بمجرد اكتمال عملية الانتقال، حان الوقت أخيراً لبناء الموقع باستخدام Hugo ونشره للعالم. يتميز Hugo، الذي يتوفر كملف ثنائي للغة Go، بسرعة مذهلة حيث يكمل بناء المواقع التي تتكون من آلاف أو عشرات الآلاف من الصفحات في بضع ثوانٍ فقط.

5.1 بدء تشغيل خادم التطوير المحلي

عند كتابة المقالات أو تعديل التصميم، قم بتشغيل الخادم المحلي.

1
2


# أمر تشغيل خادم التطوير (استخدم -D لتضمين مسودات المقالات Draft)
hugo server -D

عند تشغيل هذا الأمر، يصبح من الممكن معاينة الموقع على http://localhost:1313/. يحتوي Hugo على ميزة “LiveReload” مدمجة قوية، حيث يتم تحديث شاشة المتصفح تلقائياً وبسرعة فائقة في اللحظة التي تقوم فيها بتحرير وحفظ ملفات Markdown أو القوالب أو CSS. وهذا يجعل تجربة الكتابة والتطوير أكثر راحة بكثير من شاشة إدارة WordPress.

5.2 البناء للإنتاج وتحسين الأداء

لإنشاء الملفات الثابتة لنشرها في بيئة الإنتاج، ما عليك سوى كتابة hugo.

1
2


# تنفيذ البناء للإنتاج. استخدم خيار --minify لتصغير HTML/CSS/JS
hugo --minify

يُخرج هذا الأمر ملفات الموقع بأكمله إلى دليل public/. تؤدي إضافة خيار --minify إلى إزالة الأسطر الجديدة والمسافات غير الضرورية، مما يقلل من حجم الملفات بشكل أكبر. ويساهم هذا بشكل مباشر في تقليل تأخير الشبكة ($T_{network}$) في النموذج الرياضي المذكور سابقاً.

5.3 أتمتة النشر (CI/CD)

ليس من الفعال إنشاء الملفات الثابتة على جهاز كمبيوتر محلي في كل مرة وتحميلها عبر FTP أو ما شابه. في تشغيل SSG الحديث، من أفضل الممارسات بناء بيئة CI/CD تقوم تلقائياً بعمليات البناء والنشر باستخدام عملية الدفع (push) إلى مستودع Git (مثل GitHub) كمحفز (trigger).

على سبيل المثال، يكون الشكل الأساسي للإعدادات (ملف YAML) للنشر على Cloudflare Pages أو GitHub Pages باستخدام GitHub Actions على النحو التالي.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


# مثال على .github/workflows/hugo.yml
name: Deploy Hugo site to GitHub Pages

on:
 push:
 branches: ["main"]
 workflow_dispatch:

permissions:
 contents: read
 pages: write
 id-token: write

jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - name: Checkout
 uses: actions/checkout@v3
 with:
 submodules: recursive # في حالة إدارة السمة كنموذج فرعي (submodule)
 fetch-depth: 0

 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v2
 with:
 hugo-version: 'latest'
 extended: true

 - name: Build
 run: hugo --minify

 - name: Upload artifact
 uses: actions/upload-pages-artifact@v2
 with:
 path: ./public

 deploy:
 environment:
 name: github-pages
 url: ${{ steps.deployment.outputs.page_url }}
 runs-on: ubuntu-latest
 needs: build
 steps:
 - name: Deploy to GitHub Pages
 id: deployment
 uses: actions/deploy-pages@v2

من خلال إعداد هذا، بمجرد القيام بإجراء “كتابة مقالة باستخدام Markdown ودفعها إلى GitHub”، يكتمل خط الأنابيب الآلي الذي ينشر أحدث إصدار من الموقع في بيئة الإنتاج في غضون بضع دقائق.

6. تحسين محركات البحث (SEO) والمزايا التشغيلية بعد الانتقال

غالباً ما يلاحظ مديرو المواقع الذين أكملوا عملية الانتقال من WordPress إلى Hugo المزايا الثلاث البارزة التالية.

6.1 تحسن جذري في سرعة الموقع ومؤشرات حيوية الويب الأساسية (Core Web Vitals)

نتيجة لإلغاء استعلامات قاعدة البيانات والعرض على جانب الخادم، يتم تقليل أوقات تحميل الصفحة إلى أجزاء من الألف من الثانية. يرتبط هذا بشكل مباشر بتحسن كبير في درجات “مؤشرات حيوية الويب الأساسية” (Core Web Vitals) (مثل LCP و FID/INP و CLS)، والتي تعد من عوامل التصنيف في Google. يمكن توقع انخفاض في معدل الارتداد للمستخدمين وتحسين في تقييمات تحسين محركات البحث (SEO).

6.2 التحرر من التهديدات الأمنية

نظراً لأن WordPress يُستخدم على نطاق واسع في جميع أنحاء العالم، فإنه يمثل دائماً هدفاً للهجمات. هناك مخاطر مستمرة مثل اختراق الموقع وتشويهه من خلال استغلال نقاط الضعف في الإضافات، أو اختراق تسجيل الدخول من خلال هجمات القوة الغاشمة (Brute-force attacks). ومع ذلك، فإن الموقع الثابت الذي يتم إنشاؤه بواسطة Hugo لا يحتوي على قاعدة بيانات أو بيئة PHP أو حتى شاشة إدارة (نموذج تسجيل دخول). لا يوجد مجال للقراصنة لاختراق الخادم وتعديل قاعدة البيانات، وتقترب المخاطر الأمنية من الصفر.

6.3 تشغيل خالٍ من الصيانة

يتطلب تشغيل WordPress أعمال صيانة مستمرة، مثل ترقية إصدار النظام الأساسي، وتحديث الإضافات، ومواكبة إصدارات PHP. عليك دائماً أن تقلق من خطر تعطل الموقع بسبب مشاكل التوافق. في حالة Hugo، لا يلزم تحديث الأداة نفسها إلا عند الضرورة، ونظراً لأن كود الموقع بحد ذاته عبارة عن مجموعة من الملفات النصية المستقلة، فهناك شعور غامر براحة البال لأنه “لن يتعطل حتى لو تُرك دون تدخل”.

7. الخلاصة

في هذه المقالة، قمنا بشرح مفصل للانتقال من نظام إدارة محتوى ديناميكي مثل WordPress إلى “Hugo”، وهو منشئ مواقع ثابتة قوي مبني على لغة Go. غطينا الاختلافات في البنية التقنية، وإثبات الأداء من خلال النماذج الرياضية، وصولاً إلى خطوات الانتقال المحددة.

يتطلب الانتقال إلى منشئ مواقع ثابتة تكلفة تعليمية أولية (مثل تشغيل Git، وصياغة Markdown، وتنفيذ أوامر CLI من الطرفية (Terminal)، وفهم مواصفات محرك القوالب)، ولكنه يوفر عائداً يفوق ذلك بكثير يتمثل في “سرعة عرض هائلة”، “أمان قوي”، و"تشغيل خالٍ من الصيانة”.

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

مدونة تقنية تكتب بـ 'Markdown': إعدادات المحرر لمضاعفة سرعة الكتابة

Sat, 12 Sep 2026 12:00:00 +0900

من أجل الاستمرار في كتابة مدونة تقنية، من الضروري تحسين بيئة الكتابة. في هذا المقال، سنتعمق في إعدادات المحرر المتقدمة لتحسين سرعة كتابة المدونات التقنية باستخدام Markdown بشكل كبير. سنشرح بشكل شامل التخصيص الأقصى لكل من Visual Studio Code (VS Code) و Neovim، واستخدام المقتطفات (snippets)، وإدخال أداة فحص القواعد textlint، وصولاً إلى الأتمتة باستخدام خطوط أنابيب CI/CD، وأحدث تقنيات الكتابة باستخدام النماذج اللغوية الكبيرة (LLMs) مثل GitHub Copilot.

1. النموذج الرياضي لتحسين سرعة الكتابة

لنفهم أولاً بوضع نموذج باستخدام معادلة بسيطة مدى تأثير تحسين إعدادات المحرر على وقت الكتابة. لنفترض أن إجمالي وقت الإدخال لكتابة مقال واحد في المدونة هو $T_{total}$.

$$ T_{total} = T_{think} + T_{type} + T_{format} + T_{review} $$

هنا، $T_{think}$ هو وقت التفكير، و $T_{type}$ هو وقت الكتابة (الطباعة)، و $T_{format}$ هو وقت ضبط التنسيق مثل Markdown، و $T_{review}$ هو وقت المراجعة والتدقيق.

الوقت الذي يتم توفيره $T_{saved}$ من خلال تخصيص المحرر (مثل إدخال المقتطفات وإعدادات Linter) يمكن التعبير عنه بالمعادلة التالية باستخدام عدد مرات الظهور $N$ لنمط معين (على سبيل المثال، الرموز المختصرة لـ Hugo أو جداول Markdown)، والوقت المستغرق للإدخال اليدوي $t_{manual}$، والوقت المستغرق بواسطة الأتمتة مثل المقتطفات $t_{snippet}$.

$$ T_{saved} = \sum_{i=1}^{k} N_i \times (t_{manual, i} - t_{snippet, i}) + T_{review\_saved} $$

علاوة على ذلك، من خلال إدخال منسقات تلقائية وأدوات Lint، سيتم تقليل وقت الفحص البصري البشري $T_{review}$ بشكل كبير. إن تحقيق أقصى قدر من $T_{saved}$ هو بالضبط الهدف من هذا المقال.

2. أفضل إعدادات لـ Visual Studio Code (VS Code)

يعد VS Code واحداً من أكثر المحررات استخداماً اليوم، ولديه نظام بيئي قوي من الإضافات لكتابة Markdown.

الإضافات الموصى بها

لتسريع الكتابة، نوصي بشدة بتثبيت الإضافات التالية:

Markdown All in One: يحتوي على جميع الميزات الأساسية اللازمة لكتابة Markdown، مثل الخط العريض والمائل عبر اختصارات لوحة المفاتيح، والاستمرار التلقائي للقوائم، والإنشاء التلقائي لجدول المحتويات (TOC).
markdownlint: يحذرك في الوقت الفعلي من أخطاء بناء الجملة وانتهاكات النمط في Markdown.
vscode-textlint: يطبق مجموعة قواعد للنصوص التقنية، مما يمنع عدم اتساق التعبيرات والأخطاء النحوية.

إعداد مقتطفات مخصصة لـ Hugo (`markdown.json`)

إذا كنت تستخدم مولد مواقع ثابتة مثل Hugo أو Docusaurus لمدونتك التقنية، فستحتاج بشكل متكرر إلى إدخال Frontmatter أو رموز مختصرة خاصة. باستخدام ميزة المقتطفات في VS Code، يمكنك نشر هذه الأشياء في لحظة.

من لوحة الأوامر، حدد Preferences: Configure User Snippets، وأضف الإعدادات التالية إلى markdown.json.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


{
 "Hugo Frontmatter": {
 "prefix": "frontmatter",
 "body": [
 "---",
 "title: \"${1:العنوان}\"",
 "slug: \"${2:اسم-الرابط}\"",
 "date: \"$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE T$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND+09:00\"",
 "image: \"img/eyecatch.jpg\"",
 "math: true",
 "mermaid: true",
 "categories: [\"${3:الفئة}\"]",
 "tags: [\"${4:وسم1}\", \"${5:وسم2}\"]",
 "---",
 "",
 "${0}"
 ],
 "description": "ينشر YAML Frontmatter لـ Hugo"
 },
 "Hugo Figure Shortcode": {
 "prefix": "hfig",
 "body": [
 "{{< figure src=\"${1:image.jpg}\" title=\"${2:عنوان الصورة}\" >}}"
 ],
 "description": "الرمز المختصر Figure لـ Hugo"
 },
 "Markdown Table": {
 "prefix": "mtable",
 "body": [
 "| ${1:رأس 1} | ${2:رأس 2} | ${3:رأس 3} |",
 "| :--- | :---: | ---: |",
 "| ${4:صف 1} | ${5:بيانات} | ${6:بيانات} |",
 "| ${7:صف 2} | ${8:بيانات} | ${9:بيانات} |",
 "$0"
 ],
 "description": "ينشئ جدول Markdown من 3 أعمدة"
 }
}

باستخدام هذا الإعداد، فقط بكتابة frontmatter والضغط على مفتاح Tab، سيتم نشر YAML Frontmatter الذي يتضمن الوقت الحالي على الفور، مما يزيد من السرعة الأولية للكتابة بشكل كبير.

دعم الكتابة باستخدام GitHub Copilot

عند تفعيل GitHub Copilot في VS Code، فإن الإكمال بالذكاء الاصطناعي بناءً على السياق يعمل أيضاً في Markdown. خاصة في حالة المدونات التقنية، يتوقع الذكاء الاصطناعي مسبقاً “الهيكل الذي يجب شرحه تالياً” أو “كتل الأكواد ذات الصلة” ويقترحها لك، مما يسمح لك بتقليل وقت الطباعة $T_{type}$ بشكل كبير.

3. التخصيص الأقصى في Neovim

على الرغم من أن واجهة المستخدم الرسومية لـ VS Code ممتازة، إلا أنه بالنسبة لمحبي الطرفية ومستخدمي Vim، يعتبر Neovim الخيار الأقوى حيث يمكن إنجاز كل شيء دون رفع يديك عن لوحة المفاتيح.

بنية Neovim LSP

بنية LSP (Language Server Protocol) و Linter لـ Neovim في بيئة Markdown هي كما يلي.

classDiagram
class Neovim {
+"مخزن النص"
+"تعيينات المفاتيح"
}
class nvim_lspconfig {
+"marksman (Markdown LSP)"
}
class null_ls_or_none_ls {
+"markdownlint"
+"textlint"
}
class LuaSnip {
+"مقتطفات ديناميكية"
}
class CMP {
+"محرك الإكمال التلقائي"
}
Neovim --> nvim_lspconfig : "يوفر ميزات دلالية"
Neovim --> null_ls_or_none_ls : "التشخيص والتنسيق"
Neovim --> CMP : "طلب إكمال"
CMP --> nvim_lspconfig : "مصدر LSP"
CMP --> LuaSnip : "مصدر المقتطفات"

النشر المتقدم للمقتطفات باستخدام LuaSnip

الأداة الأقوى من مقتطفات JSON في VS Code هي إضافة Neovim المسماة LuaSnip. باستخدام منطق Lua، يمكنك حساب ونشر محتوى المقتطفات ديناميكيًا.

فيما يلي مثال على إعداد LuaSnip الذي يجلب التاريخ والوقت الحاليين ديناميكيًا وينشر Frontmatter لـ Hugo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


local ls = require("luasnip")
local s = ls.snippet
local t = ls.text_node
local i = ls.insert_node
local f = ls.function_node

-- دالة للحصول على الوقت الحالي بتوقيت اليابان (JST)
local function get_current_date_jst()
 return os.date("!%Y-%m-%dT%H:%M:%S") .. "+09:00"
end

ls.add_snippets("markdown", {
 s("frontmatter", {
 t({"---", "title: \""}), i(1, "العنوان"), t({"\"", "slug: \""}), i(2, "اسم-الرابط"), t({"\"", "date: \""}),
 f(function() return {get_current_date_jst()} end, {}),
 t({"\"", "image: \"img/eyecatch.jpg\"", "math: true", "mermaid: true", "categories: [\""}), i(3, "الفئة"), t({"\"]", "tags: [\""}), i(4, "الوسم"), t({"\"]", "---", "", ""}),
 i(0)
 }),
 s("mtable", {
 t({"| "}), i(1, "رأس 1"), t({" | "}), i(2, "رأس 2"), t({" |", "|---|---|", "| "}), i(3, "خلية 1"), t({" | "}), i(4, "خلية 2"), t({" |"}),
 })
})

بهذه الطريقة، من خلال استعارة قوة لغة البرمجة (Lua)، من الممكن إنشاء مقتطفات معقدة لا تقوم فقط بإدراج سلاسل نصية ثابتة، بل تدمج القيم المعادة من الدوال، أو تزيد وتنقص عدد أعمدة الجدول ديناميكيًا بناءً على عدد الحروف المدخلة.

4. التحليل الثابت الذي يجمع بين جودة الكتابة والسرعة (textlint والتعبيرات النمطية)

لضمان جودة المدونة، من الضروري منع الأخطاء المطبعية وعدم الاتساق في التعبيرات. القيام بذلك يدويًا سيؤدي إلى زيادة هائلة في وقت المراجعة $T_{review}$، لذلك سنقوم بإدخال التحليل الثابت باستخدام textlint.

تثبيت textlint ومجموعة قواعد اللغة

قم بتثبيت textlint ضمن بيئة Node.js.

1

npm install -D textlint textlint-rule-preset-ja-technical-writing textlint-rule-prh textlint-filter-rule-comments

قم بإنشاء .textlintrc.json في جذر المشروع، واضبطه كالتالي.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{
 "filters": {
 "comments": true
 },
 "rules": {
 "preset-ja-technical-writing": {
 "ja-no-mixed-period": {
 "periodMark": "。"
 },
 "sentence-length": {
 "max": 100
 }
 },
 "prh": {
 "rulePaths": ["./prh.yml"]
 }
 }
}

قم بإنشاء prh.yml وحدد التناقضات في تعبيرات المصطلحات التقنية. على سبيل المثال، توحيد “سيرفر” مع “خادم”، و “Javascript” مع “JavaScript”.

1
2
3
4
5
6
7
8


version: 1
rules:
 - expected: "JavaScript"
 pattern: "Javascript"
 - expected: "خادم"
 pattern: "سيرفر"
 - expected: "واجهة"
 pattern: "انترفيس"

بفضل هذا، في كل مرة تكتب فيها نصًا في المحرر، سيتم تحذيرك من التناقضات في التعبيرات في الوقت الفعلي، وسيصبح وقت التدقيق اللغوي صفرًا تقريبًا.

الاستبدال الجماعي والأنماط الهيكلية باستخدام التعبيرات النمطية (Regular Expressions)

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

على سبيل المثال، التعبير النمطي لتحويل وسم نص غامق الخاص بـ HTML إلى **نص غامق** الخاص بـ Markdown:

نمط البحث: (.*?)
نمط الاستبدال: **$1**

لدمج الأسطر الجديدة المتتالية غير الضرورية في سطر واحد:

نمط البحث: \n{3,}
نمط الاستبدال: \n\n

من خلال تنفيذ هذه العمليات باستخدام ميزة البحث والاستبدال في VS Code (في وضع التعبيرات النمطية) أو باستخدام الأمر %s في Neovim (مثل :%s/$.*?$<\/b>/**\1**/g)، يمكنك توحيد التنسيق في لحظة.

التحقق التلقائي من خلال خط أنابيب CI/CD

علاوة على ذلك، باستخدام GitHub Actions، يمكننا بناء خط أنابيب CI يقوم بتشغيل textlint تلقائيًا عند دفع (push) مقالات المدونة. يتيح لك هذا منع نشر المقالات التي تحتوي على انتهاكات للقواعد مسبقًا.

flowchart TD
A["المؤلف"] -->|دفع التغييرات| B["مستودع GitHub"]
B --> C{"تشغيل GitHub Actions"}
C --> D["استنساخ المستودع"]
D --> E["إعداد Node.js"]
E --> F["npm install"]
F --> G["تشغيل textlint"]
G -->|نجاح| H["بناء موقع Hugo"]
G -->|فشل| I["الإبلاغ عن خطأ إلى PR/الالتزام"]
H --> J["النشر على الاستضافة (Vercel/Netlify)"]

5. فن كتابة Markdown في عصر النماذج اللغوية الكبيرة (LLM)

في كتابة المدونات التقنية الحديثة، لا يمكن تجنب استخدام النماذج اللغوية الكبيرة (LLM). من خلال الاستفادة من أدوات الذكاء الاصطناعي المدمجة في المحرر، ستتضاعف سرعة الكتابة بشكل أكبر.

هندسة الأوامر (Prompt Engineering) داخل المحرر

باستخدام GitHub Copilot Chat في VS Code، أو ChatGPT.nvim أو Copilot.vim في Neovim، يمكنك إرسال مطالبات (prompts) مثل التالية دون مغادرة المحرر.

“قم بإنشاء مخطط تفصيلي للمبتدئين باستخدام البنية الهرمية لـ Markdown حول العناصر التقنية التالية: Docker, Kubernetes, CI/CD”

عندئذٍ، سيتم إنشاء عناوين Markdown وقوائم نقطية على الفور. كل ما علينا فعله هو إضافة التفاصيل إلى هذا الهيكل.

بالإضافة إلى ذلك، بالنسبة لكتابة مخططات Mermaid المعقدة أو المعادلات الرياضية (LaTeX)، فإن إعطاء تعليمات للذكاء الاصطناعي سيجعله يولد بناء الجملة الدقيق. على سبيل المثال، تم أيضاً تسريع إنشاء تخطيط المعادلات الرياضية والمخططات المدرجة في هذا المقال من خلال الكتابة المزدوجة مع LLM.

6. الخلاصة

شرحنا في هذا المقال إعدادات المحرر لمضاعفة سرعة الكتابة عند كتابة مدونات تقنية باستخدام Markdown.

الوعي بالنموذج الرياضي: القضاء على المهام المتكررة لزيادة $T_{saved}$ إلى أقصى حد.
استخدام VS Code: توفير وقت الإدخال عن طريق الإضافات ومقتطفات markdown.json.
التخصيص الأقصى لـ Neovim: استخدام المقتطفات الديناميكية مع LuaSnip والتشغيل الكامل من خلال لوحة المفاتيح.
textlint والتحليل الثابت: دمج Linter المحلي و CI/CD لتقليل وقت التدقيق والمراجعة ليقترب من الصفر.
دمج LLM: جعل الذكاء الاصطناعي يخرج بنية Markdown وأكواد المخططات مباشرة داخل المحرر.

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