Το προφίλ μας στο Google Plus
3

Δημιουργία static site με το Hugo

Σε ένα blog ή στο site ενός πρότζεκτ, αυτό που κυρίως ενδιαφέρει και στο οποίο δίνεται τεράστια έμφαση είναι το περιεχόμενο. Στην πλειονότητα των περιπτώσεων είναι στατικό, αφού δεν υπάρχει βάση δεδομένων για την άντληση στοιχείων και τη δυναμική διαμόρφωσή του μέσω κάποιου web application.

Για τη δημιουργία δικτυακών τόπων με στατικό περιεχόμενο επιστρατεύονται οι σύγχρονοι static site generators, όπως το Jekyll, το Pelican και το Hugo, με το οποίο κι ασχολούμαστε στο παρόν άρθρο. Να πούμε από τώρα ότι ο εν λόγω generator είναι γραμμένος στη γλώσσα Go, ξεχωρίζει για το ταχύτατο rendering των σελίδων, ενώ διατίθεται και για όλα τα γνωστά λειτουργικά συστήματα. Γενικά, πάντως, αναλόγως του site που σκοπεύετε ν’ αναπτύξετε είναι πιθανό να μη χρειαζόσαστε την πολυπλοκότητα ενός Content Management System, όπως, π.χ., είναι το WordPress. Προτείνουμε τότε να εξετάσετε σοβαρά την περίπτωση του static site. Ένα έξτρα όφελος που θα έχετε είναι και η αυξημένη ασφάλεια, αφού το attack surface ενός τέτοιου site είναι πάντοτε πολύ μικρότερο σε σχέση με εκείνο κάποιου site που βασίζεται σε CMS.

Εστιάζοντας στο Hugo, αρχικά το εγκαθιστούμε και το ρυθμίζουμε. Από εκεί και μετά, ένα οποιοδήποτε άρθρο για το site μας το γράφουμε στη γλώσσα υποσημείωσης Markdown. Με τη βοήθεια του μικρού web server που διαθέτει το Hugo, βλέπουμε τοπικά (και μάλιστα ζωντανά) πώς ακριβώς θα φαίνεται το άρθρο στους επισκέπτες του δικτυακού μας τόπου. Αφού ικανοποιηθούμε με το αποτέλεσμα της δουλειάς μας, απλά ανεβάζουμε το άρθρο στον web server που ήδη έχουμε. Όλα αυτά τα παρουσιάζουμε στη συνέχεια, αναλυτικά και βήμα προς βήμα.

Λήψη κι εγκατάσταση
Το Hugo είναι δυνατόν να το μεταγλωττίσουμε από το source code, αρκεί ο compiler της Go να είναι διαθέσιμος για το λειτουργικό σύστημα της προτίμησής μας. Από την άλλη, pre-compiled binaries του Hugo διατίθενται για Linux, Mac OS X, FreeBSD και Windows. Καταλαβαίνετε λοιπόν ότι είναι μάλλον απίθανο να μπλέξετε με μεταγλωττίσεις — εμείς ούτε καν το σκεφτήκαμε. Την πλέον πρόσφατη έκδοση του Hugo, μεταγλωττισμένη για την αγαπημένη μας πλατφόρμα, την κατεβάζουμε από τη σελίδα με τα Hugo releases. Το binary που παίρνουμε είναι αυτόνομο και δεν χρειάζεται να βρίσκεται εντός συγκεκριμένου καταλόγου. Αν πάντως έχουμε τα απαραίτητα δικαιώματα, τότε για λόγους ευκολίας προτείνεται να το μεταφέρουμε σε έναν από τους καταλόγους του PATH. Εναλλακτικά, αντί για το χειροκίνητο downloading μπορούμε να εγκαταστήσουμε το Hugo με τη βοήθεια ενός συστήματος διαχείρισης πακέτων/εφαρμογών. Αναλυτικότερα:

  • Στο Mac OS X έχουμε την επιλογή του Homebrew και η εγκατάσταση επιτυγχάνεται από ένα τερματικό, πληκτρολογώντας brew install hugo.
  • Για τα Windows υπάρχει ο package manager ονόματι Chocolatey και το Hugo το εγκαθιστούμε γράφοντας choco install hugo -confirm.
  • Στο δε Linux το Hugo ίσως περιλαμβάνεται στα αποθετήρια της διανομής μας. Αν όμως υποστηρίζονται snaps τότε προτείνεται ν’ ακολουθήσουμε τη συγκεκριμένη οδό (snap install hugo), ώστε να έχουμε την πλέον πρόσφατη έκδοση του Hugo.

Μετά την εγκατάσταση, από ένα τερματικό ελέγχουμε την έκδοση που διαθέτουμε πληκτρολογώντας hugo version.

Η έκδοση 0.31.1 του Hugo ήταν η πλέον πρόσφατη, τη στιγμή που γραφόταν το παρόν.

Σημείωση. Αν μας ενδιαφέρει το syntax highlighting τμημάτων κώδικα στις δημοσιεύσεις μας, τότε χρειαζόμαστε και τη μηχανή Pygments. Η εγκατάστασή της γίνεται με τη βοήθεια του εργαλείου pip της Python (π.χ., pip install pygments).

Εγκατάσταση του Pygments σε ένα σύστημα με Mac OS X, όπου η χρησιμοποιούμενη έκδοση της Python είναι η 2.7.10.

Το πρώτο μας static site με το Hugo
Ανοίγουμε ένα τερματικό και πληκτρολογούμε κάτι σαν hugo new site ~/colder-dot-xyz. Ακαριαία δημιουργείται ένας νέος κατάλογος, εντός του home directory του χρήστη μας. Το όνομά του είναι colder-dot-xyz και περιττό να πούμε ότι εσείς μπορείτε να ονομάσετε τον δικό σας όπως θέλετε. Ανεξάρτητα απ’ αυτό, ρίξτε τώρα μια ματιά στα περιεχόμενά του. Θα δείτε ότι περιλαμβάνει μια δομή αρχείων και καταλόγων, η οποία χρησιμεύει για το κτίσιμο του site.

Ένα νέο Hugo static site αρχικοποιείται τοπικά με μια απλή εντολή, η οποία δημιουργεί τον κατάλογο εργασίας του site και μια σειρά από αρχεία και υποκαταλόγους για το κτίσιμό του.

Το site μας χρειάζεται κι ένα theme. Τα themes του Hugo καθορίζουν το πώς φαίνεται ένα Hugo site στους επισκέπτες του, βρίσκονται δε όλα οργανωμένα στη σελίδα Hugo Themes. Είναι εύκολο να εντοπίσουμε ένα ή περισσότερα themes που να ταιριάζουν με ό,τι έχουμε κατά νου για το site μας, αφού εκτός από την ποικιλία παρέχεται και δυνατότητα preview (βλ. κουμπί Demo). Υπόψιν επίσης ότι μπορούμε, αν το επιθυμούμε, να τροποποιούμε τα themes. Για τις ανάγκες της παρουσίασής μας ας εστιάσουμε την προσοχή μας στο μινιμαλιστικό και σκοτεινό (κυριολεκτικά) theme ονόματι After Dark. Μεταβαίνουμε στον κατάλογο themes του site μας (π.χ., cd ~/colder-dot-xyz/themes) και κλωνοποιούμε το theme από τη σελίδα του στο GitHub:

mbpr15:themes cvar$ git clone https://github.com/comfusion/after-dark.git

Λήψη του λιτού, απέριττου και γοητευτικά σκοτεινού Hugo theme ονόματι After Dark, απευθείας από το GitHub.

Είμαστε σχεδόν έτοιμοι για την προσθήκη περιεχομένου στο ολοκαίνουργιο static site μας.

Βασικές ρυθμίσεις
Πριν αφήσουμε τη συγγραφική μας δημιουργικότητα ελεύθερη, οφείλουμε να τακτοποιήσουμε κάποιες απαραίτητες για το site ρυθμίσεις. Με τον text editor της προτίμησής μας ανοίγουμε το αρχείο config.toml, φυσικά εντός του καταλόγου ~/colder-dot-xyz. Περιλαμβάνει τρεις μόλις γραμμές, τις οποίες εμείς τροποποιήσαμε ως ακολούθως:

baseURL = "https://colder.xyz/"
languageCode = "el-gr"
title = "Colder is Better"

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

theme = "after-dark"
pygmentsStyle = "native"

Στη μεταβλητή theme βάλτε το όνομα του καταλόγου που βρίσκεται εντός του ~/colder-dot-xyz/themes κι αντιστοιχεί στο theme που θέλετε για το static site σας. Όσο για τις τιμές που δέχεται η μεταβλητή pygmentsStyle, δείτε τη σελίδα με το Pygments online demo.

Υπάρχουν κι άλλες ενδιαφέρουσες ρυθμίσεις που χρειάζεται να γίνουν μέσω του αρχείου config.toml — και σε λίγο θα φροντίσουμε σχετικά. Προς το παρόν όμως είναι καλή ιδέα να δημιουργήσουμε το πρώτο μας post και να δούμε, τοπικά, πώς θα φαίνεται στους επισκέπτες του site μας.

Δημιουργία σελίδας About
Το περιεχόμενο που παράγουμε για το Hugo εξ ορισμού γράφεται σε Markdown. Τα σχετικά αρχεία, με κατάληξη .md, αποθηκεύονται είτε μέσα στον κατάλογο content είτε μέσα σε κάποιον υποκατάλογό του. Κάθε αρχείο του είδους συμβάλλει στη δημιουργία μιας νέας δημοσίευσης ή αλλιώς άρθρου. Προσέξτε τώρα: Μια οποιαδήποτε νέα δημοσίευση, η οποία αντιστοιχεί σε αρχείο .md κάτω από τον κατάλογο content, δεν τη φτιάχνουμε απευθείας μέσω ενός text editor. Αντίθετα, βεβαιωνόμαστε ότι είμαστε εντός του καταλόγου του site (π.χ., cd ~/colder-dot-xyz) και στο τερματικό μας πληκτρολογούμε κάτι σαν hugo new post-name.md. Κατ’ αυτόν τον τρόπο, στην αρχή του post-name.md περιλαμβάνονται editable metadata για την υπό προετοιμασία δημοσίευση. Όλες οι σχετικές πληροφορίες αποτελούν μια ειδική ενότητα που στον κόσμο του Hugo ονομάζεται front matter. Αλλά ας τα δούμε όλα αυτά μέσα από ένα πολύ συγκεκριμένο παράδειγμα: τη δημιουργία μιας σελίδας About, η οποία, θα συμφωνήσετε κι εσείς, είναι μάλλον απαραίτητη για κάθε site που σέβεται τον εαυτό του.

Πού πρέπει να βρίσκεται το αντίστοιχο αρχείο .md; Μπορούμε να το ονομάσουμε όπως θέλουμε; Οι απαντήσεις διαφέρουν από theme σε theme, όπως σωστά θα υποθέσατε. Για το After Dark, το αρχείο της σελίδας About πρέπει να ονομάζεται about.md και να είναι αποθηκευμένο στη ρίζα του καταλόγου content. Πληκτρολογούμε, λοιπόν…

mbpr15:colder-dot-xyz cvar$ hugo new about.md

…και το αρχείο about.md ακαριαία δημιουργείται εντός του content. Ανοίγοντάς το με τον text editor της προτίμησής μας, πάνω πάνω βλέπουμε το front matter:

---
title: "About"
date: 2017-12-21T07:06:46+01:00
draft: true
---

Για το παράδειγμά μας δεν έχει και πολύ νόημα να αλλάξουμε τις τιμές των μεταβλητών αριστερά του χαρακτήρα :, ενδεχομένως ούτε και να προσθέσουμε νέες μεταβλητές. Έχετε πάντως υπόψη ότι το προκαθορισμένο περιεχόμενο του front matter εξαρτάται από το εκάστοτε theme. Σε κάθε περίπτωση, αξίζει να έχουμε από τώρα μιαν εικόνα για τις μεταβλητές που είναι πιθανό να δούμε ή/και να προσθέσουμε στο front matter ενός νέου post.

  • date: Ημερομηνία και ώρα δημιουργίας του post. Αν το επιθυμούμε αλλάζουμε τόσο την ημερομηνία, όσο και την ώρα.
  • description: Μια περιγραφή του περιεχομένου. Παραδείγματα: “Περί αυτού του blog και γιατί θα θέλατε να νοιαστείτε”, “Πώς θα φτιάξετε ένα οικιακό Ceph cluster χωρίς να ξοδέψετε μια περιουσία” κ.ο.κ.
  • draft: Αν η τιμή αυτής της μεταβλητής είναι true, τότε δίνοντας την εντολή hugo, για το τοπικό κτίσιμο του site, το rendering του συγκεκριμένου post παρακάμπτεται. Αν όμως στο hugo δώσουμε την οδηγία --buildDrafts, τότε το rendering της σελίδας δεν παρακάμπτεται.
  • slug: Καθορισμός προσαρμοσμένου URL για τη σελίδα (του post).
  • title: Ένας τίτλος για τη δημοσίευση.
  • tags: Ένα ή περισσότερα tags, μέσα σε αγκύλες, για το post. Κάθε tag περικλείεται από διπλά εισαγωγικά και μεταξύ τους χωρίζονται με κόμματα. Παράδειγμα: tags: [ "about", "cold", "winter" ].
  • categories: Μία ή περισσότερες κατηγορίες, μέσα σε αγκύλες, στις οποίες θέλουμε να ανήκει το post. Κάθε κατηγορία περικλείεται από διπλά εισαγωγικά και μεταξύ τους χωρίζονται με κόμματα.

Περισσότερα για τις μεταβλητές του front matter μπορείτε να διαβάσετε στο επίσημο documentation.

Και τώρα που έχουμε μια καλή ιδέα για το front matter και τη χρησιμότητά του, ίσως θελήσουμε να προσθέσουμε μία-δύο μεταβλητές κι από κάτω να γράψουμε το περιεχόμενό μας — σε Markdown, υπενθυμίζουμε. Αν επιθυμούμε να βλέπουμε ζωντανά πώς θα δείχνει η σελίδα στο site καθώς γράφουμε, διορθώνουμε κι αποθηκεύουμε, τότε σε ένα τερματικό μεταβαίνουμε στον κατάλογο του site (π.χ., cd ~/colder-dot-xyz) και πληκτρολογούμε hugo server --buildDrafts --watch. Για την οδηγία --buildDrafts (σύντομη εκδοχή -D) μιλήσαμε ήδη, ενώ η λειτουργία της οδηγίας --watch (σύντομη εκδοχή -w) είναι, νομίζουμε, προφανής.

Ζωντανό (και ταχύτατο) rendering του Hugo site μας, τοπικά. Λόγω της οδηγίας --buildDrafts, τα posts που είναι υπό ανάπτυξη δεν εξαιρούνται από το rendering. Έτσι, σε συνδυασμό και με την οδηγία --watch, καθώς γράφουμε ένα post σε Markdown μπορούμε και βλέπουμε πώς ακριβώς θα φαίνεται στους επισκέπτες του site μας.

Το rendered site το βλέπουμε τοπικά ανοίγοντας έναν web browser και μεταβαίνοντας στη διεύθυνση http://127.0.0.1:1313. Για το theme που έχουμε επιλέξει, προκειμένου να εμφανίσουμε στον web browser τη σελίδα About οφείλουμε να επισκεφτούμε τη διεύθυνση http://127.0.0.1:1313/about. Δείτε το screenshot που ακολουθεί, διαβάστε και την αντίστοιχη περιγραφή.

Συγγραφή post σε Markdown (αριστερά) και ταυτόχρονη επισκόπηση της σελίδας (δεξιά), όπως θα τη βλέπουν οι επισκέπτες του Hugo static site μας.

Αφού ολοκληρώσουμε τη συγγραφή της σελίδας About, δεν χρειαζόμαστε άλλο το τοπικό rendering. Πηγαίνουμε στο τερματικό όπου το είχαμε ξεκινήσει (γράφοντας, π.χ., hugo server --buildDrafts --watch) κι απλά πατάμε το συνδυασμό πλήκτρων [CTRL+C]. Φυσικά, πριν ανεβάσουμε το περιεχόμενο στο site μας, καλό θα ήταν να ετοιμάσουμε κι ένα κάποιο περισσότερο ενδιαφέρον post. Επιπρόσθετα, χρειάζονται και μερικές επεμβάσεις στο theme.

Προσαρμογή theme
Από τη στιγμή που θα επιλέξουμε ένα theme για το Hugo static site μας, το πρώτο πράγμα που οφείλουμε να κάνουμε είναι να διαβάσουμε για το theme και συγκεκριμένα για το πώς το προσαρμόζουμε στις ανάγκες μας. Ψάχνοντας για το τι μπορούμε να κάνουμε με το After Dark, τροποποιήσαμε ελαφρώς το αρχείο config.toml ώστε μεταξύ άλλων να ορίσουμε ένα απλό και βολικό μενού για τον ευκολότερο εντοπισμό των άρθρων στο site. Δείτε:

baseURL = "https://colder.xyz/"
title = "Colder is Better"
description = "Seemingly Random Postings"
languageCode = "el-GR"

pygmentsStyle = "native"
theme = "after-dark"
canonifyurls = true
paginate = 5

enableRobotsTXT = true

SectionPagesMenu = "main"

[params]
    powered_by = false
    author = "Christos Varelas"
    show_menu = true

[menu]
    [[menu.main]]
        name = "Home"
        weight = 1
        identifier = "home"
        url = "/"
    [[menu.main]]
        name = "Posts"
        weight = 2
        identifier = "post"
        url = "/post/"
    [[menu.main]]
        name = "About"
        weight = 3
        identifier = "about"
        url = "/about"

Άσχετα αν θα χρησιμοποιήσετε κι εσείς το After Dark ή όχι, το ηθικό δίδαγμα εδώ είναι ότι τροποποιούμε την όψη και τη συμπεριφορά του theme επεμβαίνοντας στο αρχείο config.toml, εντός του καταλόγου του site. Υπάρχουν κι άλλοι τρόποι για την αλλαγή ενός theme, ξεφεύγουν όμως από το σκοπό του παρόντος άρθρου.

Δημιουργία post
Γνωρίζουμε, πλέον, ότι αρχικά πρέπει να πάμε στον κατάλογο του site μας (cd ~/colder-dot-xyz) κι αμέσως μετά να δημιουργήσουμε το αρχείο .md του νέου post, κάτω από τον κατάλογο content/post: απλά πληκτρολογούμε hugo new post/drivels-and-delusions.md. Για τις ανάγκες της παρουσίασής μας θα αναδημοσιεύσουμε στο static site το editorial από το deltaHacker 060.

Τα πρώτα απλά βήματα για τη δημιουργία ενός νέου post για το Hugo static site μας. Για τις ανάγκες της παρουσίασης αναδημοσιεύουμε το editorial του deltaHacker 060.

Ανοίγουμε το αρχείο content/post/drivels-and-delusions.md με κάποιον text editor και εξετάζουμε λίγο το front matter, το οποίο στην περίπτωσή μας έχει ως ακολούθως:

---
title: "Drivels and Delusions"
date: 2017-12-26T10:20:00+01:00
draft: true
---

Παρατηρήστε ότι ο τίτλος παράγεται αυτόματα, από το όνομα του αρχείου .md (οι παύλες αντικαθίστανται από κενά). Όπως έχουμε ήδη αναφέρει, το front matter μπορούμε να το τροποποιούμε ή/και να το επαυξάνουμε. Δείτε, για παράδειγμα, το front matter για το editorial που ετοιμαζόμαστε να δημοσιεύσουμε:

---
title: "Αερολογίες κι αυταπάτες"
date: 2017-12-26T10:20:00+01:00
draft: true
categories: [ "editorial" ]
tags: [ "νόημα", "πληροφορία", "αυταπάτη" ]
description: "Αναδημοσίευση του editorial για το τεύχος 060 του deltaHacker"
---

Νομίζουμε ότι αυτή η νεότερη εκδοχή είναι πολύ περισσότερο αντιπροσωπευτική του περιεχομένου που πρόκειται ν’ ακολουθήσει. Παρεμπιπτόντως, δεν υπάρχει λόγος να το καθυστερούμε άλλο: είναι ώρα να το προσθέσουμε, σε μορφή Markdown, κάτω από το front matter.

Ο Atom είναι ο αγαπημένος μας text editor για το περιβάλλον γραφικών.

Μεταφορά περιεχομένου στον web server
Αφού τελειώσουμε με τη συγγραφή του νέου post και είμαστε ικανοποιημένοι με το πώς θα δείχνει στους επισκέπτες του site μας, πριν εγκαταλείψουμε τον editor είναι καλή ιδέα να αλλάξουμε την τιμή της μεταβλητής draft από true σε false. Αμέσως μετά, σταματάμε αν χρειαστεί το live preview (στην κονσόλα που είχαμε δώσει κάτι σαν hugo server -D -w τώρα πατάμε [CTRL+C]) κι από τον κατάλογο του site δημιουργούμε όλο το περιεχόμενο του site πληκτρολογώντας, απλά, hugo. Προσοχή: Αν σε κάποια άρθρα έχουμε αφήσει τη μεταβλητή draft να ισούται με true και θέλουμε αυτά τα άρθρα να προετοιμαστούν για δημοσίευση στο site, τότε αντί για hugo δίνουμε hugo --buildDrafts ή, απλούστερα, hugo -D. Η εντολή hugo δημιουργεί το περιεχόμενο και το αποθηκεύει τοπικά, στον κατάλογο public. Ό,τι περιλαμβάνει ο συγκεκριμένος κατάλογος αρκεί να το στείλουμε στον (απομακρυσμένο) κατάλογο από τον οποίο ο web server μας σερβίρει περιεχόμενο. Ένα καλό εργαλείο για τη δουλειά αυτή είναι το rsync. Για παράδειγμα, ο δικός μας web server βρίσκεται στο μηχάνημα box.colder.xyz και το περιεχόμενο που σερβίρει το διαβάζει από τον κατάλογο /home/user-data/www/default. Εκεί έχουμε έναν χρήστη, τον sub0, με δικαιώματα εγγραφής εντός του καταλόγου default. Επίσης, στο απομακρυσμένο μηχάνημα τρέχει η υπηρεσία OpenSSH. Από τον τοπικό κατάλογο ~/colder-dot-xyz, λοιπόν, συγχρονίζουμε το περιεχόμενο γράφοντας rsync -av public/* sub0@box.colder.xyz:/home/user-data/www/default/. Στον κατάλογο public είναι πιθανό να βρίσκονται drafts από άρθρα που πρόκειται να δημοσιεύσουμε σε μελλοντικό χρόνο ή/και αρχεία από άλλα themes που έχουμε δοκιμάσει. Γενικά, μιλάμε για υλικό που δεν θέλουμε να καταλήγει στον web server μας. Αν υποψιαζόμαστε ότι τέτοια αρχεία πράγματι υπάρχουν στον public, τότε πριν τρέξουμε το hugo, για το κτίσιμο του περιεχομένου τοπικά, είναι καλή ιδέα να διαγράψουμε εντελώς τον κατάλογο public. Μετά θα δώσουμε hugo κι o κατάλογος public με το φρέσκο περιεχόμενο θα δημιουργηθεί εκ νέου κι ακαριαία (μην ξεχνάτε ότι η ταχύτητα είναι ένα από τα βασικά γνωρίσματα του Hugo). Τέλος, θα συγχρονίσουμε και το περιεχόμενο του public με το rsync (ή με όποιον άλλον τρόπο προτιμάμε, τέλος πάντων).

Σημείωση. Δουλεύετε σε περιβάλλον Mac OS κι έχετε tags ή κατηγορίες στα ελληνικά; Αφού ανεβάσετε το περιεχόμενο του public στον κατάλογο του απομακρυσμένου web server, θα διαπιστώσετε ότι κάποια URLs δεν θα δουλεύουν σωστά (π.χ., εκείνα που εμπεριέχουν ένα tag στα ελληνικά). Η λύση είναι να μη χρησιμοποιήσετε την προεγκατεστημένη έκδοση του rsync (σειρά 2.6.x) αλλά κάποια νεότερη (της σειράς 3.1.x). Ένας τρόπος για να έχετε στο Mac OS νεότερη έκδοση του rsync (και πολλών-πολλών άλλων, Unix-like tools), είναι μέσω του Homebrew. Με το νέο, λοιπόν, rsync, θα συγχρονίζετε το περιεχόμενο του public γράφοντας κάτι τέτοιο:

mbpr15:colder-dot-xyz cvar$ rsync -av --iconv=utf-8-mac,utf-8 \
> public/* sub0@box.colder.xyz:/home/user-data/www/default/

Favicon για το static site;
Με το After Dark, το theme που επιλέξαμε για το παρόν άρθρο, σε κάθε σελίδα έχουμε κι ένα απλό favicon σε μορφή SVG (είναι ένα μαύρο, κεφαλαίο δέλτα). Αν θελήσετε να το αλλάξετε, τότε ξεκινήστε φτιάχνοντας τον κατάλογο partials/head εντός του layouts (και πάντα μέσα στον τοπικό κατάλογο του site — εν προκειμένω στον ~/colder-dit-xyz):

mbpr15:colder-dot-xyz cvar$ mkdir -p layouts/partials/head

Τώρα, κάτω από τον κατάλογο head δημιουργήστε ένα νέο αρχείο με όνομα favicon.html και περιεχόμενο που θα μοιάζει με το ακόλουθο:

<link rel="icon" sizes="any" href="https://www.dropbox.com/.../fn.ico?dl=1">

Το δικό σας link προς το favicon θα είναι, φυσικά, διαφορετικό. Αυτό που εμείς κάναμε είναι να κατεβάσουμε ένα ωραίο favicon από το freefavicon και να το ανεβάσουμε στο Dropbox μας. Μετά δημιουργήσαμε ένα public link προς το αρχείο .ico του favicon στο Dropbox και, τέλος, το σχετικό URL το βάλαμε στο favicon.html.

Χαρείτε πάρα πολύ και χωρίς την παραμικρή συστολή το ολοκαίνουργιο static site σας, με το Hugo. Επιλέξτε ένα όμορφο theme, πειράξτε το λίγο κι από εκεί και πέρα επικεντρωθείτε στην παραγωγή περιεχομένου και μόνο.

3 Responses to “Δημιουργία static site με το Hugo”

  1. drpaneas | 27/12/2017 at 02:09

    Και μην ξεχνάτε το αυτόματο push-and-deploy. Αν βαριεστε να το ψαξετε, το προσφέρει ετοιμο και δωρεαν η netlify.com

  2. Vethrun | 28/12/2017 at 20:48

    Ωραίο post subZraw! Υποθέτω ότι θα ήταν δύσκολο (ή αδύνατο) να βάλεις κάποια φόρμα με static site;(π.χ. να μαζέψεις τη διεύθυνση e-mail των επισκεπτών)

Leave a Reply

You must be logged in to post a comment.

Σύνδεση

Αρχείο δημοσιεύσεων