التدوين on kenji.blog

كيفية استضافة مدونة Hugo مجانًا وبسرعة فائقة على Cloudflare Pages و GitHub Pages

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

عند إدارة موقع ويب أو مدونة، تعتبر سرعة العرض (الأداء)، تكاليف التشغيل، والأمان عوامل في غاية الأهمية. في الماضي، كان المزيج بين أنظمة إدارة المحتوى الديناميكية (CMS) مثل WordPress وخوادم الاستضافة المشتركة هو السائد، أما اليوم فإن المعمارية المعروفة باسم “Jamstack” تحظى باهتمام كبير. من بين هذه التقنيات، بدمج “Hugo” وهو مولد مواقع ثابتة (SSG) فائق السرعة مبني بلغة Go، مع خدمات استضافة حديثة مثل Cloudflare Pages و GitHub Pages، يمكنك بناء بيئة تدوين مجانية بالكامل وفائقة السرعة.

في هذا المقال، سنشرح بتعمق من منظور تقني الخطوات العملية لنشر موقع ثابت مبني بـ Hugo على Cloudflare Pages و GitHub Pages، والفرق في المعمارية بين كل منصة، وبناء CI/CD (التكامل المستمر/التسليم المستمر) باستخدام GitHub Actions، وتحسين DNS، واستراتيجيات التخزين المؤقت (Cache)، ووصولاً إلى دمج أدوات تحليل الزيارات التي تراعي الخصوصية.

1. أساسيات مولدات المواقع الثابتة (SSG) ومعمارية Jamstack

1.1 لماذا المواقع الثابتة؟

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

من ناحية أخرى، في مولدات المواقع الثابتة (SSG) التي تعتمد معمارية Jamstack (وهي اختصار لـ JavaScript و APIs و Markup)، يتم إنشاء جميع ملفات HTML و CSS و JavaScript مسبقًا (أثناء عملية البناء). عند استلام طلب المستخدم، يقوم خادم الويب (أو CDN) ببساطة بإرجاع الملفات الثابتة التي تم إنشاؤها مسبقًا كما هي، مما يوفر سرعة فائقة وأمانًا قويًا.

1.2 أفضلية Hugo

هناك العديد من الخيارات المتاحة لـ SSG مثل Next.js و Gatsby و Jekyll و Astro، ولكن الميزة الأكبر لـ Hugo هي سرعة البناء. بفضل المعالجة المتزامنة في لغة Go، تكتمل عملية البناء في بضع ثوانٍ فقط حتى لموقع يحتوي على آلاف أو عشرات الآلاف من الصفحات. هذا يقلل بشكل كبير من أوقات الانتظار في مسار CI/CD، مما يؤدي بشكل مباشر إلى تحسين تجربة المطور (DX: Developer Experience).

2. مقارنة معمارية خدمات الاستضافة

التحدي التالي هو تحديد المكان الذي سيتم فيه استضافة الملفات الثابتة التي تم إنشاؤها بواسطة Hugo. تشمل الخيارات البارزة Cloudflare Pages و GitHub Pages و Netlify، ولكن بنية الشبكة التي تعمل خلف الكواليس تختلف في كل منها.

2.1 شبكات توصيل المحتوى (CDN) والحوسبة الطرفية (Edge Computing)

تستخدم جميع هذه المنصات شبكة توصيل محتوى (CDN) موزعة عالميًا لتوصيل المحتوى. ومع ذلك، لا يقتصر الأمر على مجرد التخزين المؤقت للملفات الثابتة، بل إن العامل الفارق هو القدرة على استخدام “الحوسبة الطرفية” لتوجيه الطلبات وإعادة كتابة الترويسات (Headers) في أقرب نقطة تواجد (PoP) للمستخدم.

graph TD
A["المستخدم (طوكيو)"] -->|Low Latency| B["عقدة طرفية (NRT)"]
C["المستخدم (نيويورك)"] -->|Low Latency| D["عقدة طرفية (EWR)"]
E["المستخدم (لندن)"] -->|Low Latency| F["عقدة طرفية (LHR)"]
B --> G["تخزين الأصل / مخزن الكائنات"]
D --> G
F --> G

2.2 GitHub Pages

GitHub Pages هي خدمة تتيح لك نشر ملفات HTML و CSS و JavaScript مباشرة من مستودع GitHub. يتم استخدام شبكات CDN مثل Fastly في الخلفية، مما يوفر أداءً ممتازًا. ومع ذلك، هناك قيود على تخصيص الترويسات (مثل إعدادات Cache-Control وترويسات الأمان)، وتعتمد إعدادات إعادة التوجيه على meta refresh في HTML أو إضافات Jekyll، مما يجعل وظائفها كبنية تحتية بحتة متواضعة إلى حد ما.

2.3 Cloudflare Pages

Cloudflare Pages هي خدمة استضافة مواقع ثابتة مبنية على أكبر شبكة Anycast في العالم تفخر بها Cloudflare (منتشرة في أكثر من 275 مدينة). توفر دعمًا قياسيًا لـ HTTP/3 (QUIC)، وتحسين الصور، وتكامل الوظائف الطرفية (Cloudflare Workers)، مما يتيح ضبط أداء استثنائي. بالإضافة إلى ذلك، لا توجد رسوم على عرض النطاق الترددي (Bandwidth)، وهي ميزة كبيرة حيث يمكنك تشغيلها مجانًا مهما زادت حركة المرور بشكل مفاجئ.

2.4 Netlify

تعتبر Netlify رائدة في معمارية Jamstack، حيث توفر تجربة مطور (DX) متكاملة تجمع بين النماذج، المصادقة (Identity)، والوظائف بدون خادم (Serverless Functions). ولكن إذا تجاوزت حد عرض النطاق الترددي المجاني (100 جيجابايت شهريًا)، ستتحمل رسوم استهلاك باهظة، لذلك يجب الانتباه إلى إدارة التكاليف في المدونات التي تستخدم الصور ومقاطع الفيديو بكثرة.

3. الحساب النظري للأداء وزمن الانتقال (النموذج الرياضي باستخدام LaTeX)

عند تقييم أداء الويب، يعد تقليل زمن الانتقال (Latency) أهم مؤشر. دعونا نضع نموذجًا لمدى تقليل زمن الانتقال عند استخدام شبكة توصيل المحتوى CDN (الطرفية) مقارنة بالوصول المباشر إلى خادم الأصل (Origin Server).

نفترض أن احتمالية نجاح طلب المستخدم في العثور على ما يطلبه في التخزين المؤقت هي “نسبة إصابة التخزين المؤقت (Cache Hit Ratio)” ونرمز لها بـ $C$. حيث $0 \le C \le 1$. ونرمز لزمن الانتقال إلى خادم الأصل بـ $L_{origin}$، وزمن الانتقال إلى أقرب عقدة طرفية بـ $L_{edge}$.

يتم حساب متوسط زمن الانتقال الجديد $L_{new}$ كقيمة متوقعة على النحو التالي:

$$ L_{new} = C \times L_{edge} + (1 - C) \times (L_{edge} + L_{origin}) $$

عند تبسيط هذه المعادلة تصبح كالتالي:

$$ L_{new} = L_{edge} + (1 - C) \times L_{origin} $$

على سبيل المثال، عندما يصل مستخدم في طوكيو إلى خادم أصل يقع على الساحل الشرقي للولايات المتحدة (نيويورك)، فإن $L_{origin}$ سيكون حوالي 200 مللي ثانية، مع الأخذ في الاعتبار المسافة المادية للألياف الضوئية وتأخير المعالجة في الموجهات (Routers). من ناحية أخرى، عند استخدام شبكة CDN مثل Cloudflare، يمكن الاتصال بالعقدة الطرفية في طوكيو، مما يقلل $L_{edge}$ إلى حوالي 10 مللي ثانية.

بافتراض أن نسبة إصابة التخزين المؤقت $C = 0.95$ (95%)،

$$ L_{new} = 10 + (1 - 0.95) \times 200 = 10 + 0.05 \times 200 = 10 + 10 = 20 \text{ ms} $$

بهذه الطريقة، من خلال اعتماد CDN، يصبح من الممكن تقليل متوسط زمن الانتقال بشكل كبير (حوالي 90٪) من 210 مللي ثانية إلى 20 مللي ثانية.

4. بناء مسار CI/CD باستخدام GitHub Actions

من أجل أتمتة عملية تحديث مدونة Hugo، سنقوم ببناء مسار CI/CD باستخدام GitHub Actions. بفضل هذا، بمجرد كتابة مقالات بصيغة Markdown محليًا وتنفيذ أمر git push، ستبدأ عملية البناء تلقائيًا وسيتم نشر الموقع على Cloudflare Pages أو GitHub Pages.

يوضح المخطط التسلسلي (Sequence Diagram) التالي التدفق الكامل منذ عملية الدفع (Push) للمقال وحتى تسليمه للمستخدم.

sequenceDiagram
participant U as "المستخدم (المؤلف)"
participant G as "مستودع GitHub"
participant A as "GitHub Actions"
participant C as "Cloudflare Pages"
participant V as "الزائر"
U->>G: "git push origin main"
G->>A: "إطلاق حدث الدفع (Push Event)"
A->>A: "سحب الكود وإعداد Hugo"
A->>A: "hugo --minify (بناء)"
A->>C: "النشر على Cloudflare Pages (رفع مباشر)"
C-->>A: "رابط النشر (نجاح)"
V->>C: "طلب صفحة الويب"
C-->>V: "إرجاع HTML المخزن مؤقتا (عبر العقدة الطرفية)"

4.1 إعدادات النشر على Cloudflare Pages (الرفع المباشر - Direct Upload)

في Cloudflare Pages، توجد طريقتان: ربط مستودع GitHub وبناء الموقع على بنية Cloudflare التحتية، أو طريقة “الرفع المباشر (Direct Upload)” للملفات الثابتة التي تم بناؤها بواسطة GitHub Actions. إذا كنت ترغب في إدارة إصدارات Hugo بشكل أكثر صرامة وربطه بمهام أخرى (مثل الاختبار وتحسين الصور)، يُوصى بالبناء على GitHub Actions واستخدام الرفع المباشر.

فيما يلي مثال عملي لملف .github/workflows/deploy.yml للنشر على Cloudflare Pages.

 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


name: "Deploy Hugo site to Cloudflare Pages"

on:
 push:
 branches:
 - "main"
 workflow_dispatch:

jobs:
 build-and-deploy:
 runs-on: "ubuntu-latest"
 steps:
 - name: "Checkout repository"
 uses: "actions/checkout@v4"
 with:
 submodules: "recursive"
 fetch-depth: 0

 - name: "Setup Hugo"
 uses: "peaceiris/actions-hugo@v3"
 with:
 hugo-version: "0.125.0"
 extended: true

 - name: "Build Hugo Site"
 run: "hugo --minify --gc"
 env:
 HUGO_ENVIRONMENT: "production"

 - name: "Deploy to Cloudflare Pages"
 uses: "cloudflare/pages-action@v1"
 with:
 apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
 projectName: "your-project-name"
 directory: "public"
 gitHubToken: ${{ secrets.GITHUB_TOKEN }}
 branch: "main"

في مسار العمل هذا، يقوم خيار --minify بتصغير ملفات HTML/CSS/JS، ويقوم --gc بحذف الملفات غير الضرورية. وتعتبر هذه أساسيات تحسين الأداء.

5. التعمق في إعدادات DNS: النطاق المخصص وسجلات CNAME / ALIAS

عند استخدام نطاق خاص (مثل: kenji.blog)، يكون الإعداد الصحيح لـ DNS (نظام أسماء النطاقات) أمرًا حيويًا.

5.1 قيود سجل CNAME ونطاق الجذر (Zone Apex)

عادةً، عند توجيه نطاق فرعي (مثل: www.kenji.blog) إلى خدمة خارجية، يتم استخدام سجل CNAME. ومع ذلك، وبسبب مواصفات DNS (حسب RFC 1034)، لا يمكن إعداد سجل CNAME للنطاق الجذر (المعروف أيضًا باسم Zone Apex أو النطاق المجرد، مثل: kenji.blog). والسبب في ذلك هو أن النطاق الجذر يجب أن يحتوي دائمًا على سجلات SOA (Start of Authority) وسجلات NS (Name Server) وسجلات MX (Mail Exchange)، وتوجد قاعدة تنص على أن سجل CNAME لا يمكن أن يتواجد مع سجلات الموارد الأخرى.

5.2 الحلول: ALIAS / ANAME / CNAME Flattening

لحل هذه المشكلة، توفر شركات تقديم خدمات DNS الحديثة إضافات خاصة بها.

سجلات ALIAS / ANAME: تقوم بتحليل الاسم ديناميكيًا على جانب خادم DNS وإرجاع سجل A النهائي (عنوان IP) إلى العميل. تدعم خدمات مثل Amazon Route 53 هذه الميزة.
CNAME Flattening: هي ميزة تقدمها Cloudflare. فهي تتصرف كما لو تم إعداد سجل CNAME على النطاق الجذر (Zone Apex)، بينما يقوم خادم DNS المعتمد من Cloudflare بإرجاع عناوين IP التي تم حلها تلقائيًا (سجلات A وسجلات AAAA) إلى العميل بشفافية.

عند استخدام Cloudflare Pages، فإن تفويض خوادم الأسماء (Name Servers) الخاصة بالنطاق إلى Cloudflare واستغلال تقنية “CNAME Flattening” يوفر البنية الأكثر سلاسة وعالية الأداء.

6. استراتيجيات التخزين المؤقت والتحكم في ترويسات HTTP

في عملية تسريع المواقع الثابتة، هناك عنصر أساسي آخر وهو “استراتيجية التخزين المؤقت”. في Cloudflare Pages، يمكنك استخدام ملف يتم إنشاؤه (ملف _headers) للتحكم الدقيق في ترويسات الاستجابة HTTP (HTTP Response Headers).

6.1 التخزين المؤقت الطرفي (Edge Cache) مقابل التخزين المؤقت للمتصفح (Browser Cache)

ينقسم التخزين المؤقت بشكل عام إلى نوعين: “التخزين المؤقت الطرفي (Edge Cache)” الذي يتم الاحتفاظ به على جانب شبكة CDN، و “التخزين المؤقت للمتصفح (Browser Cache)” الذي يتم تخزينه في متصفح المستخدم.

من المثالي جعل الملفات الثابتة (مثل الصور، CSS، JS، والتي تحتوي أسماؤها على دوال تجزئة “Hashes”) تُخزن مؤقتًا في المتصفح لفترات طويلة. من ناحية أخرى، بالنسبة لملفات HTML، ولعكس التحديثات فورًا، من الشائع تقصير مدة التخزين المؤقت في المتصفح (أو تعطيله بالكامل) والاعتماد على التخزين المؤقت الطرفي للتعامل معها.

مثال على إعداد _headers في Cloudflare Pages:

1
2
3
4
5
6
7
8
9


# عدم تخزين ملفات HTML في المتصفح والتحقق منها في كل مرة
/*.html
 Cache-Control: public, max-age=0, must-revalidate

# تخزين ملفات الأصول (CSS/JS/الصور) في المتصفح لمدة عام واحد
/assets/*
 Cache-Control: public, max-age=31536000, immutable
/img/*
 Cache-Control: public, max-age=31536000, immutable

6.2 معادلة حساب خفض تكاليف عرض النطاق الترددي

من خلال إعداد ترويسات التخزين المؤقت المناسبة، يمكنك تقليل كمية نقل البيانات من الخادم (الطرفية) بشكل كبير. يمكن التعبير عن التكلفة الشهرية لعرض النطاق الترددي $Cost$ بالنموذج التالي بناءً على كمية النقل $B_i$ لكل مورد، نسبة إصابة التخزين المؤقت $C_i$، وسعر الوحدة لعرض النطاق الترددي $R$:

$$ Cost = \sum_{i=1}^{n} \left( B_i \times (1 - C_i) \times R \right) $$

نظرًا لأن Cloudflare يوفر حركة نقل البيانات الصادرة مجانًا ($R = 0$)، فإن التكلفة المالية المباشرة ستكون $0$. ومع ذلك، عند استخدام بنية تحتية أخرى بالاقتران مثل GitHub Pages، أو استخدام خوادم خلفية مثل AWS S3، فإن تعظيم نسبة إصابة التخزين المؤقت $C_i$ يعد عاملاً رئيسيًا في تقليل تكاليف البنية التحتية.

7. تحليلات الزيارات التي تجمع بين الخصوصية والأداء

أثناء إدارة مدونة، تُعتبر تحليلات الزيارات (Web Analytics) لمعرفة عدد المستخدمين الزائرين أمرًا لا غنى عنه. لفترة طويلة كانت أداة Google Analytics (GA4) هي المعيار الفعلي السائد، ولكن مع توجهات حماية الخصوصية الحديثة (مثل GDPR و CCPA)، والتخلص التدريجي من ملفات تعريف الارتباط للجهات الخارجية (Third-party Cookies)، بدأت الأوضاع في التغير.

7.1 التأثير على أداء الويب

عند دمج Google Analytics (وتحديدًا gtag.js أو Google Tag Manager)، يتم تحميل وتنفيذ العديد من السكربتات الخارجية، مما يؤثر سلبًا على الأداء (خاصة وقت الاستجابة الأولي TTFB ووقت حظر مؤشر الترابط الرئيسي Main-thread Blocking Time).

دعونا نقسم ونفكر في أوقات تحميل الموقع كما يلي:

pie title توزيع أوقات تحميل الموقع النموذجي
"TTFB (الوقت حتى البايت الأول)" : 15
"تنزيل المحتوى (HTML/CSS)" : 20
"تحليل DOM والعرض" : 45
"التحليلات وجافا سكريبت للجهات الخارجية" : 20

ليس من النادر أن تستهلك أدوات التحليل التي تعتمد على جافا سكريبت من جهات خارجية حوالي 20٪ إلى 30٪ من إجمالي وقت التحميل.

7.2 دمج Cloudflare Web Analytics

لذلك، تتجه الأنظار نحو أدوات تحليل الزيارات التي تعطي الأولوية للخصوصية ولا تستخدم ملفات تعريف الارتباط (Cookieless)، مثل Cloudflare Web Analytics و Plausible Analytics.

تعمل أداة Cloudflare Web Analytics بمجرد تضمين مقطع JavaScript خفيف الوزن للغاية، ولأنها لا تصدر ملفات تعريف الارتباط، فلن تكون هناك حاجة لإعداد لافتات الموافقة على ملفات تعريف الارتباط المزعجة (Cookie Consent Banner).

التنفيذ في Hugo سهل جدًا أيضًا. كل ما عليك فعله هو إضافة المقطع المقدم إلى ملفات مثل layouts/partials/head.html أو layouts/partials/analytics.html.

1
2
3
4
5


{{ if eq hugo.Environment "production" }}
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "YOUR_CLOUDFLARE_BEACON_TOKEN"}'></script>
<!-- End Cloudflare Web Analytics -->
{{ end }}

من خلال إضافة سمة defer، سيتم تحميل السكربت بشكل غير متزامن دون حظر عملية تحليل HTML، ليتم تنفيذه بعد اكتمال بناء DOM. هذا يقلل من التأثير على سرعة العرض الأولي (مثل LCP: عرض أكبر محتوى مرئي، و FCP: سرعة عرض أول محتوى) إلى الحد الأدنى.

8. الخلاصة وأفضل الممارسات

عند تشغيل موقع ثابت باستخدام Hugo، فإن اعتماد منصات الاستضافة الحديثة مثل Cloudflare Pages أو GitHub Pages يوفر فوائد هائلة من حيث الأداء مقابل التكلفة، سرعة العرض، والأمان.

بناء فائق السرعة: الاستفادة من سرعة Hugo لتقليل وقت تنفيذ مسار CI/CD (GitHub Actions) إلى أدنى حد ممكن.
التسليم عبر الطرفيات (Edge): استخدام شبكة طرفيات Cloudflare لتوصيل المحتوى للمستخدمين حول العالم بزمن انتقال يقاس بالمللي ثانية.
التكوين المناسب لـ DNS: الاستفادة من تقنية CNAME Flattening لتشغيل النطاق الجذر (النطاق الخاص) بأمان وسرعة.
تحسين استراتيجية التخزين المؤقت: استخدام _headers لفصل التخزين المؤقت للمتصفح والتخزين المؤقت الطرفي بشكل مناسب لكل نوع من أنواع الموارد.
تحليلات خفيفة الوزن: دمج أدوات مثل Cloudflare Web Analytics التي تحافظ على الأداء وتراعي الخصوصية.

من خلال الجمع بين هذه العناصر، يمكنك مجانًا بناء نظام تدوين قابل للتوسع وقوي، قادر على تحمل حركة مرور ضخمة تصل إلى الملايين من مشاهدات الصفحات (PV) شهريًا. إذا كنت تفكر في إطلاق مدونة تقنية، موقع شركة، أو موقع محفظة أعمال (Portfolio)، فننصحك بشدة بتجربة بنية Jamstack + Hugo + Cloudflare Pages.

مدونة تقنية تكتب بـ '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 وأكواد المخططات مباشرة داخل المحرر.

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