5.6 Vuepress | Εγκατάσταση

5.6.1 Εισαγωγή

Αυτός ο οδηγός σχεδιάστηκε για να καθοδηγήσει τον χρήστη στα απαραίτητα βήματα εγκατάστασης του VuePress σε περιβάλλον Linux (Ubuntu). Το VuePress αποτελεί έναν ισχυρό στατικό site generator που αξιοποιεί το οικοσύστημα του Vue.js. Στο πλαίσιο αυτό, καλύπτονται τα προαπαιτούμενα και οι βασικές εντολές, ώστε να καταστεί άμεση η έναρξη του έργου. Για λόγους απλότητας και ταχύτητας, δεν παρατίθενται λεπτομέρειες ρυθμίσεων και παραμετροποιήσεων, οι οποίες αποτελούν αντικείμενο επόμενων κεφαλαίων.

Στόχος μας είναι η άμεση και επιτυχής ολοκλήρωση της εγκατάστασης.

Webmin

5.6.2 Προαπαιτούμενα

Η εγκατάσταση του VuePress σε περιβάλλον Linux (Ubuntu) προϋποθέτει την ύπαρξη του Node.js. Η χρήση ενός εξωτερικού προγράμματος επεξεργασίας κώδικα δεν κρίνεται αναγκαία, καθώς η πλατφόρμα του Webmin που χρησιμοποιείται στην παρούσα πτυχιακή εργασία προσφέρει ενσωματωμένο επεξεργαστή αρχείων. Ωστόσο, παρέχεται η δυνατότητα χρήσης οποιουδήποτε τοπικού επεξεργαστή κώδικα, ανάλογα με τις προτιμήσεις του χρήστη. Περαιτέρω προτάσεις δημοφιλών επιλογών είναι διαθέσιμες στον σχετικό πίνακα.

Α/Α	Πρόγραμμα (Εφαρμογή)	Ubuntu	macOS	Windows
1	Visual Studio Code	✓	✓	✓
2	Sublime Text	✓	✓	✓
3	Atom	✓	✓	✓
4	Notepad++			✓
5	Vim	✓	✓	✓

Πίνακας - Προγράμματα επεξεργασίας κώδικα

5.6.2.1 Node.js

Η εγκατάσταση του Node.js είναι το πρώτο και πιο σημαντικό βήμα. Για να διασφαλίσουμε την ομαλή λειτουργία και την ευελιξία του συστήματος, θα χρησιμοποιήσουμε το NVM. Το NVM μας επιτρέπει να διαχειριζόμαστε πολλαπλές εκδόσεις του Node.js, κάτι που είναι ιδιαίτερα χρήσιμο για την αποφυγή συγκρούσεων και την εύκολη αναβάθμιση σε μελλοντικές εκδόσεις.

Important

Για να εφαρμόσετε τον οδηγό στο εργαστήριο lab-thesis-srv :

• αντικαταστήστε τη διεύθυνση IP με αυτή του εργαστηρίου 192.168.1.159.
• χρησιμοποιήστε το χρήστη labrat αντί του χρήστη digilady

Ακολουθήστε τα βήματα που περιγράφονται παρακάτω,

• Εκκίνηση στο VirtualBox της εικονική μηχανής DL-Thesis-UTH

• Σύνδεση στο VM DL-Thesis-UTH
  1.Συνδεθείτε με το χρήστη digilady και το συνθηματικό του 3edc+^YHN

  Προτεινόμενος τρόπος σύνδεσης

  • SSH

  ssh digilady@192.168.1.146
  

  2. Δείτε τα διαθέσιμα Containers

  lxc list
  

Έξοδος τερματικού

digilady@dl-thesis-srv:~# lxc list

+------------------------------+---------+--------------------+-----------------------------------------------+-----------+-----------+
|             NAME             |  STATE  |        IPV4        |                     IPV6                      |   TYPE    | SNAPSHOTS |
+------------------------------+---------+--------------------+-----------------------------------------------+-----------+-----------+
| CT-101-DEVSRV-UBI2404       | RUNNING | 10.65.38.82 (eth1) | fd42:f862:d4ed:5f05:216:3eff:fe74:3c77 (eth1) | CONTAINER | 2         |
+------------------------------+---------+--------------------+-----------------------------------------------+-----------+-----------+
| CT-102-FILESRV-UBI2404      | STOPPED |                    |                                               | CONTAINER | 1         |
+------------------------------+---------+--------------------+-----------------------------------------------+-----------+-----------+
| CT-103-WEBSRV-UBI2404       | STOPPED |                    |                                               | CONTAINER | 2         |
+------------------------------+---------+--------------------+-----------------------------------------------+-----------+-----------+


digilady@dl-thesis-srv:~#

Tips

Eάν τρέχει ( RUNNING ένδειξη στη στήλη STATE ) από την έξοδο της προηγούμενης εντολής, τότε προχωρήστε στο Βήμα 4.

3. Εκκινήστε το container CT-101-DEVSRV-UBI2404

lxc start CT-101-DEVSRV-UBI2404

Έξοδος τερματικού

digilady@dl-thesis-srv:~# lxc start CT-101-DEVSRV-UBI2404
digilady@dl-thesis-srv:~#

4. Εισέλθετε στο container CT-101-DEVSRV-UBI2404

lxc exec CT-101-DEVSRV-UBI2404 bash

Έξοδος τερματικού

digilady@dl-thesis-srv:~# lxc exec CT-101-DEVSRV-UBI2404 bash
root@CT-101-DEVSRV-UBI2404:~# 

5. Συνδεθείτε ως χρήστης digilady καθώς η είσοδος γίνεται με το χρήστη 'root'

su digilady

Έξοδος τερματικού

root@CT-101-DEVSRV-UBI2404:~# su digilady
digilady@CT-101-DEVSRV-UBI2404:/root$

  cd ~

Έξοδος τερματικού

root@CT-101-DEVSRV-UBI2404:/root$ cd ~
digilady@CT-101-DEVSRV-UBI2404:~$

• Εκτέλεση του επίσημου κώδικα εγκατάστασης
  Σύμφωνα με το Official site αντιγράφοντας και επικολλώντας τον κώδικα στο τερματικό του CT-101-DEVSRV-UBI2404 γίνεται η εγκατάσταση της έκδοσης v.22.20.0(LTS).

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 24

# Verify the Node.js version:
node -v # Should print "v24.9.0".

# Verify npm version:
npm -v # Should print "11.6.0".

Μετά την ολοκλήρωση θα δείτε στο τέλος του τερματικού

Έξοδος τερματικού

Computing checksum with sha256sum
Checksums matched!
Now using node v24.9.0 (npm v11.6.0)
Creating default alias: default -> 24 (-> v24.9.0)
v24.9.0
11.6.0
digilady@CT-101-DEVSRV-UBI2404:~$

5.6.3 Έλεγχος εκδόσεων

Στην ανάπτυξη λογισμικού, κάθε νέα κυκλοφορία (έκδοση - version) περνά από διάφορα στάδια δοκιμών πριν θεωρηθεί πλήρως σταθερή. Η κατανόηση αυτών των σταδίων είναι κρίσιμη για την επιλογή της κατάλληλης έκδοσης του VuePress που θα επιλέξετε για το έργο σας (project).

• Alpha: Αποτελεί μια πολύ πρώιμη δοκιμαστική έκδοση. Περιλαμβάνει νέα χαρακτηριστικά αλλά είναι ασταθής και πιθανώς να έχει πολλά σφάλματα (bugs). Προορίζεται κυρίως για εσωτερικές δοκιμές.
• Beta: Μια πιο σταθερή έκδοση από την alpha, με τα περισσότερα χαρακτηριστικά ολοκληρωμένα. Είναι ανοιχτή για δοκιμές από την κοινότητα με σκοπό τον εντοπισμό σφαλμάτων.
• rc (Release Candidate): Είναι η τελευταία υποψήφια έκδοση πριν την τελική κυκλοφορία. Θεωρείται σταθερή και δεν αναμένονται αλλαγές, εκτός εάν βρεθούν κρίσιμα σφάλματα.
• Σταθερή Έκδοση: Η τελική, επίσημη κυκλοφορία (π.χ., 1.8.0). Έχει περάσει όλες τις δοκιμές και είναι έτοιμη για χρήση σε περιβάλλον παραγωγής.

          Προαιρετική - Εγκυκλοπαιδική Παράγραφoς

• Προβολή διαθέσιμων εκδόσεων
  Για να δείτε όλες τις διαθέσιμες εκδόσεις του VuePress, εκτελέστε την ακόλουθη εντολή η οποία θα εμφανίσει μια μακροσκελή λίστα με όλες τις διαθέσιμες εκδόσεις.

npm view vuepress versions

• Έλεγχος συγκεκριμένων εκδόσεων

Για να δεις όλες τις διαθέσιμες εκδόσεις ενός πακέτου στο μητρώο του npm, μπορείς να χρησιμοποιήσεις την εντολή npm view.

• Για όλες τις επίσημες εκδόσεις (v1.x):

npm view vuepress versions --json | grep '"1.'

Αυτή η εντολή θα εμφανίσει μια λίστα με όλες τις σταθερές εκδόσεις του VuePress, όπως 1.0.0, 1.5.3, 1.9.9, κ.ο.κ.

• Για τις εκδόσεις 2.x (beta/next):
  Επειδή η έκδοση 2 είναι ακόμα σε φάση υποψηφιότητας κυκλοφορίας (release candidate), έχει την ετικέτα next. Για να δεις τις διαθέσιμες εκδόσεις της, θα πρέπει να τρέξεις:

npm view vuepress versions --json | grep '"2.'

Αυτό θα σου δώσει όλες τις εκδόσεις της σειράς 2.x, όπως 2.0.0-beta.60, 2.0.0-rc.0, κ.λπ.

• Εγκατάσταση συγκεκριμένης έκδοση

Warning

Τα παρακάτω 3 βήματα είναι απλώς για εγκυκλοπαιδική γνώση. Δεν πρέπει να τα εκτελέσετε στο Container που θα λειτουργήσει ο DEVSRV!!

Για να εγκαταστήσεις μια συγκεκριμένη έκδοση, πρέπει να ορίσεις τον αριθμό της μετά το σύμβολο @.

• Εγκατάσταση σταθερής έκδοσης (v1.x):

npm install vuepress@1.9.9

Αυτή η εντολή θα εγκαταστήσει την έκδοση 1.9.9 του VuePress.

• Εγκατάσταση της έκδοσης 2 (release candidate):
  Αν θέλετε να εγκαταστήσετε την τελευταία έκδοση 2, η εντολή είναι:

npm install vuepress@latest

• Εγκατάσταση συγκεκριμένης έκδοσης (v2.0.0-rc.0):
  Αν θέλετε να εγκαταστήσετε μια συγκεκριμένη έκδοση 2, για παράδειγμα την 2.0.0-rc.0, η εντολή είναι:

npm install vuepress@2.0.0-rc.0

5.6.4 Εγκατάσταση

Κατά την ημερομηνία συγγραφής αυτού του άρθρου, η πιο πρόσφατη σταθερή έκδοση του VuePress είναι η v1. Εντούτοις, για τον οδηγό θα χρησιμοποιήσουμε την έκδοση vuepress@latest, η οποία αντιστοιχεί στη v2. Αυτή η επιλογή είναι απαραίτητη, καθώς το vuepress-theme-hope, το θέμα που θα χρησιμοποιήσουμε, είναι σχεδιασμένο ειδικά για τη VuePress v2.

5.6.4.1 Βήμα 1ο

Warning

Επιβεβαιώστε ότι είστε συνδεδεμένοι στο container CT-101-DEVSRV-UBI2404 με τον χρήστη digilady πριν την εκτέλεση οποιασδήποτε από τις επόμενες εντολές στο τερματικό.

pwd

Εάν δεν έχετε εξέλθει ή δεν έχετε εκτελέσει κάποια ενέργεια για εγκατάσταση συγκεκριμένης έκδοσης της προαιρετικής - εγκυκλοπαιδικής παραγράφου, λογικά θα δείτε την παρακάτω έξοδο.

Έξοδος τερματικού

digilady@CT-101-DEVSRV-UBI2404:~# pwd
/home/digilady
digilady@CT-101-DEVSRV-UBI2404:~$ 

5.6.4.2 Βήμα 2ο

Δημιουργία φακέλου με όνομα 'MyThesis', μέσα στον home φάκελο του χρήστη στον οποίο θα αναπτυχθεί το project

mkdir -p ~/Vuepress/MyThesis

Έξοδος τερματικού

digilady@CT-101-DEVSRV-UBI2404:~$ mkdir -p ~/Vuepress/MyThesis
digilady@CT-101-DEVSRV-UBI2404:~$

5.6.4.3 Βήμα 3ο

Οδηγούμαστε στο κατάλογο εγκατάστασης

cd ~/Vuepress/MyThesis

Έξοδος τερματικού

digilady@CT-101-DEVSRV-UBI2404:~$ cd ~/Vuepress/MyThesis
digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$

5.6.4.4 Βήμα 4ο

Εγκαθιστούμε την τελευταία έκδοση όπως περιγράφεται στην επίσημη σελίδα

npm init -D vuepress-theme-hope@latest .

Tips

Είναι καλή πρακτική να προσθέσετε το --save-dev ή -D μετά τοinit, ώστε το πακέτο να καταχωρηθεί στο αρχείο package.json ως εξάρτηση που είναι απαραίτητη μόνο κατά τη διάρκεια της ανάπτυξης και του build του project.

5.6.4.4.1 Έναρξη Εγκατάστασης

Με την εκτέλεση της εντολής θα εμφανιστεί το επόμενο μήνυμα στο τερματικό.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .

Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y

• Η εντολή που εκτελέσατε ζητά την εγκατάσταση του απαραίτητου πακέτου για τη δημιουργία του project. Αυτή η διαδικασία είναι αυτόματη.

• Το μήνυμα "Ok to proceed? (y)" είναι μια ερώτηση επιβεβαίωσης. Σας ρωτά αν θέλετε να συνεχίσετε με την εγκατάσταση του πακέτου create-vuepress-theme-hope.

• Πληκτρολογήστε y και πατήστε [ Enter ] για να δώσετε τη συγκατάθεσή σας και να ξεκινήσει ο διαδραστικός οδηγός εγκατάστασης.

Caution

• Σε αντίθετη περίπτωση, που θέλετε να διακόψετε την εγκατάσταση, πατήστε [Ctrl]+c,
• Από το σημείο αυτό και μέχρι την ολοκλήρωση της εγκατάστασης πρέπει να προσέχετε καθώς δεν μπορείτε να επιστρέψετε σε προηγούμενες ρυθμίσεις παραμέτρων

5.6.4.4.2 Γλώσσα διεπαφής

Επιλέξτε τη γλώσσα που θέλετε να εμφανίζεται κατά τη διάρκεια της εγκατάστασης και την προεπιλεγμένη γλώσσα για την τεκμηρίωση.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .

? Select a language to display / 选择显示语言 (Use arrow keys)
❯ English
  简体中文

• Το μήνυμα "? Select a language to display" σας ζητά να επιλέξετε τη γλώσσα για τον οδηγό εγκατάστασης και για τα σχόλια που θα προστεθούν αυτόματα στα αρχεία του project σας.

• Επιλέξτε τη γλώσσα χρησιμοποιώντας τα βελάκια πάνω-κάτω ( ↑ ↓ ) στο πληκτρολόγιό σας και πατήστε [ Enter ] για να επιβεβαιώσετε.

5.6.4.4.3 Διαχειριστής πακέτων

Επιλέξτε τον διαχειριστή πακέτων που θα χρησιμοποιήσετε για το project σας.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
? Choose package manager (Use arrow keys)
❯ pnpm
  npm

Το μήνυμα "? Choose package manager" σας ρωτά ποιο εργαλείο θέλετε να χρησιμοποιήσετε για να εγκαταστήσετε τις εξαρτήσεις του project σας.

• npm: Είναι ο προεπιλεγμένος διαχειριστής πακέτων για το Node.js. Είναι η πιο διαδεδομένη και ευρέως υποστηριζόμενη επιλογή.
• pnpm: Είναι ένας νεότερος διαχειριστής πακέτων, γνωστός για την ταχύτητα και την αποδοτική χρήση του χώρου στον δίσκο.

Για τους σκοπούς του οδηγού, επιλέξτε npm χρησιμοποιώντας τα βελάκια ( ↑ ↓ ), καθώς είναι η πιο συνηθισμένη επιλογή και η πιο πιθανή να είναι ήδη εγκατεστημένη στους υπολογιστές των χρηστών. Πατήστε [ Enter ] για να επιβεβαιώσετε.

5.6.4.4.4 Βundler

Επιλέξτε τον bundler που θα μετατρέψει τον κώδικά σας σε αρχεία για τον browser.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
? Which bundler do you want to use? (Use arrow keys)
❯ vite
  webpack

• Το μήνυμα "? Which bundler do you want to use?" σας ζητά να επιλέξετε ανάμεσα σε δύο δημοφιλή εργαλεία για τη διαδικασία του build.
  • Vite: Είναι ένας σύγχρονος, εξαιρετικά γρήγορος bundler. Είναι η προτεινόμενη επιλογή για το VuePress, καθώς προσφέρει ταχύτατους χρόνους φόρτωσης κατά την ανάπτυξη και βελτιστοποιεί την τελική εφαρμογή.
  • Webpack: Είναι ο παραδοσιακός bundler, πολύ ισχυρός και παραμετροποιήσιμος, αλλά συχνά πιο αργός και πιο περίπλοκος στη ρύθμιση.
• Για τους σκοπούς της εργασίας, επιλέξτε Vite χρησιμοποιώντας τα βελάκια ( ↑ ↓ ) και πατήστε [ Enter ] για να επιβεβαιώσετε.

5.6.4.4.5 Όνομα project

Το όνομα που θα δώσετε στην παράμετρο name στο package.json χρησιμοποιείται για την εσωτερική οργάνωση του project και για την ταυτοποίησή του.

Important

Πρέπει να προσέξετε στη εισαγωγή καθώς δέχεται πεζούς λατινικούς χαρακτήρες, αριθμούς και παύλες χωρίς κενά μεταξύ τους.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
? Your project name (vuepress-theme-hope-template) _

• Το μήνυμα "? Your project name" σας ζητά να δώσετε ένα όνομα για το project σας.
• Το όνομα που θα δώσετε στην παράμετρο name στο αρχείο package.json χρησιμοποιείται για την εσωτερική οργάνωση και ταυτοποίηση του project.
• Πληκτρολογήστε ένα όνομα για το project σας, όπως π.χ. mythesis-digilady-uth2025 και πατήστε Enter για να συνεχίσετε.

5.6.4.4.6 Περιγραφή project

Ορίστε μια σύντομη περιγραφή για το project σας. Είστε ελεύθεροι να εισάγεται κείμενο οποιασδήποτε μορφής.

• Η δική μου επιλογή

Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.

Επεκτείνετε τον κώδικα από το διακόπτη στα δεξιά και αντιγράψτε εύκολα

Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
? Your project description (A project of vuepress-theme-hope) _

5.6.4.4.7 Έκδοση

Ορίστε τον αριθμό έκδοσης για το project σας.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
? Your project version (2.0.0) _

• Το μήνυμα ? Your project version σας ζητά να καθορίσετε την έκδοση του project. Η έκδοση χρησιμοποιείται για να παρακολουθείτε τις αλλαγές και τις αναβαθμίσεις του.

  • Προεπιλεγμένη Έκδοση: Η προεπιλεγμένη έκδοση είναι συνήθως 2.0.0.
  • Καθορισμός Έκδοσης: Μπορείτε να την αφήσετε ως έχει πατώντας [ Enter ], ή να πληκτρολογήσετε μια διαφορετική έκδοση.

• Για τους σκοπούς της εργασίας σας, η προεπιλεγμένη έκδοση είναι απολύτως κατάλληλη. Πατήστε [ Enter ] για να συνεχίσετε.

5.6.4.4.8 Άδεια χρήσης

Επιλέξτε την άδεια χρήσης (license) για τον κώδικα του project σας.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0)
? Your project license (MIT) _

• Το μήνυμα ? Your project license σας ρωτά να επιλέξετε τον τύπο της άδειας χρήσης που θα συνοδεύει το project σας.

  • MIT License: Είναι μια πολύ δημοφιλής άδεια, γνωστή για την ευελιξία της. Επιτρέπει σε οποιονδήποτε να χρησιμοποιήσει, να τροποποιήσει και να διανείμει τον κώδικά σας, ακόμα και για εμπορικούς σκοπούς, αρκεί να διατηρείται η αρχική δήλωση πνευματικών δικαιωμάτων.
  • Άλλες Άδειες: Υπάρχουν και άλλες επιλογές, όπως η GPL, που είναι πιο περιοριστικές.

• Για τους σκοπούς της πτυχιακής σας, η προεπιλεγμένη άδεια MIT είναι η ιδανική επιλογή, καθώς είναι η πιο ευρέως χρησιμοποιούμενη και δεν θέτει περιορισμούς στη χρήση του κώδικά σας. Πατήστε Enter για να συνεχίσετε.

5.6.4.4.9 Τύπος project

Επιλέξτε τον τύπο του project που θέλετε να δημιουργήσετε.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0) 
✔ Your project license (MIT) 
Generating tsconfig.json...
? What type of project do you want to create? (Use arrow keys)
❯ blog 
  docs

• Το μήνυμα ? What type of project do you want to create? σας ρωτά αν θέλετε να δημιουργήσετε ένα project τύπου blog ή τεκμηρίωσης (docs).

  • blog: Επιλέξτε αυτή την επιλογή για να δημιουργήσετε έναν ιστότοπο με χαρακτηριστικά blog, όπως λίστα με άρθρα, ετικέτες, κατηγορίες και σελιδοποίηση.
  • docs: Επιλέξτε αυτή την επιλογή για να δημιουργήσετε έναν ιστότοπο τεκμηρίωσης, ο οποίος εστιάζει κυρίως στη δομημένη οργάνωση σελίδων και κεφαλαίων (όπως ένα εγχειρίδιο).

• Για την πτυχιακή σας εργασία, επιλέξτε blog, καθώς προσφέρει μεγαλύτερη ευελιξία για την οργάνωση του περιεχομένου σας σε άρθρα. Πατήστε [ Enter ] για να επιβεβαιώσετε.

5.6.4.4.10 Πολύγλωσσο project

Επιλέξτε αν το project σας χρειάζεται υποστήριξη για πολλαπλές γλώσσες.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0) 
✔ Your project license (MIT) 
Generating tsconfig.json...
✔ What type of project do you want to create?  blog 
? Does the project need multiple languages? (y/N) _

• Το μήνυμα ? Does the project need multiple languages? σας ρωτά αν θέλετε να ενεργοποιήσετε την πολύγλωσση λειτουργία (i18n) στο project σας.
  • y (yes): Επιλέξτε y αν σκοπεύετε να μεταφράσετε το περιεχόμενό σας σε περισσότερες από μία γλώσσες. Αυτό θα προσθέσει αυτόματα τις απαραίτητες ρυθμίσεις στο αρχείο config.ts, δημιουργώντας ξεχωριστούς καταλόγους για κάθε γλώσσα.
  • N (no): Επιλέξτε N αν το περιεχόμενό σας θα είναι μόνο σε μία γλώσσα. Αυτή είναι η προεπιλεγμένη επιλογή και είναι κατάλληλη για την πτυχιακή σας εργασία.

Για τους σκοπούς της πτυχιακής, επιλέξτε N και πατήστε [ Enter ] για να συνεχίσετε, καθώς το περιεχόμενο θα είναι στα ελληνικά.

5.6.4.4.11 Git Repository

Επιλέξτε αν θέλετε να ξεκινήσετε ένα Git repository για το project σας.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0) 
✔ Your project license (MIT) 
Generating tsconfig.json...
✔ What type of project do you want to create?  blog 
✔ Does the project need multiple languages? No 
Generating Template...
? Initialize a git repository? (Y/n) _

• Το μήνυμα ? Initialize a git repository? σας ρωτά αν θέλετε το εργαλείο εγκατάστασης να δημιουργήσει έναν κρυφό φάκελο .git για την παρακολούθηση των αλλαγών.

  • Y (yes): Επιλέξτε Y αν σκοπεύετε να χρησιμοποιήσετε το Git για τον έλεγχο των εκδόσεων του κώδικά σας, κάτι που συνιστάται ανεπιφύλακτα. Η επιλογή αυτή θα εκτελέσει αυτόματα την εντολή git init.
  • n (no): Επιλέξτε n αν δεν θέλετε να χρησιμοποιήσετε το Git σε αυτό το στάδιο.

• Προτεινόμενη επιλογή: Για την πλειοψηφία των περιπτώσεων, επιλέξτε Y και πατήστε Enter για να συνεχίσετε.

5.6.4.4.12 GitHub Workflow

Επιλέξτε αν θέλετε να αυτοματοποιήσετε τη διαδικασία δημοσίευσης του ιστότοπου σας στο GitHub Pages.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0) 
✔ Your project license (MIT) 
Generating tsconfig.json...
✔ What type of project do you want to create?  blog 
✔ Does the project need multiple languages? No 
✔ Initialize a git repository? Yes 
? Do you need a GitHub workflow to deploy docs on GitHub pages? (Y/n) _

• Το μήνυμα ? Do you need a GitHub workflow to deploy docs on GitHub pages? σας ρωτά αν θέλετε να δημιουργηθεί ένα αρχείο GitHub Actions workflow.

  • Y (ναι): Επιλέξτε Y αν σκοπεύετε να χρησιμοποιήσετε τις GitHub Pages για να φιλοξενήσετε τον ιστότοπό σας. Αυτή η επιλογή θα δημιουργήσει αυτόματα ένα script που θα ανανεώνει το site σας κάθε φορά που ανεβάζετε αλλαγές στο GitHub.
  • n (όχι): Επιλέξτε n αν δεν σκοπεύετε να χρησιμοποιήσετε τις GitHub Pages για τη φιλοξενία του site σας. Αυτή η επιλογή θα παραλείψει τη δημιουργία του workflow.

• Για την πτυχιακή σας εργασία, επιλέξτε n, καθώς η φιλοξενία θα γίνει σε δικό σας server. Πατήστε Enter για να συνεχίσετε.

5.6.4.4.13 'Εναρξη εγκατάστασης

Σε αυτό το βήμα, το εργαλείο εγκατάστασης κατεβάζει και εγκαθιστά όλα τα απαραίτητα πακέτα (γνωστά ως "εξαρτήσεις") για τη λειτουργία του VuePress. Η διαδικασία αυτή μπορεί να διαρκέσει μερικά λεπτά, ανάλογα με την ταχύτητα της σύνδεσής σας στο διαδίκτυο και την απόδοση του υπολογιστή σας.

Μην ανησυχήσετε αν η διαδικασία φαίνεται να έχει κολλήσει. Λόγω τεχνικών περιορισμών, δεν εμφανίζεται μια κλασική μπάρα προόδου. Ο περιστρεφόμενος δείκτης (spinner) που βλέπετε υποδηλώνει ότι η εγκατάσταση βρίσκεται σε εξέλιξη στο παρασκήνιο. Παραμείνετε υπομονετικοί μέχρι να ολοκληρωθεί η διαδικασία, κάτι που θα επιβεβαιωθεί με την εμφάνιση του επόμενου μηνύματος στο τερματικό σας.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0) 
✔ Your project license (MIT) 
Generating tsconfig.json...
✔ What type of project do you want to create?  blog 
✔ Does the project need multiple languages? No 
✔ Initialize a git repository? Yes 
✔ Do you need a GitHub workflow to deploy docs on GitHub pages? No 
Installing Deps...
This may take a few minutes, please be patient.
We can not correctly output progress bar from child process, so the process may look stuck.
⠋
added 471 packages, and audited 472 packages in 2m

124 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successful Generated!
? Would you like to preview template now? (y/N) _

5.6.4.4.14 Ολοκλήρωση

Μετά την εγκατάσταση των πακέτων, το script ολοκληρώνει τις τελευταίες ρυθμίσεις του project.

digilady@CT-101-DEVSRV-UBI2404:~/Vuepress/MyThesis$ npm init vuepress-theme-hope@latest -D .
Need to install the following packages:
create-vuepress-theme-hope@2.0.0-rc.94
Ok to proceed? (y)  y
> npx
> create-vuepress-theme-hope .
✔ Select a language to display / 选择显示语言 English
✔ Choose package manager npm
✔ Which bundler do you want to use? vite
Generating package.json..
✔ Your project name mythesis-digilady-uth2025
✔ Your project description Σύστημα διαχείρισης τεκμηρίωσης για την οργάνωση και δημοσίευση περιεχομένου πτυχιακής εργασίας. Βασίζεται σε τεχνολογίες στατικών γεννητριών ιστοσελίδων, VuePress, Apache και Linux containers, προσφέροντας λειτουργίες όπως εκτύπωση, αυτόματα backups και απομακρυσμένη συνεργασία.
✔ Your project version (2.0.0) 
✔ Your project license (MIT) 
Generating tsconfig.json...
✔ What type of project do you want to create?  blog 
✔ Does the project need multiple languages? No 
✔ Initialize a git repository? Yes 
✔ Do you need a GitHub workflow to deploy docs on GitHub pages? No 
Installing Deps...
This may take a few minutes, please be patient.
We can not correctly output progress bar from child process, so the process may look stuck.
⠋
added 471 packages, and audited 472 packages in 2m

124 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successful Generated!
✔ Would you like to preview template now? Yes 
Staring dev server...
After the dev server starts running, please visit the given server link ('localhost:8080' by default)

> vuepress-theme-hope-template@2.0.0 docs:dev
> vuepress-vite dev src

✔ Initializing and preparing data - done in 820ms

  vite v7.0.6 dev server running at:

  ➜  Local:   http://localhost:8080/
  ➜  Network: http://192.168.1.146:8080/

• Successful Generated!: Αυτό το μήνυμα επιβεβαιώνει ότι ο κώδικας του project, τα αρχεία ρυθμίσεων και η βασική δομή έχουν δημιουργηθεί με επιτυχία.
• Would you like to preview template now? Yes: Με αυτή την επιλογή, δίνετε την εντολή να ξεκινήσει αμέσως ο development server. Αυτό σας επιτρέπει να δείτε το site σας να τρέχει τοπικά, χωρίς να χρειάζεται να εκτελέσετε κάποια άλλη εντολή.

Τα τελευταία μηνύματα στο τερματικό σας επιβεβαιώνουν ότι ο server ξεκίνησε με επιτυχία και σας δίνουν τις διευθύνσεις για να τον επισκεφτείτε.

• http://localhost:8080/: Αυτή είναι η τοπική διεύθυνση του server. Χρησιμοποιήστε την αν θέλετε να δείτε το site σας από τον ίδιο υπολογιστή.
• http://192.168.1.146:8080/: Αυτή είναι η διεύθυνση του server στο τοπικό σας δίκτυο (LAN). Μπορείτε να τη χρησιμοποιήσετε για να επισκεφτείτε το site από οποιαδήποτε άλλη συσκευή που είναι συνδεδεμένη στο ίδιο δίκτυο (π.χ., το laptop ή το smartphone σας).

Caution

Σε περίπτωση που οι εμφνιζόμενες σελίδες του οδηγού δεν φορτώνουν, πρέπει να ελέγξετε το τοίχος προστασίας (ufw) του συστήματος.

sudo ufw status numbered
sudo ufw allow 80/tcp && sudo ufw allow 8080/tcp
sudo ufw reload
sudo ufw status verbose
cd /home/labrat/Vuepress/MyThesis && npm run docs:clean-dev

5.6.5 Επιτυχής Έναρξη του Project

Με την ολοκλήρωση της αυτοματοποιημένης εκτέλεσης του script npm init vuepress-theme-hope@latest -D ., το περιβάλλον VuePress έχει αρχικοποιηθεί με επιτυχία στο σύστημα Linux. Η διαδικασία αυτή δεν εξασφάλισε μόνο την εγκατάσταση όλων των απαραίτητων εξαρτήσεων (dependencies) και τη δημιουργία της βασικής δομής του project, αλλά και την άμεση εκκίνηση του development server.

Η τελική έξοδος του τερματικού, με τις ενδείξεις Successful Generated! και vite dev server running, επιβεβαιώνει τη λειτουργική ετοιμότητα της πλατφόρμας. Το VuePress είναι πλέον προσβάσιμο τόσο μέσω της τοπικής διεύθυνσης (http://localhost:8080/) όσο και μέσω του τοπικού δικτύου (http://192.168.1.146:8080/), παρέχοντας ένα πλήρως λειτουργικό περιβάλλον για την ανάπτυξη και τη συγγραφή.

Συνεπώς, το έργο βρίσκεται σε πλήρη ετοιμότητα για να φιλοξενήσει το περιεχόμενο της πτυχιακής σας εργασίας.

Βιβλιογραφία

1. NVM - Node Version Manager: https://github.com/nvm-sh/nvm
2. Node.js - Επίσημη Τεκμηρίωση: https://nodejs.org/en/docs