recent
أخبار ساخنة

شرح تثبيت وإنشاء Blog باستخدام Hexo على Ubuntu ... وتأمينه بـ Let's Encrypt SSL ... بالخطوات

الصفحة الرئيسية

شرح تثبيت  تثبيت وإنشاء Blog   باستخدام Hexo على Ubuntu ... وتأمينه بـ Let's Encrypt SSL ...  بالخطوات


Hexo

هو static blogging framework مبني على Node.js.

 يتيح لك Hexo كتابة منشورات بتنسيق Markdown.

تتم معالجة منشورات المدونة هذه وتحويلها إلى ملفات HTML ثابتة باستخدام سمات  (themes) محددة مسبقًا.

يختلف عن برنامج التدوين المعتاد مثل WordPress لأنه ينشئ ملفات ثابتة.

يقوم WordPress بتحميل المدونة ديناميكيًا عن طريق تشغيل كود PHP في كل مرة تقوم فيها بإعادة تحميل الموقع مما يجعله عرضة للثغرات الأمنية.

سنشرح هنا كيفية تثبيت Hexo واستخدامه لإنشاء مدونة على خادم Ubuntu 20.04.

المتطلبات الأساسية

خادم يستند إلى Ubuntu 20.04 مع مستخدم غير الـ root  له صلاحيات sudo.

يجب تثبيت Git.

إذا لم يكن لديك git مثبتًا فيمكنك القيام بذلك عن طريق الأوامر التالية:

$ sudo apt install git

$ git config --global user.name "Your Name"

$ git config --global user.email "youremail@domain.com"


حساب على Github.

إعداد جدار الحماية (Firewall)

يأتي Ubuntu 20.04 مزودًا بجدار حماية غير معقد (UFW) افتراضيًا.

 في حالة عدم وجوده قم بتثبيته أولاً:

$ sudo apt install ufw


فعل منفذ SSH:

$ sudo ufw allow "OpenSSH"


قم بتمكين جدار الحماية:

$ sudo ufw enable


قم بتمكين المنفذ 4000 الذي يستخدمه خادم Hexo:

$ sudo ufw allow 4000


 افتح منافذ HTTP و HTTPS:

$ sudo ufw allow http

$ sudo ufw allow https


تحقق من حالة جدار الحماية:

$ sudo ufw status

Status: active

To                         Action      From

--                         ------      ----

OpenSSH                    ALLOW       Anywhere

80/tcp                     ALLOW       Anywhere

4000                       ALLOW       Anywhere

443/tcp                    ALLOW       Anywhere

OpenSSH (v6)               ALLOW       Anywhere (v6)

80/tcp (v6)                ALLOW       Anywhere (v6)

4000 (v6)                  ALLOW       Anywhere (v6)

443/tcp (v6)               ALLOW       Anywhere (v6)

تثبيت Node.js

قم بتشغيل الأمر التالي لإضافة مستودع Node.js:

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -


قم بتثبيت Node.js:

$ sudo apt-get install nodejs


تأكد من تثبيته بشكل صحيح:

$ node --version

v14.15.0


تثبيت Hexo

قم بتشغيل الأمر التالي لتثبيت حزمة Hexo:

$ sudo npm install hexo-cli -g


تقوم (-g) بتثبيت hexo-cli الحزمة على مستوى global والتي ستسمح لك بتثبيت Hexo blog في أي مجلد تختاره.

قم بإنشاء المجلد لتثبيت Hexo فيه:

$ sudo mkdir -p /var/www/hexo


قم بتعيين الصلاحيات والملكية المطلوبة:

$ sudo chown -R $USER:$USER /var/www/hexo

$ sudo chmod -R 755 /var/www/hexo


بعد ذلك ، تحتاج إلى تهيئة وإعداد الملفات الضرورية لمدونة Hexo.

 قم بالتبديل إلى المجلد الذي أنشأته:

$ cd /var/www/hexo

تهيئة (Initialise) مدونة Hexo:

$ hexo init

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git

INFO  Install dependencies

added 185 packages from 430 contributors and audited 191 packages in 6.47s

14 packages are looking for funding

  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!


تثبت Hexo:

$ npm install

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 5 packages from 1 contributor and audited 191 packages in 1.567s

14 packages are looking for funding

  run `npm fund` for details

found 0 vulnerabilities


تحقق من بنية المجلد:


$ ls

_config.yml  node_modules  package-lock.json  package.json  scaffolds  source  themes


يحتوي ملف config.yml على إعدادات مدونة Hexo الخاصة بك.

يمكن تغيير معظم إعدادات المدونة.

يحتوي المجلد node_modules على جميع الحزم التي يحتاجها Hexo والحزم التي يعتمد عليها.

يحتوي الملف package.json على قائمة من كافة حزم وأرقام النسخة الخاصة التي Hexo يحتاجها.

يتم إنشاء ملف package-lock.json تلقائيا بواسطة npm في كل مرة يتم إجراء تثبيت أو تغيير على حزمة Hexo.

يحتوي على معلومات حول الحزم والإصدارات التي تم تثبيتها أو تغييرها.

يحتوي المجلد scaffolds على القوالب التي ستستخدم.

يحتوي المجلد source على محتوى الموقع الفعلي في تنسيق HTML / CSS التي يتم بعد ذلك نشرها على شبكة الإنترنت.

يتم تجاهل أي مجلد أو ملف مسبوق بـ (الشرطة السفلية) بواسطة Hexo باستثناء المجلد _posts.

 في الوقت الحالي المجلد فارغ لأننا لم نكتب أو ننشر أي شيء.

المجلد themes يحتوي على سمات (themes) المدونة.

إعداد Hexo

افتح الملف  config.yml_ للتعديل:

$ nano _config.yml


تحقق من ملف titled Site:

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site

title: Hexo

subtitle: ''

description: ''

keywords:

author: John Doe

language: en

timezone: ''

قم بتغيير اسم موقعك.

قم بتعيين عنوان فرعي إذا أردت.

أضف وصفًا لموقعك وبعض الكلمات الرئيسية لوصفه.

قم بتغيير اسم المؤلف والمنطقة الزمنية لموقعك.


تحقق من الـ URL:


# URL

## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'

url: http://example.com

root: /

permalink: :year/:month/:day/:title/

permalink_defaults:

pretty_urls:

  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks

  trailing_html: true # Set to false to remove trailing '.html' from permalinks


قم بتغيير عنوان URL الخاص بموقعك إلى اسم المجال الخاص (domain) بك.

 تأكد من استخدام HTTPS في عنوان URL الخاص بك لأننا سنقوم بتثبيت SSL.


إذا كنت لا تريد URL موقع الويب الخاص بك لإظهار index.htm في نهاية كل صفحة يمكنك تغيير كل الخيارات trailing_index و trailing_html لـ false.


هناك بعض الإعدادات الأخرى التي يجب عليك تشغيلها:

غيّر قيمة default_layout من post إلى draft.

سيؤدي هذا إلى إنشاء منشورات جديدة كمسودات  لذا ستحتاج إلى نشرها قبل ظهورها في المدونة.

غيّر قيمة post_asset_folder إلى true.

سيسمح لك هذا بالحصول على مجلدات صور فردية لكل منشور بدلاً من مجلد صورة واحد لجميع المنشورات.

احفظ الملف بالضغط على Ctrl + X وإدخال Y عندما يُطلب منك ذلك.

تثبيت Theme

يأتي Hexo مع Theme افتراضي يسمى Landscape.

يمكنك التبديل إلى سمة مختلفة عن طريق تثبيت سمة Hexo أخرى متوفرة من صفحة السمات الخاصة بها.

تتوفر جميع سمات Hexo عبر Github لذا تحتاج إلى استنساخ مستودع Github الخاص بالموضوع.

سنقوم بتثبيت سمة Next.

قم بالتبديل إلى المجلد Hexo واستنساخ مستودع Github الخاص بالقالب في المجلد themes:

$ cd /var/www/hexo

$ git clone https://github.com/theme-next/hexo-theme-next themes/next


قم بتغيير الملف  /var/www/hexo/_config.yml  لتغيير النسق من Landscape إلى Next:

$ nano _config.yml


قم بإجراء التغيير على theme لتبديل السمة.


# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: next


يمكنك تغيير إعدادات السمة عن طريق تعديل الملف /var/www/hexo/themes/next/_config.yml.


إنشاء ونشر Post

حان الوقت لإنشاء أول منشور:

$ hexo new first-post

INFO  Validating config

INFO  Created: /var/www/hexo/source/_drafts/first-post.md


افتح المنشور الجديد للتعديل:

$ nano ./source/_drafts/first-post.md


Every post needs to have its front-matter set up. Front-matter is a short block of JSON or YAML that configures essential details like the title of the post, published date, categories, tags, etc. Replace the default data with the correct options.

كل post يحتاج إلى إعداد front-matter.

 front-matter عبارة عن JSON أو YAML تقوم بتكوين التفاصيل الأساسية مثل عنوان المنشور وتاريخ النشر والفئات والعلامات وما إلى ذلك.

استبدل البيانات الافتراضية بالخيارات الصحيحة:

title: Howtoforge's First Post

tags:

  - test

categories:

  - Hexo

comments: true

date: 2020-11-14 00:00:00

---

## Markdown goes here.

**This is our first post!**


أضف الكود التالي لإدراج صورة في المنشور:

{% asset_img "example.jpg" "This is an example image" %}


انسخ الملف example.jpg إلى المجلد  \source\_posts\first-post  حيث سيتم استرداد جميع الصور لمشاركتك الأولى.

احفظ الملف بالضغط على Ctrl + X وإدخال Y عندما يُطلب منك ذلك بمجرد الانتهاء من كتابة المنشور.

انشر المنشور:

$ hexo publish first-post

INFO  Validating config

INFO  Published: /var/www/hexo/source/_posts/first-post.md

ستكون هذه المشاركة مرئية بمجرد استضافة المدونة.

تثبيت Plugin

يحتوي Hexo على بضع مئات من plugins التي يمكنك تثبيتها.

 يمكنك تثبيت plugins واحد أو أكثر حسب استخدامك.

جميع ملحقات Hexo عبارة عن حزم Node.js ويتم استضافتها على Github حيث يمكنك العثور على تفاصيل التثبيت والتكوين.

سنقوم بتثبيت المكون الإضافي hexo-filter-nofollow.

تأكد من وجودك في مجلد hexo ثم قم بتثبيت المكون الإضافي:

$ cd /var/www/hexo

$ npm i hexo-filter-nofollow --save

افتح ملف إعداد Hexo للتعديل:

$ sudo nano _config.yml


قم بلصق الـ code  التالي في نهاية الملف:

nofollow:

  enable: true

  field: site

  exclude:

    - 'exclude1.com'

    - 'exclude2.com'


enable يمكن Plugin

و field يحدد نطاق البرنامج المساعد حيث site يضيف السمة nofollow إلى الوصلات الخارجية على الموقع بأكمله.

و post يضيف السمة nofollow على الروابط في المشاركات فقط.

يقوم exclude بإدراج النطاقات التي لن تتم إضافة سمة nofollow عليها إلى القائمة البيضاء.

يأتي Hexo مع خادم ويب أساسي.

حان الوقت لبدء خادم اختبار Hexo:

$ hexo server


يمكنك الآن تشغيل العنوان  http://yourserverIP:4000في متصفحك.

سترى الصفحة التالية.




اخرج من الخادم بالضغط على Ctrl + C في الـ terminal.


قم بإنشاء ملفات Hexo Static


يمكن لخادم الاختبار لـ Hexo أن يخدم المدونة ديناميكيًا وكذلك من خلال الملفات الثابتة.

خدم الأمر أعلاه المدونة بشكل ديناميكي.

هناك عدة طرق لخدمة مدونة Hexo للجمهور.

سنقدم ملفات Hexo الثابتة (Static) باستخدام خادم Nginx.

قم بتشغيل الأمر التالي لإنشاء الملفات الثابتة:

$ hexo generate


يقوم الأمر أعلاه بإنشاء ملفات ثابتة يتم تخزينها في المجلد /var/www/hexo/public.

سنستخدم خادم Nginx لخدمة الملفات من هذا المجلد.


قم بتثبيت خادم Nginx:

$ sudo apt install nginx


أنشئ وافتح ملف إعداد Hexo لـ Nginx:

$ sudo nano /etc/nginx/sites-available/hexo.conf


الصق الكود التالي فيه:

server {

    server_name hexo.example.com;

    root /var/www/hexo/public;

    index index.html index.htm;

    listen 443 ssl http2;

    listen [::]:443 ssl http2;

    ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;

    ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;

    ssl_session_timeout 1d;

    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions

    ssl_session_tickets off;

    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25>             ssl_prefer_server_ciphers off;

    ssl_dhparam /etc/ssl/certs/dhparam.pem;

    location / {

        try_files $uri $uri/ =404;

    }

}

server {

    if ($host = hexo.example.com) {

        return 301 https://$host$request_uri;

    }

    server_name hexo.example.com;

    listen 80;

    listen [::]:80;

    return 404;

}

احفظ الملف بالضغط على Ctrl + X وإدخال Y عندما يُطلب منك ذلك.

قم بتنشيط الإعدادات:

$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/


افتح الملف  /etc/nginx/nginx.conf للتعديل:

$ sudo nano /etc/nginx/nginx.conf


الصق السطر التالي قبل السطر include /etc/nginx/conf.d/*.conf:

server_names_hash_bucket_size 64;


قم بتغيير قيمة المتغير types_hash_max_size من 2048 إلى 4096:

types_hash_max_size 4096;


اضغط على Ctrl + X للإغلاق واضغط على Y عندما يُطلب منك حفظ الملف:

تأكد من عدم وجود أخطاء:

$ sudo nginx -t


إذا لم تكن هناك أية مشكلات فأعد تشغيل خادم Nginx:

$ sudo systemctl restart nginx


تثبيت SSL

حان الوقت لتثبيت SSL باستخدام خدمة Let's Encrypt لمدونة hexo.

قم بتثبيت Certbot:

$ sudo apt install certbot


أوقف Nginx لأنه سيتداخل مع عملية Certbot:

$ sudo systemctl stop nginx


 نحتاج إلى إنشاء DHParams certificate:

$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m email@yourdomain.com --keep-until-expiring 

$ sudo systemctl start nginx

$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048


نحتاج إلى إعداد cron job لتجديد SSL تلقائيًا. 

لفتح محرر crontab قم بتشغيل الأمر التالي:

$ sudo crontab -e

no crontab for root - using an empty one

Select an editor.  To change later, run 'select-editor'.

  1. /bin/nano        <---- easiest

  2. /usr/bin/vim.basic

  3. /usr/bin/vim.tiny

  4. /bin/ed

Choose 1-4 [1]: 1

يفتح الأمر أعلاه محرر Crontab. 

إذا كنت تقوم بتشغيله لأول مرة سيُطلب منك اختيار المحرر لتعديل Cron jobs.

اختر 1 لمحرر Nano.

الصق السطر التالي في الأسفل:

25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”


سيقوم cron job المذكور أعلاه بتشغيل certbot في 2:25 صباحًا كل يوم. 

يمكنك تغييره إلى أي شيء تريده.

احفظ الملف بالضغط على Ctrl + X وإدخال Y عندما يُطلب منك ذلك.

تحديث Hexo

قم بالتبديل إلى مجلد Hexo:

$ cd /var/www/hexo


If you are switching to a major Hexo version, you need to update the package.json file. Open it for editing. You can skip directly to the update command for updating to minor versions.

ستحتاج إلى تحديث الملف package.json.

 افتحه للتعديل.

يمكنك التخطي مباشرة إلى أمر التحديث للتحديث إلى الإصدارات الثانوية:

$ nano package.json


قم بتغيير السطر التالي تحت dependencies:

"hexo": "^5.0.0",


قم بتغيير القيمة 5.0.0 إلى الإصدار التالي عندما يتم إصداره في المستقبل.

على سبيل المثال ، إذا كان Hexo 6.0 خارجًا  فقم بتغييره إلى التالي:

"hexo": "^6.0.0",


احفظ الملف بالضغط على Ctrl + X وإدخال Y عندما يُطلب منك ذلك.

قم بتشغيل الأمر التالي:

$ npm update


نشر Hexo

لا يمكن استضافة Hexo مباشرة على الخادم الخاص بك فحسب بل يمكن أيضًا نشرها مباشرة على Git و Netlify و Vercel و Heroku و OpenShift وطرق أخرى متنوعة.

تتطلب منك معظم deployment plugins تثبيت plugin

سنقوم بإعداد نشر Hexo على Netlify.

إذا كنت ترغب في النشر إلى Netlify فلن تحتاج إلى اتباع الخطوات المتعلقة بـ Nginx و SSL لأن Netlify يأتي مع SSL مجاني.

عادةً ما يتم نشر موقع Netlify من مستودع Git.

سننشر الموقع الثابت مباشرة إلى Netlify باستخدام أداة CLI الخاصة به.

قم بتثبيت Netlify CLI:

$ sudo npm install netlify-cli -g


يمكنك التحقق لمعرفة ما إذا تم تثبيت أداة CLI:

$ netlify --version

netlify-cli/2.68.5 linux-x64 node-v14.15.0


قم بتسجيل الدخول إلى Netlify:

$ netlify login

Logging into your Netlify account...

Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90

You are now logged into your Netlify account!

Run netlify status for account details

To see all available commands run: netlify help


انسخ معلومات تسجيل الدخول من الجهاز في متصفحك وقم بتسجيل الدخول إلى حساب Netlify الخاص بك للمصادقة.

تحقق مما إذا كنت قد قمت بتسجيل الدخول باستخدام الأمر التالي:


$ netlify status

???????????????????????

 Current Netlify User ?

???????????????????????

Name:  Your Name

Email: email@domain.com

Teams:

  Your Team's team: Collaborator


قم بالتبديل إلى مجلد Hexo العام (Hexo's public directory):

$ cd /var/www/hexo/public


انشر الموقع على Netlify:

$ netlify deploy

This folder isn't linked to a site yet

? What would you like to do? +  Create & configure a new site

? Team: Navjot Singh's team

Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.

? Site name (optional): Howtoforge

Site Created

Admin URL: https://app.netlify.com/sites/Howtoforge

URL:       https://Howtoforge.netlify.app

Site ID:   986c931c-3f06-40a1-a89b-59621f337c18

Please provide a publish directory (e.g. "public" or "dist" or "."):

/var/www/hexo/public

? Publish directory /var/www/hexo/public

Deploy path: /var/www/hexo/public

Deploying to draft URL...

? Finished hashing 37 files

? CDN requesting 9 files

? Finished uploading 9 assets

? Deploy is live!

Logs:              https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8

Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.

اختر بواسطة مفاتيح الأسهم لإنشاء موقع جديد وأدخل اسمًا لموقعك.

سوف تحصل على مسودة URL.

انسخ عنوان URL وقم بتحميله في المتصفح.

إذا كان كل شيء يبدو جيدًا ، فقم بتشغيل الأمر التالي لإجراء production deployment:

$ netlify deploy --prod


يمكنك إضافة مجال مخصص (custom domain)  في إعدادات Netlify لتوجيهه إلى موقع حقيقي.

في كل مرة تقوم فيها بنشر منشور جديد وإنشاء ملفات جديدة قم بتشغيل الأمر التالي من دليل Hexo الرئيسي لنشر التغييرات على Netlify.


$ netlify deploy --dir ./public --prod

google-playkhamsatmostaqltradent