Ξεκινώντας με το Hugo: Πώς να δημιουργήσετε έναν απλό ιστότοπο

Το Hugo είναι ένα Static Site Generator που σας επιτρέπει να δημιουργήσετε έναν ιστότοπο με ελάχιστη έως καθόλου εμπειρία κωδικοποίησης. Μπορείτε να χρησιμοποιήσετε προκατασκευασμένα θέματα ως βάση για το σχεδιασμό του ιστότοπού σας. Αυτό σας επιτρέπει να εστιάσετε περισσότερο στη συμπλήρωση του ιστότοπου με το περιεχόμενό σας.

Επειδή το Hugo χρησιμοποιείται κυρίως για στατικούς ιστότοπους, είναι ιδανικό για τη δημιουργία ιστολογίων, χαρτοφυλακίων ή τοποθεσιών τεκμηρίωσης.

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

Πώς να εγκαταστήσετε το Hugo

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

Μακ

Μπορείτε να εγκαταστήσετε το Hugo χρησιμοποιώντας το Homebrew.

1. Ανοίξτε το τερματικό macOS.
2. Εγκαταστήστε τον διαχειριστή πακέτων Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Εγκαταστήστε το Hugo.

   ετοιμάζω εγκαθιστώ Ούγκω

Windows

Θα χρειαστείτε έναν αντίστοιχο διαχειριστή πακέτων για Windows. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το Διαχειριστής πακέτων Scoop.

1. Ανοίξτε το Windows PowerShell, το οποίο θα πρέπει να είναι ήδη μέρος του λειτουργικού σας συστήματος Windows.
2. Εάν εγκαθιστάτε το Scoop για πρώτη φορά, ίσως χρειαστεί να ορίσετε την Πολιτική εκτέλεσης.

   Σειρά- ExecutionPolicy RemoteSigned -πεδίο εφαρμογής Τρέχων χρήστης

3. Εγκαταστήστε το Scoop:

   iex (νέος-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Εγκαταστήστε το Hugo:

   κουτάλα εγκαθιστώ Ούγκω

Πώς να δημιουργήσετε ένα έργο Hugo

Για να δημιουργήσετε ένα νέο έργο Hugo, θα χρειαστεί να χρησιμοποιήσετε το ενσωματωμένο hugo νέο site εντολή.

1. Ανοίξτε το τερματικό σας ή τη γραμμή εντολών. Μεταβείτε στο φάκελο όπου θέλετε να δημιουργήσετε το έργο σας.
2. Εκτελέστε το hugo νέο site εντολή:

   Ούγκω νέος ιστοσελίδα νέος-hugo-ιστοσελίδα

3. Μεταβείτε στη θέση του έργου Hugo στον εξερευνητή αρχείων σας.
4. Ανοίξτε το φάκελο του έργου. Θα δείτε ότι ο νέος σας ιστότοπος Hugo έχει τη δομή αρχείων και φακέλων που απαιτούνται για τη λειτουργία του ιστότοπού σας.

Πώς να προσθέσετε ένα θέμα

Προς το παρόν, το έργο σας περιέχει μόνο τους κύριους βασικούς φακέλους για το έργο Hugo. Η τοπική εκτέλεση του ιστότοπού σας σε αυτό το σημείο θα εμφανίζει μόνο μια κενή οθόνη. Εφόσον δεν έχετε ρυθμίσει ακόμη σχέδια HTML, CSS ή διεπαφής χρήστη για τον ιστότοπό σας, θα πρέπει να τα προσθέσετε.

Ο Hugo παρέχει ήδη μια ενσωματωμένη βιβλιοθήκη Θέματα Hugo που δημιουργήθηκε από προγραμματιστές.

1. Επιλέξτε ένα θέμα που σας αρέσει. Κάθε θέμα μπορεί να έχει ελαφρώς διαφορετικές οδηγίες ρύθμισης, που εμφανίζονται στην αντίστοιχη σελίδα προεπισκόπησης. Αυτό το σεμινάριο θα χρησιμοποιήσει το Θέμα παραμυθιού ως παράδειγμα.
2. Πλοηγηθείτε στον ριζικό φάκελο του έργου σας σε ένα τερματικό ή μια γραμμή εντολών.

   CD νέος-hugo-ιστοσελίδα

3. Εκτελέστε την εντολή για να προσθέσετε το θέμα Tale. Μπορείτε να προσθέσετε το θέμα ως υπομονάδα, η οποία θα δημιουργήσει έναν νέο φάκελο που ονομάζεται ιστορία μεσα στην θέμα ντοσιέ.

   git init
   git υπομονάδα προσθήκη https://github.com/EmielH/tale-hugo.git themes/tale

   Εναλλακτικά, μπορείτε να κλωνοποιήσετε το αποθετήριο παραμυθιού GitHub στον φάκελο θεμάτων του έργου σας.

   git κλώνος https://github.com/EmielH/tale-hugo.git themes/tale

4. Πλοηγηθείτε στον φάκελο του έργου σας. Κάνε κλικ στο θέματα φάκελο για να το ανοίξετε. Ανεξάρτητα από την εντολή που χρησιμοποιήσατε, θα υπάρξει μια νέα ιστορία φάκελο που αποθηκεύει το θέμα που λήφθηκε πρόσφατα.
5. Στο config.toml αρχείο, προσθέστε το θέμα παραμυθιού ως μέρος της διαμόρφωσης. Αυτό θα πει στον Hugo να χρησιμοποιήσει τα HTML, CSS και άλλα στυλ που περιλαμβάνει το θέμα Tale.

   θέμα = "ιστορία"

Πώς να προσθέσετε σελίδες στον ιστότοπό σας

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

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

Για να προσθέσετε μια νέα υποσελίδα ή μια ανάρτηση στον ιστότοπό σας, θα χρειαστεί να προσθέσετε ένα νέο αρχείο Markdown στο περιεχόμενο ντοσιέ. Κάθε ανάρτηση ή σελίδα θα έχει το δικό της αρχείο Markdown που σχετίζεται με αυτήν.

1. Ανοιξε το περιεχόμενο φάκελο μέσα στο έργο Hugo. Δημιουργήστε ένα νέο αρχείο Markdown που ονομάζεται myFirstPost.md.
2. Ανοίξτε το αρχείο σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου, όπως το Notepad++ ή το Visual Studio Code.
3. Στο επάνω μέρος του αρχείου, προσθέστε ορισμένα μεταδεδομένα. Αυτό θα περιλαμβάνει σημαντικές πληροφορίες σχετικά με την ανάρτηση. Το θέμα που χρησιμοποιείτε θα μορφοποιήσει αυτές τις πληροφορίες με συγκεκριμένο τρόπο στη σελίδα.

   
   συγγραφέας: "Το όνομα σου"
   τίτλος: "Η πρώτη μου ανάρτηση"
   ημερομηνία: "2022-05-17"
   

4. Αφού προσθέσετε τα μεταδεδομένα, μπορείτε να αρχίσετε να προσθέτετε το περιεχόμενό σας χρησιμοποιώντας το Markdown.

   Αυτό είναι η πρώτη μου ανάρτηση στον ιστότοπο Hugo μου!
   Χρησιμοποιείται το θέμα Hugo ΓιαΑυτό ο ιστότοπος ονομάζεται Tale.
   Το είναι πολύ απλό στην εγκατάσταση και Διαμορφώστε.
   # Υπότιτλος
   Αυτό είναι κάποιο περιεχόμενο.
   # Άλλος υπότιτλος
   Αυτό είναι περισσότερο περιεχόμενο.

5. Μη διστάσετε να προσθέσετε περισσότερα αρχεία σήμανσης για να προσθέσετε περισσότερες σελίδες στον ιστότοπό σας.

Πώς να εκτελέσετε και να δοκιμάσετε τοπικά τον ιστότοπό σας Hugo

Για να εκτελέσετε τον ιστότοπό σας, χρησιμοποιήστε το σέρβις hugo εντολή.

1. Ανοίξτε ένα τερματικό ή μια γραμμή εντολών.
2. Μεταβείτε στον ριζικό φάκελο του έργου Hugo.
3. Εκτελέστε το σέρβις hugo εντολή:

   σέρβις hugo

4. Περιμένετε μέχρι ο ιστότοπος να ολοκληρώσει τη διαδικασία εκκίνησης. Μόλις ολοκληρωθεί, το τερματικό θα εκτυπώσει ένα μήνυμα λέγοντας από ποια τοπική διεύθυνση μπορείτε να αποκτήσετε πρόσβαση στον ιστότοπο. Συνήθως, αυτό είναι http://localhost: 1313/.
5. Ανοίξτε ένα πρόγραμμα περιήγησης και μπείτε http://localhost: 1313/, ή όποια διεύθυνση σας έδωσε το τερματικό. Θα δείτε την κύρια σελίδα του ιστότοπού σας Hugo.
6. Στη σελίδα θα υπάρχει μια λίστα με αναρτήσεις για κάθε αρχείο σήμανσης που έχετε. Σε αυτήν την περίπτωση, υπάρχουν δύο αρχεία σήμανσης με περιεχόμενο. Αυτό περιλαμβάνει τη σελίδα myFirstPost.md που δημιουργήσατε νωρίτερα. Περιλαμβάνει επίσης μια νέα ανάρτηση που ονομάζεται bananaCakeRecipe.md.
7. Κάντε κλικ στον σύνδεσμο επικεφαλίδας σε μία από τις προεπισκοπήσεις. Θα σας μεταφέρει στην πλήρη σελίδα για τη συγκεκριμένη ανάρτηση.

Φιλοξενία του ιστότοπού σας Hugo

Η δημιουργία και λειτουργία ενός στατικού ιστότοπου είναι απλή και γρήγορη με το Hugo. Μπορείτε να χρησιμοποιήσετε και να διαμορφώσετε προκατασκευασμένα θέματα και να εκτελέσετε τον ιστότοπό σας Hugo τοπικά για δοκιμή. Μπορείτε επίσης να προσθέσετε σελίδες περιεχομένου στον ιστότοπό σας χρησιμοποιώντας το Markdown.

Μόλις δημιουργήσετε τον ιστότοπό σας Hugo, μπορείτε να αρχίσετε να μαθαίνετε περισσότερα σχετικά με τον τρόπο φιλοξενίας του. Υπάρχουν πολλές δωρεάν επιλογές φιλοξενίας ιστοτόπων από τις οποίες μπορείτε να διαλέξετε, όπως το Dropbox, το Google Drive ή το OneDrive.

Πώς να αποκτήσετε δωρεάν φιλοξενία ιστότοπου με το Dropbox, το Google Drive ή το OneDrive

Διαβάστε Επόμενο