מדריך תמציתי להקמת בלוג 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. כעת, יהיה מושלם לקשר דומיין קצר יותר לבלוג זה.

רכישת דומיין

הגדרת DNS לדומיין

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

לאחר הגדרת ה-DNS לדומיין, היכנס לספריית הבלוג, ובתוך התיקייה source צור קובץ בשם CNAME (שים לב לאותיות רישיות, ללא סיומת). פתח אותו באמצעות עורך טקסט וכתוב בו את הדומיין שרכשת, לדוגמה: www.philoli.com

hexo g
hexo d

כעת, פתח את הדפדפן, הקלד את הדומיין, לחץ אנטר, ומזל טוב – יש לך כעת בלוג עם דומיין עצמאי משלך.

פרסום מאמרים חדשים

title כותרת המאמר
date תאריך יצירה (תאריך יצירת הקובץ)
updated תאריך עדכון (תאריך עדכון הקובץ)
comments האם להפעיל תגובות true
tags תגיות
categories קטגוריות
permalink שם ב-URL (שם הקובץ)
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 {
  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 שבפרויקט יידרס. לכן, יש להגדיר את קובץ התצורה כדי למנוע דריסה.

בספריית השורש source שבתקיית Hexo, הוסף קובץ 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 כדי ליצור מחדש