शून्य से 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 के डोमेन के माध्यम से भी इसे एक्सेस किया जा सकता है। ऐसे में, इस ब्लॉग को एक छोटे डोमेन से जोड़ना इसे और भी बेहतर बना देगा।

डोमेन खरीदें

डोमेन रिज़ॉल्यूशन

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 फ़ाइल ओवरराइट हो जाती है। इसलिए, ओवरराइटिंग से बचने के लिए कॉन्फ़िगरेशन फ़ाइल सेट करना आवश्यक है।

Hexo डायरेक्टरी के source रूट डायरेक्टरी में एक 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

# लोकल सोर्स शाखा की पूरी सामग्री को रिमोट रिपॉजिटरी की सोर्स शाखा में पुश करें
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 से फिर से जनरेट करें