Πώς να οικοδομήσουμε ένα blog με jekyll

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

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

Αυτό το σεμινάριο αναλαμβάνει ότι είστε σε Mac. Καθώς το Jekyll είναι ένα πρόγραμμα Ruby, είναι δυνατόν να το εκτελέσετε στα Windows αλλά δεν υποστηρίζεται επίσημα. Εάν ακολουθείτε μαζί στα Windows, hop εδώ Για να βοηθήσετε να ρυθμίσετε το Ruby.

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

Βρείτε τα αρχεία για αυτό το σεμινάριο εδώ .

• 10 καλύτερες στατικές γεννήτριες

01. Ρυθμίστε τη ρύθμιση

Σε ένα Mac θα πρέπει να έχετε εγκατεστημένο το Ruby από προεπιλογή, αλλά ας ελέγξουμε πληκτρολογώντας ruby -v στο τερματικό σας.

Τώρα μπορούμε πραγματικά να πάρουμε το Jekyll που τρέχει στον ιστότοπο, βεβαιωθείτε ότι είστε στον κατάλογο που θέλετε να δημιουργήσετε τον ιστότοπό σας και απλά πληκτρολογήστε Gem εγκαθιστούν Jekyll Bundler ? Ο υπολογιστής σας θα πάνε και θα αρπάξει όλες τις εξαρτήσεις που απαιτούνται για την εκτέλεση ενός ιστότοπου.

02. Σερβίρετε τοπικά ή οικοδομήσουμε

Υπάρχουν δύο βασικές εντολές που θα χρησιμοποιήσετε με το Jekyll - σερβίρισμα και χτίζω . Για να εκτελέσετε τον ιστότοπό σας σε τοπικό τύπο Ο Jekyll εξυπηρετεί στη γραμμή εντολών σας. Αυτό θα εκτελέσει μια έκδοση στο http://127.0.0.1:4000 που μπορείτε να κάνετε προεπισκόπηση των αλλαγών σας. Εάν έχετε ήδη εγκατασταθεί το Gem και άλλες εξαρτήσεις στο μηχάνημά σας, αυτή η εντολή μπορεί να αποτύχει λόγω αναντιστοιχίας σε εκδόσεις εξάρτησης. Σε αυτή την περίπτωση, δοκιμάστε bundle exec jekyll σερβίρει αντι αυτου. Που τρέχει το ίδιο αλλά με τη λέξη χτίζω απλά συγκεντρώνει τον ιστότοπο.

03. Πάρτε τα αρχεία εκκίνησης

Αντιγράψτε τα αρχεία που παρέχονται με αυτό το σεμινάριο σε αυτό το σημείο για να σας δώσετε μια βάση για να εργαστείτε από. Αυτό θα μας δώσει μια αρχική σελίδα, η λίστα blog, η λεπτομερής σελίδα και η δομή των περιουσιακών στοιχείων για τον ιστότοπο. Ανανεώστε τη σελίδα σας στη διεύθυνση http://127.0.0.1:4000 και θα δείτε τώρα τις βασικές σελίδες για να χτίσετε από. Ας έχουμε μια γρήγορη επισκόπηση του πώς λειτουργεί ένας ιστότοπος Jekyll.

Μια ιστοσελίδα Jekyll είναι δομημένη με έναν εύκολο να ακολουθήσει. Οποιεσδήποτε συλλογές (τύποι θέσεων) κρατούνται στο δικό τους φάκελο, όπως και οι διατάξεις και περιλαμβάνουν. Θα παρατηρήσετε ένα φάκελο "_site" - αυτός είναι ο φάκελος που χρησιμοποιεί ο Jekyll όταν τρέχετε ένα jekyll build εντολή.

04. Διαμόρφωση

Open _config.yml στον επεξεργαστή κειμένου και προσθέστε τις δικές σας λεπτομέρειες. Μια περιοχή κλειδιού που θέλετε να ελέγξετε είναι να ρυθμίσετε τη διεύθυνση URL της βάσης. Αυτός είναι ο φάκελος που φορτώνει ο ιστότοπός σας. Το αρχείο ρυθμίσεων είναι παρόμοιο με τη χρήση παγκόσμιων επιλογών σε συνδυασμό με το αρχείο WP-Config, εάν δημιουργήσατε ένα θέμα WordPress.

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

05. Μπροστινή ύλη

Το μπροστινό μέρος είναι ένα απόσπασμα του Yaml στην κορυφή ενός αρχείου. Ο Jekyll χρησιμοποιεί για να κρατήσει μεταβλητές. Κοιτάξτε στο αρχείο περίπου.md και μπορείτε να δείτε ότι ορίσαμε τον τίτλο, ποια διάταξη στη χρήση, ο συγγραφέας και οποιεσδήποτε σχετικές εικόνες.

06. Υγρές ετικέτες

Ο Jekyll χρησιμοποιεί υγρό - μια γλώσσα προτύπωσης που χρησιμοποιεί αντικείμενα, ετικέτες και φίλτρα. Χρησιμοποιούμε το αντικείμενο Ετικέτα που περιβάλλεται από διπλά τιράντες {{}} να εκπέμπουν μεταβλητές μπροστά και ένα στήριγμα και ποσοστό ποσοστού για λογική {%%} .

07. Κατασκευάστε την πλοήγησή σας

Αντί μια στατική πλοήγηση, χρησιμοποιούμε τη δύναμη των αρχείων ρυθμίσεων για να διαχωρίσετε το περιεχόμενο από το πρότυπο. Θα κρατήσουμε αντικείμενα πλοήγησης στο φάκελο "Data" ως αρχείο ρυθμίσεων και στη συνέχεια βρόχο μέσα από αυτά στο Navigation.html. Μπορούμε απλώς να εισέλθουμε σε ό, τι σελίδες και συνδέσμους θέλουμε να προχωρήσουμε χωρίς να επιστρέψουμε στο πρότυπο. Βεβαιωθείτε ότι είστε πραγματικά προσεκτικοί με το Whitepace κατά την επεξεργασία των αρχείων Config, όπως η πλοήγηση.Ml ή πρόσοψη στην αρχή μιας ανάρτησης, επειδή ένας αδέσποτος χώρος θα προκαλέσει σφάλμα.

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

 {% για το στοιχείο στο site.data.Navage%}
     & lt; a href = "{{site.baseurl} {site.link}} {% εάν page.url == item.link%} class =" τρέχουσα "{% endif%} & gt; {{στοιχείο .Name}} & lt; / a & gt;
   {% endfor%} 

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

08. Δημιουργήστε την αρχική σελίδα

Στην αρχική σελίδα μας πρόκειται να απαριθμήσουμε την πιο πρόσφατη θέση Blog ως ήρωα και στη συνέχεια να διαθέτουμε ένα απόσπασμα από τη σελίδα μας με έναν σύνδεσμο. Ας ξεκινήσουμε με το μπλοκ ήρωα. Ανοίξτε το index.html και στη συνέχεια προσθέστε τον ακόλουθο κώδικα:

 {% εκχώρηση post = site.posts.first%}
& LT; DIV CLASS = "C-HERO" Style = "Ιστορικό: URL ({{post.thumbnail_image.large | enective_url}}) Κάτω κέντρο / κάλυμμα χωρίς επαναλάβετε;" & gt;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | markdownify}}
   & lt; a href = "{{post.url}}" class = "btn - hero" & gt; διαβάστε το πλήρες post & lt; / a & gt;
& lt; / div & gt; 

Θα δείτε ότι εκχωρούμε πρώτα την τελευταία θέση και στη συνέχεια να αναφέρετε την εικόνα μικρογραφιών που έχει οριστεί στην εμπρόσθια ύλη του Post. Η ταχυδρομική εισαγωγή χρησιμοποιεί ένα υγρό φίλτρο ανακατώνω Για να μετατρέψετε το Markdown σε HTML.

Με αυτό στη θέση, ας προσθέσουμε ένα teaser από τη σελίδα και για τη σελίδα. Προσθέστε τα εξής:

 & lt; DIV CLASS = "C-FEARTS" & GT;
   {% για τη σελίδα στο site.pages%}
       {% εάν Page.URL == '/ Πάθος.HTML'%}
           & lt; img src = "{{page.profile_image.small}}" alt = "profie εικόνα" class = "c-feature__image" / & gt;
           & lt; div class = "c-feature__text" & gt;
               & lt; h2 & gt; & lt; a href = "{{page.url}}" {{σελίδα.title}} / a & gt; / it; / h2 & gt;
               & lt; p & gt; {{page.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% τέλος εαν %}
   {% endfor%}
& lt; / div & gt; 

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

09. Λίστα blog

Με την αρχική σελίδα που δημιουργήσαμε, μπορούμε να προχωρήσουμε στη σελίδα λίστας blog. Για να δημιουργήσετε τη σελίδα λίστας, χρησιμοποιούμε και πάλι υγρές ετικέτες για να μας δώσουμε τη λογική σε βρόχο μέσω όλων των αρχείων στον φάκελο "Posts".

Ο ήρωας γίνεται για σας επειδή ακολουθεί την ίδια διαδικασία με την αρχική σελίδα. Κάτω από τον ήρωα στο 'blog.html', προσθέστε τα εξής:

& lt; div class = "constrin" & gt;
   & lt; h1 & gt; το καλύτερο από τα υπόλοιπα & lt; / h1 & gt;
   & lt; Τμήμα Class = "Κάρτα-Λίστα" & GT;
           {% για το post στο site.Posts offset: 1%}
           & lt; div class = "κάρτα" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div class = "Λεπτομέρειες καρτών" & GT;
                   & lt; h3 & gt; {{post.date | Ημερομηνία: "% D% B"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" class = "btn" & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor%}
          
   & lt; / τμήμα & gt;
& lt; / div & gt; 

Και πάλι χρησιμοποιούμε ένα Για βρόχος για να περάσει από τη συλλογή θέσεων. Αλλά καθώς έχουμε ήδη βγάλει το τελευταίο στον ήρωα που αντισταθμίζουμε αυτόν τον βρόχο για να ξεκινήσετε τη θέση δύο. Χρησιμοποιείται ένα υγρό φίλτρο για τη μετατροπή της ημερομηνίας σε μορφή της επιλογής μας.

10. Σελίδα λεπτομερειών Blog

Δεν είναι πολύ καιρό να πάμε τώρα: έχουμε σχεδόν όλα τα βασικά στοιχεία μαζί. Μια σημαντική πτυχή που αφήνεται η αντιμετώπιση είναι η πλοήγηση. Όταν διαβάζετε μια θέση blog χρειάζεστε έναν τρόπο να μετακινηθείτε και να διαβάσετε περισσότερα. Μπορούμε να προσθέσουμε κάποια ωραία pagination στον ιστότοπό μας χρησιμοποιώντας μια μεταβλητή σελίδας. Ανοίξτε το post.html στο φάκελο "Layout" και προσθέστε τα εξής:

 & lt; div class = "c-pagination" & gt;
   {% εάν page.Previous%}
   & lt; div & gt;
       & lt; h3 & gt; previous & lt; / h3 & gt;
       & lt; p & gt; {page.previous.title}}} & lt; / p & gt;
       & lt; p & gt; & lt; μια τάξη = "btn" href = "{{site.baseurl} {{page.previous.url}}" read post & lt; / a & gt; / p & gt;
   & lt; / div & gt;
   {% τέλος εαν %}
   {% εάν page.next%}
   & lt; div & gt;
       & lt; h3 & gt; επόμενο & lt; / h3 & gt;
       & lt; p & gt; {page.next.title}}} & lt; / p & gt;
       & lt; μια τάξη = "btn" href = "{{site.baseurl} {{page.next.url}}" & gt; read post & lt; / a & gt; / p & gt;
   & lt; / div & gt;
   {% τέλος εαν %}
& lt; / div & gt; 

Χρησιμοποιούμε το σελίδα.Previous και Σελίδα.Επόμενη Μεταβλητές για να ελέγξετε αν υπάρχει μια θέση για να κάνετε κλικ στο. Εάν υπάρχει τότε μπορούμε να εξάγουμε ένα μπλοκ και να συμπεριλάβουμε τον τίτλο και τη σύνδεση της ανάρτησης.

11. Κατασκευάστε και δημοσιεύστε

Οι σελίδες Github καθιστούν τα αρχεία SASS για εμάς, οπότε όταν τρέχετε jekyll build Τα συμπιεσμένα αρχεία δημιουργούνται στο φάκελο _Site. Δεν υπάρχουν αρχεία gulp ή webpack εδώ, απλά ωραία styles! Μπορείτε ακόμη να καθορίσετε την έξοδο Sass ως μια ρύθμιση στο κύριο αρχείο Config.yml για τον ιστότοπο. Το περιεχόμενο αυτού του καταλόγου μπορεί να μεταφερθεί στην επιλεγμένη φιλοξενία σας. Ένα πράγμα που πρέπει να γνωρίζετε είναι ότι οι σελίδες Github υποστηρίζουν την Jekyll, ώστε να μπορείτε να χτίσετε και να φιλοξενήσετε έναν ιστότοπο χρησιμοποιώντας το κύριο κλάδο σας ως πηγή. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με αυτό εδώ .

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 320 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 320 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

• Δημιουργήστε ένα blog με το πλέγμα και το flexbox
• Τις καλύτερες ελεύθερες πλατφόρμες blogging
• Πώς να οικοδομήσουμε μια τοποθεσία blogging με gatsby