Οδηγός βήμα προς βήμα για τη δημιουργία ενός ιστολογίου Hexo από το μηδέν (Έκδοση 2024)

11 Απριλίου 2024 #Δημιουργία ιστολογίου

Έχεις κουραστεί από τις άχαρες διεπαφές των ιστοσελίδων ιστολογίων; Έχεις βαρεθεί τις ατέλειωτες ειδοποιήσεις; Ονειρεύεσαι εδώ και καιρό να δημιουργήσεις το δικό σου ιστολόγιο, αλλά οι πολύπλοκοι οδηγοί και ο «πονοκέφαλος» του κώδικα σε αποθαρρύνουν; Τότε συγχαρητήρια, αυτό το άρθρο είναι εδώ για να σου δείξει βήμα προς βήμα, με τον πιο απλό και κατανοητό τρόπο, πώς να στήσεις το δικό σου ιστολόγιο. Το μόνο που χρειάζεσαι είναι λίγη υπομονή και να ακολουθήσεις προσεκτικά κάθε βήμα.

Το Hexo, ως ένα γρήγορο, λιτό και αποτελεσματικό πλαίσιο για ιστολόγια, είναι πραγματικά μια ευλογία για τους αρχάριους. Ενώ το GitHub μας απαλλάσσει από τον κόπο της επιπλέον ενοικίασης και ανάπτυξης διακομιστών. Για το λόγο αυτό, σε αυτό το άρθρο θα χρησιμοποιήσουμε το Hexo και το GitHub για να δημιουργήσουμε το ιστολόγιό μας.

Έχω γράψει στο παρελθόν έναν σύντομο οδηγό για τη δημιουργία ιστολογίου από το μηδέν το 2018. Ωστόσο, λόγω ενημερώσεων στα πρόσθετα (plugins), ορισμένες λεπτομέρειες χρήζουν τροποποίησης. Για τον λόγο αυτό, επανακυκλοφορούμε την έκδοση του 2024 αυτού του περιεκτικού οδηγού.

Προετοιμασία

Κατεβάστε και εγκαταστήστε το node.js (Κατεβάστε και εγκαταστήστε από την επίσημη ιστοσελίδα)
Κατεβάστε και εγκαταστήστε το git (Κατεβάστε και εγκαταστήστε από την επίσημη ιστοσελίδα)

Δημιουργία στατικού ιστολογίου Hexo τοπικά

Εγκαταστήστε το πλαίσιο Hexo: Ανοίξτε το CMD και εκτελέστε:
```
$ npm install -g hexo-cli
```
Δημιουργήστε έναν νέο φάκελο, π.χ. MyBlog, εισέλθετε σε αυτόν τον φάκελο, κάντε δεξί κλικ και εκτελέστε το Git Bash, πληκτρολογήστε:
```
$ hexo init
```
Αφού δημιουργηθεί το πρότυπο Hexo, εγκαταστήστε το npm, εκτελέστε:
```
$ npm install
```

Ναι, το κύριο μέρος του ιστολογίου σας έχει ολοκληρωθεί! Ας δούμε το αποτέλεσμα. Εκτελέστε:

$ hexo server

Τώρα ανοίξτε τον περιηγητή σας (browser) και πληκτρολογήστε localhost:4000 για να δείτε την τρέχουσα εμφάνιση του ιστολογίου σας. Ενθουσιαστείτε λίγο, και μετά πατήστε Ctrl + C για να συνεχίσετε με τις επόμενες ενέργειες.

Προσαρμογή (Προκαταρκτική)

Αλλαγή Θέματος

Κατεβάστε ένα νέο θέμα (για παράδειγμα, το θέμα NexT), εκτελέστε στον ριζικό κατάλογο:
```
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
```
Ανοίξτε το αρχείο _config.yml στον ριζικό κατάλογο και τροποποιήστε το πεδίο theme σε:
```
theme: next
```
Επιλογή Εμφάνισης: Ανοίξτε το αρχείο /themes/next/_config.yml, βρείτε το πεδίο scheme (μπορείτε να χρησιμοποιήσετε Ctrl + F για γρήγορη αναζήτηση). Το NexT προσφέρει τέσσερις διαφορετικές εμφανίσεις. Διαλέξτε αυτή που σας αρέσει και αφαιρέστε το σύμβολο # από αυτήν. (Αυτά είναι τα δύο αρχεία που θα τροποποιούμε κυρίως στη συνέχεια: το αρχείο ρυθμίσεων του ιστοτόπου και το αρχείο ρυθμίσεων του θέματος.)
```
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
```
Για να δείτε το αποτέλεσμα, μπορείτε να εκτελέσετε τις ακόλουθες εντολές (μπορείτε να επαναλαμβάνετε αυτό το βήμα κάθε φορά που θέλετε να δείτε τις αλλαγές):
```
hexo g # ή hexo generate
hexo server
```

Ρυθμίσεις Ιστοτόπου

Χρησιμοποιήστε έναν επεξεργαστή κειμένου για να ανοίξετε το αρχείο ρυθμίσεων του ιστοτόπου _config.yml στον ριζικό κατάλογο (στα Windows, μην χρησιμοποιείτε το Σημειωματάριο (Notepad) για επεξεργασία, καθώς οι κινεζικοί τίτλοι ενδέχεται να εμφανιστούν ακατανόητοι). Τροποποιήστε το πεδίο Site. Προσοχή: πρέπει να υπάρχει ένα κενό διάστημα μετά την άνω και κάτω τελεία.
```
# Site
title: Άγνωστος Κόσμος                // Όνομα ιστολογίου
subtitle:
description:  Do something cool // Μια υπογραφή / σύντομο μήνυμα
author: LulalaP                 // Συγγραφέας
language: zh-Hans               // Γλώσσα ιστοτόπου
timezone:
```

Ρύθμιση εικόνας προφίλ στην πλευρική γραμμή

Μέσα στον φάκελο /source, δημιουργήστε έναν νέο φάκελο και ονομάστε τον uploads. Τοποθετήστε την εικόνα προφίλ (π.χ. avatar.jpg) μέσα σε αυτόν τον φάκελο.
Ανοίξτε το αρχείο /themes/next/_config.yml, βρείτε το πεδίο avatar και τροποποιήστε το σε:
```
avatar:
    url: /uploads/avatar.jpg
```

Ολοκλήρωση Σελίδων Ιστολογίου

Προσθήκη Μενού

Ανοίξτε το αρχείο /themes/next/_config.yml. Απλώς αφαιρέστε το σχόλιο (το σύμβολο #) μπροστά από τα στοιχεία μενού που θέλετε να προσθέσετε στο πεδίο menu. Αν χρειάζεται να προσθέσετε άλλα στοιχεία μενού, μπορείτε να το κάνετε κατά βούληση (προσέξτε την εσοχή των πεδίων):
```
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
```

Δημιουργία Σελίδας Κατηγοριών

Δημιουργήστε μια νέα σελίδα, ονομάστε την categories, με την ακόλουθη εντολή:
```
$ hexo new page categories
```
Επεξεργαστείτε τη σελίδα που μόλις δημιουργήσατε, /source/categories/index.md, και ορίστε τον τύπο της σελίδας σε categories. Το θέμα θα εμφανίσει αυτόματα όλες τις κατηγορίες σε αυτή τη σελίδα (προσέξτε να διατηρήσετε το κενό μετά την άνω και κάτω τελεία).
```
	title: Categories
	date: 2024-04-10 23:40:31
	type: "categories"
	comments: false
  ---
```

Δημιουργήστε μια νέα σελίδα, ονομάστε την tags, με την ακόλουθη εντολή:
```
$ hexo new page "tags"
```
Επεξεργαστείτε τη σελίδα που μόλις δημιουργήσατε και ορίστε τον τύπο της σελίδας σε tags. Το θέμα θα εμφανίσει αυτόματα ένα σύννεφο ετικετών για αυτή τη σελίδα.
```
---
	title: Tags
	date: 2024-04-10 23:41:25
	type: "tags"
	comments: false
---
```

Δημιουργία σελίδας «Σχετικά με Εμένα»

Δημιουργήστε μια νέα σελίδα “about”:
```
$ hexo new page "about"
```
Επεξεργαστείτε τη σελίδα που μόλις δημιουργήσατε. Μπορείτε να γράψετε τις πληροφορίες σας στο κυρίως κείμενο χρησιμοποιώντας τη μορφοποίηση Markdown.
```
	title: About
	date: 2024-04-10 23:41:56
	comments: false
---
```

Ρύθμιση Κοινωνικών Συνδέσμων στην Πλευρική Γραμμή

Επεξεργαστείτε το αρχείο _config.yml του ιστοτόπου, βρείτε το πεδίο social και προσθέστε το όνομα και τη διεύθυνση της κοινωνικής πλατφόρμας. Η μορφή είναι Όνομα Εμφάνισης: Διεύθυνση Συνδέσμου, για παράδειγμα:
```
# 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
```
Ανοίξτε το αρχείο /themes/next/_config.yml, και κάτω από το πεδίο social_icons προσθέστε το όνομα της κοινωνικής πλατφόρμας (προσέξτε τα κεφαλαία/πεζά γράμματα) και το εικονίδιο. Η επιλογή enable χρησιμοποιείται για τον έλεγχο της εμφάνισης των εικονιδίων. Μπορείτε να την ορίσετε σε false για να αφαιρέσετε τα εικονίδια. Για παράδειγμα:
```
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter
```

Σύνδεση του ιστολογίου με το GitHub

Εγγραφή λογαριασμού GitHub: Εάν δεν έχετε λογαριασμό GitHub, πρέπει πρώτα να εγγραφείτε.
Στο GitHub, δημιουργήστε ένα αποθετήριο με όνομα XXX.github.io, όπου XXX είναι το όνομα χρήστη σας στο GitHub.
Ανοίξτε το αρχείο ρυθμίσεων _config.yml μέσα στον τοπικό σας φάκελο έργου MyBlog, και ορίστε το πεδίο type σε git:
```
deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
```
Εκτελέστε:
```
npm install hexo-deployer-git --save
```
Δημιουργήστε στατικά αρχεία τοπικά και στείλτε τα στο GitHub, εκτελέστε:
```
hexo g
hexo d
```

Τώρα, ανοίξτε τον περιηγητή σας και επισκεφτείτε το http://your-name.github.io. Συγχαρητήρια, το ιστολόγιό σας έχει πλέον ολοκληρωθεί!

Σύνδεση Ονόματος Τομέα (Domain)

Μέχρι στιγμής, το ιστολόγιο έχει ολοκληρωθεί πλήρως και είναι προσβάσιμο μέσω του ονόματος τομέα του GitHub. Σε αυτό το σημείο, η σύνδεση ενός σύντομου ονόματος τομέα στο ιστολόγιο θα το έκανε ακόμα πιο τέλειο.

Αγορά Ονόματος Τομέα

Αγοράστε ένα όνομα τομέα. Συνιστάται να αγοράσετε από το namesilo.com, έναν παλιό και αξιόπιστο πάροχο τομέων, με καλές τιμές και αξιόπιστες υπηρεσίες. Εάν χρησιμοποιήσετε τον κωδικό παραπομπής μου PhiloArt.io, μπορείτε να λάβετε έκπτωση 1 δολαρίου, με ισχύ έως 31/12/2025.

Ανάλυση Ονόματος Τομέα (DNS Resolution)

Ρυθμίσεις DNS στον πάροχο τομέα
Προσθέστε 4 εγγραφές τύπου A, για να δείχνουν στις GitHub Pages:

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
Προσθέστε μια εγγραφή CNAME, το name να είναι www και το content να είναι your-name.github.io (που δείχνει στη διεύθυνση των GitHub Pages σας):

CNAME —> philo-li.github.io
Για πιο λεπτομερείς ρυθμίσεις, ανατρέξτε στην τεκμηρίωση των GitHub Pages
Προσθήκη αρχείου CNAME στον κατάλογο του ιστολογίου

Αφού ολοκληρώσετε τη ρύθμιση της ανάλυσης ονόματος τομέα, μεταβείτε στον κατάλογο του ιστολογίου, δημιουργήστε ένα νέο αρχείο με όνομα CNAME (προσέξτε να είναι κεφαλαία και χωρίς επέκταση) μέσα στον κατάλογο source. Ανοίξτε το με ένα πρόγραμμα επεξεργασίας κειμένου (π.χ. Σημειωματάριο) και γράψτε το όνομα τομέα που αγοράσατε, π.χ.: www.philoli.com
Εκτελέστε:
```
hexo g
hexo d
```

Τώρα ανοίξτε τον περιηγητή σας, πληκτρολογήστε το όνομα τομέα, πατήστε Enter. Συγχαρητήρια, έχετε πλέον ένα ιστολόγιο με το δικό σας ανεξάρτητο όνομα τομέα!

Δημοσίευση Νέου Άρθρου

Στον ριζικό κατάλογο του ιστολογίου, εκτελέστε: hexo new “Το πρώτο μου άρθρο”. Θα δημιουργηθεί ένα αρχείο .md μέσα στον φάκελο source/_posts.

Επεξεργαστείτε αυτό το αρχείο, τροποποιήστε τα αρχικά πεδία σε:

title Ο τίτλος του άρθρου
date Ημερομηνία δημιουργίας (ημερομηνία δημιουργίας του αρχείου)
updated Ημερομηνία τροποποίησης (ημερομηνία τροποποίησης του αρχείου)
comments Ενεργοποίηση σχολίων true
tags Ετικέτες
categories Κατηγορίες
permalink Όνομα στο URL (όνομα αρχείου)

Γράψτε το κυρίως κείμενο (ακολουθώντας τους κανόνες Markdown).
Δημιουργήστε στατικά αρχεία τοπικά και στείλτε τα στο GitHub, εκτελέστε:
```
hexo g
hexo d
```

Προσαρμογή (Προχωρημένο επίπεδο)

Παρακάτω παρέχονται ορισμένες προχωρημένες ρυθμίσεις για την προσαρμογή του στυλ του ιστολογίου. Οι αρχάριοι μπορούν να τις παραλείψουν προς το παρόν.

Προσθήκη RSS

Εγκαταστήστε το πρόσθετο στον ριζικό κατάλογο:
```
$ npm install hexo-generator-feed --save
```
Προσθέστε τα ακόλουθα στο τέλος του αρχείου _config.yml στον ριζικό κατάλογο: (Προσοχή: πρέπει να υπάρχει ένα κενό διάστημα μετά την άνω και κάτω τελεία, διαφορετικά θα προκληθεί σφάλμα!)
```
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
```
Ανοίξτε το αρχείο /themes/next/_config.yml, τροποποιήστε το πεδίο rss (προσέξτε να υπάρχει ένα κενό διάστημα μετά την άνω και κάτω τελεία):
```
rss: /atom.xml || fa fa-rss
```

Αποκοπή Άρθρων στην Αρχική Σελίδα

Κάθε φορά που γράφετε το κυρίως κείμενο ενός άρθρου, απλώς προσθέστε το ακόλουθο σημείο αποκοπής στο αρχείο .md του άρθρου όπου θέλετε να γίνει η διακοπή:
```
    
```
Ανοίξτε το αρχείο /themes/next/_config.yml και ορίστε την επιλογή scroll_to_more σε false.

Κεντράρισμα Κειμένου Παραπομπών εντός Άρθρου

Βελτιστοποιήθηκε η προεπιλεγμένη εμφάνιση των παραπομπών του Markdown.

{% centerquote %}
Κείμενο παραπομπής
{% endcenterquote %}

{% centerquote %} Κείμενο παραπομπής {% endcenterquote %}

Τροποποίηση Στυλ Μπλοκ Κώδικα

Επεξεργαστείτε το αρχείο /themes/next/_config.yml, τροποποιήστε τη διαμόρφωση του codeblock ως εξής:

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:

Ορισμός Ημερομηνίας Δημιουργίας Ιστοτόπου

Επεξεργαστείτε το αρχείο _config.yml του ιστοτόπου και προσθέστε το πεδίο since.
```
since: 2024
```

Βελτίωση Στυλ Συνδέσμων Άρθρων

Επεξεργαστείτε το αρχείο themes\next\source\css\_common\components\post\post.styl και προσθέστε τα ακόλουθα στυλ CSS στο τέλος:

// 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;
  }
}

Προσθήκη Εικόνας Φόντου στο Ιστολόγιο

Στον φάκελο source του ριζικού καταλόγου, δημιουργήστε έναν φάκελο _data. Δημιουργήστε ένα νέο αρχείο styles.styl μέσα σε αυτόν. Ανοίξτε το νέο αρχείο source/_data/styles.styl και προσθέστε το ακόλουθο περιεχόμενο:

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Αν η εικόνα δεν καλύπτει πλήρως, αν θα επαναληφθεί και πώς.
    background-attachment:fixed;    // Αν η εικόνα θα ακολουθεί την κύλιση.
    background-size: cover;         // Κάλυψη
    background-position:50% 50%;    // Θέση εικόνας
}

Το URL μπορεί να είναι σύνδεσμος εικόνας ή κατάλογος εικόνων. Μπορείτε να ονομάσετε την εικόνα background.jpg και να την τοποθετήσετε στον φάκελο source/uploads.

Ρύθμιση ημιδιαφανούς φόντου για το περιεχόμενο του ιστολογίου

Ανοίξτε το αρχείο source/_data/styles.styl που επεξεργαστήκατε στο προηγούμενο βήμα και προσθέστε το ακόλουθο περιεχόμενο:


// Διαφάνεια περιεχομένου ιστολογίου
// Ρύθμιση διαφάνειας για το περιεχόμενο των άρθρων
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 δεν θα αποδοθεί.

Μερικά Χρήσιμα Πρόσθετα (Plugins)

Hexo Filter MathJax: Απόδοση μαθηματικών τύπων
- Εγκατάσταση npm install hexo-filter-mathjax
- Αναλυτική διαμόρφωση: hexo-filter-mathjax
Hexo Word Counter: Καταμέτρηση λέξεων άρθρου
- Εγκατάσταση npm install hexo-word-counter
- Αναλυτική διαμόρφωση: hexo-word-counter
Hexo Optimize: Βελτιστοποίηση ταχύτητας φόρτωσης ιστολογίου
- Εγκατάσταση npm install hexo-optimize
- Αναλυτική διαμόρφωση: hexo-optimize
Περισσότερα πρόσθετα: https://theme-next.js.org/plugins/

Δημιουργία Αντιγράφων Ασφαλείας Πηγαίων Αρχείων

Μην ξεχνάτε να δημιουργείτε αντίγραφα ασφαλείας των τοπικών σας πηγαίων αρχείων, ειδικά των αρχείων Markdown. Εάν χαθούν άλλες ρυθμίσεις, δεν θα μπορείτε να γράψετε κανονικά στο ιστολόγιο και θα χρειαστεί να τα ρυθμίσετε από την αρχή.
Συνιστάται η χρήση του ίδιου αποθετηρίου GitHub για δημιουργία αντιγράφων ασφαλείας.
Συνιστάται να δημιουργείτε ένα αντίγραφο ασφαλείας κάθε φορά που κάνετε κάποιες αλλαγές, ή μία φορά την ημέρα.
Για περισσότερες χρήσεις, ανατρέξτε στην τεκμηρίωση του Git

# Προσθέστε τη διεύθυνση του αποθετηρίου του ιστολογίου που ρυθμίσατε προηγουμένως.
git remote add https://github.com/your-name/your-name.github.io.git

# Προσθέστε και αποθηκεύστε τις τρέχουσες αλλαγές, και καταγράψτε ένα σχόλιο.
git add .
git commit -m "Ενημέρωση πηγαίων αρχείων"

# Δημιουργήστε και μεταβείτε σε ένα νέο branch.
git checkout -b source

# Προωθήστε όλο το περιεχόμενο του τοπικού branch source στο branch source του απομακρυσμένου αποθετηρίου.
git push origin source:source

Γράφοντας στο ιστολόγιο από διαφορετικούς υπολογιστές

Όταν γράφετε στο ιστολόγιο από διαφορετικούς υπολογιστές, πρέπει να εγκαταστήσετε το βασικό λογισμικό και στη συνέχεια να τραβήξετε το απομακρυσμένο αποθετήριο GitHub με το backup στον τοπικό σας υπολογιστή για να ενημερώσετε το ιστολόγιο.

Κατεβάστε και εγκαταστήστε το node.js (Κατεβάστε και εγκαταστήστε από την επίσημη ιστοσελίδα)
Κατεβάστε και εγκαταστήστε το git (Κατεβάστε και εγκαταστήστε από την επίσημη ιστοσελίδα)
Εγκαταστήστε το πλαίσιο Hexo: Ανοίξτε το CMD και εκτελέστε:
```
npm install -g hexo-cli
```

Πραγματοποιήστε τοπική ενημέρωση:

# Κλωνοποίηση αποθετηρίου τοπικά
git clone https://github.com/your-name/your-name.github.io.git

# Εάν έχετε ήδη κλωνοποιήσει τοπικά, κάθε φορά πριν από την ενημέρωση του ιστολογίου πρέπει να τραβάτε το πιο πρόσφατο περιεχόμενο του branch.
git pull origin

# Μετάβαση στο αντίστοιχο branch.
git checkout source

# Αφού εγκαταστήσετε όλα τα πρόσθετα που έχουν ρυθμιστεί για το Hexo, μπορείτε να αρχίσετε να ενημερώνετε και να επεξεργάζεστε το περιεχόμενο του ιστολογίου.
npm install

# Μετά την τροποποίηση του περιεχομένου, θυμηθείτε να κάνετε άμεσα backup.
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 τα δημιουργεί ξανά.