Ένας εικονογραφημένος οδηγός για τη ρύθμιση του ιστότοπού σας χρησιμοποιώντας το Github & Cloudflare

Θα πρέπει να το διαβάσετε αν…

  1. Θέλετε να ρυθμίσετε έθιμο ανακατευθύνσεις ή άλλη διαμόρφωση του διακομιστή για την ελεύθερη
  2. Θέλετε να αποκτήσετε τον ιστότοπό σας σε HTTPS αλλά δεν ξέρετε από πού να ξεκινήσετε
  3. Είστε συγκλονισμένοι με το πλήθος των επιλογών εκεί έξω (όπως Netlify, Surge, BitBalloon, Now)

Γιατί το Github;

  1. Εύκολη εγκατάσταση και έναρξη με τις σελίδες Github
  2. Άμεση ανάπτυξη για την προώθηση νέου κώδικα

Γιατί το Cloudflare;

  1. Είναι δωρεάν
  2. Συνοδεύεται από υποστήριξη για SSL (HTTPS). (Εδώ έχει σημασία το HTTPS.)
  3. Εξαιρετικά απλή διαχείριση DNS
  4. Δυνατότητα ορισμού λήξης προσωρινής μνήμης προγράμματος περιήγησης για στοιχεία
  5. Ελαχιστοποιήστε αυτόματα τα στατικά σας στοιχεία
  6. Προσαρμοσμένοι κανόνες σελίδας για τη ρύθμιση ανακατευθύνσεων, πάντα HTTPS κ.λπ.
  7. HTTP2 / SPDY για υποστηριζόμενα προγράμματα περιήγησης
  8. Επιτρέπει τη ρύθμιση HSTS (Αυστηρή ασφάλεια μεταφοράς HTTP)

Προτού ξεκινήσουμε, θα χρειαστείτε μερικά πράγματα:

  1. Ένας λογαριασμός Github
  2. Ένας λογαριασμός Cloudflare
  3. Πρόσβαση σε έναν προσαρμοσμένο τομέα. Μπορείτε να το αγοράσετε από οποιονδήποτε καταχωρητή ονομάτων τομέα όπως: Namecheap, GoDaddy, BigRock κ.λπ.

Εάν όλα αυτά έκαναν το ενδιαφέρον σας, ας ξεκινήσουμε!

Βήμα 1 : Δημιουργήστε το repo Github με τον κωδικό σας

  • Μεταβείτε στη διεύθυνση //pages.github.com
  • Επιλέξτε την επιλογή Project Site για να βρείτε τις οδηγίες για τη δημιουργία μιας βασικής σελίδας από το μηδέν ή ένα προσαρμοσμένο θέμα

Βήμα 2. Ρύθμιση σελίδων Github για το αποθετήριο

Μεταβείτε στις Ρυθμίσεις για το αποθετήριο σας. Στην ενότητα Σελίδες Github , επιλέξτε τον κύριο κλάδο από τον οποίο θα εξυπηρετείτε τον ιστότοπό σας. Μόλις το κάνετε αυτό, μπορείτε να μεταβείτε στο // εγώ> .gith u b.io/repo s itory για να δείτε την ιστοσελίδα σας σε δράση, όπως φαίνεται παρακάτω.

Βήμα 3. Προσθήκη προσαρμοσμένου τομέα

Προσθέστε τον προσαρμοσμένο τομέα που έχετε αγοράσει και αποθηκεύστε τον. Ο ιστότοπός σας είναι πλέον έτοιμος με τον δικό σας προσαρμοσμένο τομέα; ΚΑΛΥΤΕΡΗ! ✨

Έχουμε λοιπόν τα πάντα στο Github. Θα ξεκινήσουμε με τη ρύθμιση του Cloudflare για να αναβαθμίσουμε τον ιστότοπό σας με όλες τις ισχυρές δυνατότητες που ανέφερα στην αρχή αυτής της ανάρτησης.

Βήμα 4: Ρυθμίστε τον τομέα σας στο Cloudflare

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

Βήμα 5: Ρύθμιση εγγραφών DNS για τον τομέα σας

Σε αυτό το βήμα, ενημερώνουμε το Cloudflare για να κατευθύνει τον τομέα μας στον διακομιστή Github Pages χρησιμοποιώντας δύο καταχωρίσεις A Record DNS:

1. 192.30.252.153

2. 192.30.252.154

Μόλις το ρυθμίσετε, όλα τα αιτήματα στον προσαρμοσμένο τομέα σας, δηλαδή το yourcustomdomain.com, θα μεταφερθούν στον ιστότοπό σας στο Github στο Βήμα 3 .

Υπάρχει ένα ακόμη βήμα πριν προχωρήσουμε στο επόμενο στάδιο. Συχνά, θα θέλατε να χρησιμοποιήσετε έναν υποτομέα όπως το www για τον ιστότοπό σας, δηλ. Www.yourcustomdomain.com Για αυτό, θα χρειαστεί να προσθέσετε μια καταχώριση DNS εγγραφής CNAME η οποία θα δείχνει τον υποτομέα σας (www) στον τομέα κορυφής σας (@).

Μόλις το ρυθμίσετε, όλα τα αιτήματα στον προσαρμοσμένο υποτομέα σας, δηλαδή www. Το yourcustomdomain.com θα μεταφερθεί στον ιστότοπό σας στο Github στο Βήμα 3 .

ΣΗΜΕΙΩΣΗ: Μην προσπαθήσετε να μεταβείτε αμέσως στον προσαρμοσμένο τομέα σας. Δεν θα λειτουργήσει. Έχουμε κάνει μόνο τη ρύθμιση Cloudflare to Github. Πρέπει ακόμη να κάνουμε το DNS Registrar -> Cloudflare setup. Αυτό θα εμφανιστεί στο Βήμα 7.

Κάντε κλικ στο Συνέχεια για να μεταβείτε στο επόμενο βήμα.

Βήμα 6: Επιλέξτε το δωρεάν πρόγραμμα Cloudflare

Το δωρεάν πρόγραμμα για το Cloudflare παρέχει πολλές εξελιγμένες επιλογές όπως συζητήθηκε στο Why Cloudflare; ενότητα στην αρχή.

Κάντε κλικ στο Συνέχεια για να μεταβείτε στο επόμενο βήμα.

Βήμα 7: Ενημέρωση διακομιστών ονομάτων στον καταχωρητή DNS

Μόλις βρίσκεστε σε αυτήν τη σελίδα, διατηρήστε την ανοιχτή σε μία καρτέλα και ανοίξτε τον ιστότοπό σας του καταχωρητή DNS (το μέρος από το οποίο αγοράσατε τον τομέα σας) σε άλλο. Εάν χρησιμοποιείτε έναν από τους παρακάτω καταχωρητές, τότε οι σύνδεσμοι για να κατανοήσετε πώς να αλλάξετε τον διακομιστή ονομάτων είναι:

  1. Μεγάλος βράχος
  2. Όνομα
  3. Πάμε μπαμπά

Πρέπει να αντικαταστήσετε τους υπάρχοντες διακομιστές ονομάτων στις ρυθμίσεις τομέα σας με αυτόν στη σελίδα Cloudflare που είναι ανοιχτή στην άλλη καρτέλα.

YASSS! Έχετε ρυθμίσει με επιτυχία τον προσαρμοσμένο τομέα σας για να χρησιμοποιήσετε το Cloudflare ως πάροχο DNS. Μπορείτε να μεταβείτε στην επιλογή Επισκόπηση στην κορυφή και θα διαπιστώσετε ότι εξακολουθεί να περιμένει την επεξεργασία της αλλαγής διακομιστή ονομάτων σας.

Μόλις η καρτέλα Επισκόπηση αναφέρει Κατάσταση: Ενεργή ,Τώρα μπορείτε να δοκιμάσετε να επισκεφθείτε τον ιστότοπό σας χρησιμοποιώντας τον προσαρμοσμένο τομέα σας, ΚΑΙ ΠΡΕΠΕΙ ΝΑ ΛΕΙΤΟΥΡΓΕΙ ! ??

Βήμα 8: Διαμόρφωση ελαχιστοποίησης

Στα Ταχύτητα setttings, στο Auto Ελαχιστοποίηση ενότητα, επιλέξτε την επιλογή για την αυτόματη Ελαχιστοποίηση τα πάντα: Javascript, CSS, HTML. Αυτό θα γίνει από το Cloudflare on-the-fly μία φορά και στη συνέχεια θα αποθηκευτεί προσωρινά. Κάθε φορά που αλλάζει κάποιο από τα στοιχεία σας, το Cloudflare θα το κάνει ξανά για εσάς.

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

Βήμα 9: Διαμόρφωση λήξης προσωρινής μνήμης προγράμματος περιήγησης

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

Προτού προχωρήσουμε στο επόμενο βήμα, ελέγξτε τις ρυθμίσεις Crypto στο Cloudflare. Θα πρέπει να λέει Ενεργό πιστοποιητικό στην ενότητα SSL . ( Σημείωση: Δοκιμάστε να φορτώσετε ξανά τη σελίδα. Μερικές φορές δεν ενημερώνεται ). Στα επόμενα δύο βήματα, θα κάνουμε πάντα τον ιστότοπό σας να προβάλλεται μέσω HTTPS . Για να λειτουργήσει χωρίς προβλήματα, είναι σημαντικό να έχετε ένα ενεργό πιστοποιητικό στο Cloudflare.

Βήμα 10: Διαμόρφωση κανόνων σελίδας

Σε αυτό το βήμα, θα κάνουμε δύο πράγματα:

  1. Ανακατευθύνετε όλα τα αιτήματα για www.yourcustomdomain.com στο yourcustomdomain.com
  2. Ανακατευθύνετε όλα τα αιτήματα για //yourcustomdomain.com στο //yourcustomdomain.com

Μεταβείτε στη ρύθμιση Κανόνες σελίδας και κάντε κλικ στο Δημιουργία κανόνα σελίδας.

Για το χειρισμό του www.yourcustomdomain.com να yourcustomdomain.com ανακατεύθυνση, αντικαταστήστε tweetify.io με yourcustomdomain.com όνομα. Κάντε κλικ στην επιλογή Αποθήκευση και ανάπτυξη .

Για το χειρισμό του //yourcustomdomain.com να //yourcustomdomain.com ανακατεύθυνση, αντικαταστήστε tweetify.io με yourcustomdomain.com όνομα. Κάντε κλικ στην επιλογή Αποθήκευση και ανάπτυξη .

Βήμα 11: Ρύθμιση παραμέτρων HSTS

Μεταβείτε στις ρυθμίσεις Crypto και μετακινηθείτε προς τα κάτω στην ενότητα HTTP Strict Transport Security (HSTS) . Κάντε κλικ στο Ενεργοποίηση HSTS . Αυτό θα σας ζητήσει να αναγνωρίσετε ότι γνωρίζετε τι κάνετε. Πριν επιλέξετε , καταλαβαίνω , επιτρέψτε μου να σας πω γιατί πρέπει να ενεργοποιήσουμε αυτήν τη ρύθμιση:

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

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

Αυτό είναι. Είστε έτοιμοι να αναδείξετε τον ιστότοπό σας στον κόσμο! ?? Εάν το βρήκατε χρήσιμο, παρακαλούμε ❤️ και μοιραστείτε το.

Ο Karan Thakkar είναι ο επικεφαλής του Crowdfire - το σούπερ έξυπνο μάρκετινγκ . Το άρθρο του είχε εμφανιστεί στο The Huffington Post. Του αρέσει να δοκιμάζει νέες τεχνολογίες στον ελεύθερο χρόνο του και έχει δημιουργήσει το Tweetify (χρησιμοποιώντας το React Native) και το Show My PR's (χρησιμοποιώντας Golang).

Άλλα άρθρα που γράφτηκε από αυτόν:

Πώς μεγάλωσα από 300 σε 5k ακόλουθους σε μόλις 3 εβδομάδες

#GrowthΔιαφήμιση του λογαριασμού μου στο Twitter για το @Crowdfire Twitter Premier League blog.markgrowth.com Χρησιμοποιώντας το Let's Encrypt Certbot για λήψη HTTPS στο Amazon EC2 NGINX κουτί σας

Το Let's Encrypt είναι μια νέα αρχή έκδοσης πιστοποιητικών που παρέχει δωρεάν πιστοποιητικά SSL (έως ένα συγκεκριμένο όριο ανά εβδομάδα). Είναι… medium.freecodecamp.com