Πώς να δημιουργήσετε έναν δωρεάν στατικό ιστότοπο με τις σελίδες GitHub σε 10 λεπτά

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

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

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

Πώς μπορείτε λοιπόν να δημιουργήσετε έναν στατικό ιστότοπο με το GitHub σε 10 λεπτά;

Θα συνεργαζόμαστε με δύο συγκεκριμένα εργαλεία: το GitHub Pages, το οποίο έχει σχεδιαστεί ειδικά για την εξυπηρέτηση στατικού περιεχομένου και μια γεννήτρια στατικού περιεχομένου που ονομάζεται Jekyll.

Το Jekyll είναι ένα στολίδι Ruby για τη δημιουργία στατικών ιστότοπων εύκολα, οπότε θα πρέπει να έχετε εγκαταστήσει τον Ruby στον υπολογιστή σας εάν θέλετε να χρησιμοποιήσετε το Jekyll. Εάν έχετε OSX, πιθανότατα έχετε ήδη μια έκδοση του Ruby (αν και ίσως χρειαστεί να την ενημερώσετε). Εάν δεν το χρησιμοποιείτε ή χρησιμοποιείτε υπολογιστή με Windows, μπορείτε να μάθετε περισσότερα σχετικά με την εγκατάστασή του εδώ: Εγκατάσταση του Ruby.

Με αυτόν τον τρόπο, ανοίξτε μια νέα χήρα τερματικού και πληκτρολογήστε gem install bundler jekyll. Αυτό θα εγκαταστήσει το Bundler (ένα εργαλείο διαχείρισης πακέτων Ruby) και το Jekyll.

Μετά την εγκατάσταση αυτών των πολύτιμων λίθων (πακέτα Ruby), πληκτρολογήστε Jekyll new my-static-site(ονομάστε ό, τι θέλετε) που θα εκτελέσει τη γεννήτρια του Jekyll για να δημιουργήσει το έργο σας σε έναν νέο κατάλογο. Αφού δημιουργηθεί ο ιστότοπός σας, μεταβείτε στον κατάλογο τοποθεσιών που δημιουργήσατε πρόσφατα πληκτρολογώντας cd my-static-sitecdό, τι σας κάλεσε έργο).

Ανοίξτε το έργο σας σε ένα πρόγραμμα επεξεργασίας κειμένου και θα δείτε πολλά αρχεία και φακέλους που δημιουργήθηκαν για εσάς. Αυτήν τη στιγμή πρέπει να ασχοληθείτε μόνο με το Gemfile (όχι το Gemfile.lock). Το Gemfile είναι ένα αρχείο Ruby που διαχειρίζεται όλα τα σχετικά πακέτα Ruby που απαιτούνται για την εκτέλεση ενός έργου.

Το αρχείο θα περιέχει μια γραμμή με την έκδοση Jekyll, το σχολιάζει:

#gem "jekyll", "~> 4.0.0" 

Στη συνέχεια, προσθέστε αυτήν τη γραμμή:

gem "github-pages", group: :jekyll_plugins 

Μπορεί να υπάρχουν πολλά gotchas όταν εγκαθιστάτε το GitHub Pages gem - μερικές φορές τα πολύτιμα πετράδια από τα οποία εξαρτάται είναι ξεπερασμένα ή οι πολύτιμοι λίθοι που έχετε εγκαταστήσει τοπικά είναι πολύ μοντέρνοι για το GitHub Pages.

Έχω διαπιστώσει ότι αυτό μπορεί να δυσκολέψει την κατασκευή και τη δοκιμή του ιστότοπού μου Jekyll τοπικά. Μπορεί να είναι ευκολότερο να δοκιμάσετε τον ιστότοπό σας τοπικά και να αποθηκεύσετε την κατασκευή του μέχρι να είστε έτοιμοι να αναπτύξετε. Ωστόσο, τη στιγμή αυτής της γραφής μπορείτε να καθορίσετε αυτές τις εκδόσεις εξάρτησης στο Gemfile και το Jekyll θα λειτουργήσει τόσο τοπικά όσο και με τις σελίδες GitHub:

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

Χάρη στον Alex Waibel στο StackOverflow για αυτήν την πιο πρόσφατη διαμόρφωση.

Για να δείτε τον ιστότοπό σας σε δράση, εκτελέστε bundle exec Jekyll serveτη γραμμή εντολών σας. Αυτό θα ξεκινήσει έναν διακομιστή και μπορείτε να δείτε τον ιστότοπό σας πληκτρολογώντας "localhost: 4000" στη γραμμή διευθύνσεων URL ενός προγράμματος περιήγησης.

Βόιλα! Έχετε δημιουργήσει έναν στατικό ιστότοπο με τον Jekyll και βρίσκεστε στον κατάλογο έργων. Έχετε ολοκληρώσει το 50%.

Ας το πάρουμε online

Μεταβείτε στο GitHub.com και εγγραφείτε ή εάν έχετε ήδη λογαριασμό, επιλέξτε το κουμπί «νέο» και δημιουργήστε ένα αποθετήριο. Είναι σημαντικό να ονομάσετε το αποθετήριο σας μετά το σύνδεσμο που θα προβάλλει ο λογαριασμός σας στο GitHub Pages, ο οποίος είναι το_όνομα_χρήστη.github.io. Για παράδειγμα, το όνομα χρήστη GitHub μου είναι tfantina και το ιστολόγιό μου είναι tfantina.github.io, οπότε το repo GitHub μου ονομάζεται: "tfantina.github.io".

Επιστρέψτε στο παράθυρο του τερματικού σας, σπρώξτε τον ιστότοπό σας Jekyll από τον υπολογιστή σας μέχρι το GitHub εκτελώντας τις ακόλουθες εντολές:

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(Κατά την αντικατάσταση του ονόματος χρήστη και του ονόματος του έργου σας δεν χρειάζεστε το άνοιγμα και το κλείσιμο).

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

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

Θα σημειώσετε επίσης ότι μπορείτε εύκολα να αλλάξετε το θέμα σας από εδώ και εδώ. Το GitHub παρέχει μερικά προεπιλεγμένα θέματα για το Jekyll, αλλά φυσικά μπορείτε επίσης να φτιάξετε το δικό σας.

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

Αν όλα πάνε σύμφωνα με το σχέδιο, ο ιστότοπός σας θα πρέπει να έχει την εξής μορφή:

Ορίστε - σε λίγα λεπτά έχετε δημιουργήσει και αναπτύξει έναν στατικό ιστότοπο με σελίδες GitHub. Αλλά πιθανότατα θέλετε να μπορείτε να βάλετε κάποιο περιεχόμενο στη σελίδα σας.

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

Πίσω στο πρόγραμμα επεξεργασίας κειμένου, ανοίξτε το φάκελο "_posts". Υπάρχει ήδη μια ανάρτηση που σας καλωσορίζει στο νέο σας ιστολόγιο. Δημιουργήστε ένα νέο αρχείο markdown και αποθηκεύστε το με ένα όνομα σε αυτήν τη μορφή: YEAR-MONTH-DAY-TITLE.markdown (δείτε παρακάτω):

Μια ανάρτηση Jekyll περιέχει δύο ενότητες: μπροστινή ύλη και σώμα.

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

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

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

Η προεπιλεγμένη μπροστινή ύλη μοιάζει με αυτήν:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Η διάταξη λέει στον Jekyll σε ποια διάταξη θέλετε να εμφανίζεται το περιεχόμενο. Μπορείτε να έχετε πολλές διατάξεις για διαφορετικές σελίδες ή τύπους δημοσιεύσεων.
  • Ο τίτλος της ανάρτησης
  • Η ημερομηνία δημοσίευσης
  • Κατηγορίες, οι οποίες είναι ουσιαστικά ετικέτες. Μπορείτε να προσθέσετε όσα λιγότερα ή όσα θέλετε χωρισμένα με κενά.

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

Μόλις ολοκληρωθεί η ανάρτησή σας, αποθηκεύστε την και ανοίξτε το παράθυρο του τερματικού σας.

git commit -am “Publishes first post git push

Μετά από ένα λεπτό (και ίσως μια ανανέωση), θα μπορείτε να δείτε την ανάρτησή σας.

Ας ελπίσουμε ότι έχετε πλέον έναν στατικό ιστότοπο που λειτουργεί στις σελίδες GitHub που δημιουργήθηκε με το Jekyll! Αν έχετε προβλήματα ή ερωτήσεις, παρακαλούμε στείλτε tweet στο @tfantina ή μπορείτε να μου στείλετε ένα email στο [email protected]