Έχω ένα μυστικό που σώζει τους πελάτες μου πολλά χρήματα, διατηρεί τον ιστότοπό τους ασφαλή και έχει ενσωματωμένα αντίγραφα ασφαλείας.
Το μυστικό: Κάνω τον ιστότοπό τους στατικό. Στη συνέχεια, το αποθηκεύω και το φιλοξενώ με το GitHub και χρησιμοποιώ το Cloudflare για να το εξυπηρετήσω μέσω HTTPS και να το κάνω γρήγορα. Οι πελάτες μου πληρώνουν μόνο για το όνομα τομέα τους, αλλά παίρνουν πολύ περισσότερα από όσα διαπραγματεύτηκαν ποτέ.
Οι στατικοί ιστότοποι είναι εξαιρετικά γρήγοροι, καθώς δεν υπάρχει χρόνος επεξεργασίας διακομιστή. Επίσης, με τη δέσμευση μιας βάσης κώδικα στατικών στοιχείων σε ένα αποθετήριο git, η επαναφορά των αλλαγών γίνεται απλώς θέμα επαναφοράς σε προηγούμενη δέσμευση. Τα αντίγραφα ασφαλείας είναι git push
μακριά, και ουσιαστικά εξυπηρετείτε ολόκληρο τον ιστότοπό σας από την προσωρινή μνήμη, πράγμα που σημαίνει ότι ο διακομιστής σας δεν θα χρειαστεί σχεδόν ποτέ να επεξεργαστεί ξανά ένα αίτημα.
Δημιουργία σύνθετου περιβάλλοντος χρήστη;
Με την έλευση των πλαισίων front-end, όπως το React και οι συγγενείς του, μπορείτε να δημιουργήσετε μαγικές εμπειρίες με τίποτα περισσότερο από HTML / CSS και JavaScript. Θα πρέπει να διαχωρίσετε τη λογική του back-end από το front-end σας, αλλά ακόμη και το Ruby on Rails αποστέλλεται με λειτουργία API τώρα.
Όποτε παίρνω συμβόλαιο για την κατασκευή ενός ιστότοπου, θεωρώ αν ένας στατικός ιστότοπος είναι αρκετός για να καλύψει τις ανάγκες του πελάτη μου και, σε πολλές περιπτώσεις, είναι.
Αναρωτιέστε τι είδους περιπτώσεις χρήσης έχω στο μυαλό μου; Εξαιρετική! Ας συζητήσουμε ορισμένες καταστάσεις όπου μπορεί να θέλετε να λάβετε υπόψη το στατικό περιεχόμενο και να εξηγήσουμε πώς αυτή η προσέγγιση μπορεί να εξοικονομήσει χρόνο και για εσάς και τον πελάτη σας.
Οι ιστότοποι Brochureware προορίζονται να παρέχουν πληροφορίες σχετικά με μια επιχείρηση και δεν αλλάζουν σημαντικά καθ 'όλη τη διάρκεια της ζωής τους. Μια δυναμική εφαρμογή είναι σαφώς υπερβολική για τέτοιους ιστότοπους και δεδομένου ότι αυτοί οι ιστότοποι ξεφεύγουν από χρόνια, λαμβάνοντας λίγες, αν υπάρχουν ενημερώσεις, συνήθως είναι εύκολοι στόχοι για hackers.
Τα πρότυπα στατικού HTML είναι σημαντικά φθηνότερα από τα αντίστοιχα CMS και είναι πιο εύκολο να τροποποιηθούν στο μέλλον. Οι προγραμματιστές ζήτησαν να ενημερώσουν αυτούς τους ιστότοπους δεν απαιτούν εξειδικευμένες γνώσεις σχετικά με ένα συγκεκριμένο CMS. Κατά κανόνα, δημιουργώ πάντα στατικούς ιστότοπους για ιστότοπους φυλλαδίων.
Δώρο: Οι μικρές επιχειρήσεις λατρεύουν να μην πληρώνουν επαναλαμβανόμενα μηνιαία τέλη φιλοξενίας. Βεβαίως, η φιλοξενία δεν είναι τεράστιο κόστος, αλλά οι πελάτες απλά δεν χρειάζεται να ενοχλούν την πληρωμή οτιδήποτε άλλο εκτός από τον τομέα, κάτι που είναι υπέροχο.
Παρουσιάζετε μια υπέροχη, δροσερή νέα εφαρμογή που βασίζεται σε σύγχρονα πλαίσια front-end;
Η εφαρμογή σας είναι ήδη κυρίως στατική. Ακολουθήστε μερικά επιπλέον βήματα για να απομονώσετε οποιαδήποτε λογική πλευρά διακομιστή σε ξεχωριστή εφαρμογή και να επωφεληθείτε πλήρως από την πλήρη εξυπηρέτηση της εφαρμογής σας από την προσωρινή μνήμη του Cloudflare.
Η αίτησή σας θα είναι διαθέσιμη ανά πάσα στιγμή.
Αυτή είναι μια δύσκολη πώληση. Είναι δύσκολο να πείσεις τους ανθρώπους ότι οι στατικοί ιστότοποι μπορούν να χρησιμοποιηθούν για ιστολόγια, αλλά με διαβάσεις - δεν έχω ξεφύγει.
Τα ιστολόγια δεν είναι τίποτα περισσότερο από περιεχόμενο που αποδίδεται με πρότυπα. Απλώς δεν χρειάζεστε μια πλήρη εφαρμογή που αναλύει κάθε αίτημα και δίνει μια νέα σελίδα. Ένας στατικός ιστότοπος είναι ιδανικός για αυτήν την περίπτωση χρήσης.
Σκεφτείτε Τζέκυλ . Το δίνεις Υγρό πρότυπα και περιεχόμενο Markdown, και τα συνδυάζει σε έναν στατικό ιστότοπο. Δεν απαιτείται επεξεργασία εν κινήσει και το ιστολόγιό σας ξαφνικά αισθάνεται πολύ πιο γρήγορα.
Αυτή η ροή εργασίας είναι ιδιαίτερα χρήσιμη επειδή οι σελίδες GitHub υποστηρίζουν τις εκδόσεις Jekyll. Ξαφνικά, οι αναρτήσεις ιστολογίου μπορούν να συνεισφέρουν με αιτήματα έλξης και όλο το περιεχόμενό σας αποθηκεύεται υπό έλεγχο έκδοσης. Οι μη προγραμματιστές μπορούν ακόμη να συνεισφέρουν αναρτήσεις στο Markdown δημοσιεύοντας τις αναρτήσεις τους μέσω Stackedit .
Στην πραγματικότητα, χρησιμοποιώ το Stackedit για να συνθέσω αυτήν την ανάρτηση αυτή τη στιγμή!
Επίσης, εάν θέλετε σχόλια στις αναρτήσεις ιστολογίου σας, Disqus σας δίνει ένα ισχυρό σύστημα σχολίων εισάγοντας ένα απόσπασμα JavaScript.
Αυτή η σελίδα που διαβάζετε χρησιμοποιεί επίσης το Disqus.
Οι σελίδες GitHub είναι η απάντηση του GitHub σε σελίδες έργων και σας επιτρέπει να προβάλλετε οποιοδήποτε στατικό ιστότοπο απευθείας από το αποθετήριο σας. Δεδομένου ότι οι σελίδες GitHub υποστηρίζουν προσαρμοσμένους τομείς, μπορείτε να φιλοξενήσετε έναν στατικό ιστότοπο στις σελίδες GitHub δωρεάν, με αναπτύξεις απευθείας από το Git.
Αρκετά λόγια, ας το δούμε σε δράση!
Έχω προχωρήσει και έφτιαξα ένα εφαρμογή React μιας σελίδας που παίρνει και εμφανίζει την τρέχουσα συναλλαγματική ισοτιμία για την Πακιστανική ρουπία από ένα δημόσιο API. Ας το αναπτύξουμε αυτό στις σελίδες GitHub.
Αρχικά, ας δημιουργήσουμε ένα νέο αποθετήριο GitHub.
Οι σελίδες του GitHub προβάλλονται από ένα υποκατάστημα που ονομάζεται gh-pages
οπότε ας δημιουργήσουμε ένα για το έργο μου.
$ git checkout -b gh-pages Switched to a new branch 'gh-pages'
Και ας ανεβάσουμε τον ιστότοπο:
$ git remote add origin [email protected] :amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages
Και τελειώσαμε! Σε αυτό το σημείο ο ιστότοπος θα είναι διαθέσιμος στο https://amingilani.github.io/price-check
με δωρεάν SSL:
Σημαντικά πράγματα που πρέπει να λάβετε υπόψη:
index.html
αρχείο στο έργο του gh-pages
κλαδίUSERNAME.github.io/REPOSITORY-NAME
Η εξυπηρέτηση του ιστότοπου εκτός του GitHub είναι μια χαρά, αλλά κάθε αξιοπρεπής ιστότοπος χρειάζεται ένα προσαρμοσμένο όνομα τομέα. Ευτυχώς, το GitHub σας επιτρέπει Φέρτε τον δικό σας τομέα στο πάρτι!
Αρχικά, ας δημιουργήσουμε μια ειδική CNAME
αρχειοθετήστε και τοποθετήστε το όνομα τομέα μας εκεί. Αυτό θα ενημερώσει το GitHub ποιο όνομα τομέα θα δρομολογηθεί στο αποθετήριο.
$ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...
Δεύτερον, ας επισημάνουμε a CNAME
για τα δικά μας υποτομέας στο DNS του GitHub στο USERNAME.github.io
:
Προσοχή: Κάνω ΔΕΝ χρησιμοποιήστε το για έναν τομέα κορυφής! Προσθήκη a CNAME
εγγραφή στη ρίζα ο τομέας σας θα απενεργοποιήσει το MX
και TXT
εγγραφές. Χρησιμοποιήστε αυτό μόνο για τον υποτομέα σας. Οι τομείς Apex συζητούνται αργότερα.
Σε αυτό το σημείο, ο ιστότοπός μας θα πρέπει να εκτελείται στον προσαρμοσμένο τομέα μας σε HTTP:
Σημαντικά πράγματα που πρέπει να λάβετε υπόψη:
*.github.io
ο τομέας εξυπηρετείται μέσω HTTPS.CNAME
εγγραφή στον τομέα κορυφής σας εκτός εάν θέλετε να σκοτώσετε τα email σας.Περιορισμοί σελίδων GitHub:
Ο ευκολότερος τρόπος αντιμετώπισης αυτού του περιορισμού είναι η χρήση www
ως υποτομέας σας και ανακατευθύνετε όλη την κίνηση HTTP από την κορυφή στο www
. Στο παράδειγμά μου, θα ανακατευθύνω gilani.me
στο www.gilani.me
, που δείχνει τον στατικό μου ιστότοπο, αλλά δεν μου αρέσει να κάνω τα πράγματα με τον εύκολο τρόπο.
Εάν θέλετε πραγματικά να χρησιμοποιήσετε έναν κορυφαίο τομέα, ελέγξτε αν ο πάροχος DNS σας επιτρέπει να ορίσετε ANAME
εγγραφές. Αυτά είναι (απλοποιημένα) στα μισά του CNAME
εγγραφές δεδομένου ότι σας επιτρέπουν να δείξετε τομείς και A
εγγραφές δεδομένου ότι δεν ακυρώνουν άλλες εγγραφές στην ίδια ζώνη.
Όχι ANAME
; Η τελευταία επιλογή είναι να αλλάξετε σε έναν πάροχο DNS που το υποστηρίζει: εισαγάγετε Cloudflare. Το Cloudflare παρέχει CNAME
ισοπέδωση σε τομείς κορυφής, που είναι το ισοδύναμο ενός ANAME
Ρεκόρ. Είναι καλύτερο να κάνετε την εναλλαγή αυτή τη στιγμή, καθώς θα καλύψουμε το Cloudflare στην επόμενη ενότητα.
TLDR : Μεταβείτε στο δωρεάν DNS Cloudflare και ορίστε ένα CNAME
στον τομέα κορυφής σας. Κάνουν κάτι ξεχωριστό με το CNAME
που το κάνει να λειτουργεί.
Καλώς ήλθατε στην εποχή μετά το Snowden. Έχουν επιβεβαιωθεί όλοι οι χειρότεροι φόβοι μας για επιβολή κυρώσεων και πειρατεία που έχουν επιβληθεί από κυβέρνηση και ο κόσμος προσπαθεί να εξασφαλίσει δεδομένα σε διαμετακόμιση και σε ηρεμία.
Ως σύγχρονος διαχειριστής ιστού, αναμένεται να παρέχετε τουλάχιστον SSL στον ιστότοπό σας, με χωρίς μικτό περιεχόμενο .
Έρχεται στο σημείο που Το Google Chrome επισημαίνει απλούς ιστότοπους HTTPS ως μη ασφαλείς και Η Αναζήτηση Google αρχίζει να ευνοεί τους ιστότοπους HTTPS πιο ευνοϊκά στην κατάταξή τους . Θα συζητήσουμε ακόμη περισσότερες στρατηγικές για να καταστήσουμε ασφαλή το front-end σας αργότερα, αλλά προς το παρόν, θα καλύψουμε μόνο το SSL.
Ευτυχώς, έχουμε τώρα Ας κρυπτογραφήσουμε .
Είναι μια μη κερδοσκοπική και πλήρως αυτοματοποιημένη αρχή έκδοσης πιστοποιητικών (CA) που σας επιτρέπει να εκδίδετε μέσω προγραμματισμού βραχυπρόθεσμα πιστοποιητικά SSL 90 ημερών για τυχόν τομείς που ελέγχετε. Είναι ένα αεράκι για χρήση. είναι ανοιχτού κώδικα. και το έργο υποστηρίζεται από πληθώρα εταιρειών, συμπεριλαμβανομένης της Mozilla και του Electronic Frontier Foundation.
Το Cloudflare είναι μια υπηρεσία προστασίας DNS, CDN και DDoS.
Προσωρινά αποθηκεύει τον ιστότοπό σας και τον εξυπηρετεί σε χρήστες από διακομιστές γεωγραφικά κοντά, καθιστώντας τον ιστότοπό σας πιο γρήγορο. Έχει το πρόσθετο πλεονέκτημα ότι σας κρατά κάτω από το όριο εύρους ζώνης 100 GB του GitHub, επειδή ακόμη και αν ο ιστότοπός σας γίνει εξαιρετικά δημοφιλής, τα περισσότερα αιτήματα θα φτάσουν στην προσωρινή μνήμη και δεν θα φτάσουν ποτέ στο διακομιστή.
Επιπλέον, το Cloudflare προσφέρει μια υπηρεσία που ονομάζεται Καθολική SSL όπου σας εκδίδουν ένα δωρεάν πιστοποιητικό SSL από τους συνεργάτες CA, ώστε να λαμβάνετε δωρεάν HTTPS… για πάντα.
Ξέρω τι σκέφτεστε: Gilani, μου είπες πόσο φοβερό είναι το Let’s Encrypt. Γιατί μιλάτε για το Cloudflare; Λοιπόν, όλα καταλήγουν στην απλότητα.
Ως διανοητική άσκηση, φανταστείτε να δημιουργήσετε πολλαπλές προσωρινές μνήμες Nginx και να αντιστρέψετε διακομιστές μεσολάβησης σε όλο τον κόσμο, δίνοντάς τους όλα τα έγκυρα πιστοποιητικά SSL και εξυπηρετώντας ιστοσελίδες χρηστών από τις κοντινότερες τοποθεσίες τους.
Αυτό έχει ως αποτέλεσμα την προβολή του ιστότοπού σας μέσω SSL ακόμη και αν ο διακομιστής προέλευσης δεν διαθέτει πιστοποιητικό SSL, παρόλο που το Cloudflare σας παρέχει ειδικά πιστοποιημένα αυτο-υπογεγραμμένα, τα οποία μπορείτε να βάλετε στον διακομιστή προέλευσης για να εξασφαλίσετε τη σύνδεση στους διακομιστές του Cloudflare. Αυτό σας προσφέρει το Cloudflare ένα δωρεάν πρόγραμμα και δεν χρειάζεται καν να ανανεώνετε το πιστοποιητικό σας κάθε 90 ημέρες.
Ως ελεύθερος επαγγελματίας, κάνω πελάτες που θέλουν έναν ιστότοπο να λειτουργεί και να λειτουργεί για την επιχείρησή τους το συντομότερο δυνατό. Δεν καταλαβαίνουν ούτε ενδιαφέρονται για θέματα ασφάλειας, μαστίζουν τον σύγχρονο ιστό ή κρυπτογράφηση κατά τη μεταφορά. Μερικοί πελάτες δυσκολεύονται να κατανοήσουν την ιδέα των ονομάτων τομέα και το θεωρούν ενοχλητικό όταν πρέπει να πληρώνουν ετήσια αμοιβή 15 $ «μόνο για να διατηρήσουν τη λειτουργία του ιστότοπού μου» Γι 'αυτό, προσπαθήστε να τους εξηγήσετε γιατί πρέπει να πληρώσουν για ένα σύμπλεγμα αντίστροφων διακομιστών μεσολάβησης που προστατεύουν τον ιστότοπό τους που λειτουργεί με δωρεάν φιλοξενία.
Ας βρώσουμε ξανά τα χέρια μας. Το πρώτο πράγμα που πρέπει να κάνετε, μεταβείτε στη δρομολόγηση όλης της κίνησής σας μέσω του Cloudflare:
Στη συνέχεια, στο Crypto, ορίστε το επίπεδο SSL σε 'Πλήρης'.
Αναγκάστε την 'Αυτόματη επανεγγραφή HTTPS' για να σκοτώσετε τις προειδοποιήσεις μικτού περιεχομένου.
Σε αυτό το σημείο, ο ιστότοπός μας θα λειτουργεί τόσο σε HTTP όσο και σε HTTPS. Ας αναγκάσουμε HTTPS για όλα στον τομέα μας.
Ολα τελείωσαν. Ο ιστότοπός μας πρέπει πάντα να φορτώνει μέσω HTTPS με μια πράσινη βαθμολογία 'Ασφαλής' στο Chrome.
ποια γλώσσα να μάθεις
Υπάρχουν μερικά πράγματα που δεν ανέφερα παραπάνω και θα ήθελα να αφιερώσω λίγο χρόνο για να διευκρινίσω μερικά σημεία.
Ο έξυπνος μεταξύ σας θα επισημάνει ότι υπάρχουν μερικά έντονα προβλήματα ασφαλείας με αυτήν τη ρύθμιση, δηλαδή ότι δεν υπάρχουν ασφαλείς κεφαλίδες HTTP όπως:
Content-Security-Policy
: φορτώνει σενάρια και στοιχεία από μια λίστα επιτρεπόμενων κεντρικών υπολογιστών και μπορεί να απαγορεύσει τα ενσωματωμένα js.X-Frame-Options
: απενεργοποιεί τη φόρτωση του ιστότοπού σας σε iframe.Και έχεις δίκιο Σελίδες GitHub και ακόμη και Cloudflare δεν σας επιτρέπουν να προσαρμόσετε τις κεφαλίδες HTTP . Ωστόσο, μπορείτε να ορίσετε ένα CSP χρησιμοποιώντας το HTML meta
ετικέτα.
Απλώς εισάγετε αυτό στην ιστοσελίδα σας:
X-Frame-Options
Ωστόσο, προς το παρόν, δεν υπάρχει πρακτικός τρόπος να ρυθμίσετε το iframe
κεφαλίδα στις σελίδες του GitHub, που σημαίνει ότι ένας εισβολέας μπορεί να φορτώσει την ιστοσελίδα σας σε μια ειδικά σχεδιασμένη gh-pages
και τραβήξτε μια επίθεση XSS. Εάν είστε αφοσιωμένοι, ωστόσο, μπορείτε να επιλύσετε αυτό το ζήτημα ζητώντας από τους χρήστες να επιβεβαιώσουν τον κωδικό πρόσβασής τους ή το διακριτικό 2FA σε κάθε ευαίσθητη ενέργεια ή μεταβιβάζοντας ένα Διακριτικό CSRF μετά από κάθε επικυρωμένο αίτημα.
Μια μεγάλη ανησυχία για ορισμένους είναι ότι χρησιμοποιώντας τα δωρεάν δημόσια αποθετήρια στο GitHub, ο ιστότοπός σας και ο πηγαίος κώδικας είναι διαθέσιμος σε οποιονδήποτε θέλει να το διακλάψει ή να το κατεβάσει. Πιστεύω λοιπόν ότι η ανησυχία εδώ είναι λανθασμένη.
Το στατικό περιεχόμενο δεν είναι πηγαίος κώδικας με την έννοια ότι δεν συντάσσεται ή επεξεργάζεται ως σενάριο προτού προβληθεί στον χρήστη. Ο χρήστης σας θα λάβει το ίδιο ακριβώς στατικό αντίγραφο της ιστοσελίδας εάν επρόκειτο να εκτελέσει ένα πρόγραμμα ανίχνευσης ιστού στον ιστότοπό σας. Ενώ φιλοξενεί τον κώδικα σε ένα αποθετήριο GitHub σίγουρα διευκολύνει τη λήψη ενός αντιγράφου του ιστότοπού σας, δεν εκθέτει κάτι που δεν ήταν ήδη δημόσιο.
Οι ιδέες που παρουσιάζονται σε αυτό το άρθρο δεν περιορίζονται σε δωρεάν web hosting μικρών εφαρμογών.
Μπορείτε να δημιουργήσετε ένα επίπεδο front-end βάσει ενός σύγχρονου πλαισίου JavaScript, να το συνδέσετε με ένα Backend-as-a-Service (BaaS) μεγάλης κλίμακας που βασίζεται σε σύννεφο, όπως Firebase και δημιουργήστε σύνθετες εφαρμογές χωρίς να ανησυχείτε για διακομιστές, χρόνο λειτουργίας ή οποιοδήποτε άλλο θέμα που σχετίζεται με την υποδομή.
Δημιουργία ενός νέου συναρπαστικού διαδικτυακού παιχνιδιού ;! Ολοκλήρωση αγοράς GameSparks και είστε καλοί να πάτε.
Η χρήση των σελίδων Github ως «τυπικής» υπηρεσίας φιλοξενίας, η οποία αναμένεται να διαχειρίζεται ιστότοπους υψηλού εύρους ζώνης, αποθαρρύνεται και δεν πρέπει να γίνει. Η προσθήκη του Cloudflare CDN πάνω από τις σελίδες GitHub κάνει αυτή τη λύση να λειτουργεί. Το Cloudflare είναι κάτι περισσότερο από μια δωρεάν υπηρεσία SSL. Είναι μια εταιρεία με παγκόσμιο CDN που προστατεύει τον ιστότοπό σας από υπερτάσεις και διατηρεί το φορτίο στις σελίδες GitHub ελαχιστοποιημένο.Σε αυτό το άρθρο, το έκανα σαν να δημοσίευσα χειροκίνητα την εφαρμογή React στο master
. Δεν έκανα κάτι τέτοιο. Δούλεψα στο npm run deploy
και όταν ήρθε η ώρα για ανάπτυξη, έτρεξα gh-pages
που ξεκίνησε ένα σενάριο build και ώθησε το build σε master
. Παρακαλώ δείτε το
|_+_|υποκατάστημα του αποθετηρίου μου για να δούμε πώς λειτουργεί.
Πλεονεκτήματα:
Προειδοποιήσεις:
Συνδέσεις: