Nieograniczona Skala i darmowy Hosting z GitHub Pages i Cloudflare

mam sekret, który oszczędza moim klientom mnóstwo pieniędzy, utrzymuje ich stronę bezpieczną i ma wbudowane kopie zapasowe.

the secret: I make their website static. Następnie przechowuję i hostuję go za pomocą GitHub i używam Cloudflare, aby obsługiwać go przez HTTPS i robić to szybko. Moi klienci płacą tylko za swoją nazwę domeny, ale dostają o wiele więcej, niż kiedykolwiek oczekiwali.

dlaczego zawartość statyczna?

statyczne strony są cudownie szybkie, ponieważ nie ma czasu przetwarzania serwera., Ponadto, zatwierdzając bazę kodu zasobów statycznych w repozytorium git, cofanie zmian staje się po prostu kwestią powrotu do poprzedniego commita. Kopie zapasowe sągit push I zasadniczo obsługujesz całą witrynę z pamięci podręcznej, co oznacza, że twój serwer prawie nigdy nie będzie musiał ponownie przetwarzać żądania.

budujesz złożony interfejs użytkownika?

wraz z pojawieniem się frameworków front-endu, takich jak React i jego krewni, możesz tworzyć magiczne doświadczenia z niczym więcej niż HTML/CSS i JavaScript., Będziesz musiał oddzielić swoją logikę back-endu od front-endu, ale nawet Ruby on Rails jest teraz dostarczany z trybem API.

ilekroć otrzymuję zlecenie budowy strony internetowej, zastanawiam się, czy statyczna strona wystarczy, aby zaspokoić potrzeby mojego klienta, a w wielu przypadkach tak.

zastanawiasz się, jakie przypadki użycia mam na myśli? Świetnie! Omówmy niektóre sytuacje, w których warto rozważyć statyczne treści i wyjaśnić, w jaki sposób takie podejście może zaoszczędzić czas zarówno Tobie, jak i Twojemu klientowi.,

strony Brochureware

strony Brochureware mają na celu dostarczanie informacji o firmie i nie zmieniają się znacząco w trakcie ich życia. Dynamiczna aplikacja jest wyraźnie przesadą dla takich stron, a ponieważ te strony nie są utrzymywane przez lata, otrzymując kilka, jeśli jakieś aktualizacje, są zwykle łatwym celem dla hakerów, cóż, włamać.

statyczne szablony HTML są znacznie tańsze niż ich odpowiedniki CMS i są łatwiejsze do modyfikacji w przyszłości. Programiści proszeni o aktualizację takich witryn nie wymagają specjalistycznej wiedzy na temat konkretnego CMS., Z reguły zawsze robię statyczne strony dla stron brochureware.

Bonus: małe firmy uwielbiają nie płacić cyklicznych miesięcznych opłat hostingowych. Oczywiście, hosting nie jest ogromnym kosztem, ale klienci po prostu nie muszą płacić niczego innego niż domena, co jest świetne.

Aplikacje jednostronicowe

czy pokazujesz wspaniałą, fajną nową aplikację, która opiera się na nowoczesnych frameworkach front-end?

Twoja aplikacja jest już w większości statyczna., Wykonaj kilka dodatkowych kroków, aby wyizolować logikę po stronie serwera w oddzielną aplikację i uzyskać pełną korzyść z tego, że aplikacja jest obsługiwana całkowicie z pamięci podręcznej Cloudflare.

Twoja aplikacja będzie dostępna przez cały czas.

blogi

to trudna sprawa. Trudno przekonać ludzi, że statyczne strony mogą być wykorzystywane do blogów, ale Przeczytaj mnie – nie wyszedłem z głębokiego końca.

blogi to nic innego jak treść renderowana szablonami. Po prostu nie potrzebujesz pełnowymiarowej aplikacji analizującej każde żądanie i renderującej nową stronę. Statyczna strona jest idealna do tego przypadku użycia.,

zastanów się nad Jekyllem. Dajesz mu płynne szablony i zawartość Markdown, a ona łączy je ze sobą w statyczną stronę internetową. Nie wymaga przetwarzania w locie, a twój blog nagle wydaje się znacznie szybszy.

ten przepływ pracy jest szczególnie pomocny, ponieważ strony GitHub obsługują Kompilacje Jekyll. Nagle posty na blogu mogą być dodawane za pomocą żądań ciągnięcia, a cała twoja zawartość jest przechowywana w kontroli wersji. Nie-programiści mogą nadal dodawać posty w Markdown, publikując swoje posty za pomocą Stackedit.

w rzeczywistości używam Stackedit, aby skomponować ten post właśnie teraz!,

Ponadto, jeśli chcesz komentować posty na blogu, Disqus daje Ci potężny system komentarzy, wstawiając fragment JavaScript.

Ta strona, którą czytasz również używa Disqusa.

GitHub Pages

GitHub Pages jest odpowiedzią Githuba na strony projektu i pozwala na obsługę dowolnej statycznej strony internetowej prosto z repozytorium. Ponieważ strony GitHub obsługują niestandardowe domeny, możesz bezpłatnie hostować statyczną stronę na stronach GitHub, z wdrożeniami bezpośrednio z Gita.

instalowanie na stronach Githuba.

dość gadania, zobaczmy to w akcji!,

I ' ve gone ahead and made a single page React app that fetches and displays the current exchange rate for the Pakistan Rupee from a public API. Zainstalujmy to na stronach GitHub.

najpierw utwórzmy nowe repozytorium GitHub.

strony GitHub są obsługiwane z gałęzi o nazwiegh-pages więc stwórzmy jedną dla mojego projektu.

$ git checkout -b gh-pagesSwitched to a new branch 'gh-pages'

i wypchnijmy stronę w górę:

i gotowe!, W tym momencie strona będzie dostępna pod adresem z darmowym SSL:

ważne rzeczy do zapamiętania:

• strony GitHub obsługują index.html plik w projekcie gh-pages oddział
• strona internetowa jest obsługiwana pod adresem USERNAME.github.io/REPOSITORY-NAME

dostosowując nazwę domeny.

serwowanie strony poza GitHub jest w porządku, ale każda przyzwoita strona potrzebuje niestandardowej nazwy domeny. Na szczęście, GitHub pozwala wnieść własną domenę do partii!,

najpierw utwórzmy specjalny plikCNAME I umieśćmy tam naszą nazwę domeny. Dzięki temu GitHub będzie wiedział, którą nazwę domeny przekierować do repozytorium.

$ echo 'pricecheck.gilani.me' > CNAME$ git add .$ git commit -m 'Add a custom domain'...$ git push...

Po Drugie, wskażmy CNAME dla naszej subdomeny Do DNS Githuba pod adresem USERNAME.github.io:

uwaga: nie używaj tego dla domeny Apex! Dodanie rekorduCNAME do katalogu głównego spowoduje wyłączenie rekordówMX ITXT., Użyj tego tylko dla swojej subdomeny. Domeny Apex są omówione później.

w tym momencie nasza strona powinna działać na naszej niestandardowej domenie na HTTP:

ważne rzeczy do zapamiętania:

• domyślna *.github.io domena jest obsługiwana przez https.
• nasza niestandardowa nazwa domeny jest obsługiwana przez niezabezpieczony HTTP.
• nie używaj rekordu CNAME w swojej domenie apex, chyba że chcesz zabić swoje e-maile.

Ograniczenia stron GitHub:

• Repos muszą mieć rozmiar mniejszy niż 1 GB.,
• strony internetowe muszą mieć Rozmiar pliku mniejszy niż 1 GB.
• miesięczny limit przepustowości wynosi 100 GB. Obejdziemy to później.

używanie domeny apex jako niestandardowej domeny

najprostszym sposobem obejścia tego ograniczenia jest użycie wwwjako subdomeny i przekierowanie całego ruchu HTTP z apex do www. W moim przykładzie przekierowałbym gilani.me na , co wskazuje na moją statyczną stronę, ale nie lubię robić rzeczy w łatwy sposób.,

Jeśli naprawdę chcesz korzystać z domeny apex, sprawdź, czy twój dostawca DNS pozwala ustawić rekordy ANAME. Są to (uproszczone) rekordy w połowie drogi pomiędzy CNAME ponieważ pozwalają wskazywać domeny i A ponieważ nie anulują innych rekordów w tej samej strefie.

NoANAME? Ostatnią opcją jest zmiana na dostawcę DNS, który to obsługuje: wprowadź Cloudflare., Cloudflare zapewnia CNAME spłaszczenie na domenach apex, co jest odpowiednikiem rekordu ANAME. Najlepiej jest dokonać zmiany teraz, ponieważ będziemy pokrywać Cloudflare w następnej sekcji.

TLDR: przełącz się na darmowy DNS Cloudflare i ustaw CNAME na swojej domenie apex. Robią coś specjalnego z ich CNAME to sprawia, że to działa.

SSL i Cloudflare

Witamy w epoce post-Snowden., Wszystkie nasze najgorsze obawy przed rządowym szpiegowaniem i hakowaniem zostały potwierdzone, a świat próbuje zabezpieczyć dane w Tranzycie i w spoczynku.

jako nowoczesny administrator sieci oczekuje się, że zapewnisz co najmniej SSL na swojej stronie, bez mieszanych treści.

doszliśmy do punktu, w którym Google Chrome oznacza zwykłe witryny HTTPS jako niebezpieczne, a Wyszukiwarka Google zaczyna faworyzować witryny HTTPS w swoich rankingach. Omówimy jeszcze więcej strategii, aby twój front-end był bezpieczny później, ale na razie zajmiemy się tylko SSL.

,

jest to non-profit i całkowicie zautomatyzowany urząd certyfikacji (CA), który pozwala programowo wydawać krótkoterminowe 90-dniowe certyfikaty SSL dla dowolnych domen, które kontrolujesz. To proste w użyciu; jest to open source; a projekt jest wspierany przez mnóstwo firm, w tym Mozilla i Electronic Frontier Foundation.

dobre wykorzystanie Cloudflare

Cloudflare to usługa ochrony DNS, CDN i DDoS.

buforuje Twoją stronę i serwuje ją użytkownikom z pobliskich serwerów, dzięki czemu Twoja strona jest szybsza., Ma tę dodatkową zaletę, że utrzymuje cię pod limitem przepustowości 100 GB GitHub, ponieważ nawet jeśli Twoja witryna stanie się szalenie popularna, większość żądań trafi do pamięci podręcznej i nigdy nie dotrze do serwera.

ponadto Cloudflare oferuje usługę o nazwie Universal SSL, w której wystawiają bezpłatny certyfikat SSL od swoich partnerów z CA, dzięki czemu otrzymujesz HTTPS za darmo… na zawsze.

dlaczego Cloudflare?

wiem o czym myślisz: Gilani, właśnie mi powiedziałeś, jak zajebiście jest Let ' s Encrypt. Dlaczego mówisz o Cloudflare? Wszystko sprowadza się do prostoty.,

jako ćwiczenie umysłowe wyobraź sobie konfigurację wielu serwerów cache Nginx i odwrotnych serwerów proxy na całym świecie, dając im wszystkie ważne certyfikaty SSL i obsługując strony internetowe użytkowników z ich najbliższych lokalizacji.

powoduje to, że Twoja witryna jest obsługiwana przez SSL, nawet jeśli serwer origin nie ma certyfikatu SSL, chociaż Cloudflare zapewnia specjalne certyfikaty podpisane własnym podpisem, które można umieścić na serwerze origin, aby zabezpieczyć połączenie z serwerami Cloudflare. To właśnie Cloudflare daje Ci darmowy plan i nie musisz nawet odnawiać certyfikatu co 90 dni.,

jako freelancer pozyskuję klientów, którzy chcą jak najszybciej uruchomić witrynę dla swojej firmy. Nie rozumieją ani nie dbają o kwestie bezpieczeństwa, nękają nowoczesną sieć lub szyfrują podczas tranzytu. Niektórzy klienci mają trudności ze zrozumieniem idei nazw domen i uważają to za denerwujące, gdy muszą zapłacić roczną opłatę w wysokości 15 USD „tylko po to, aby moja strona działała”. Spróbuj więc wyjaśnić im, dlaczego muszą płacić za klaster odwrotnych proxy chroniących ich witrynę, która działa na samym darmowym hostingu.

Konfigurowanie Cloudflare SSL

znowu pobrudzimy sobie ręce., Pierwszą rzeczą do zrobienia, przełącz się na routing całego ruchu przez Cloudflare:

następnie, w obszarze Crypto, ustaw poziom SSL na „pełny.”

Wymuś „automatyczne przepisywanie HTTPS”, aby zabić ostrzeżenia o mieszanej zawartości.

w tym momencie nasza strona będzie działać zarówno przez HTTP, jak i HTTPS. Wymuśmy HTTPS dla wszystkiego w naszej domenie.

wszystko gotowe., Nasza strona internetowa powinna zawsze ładować się przez HTTPS z zieloną oceną „Secure” w Chrome.

Ostatnie słowa i względy bezpieczeństwa

jest kilka rzeczy, których nie omówiłem powyżej, i chciałbym poświęcić chwilę, aby wyjaśnić kilka punktów.

bystry wśród was wskaże, że istnieje kilka rażących problemów z bezpieczeństwem z tą konfiguracją, a mianowicie, że nie ma bezpiecznych nagłówków HTTP, takich jak:

• Content-Security-Policy: ładuje skrypty i zasoby z białej listy hostów i może zablokować wbudowany js.,
• X-Frame-Options: wyłącza ładowanie witryny w ramce iframe.

i masz rację. Strony GitHub, a nawet Cloudflare nie pozwalają na dostosowanie nagłówków HTTP. Można jednak ustawić CSP używając znacznika HTML meta.

Po prostu umieść to na swojej stronie:

<meta http-equiv="Content-Security-Policy" content="default-src https:">

jednak w tej chwili nie ma praktycznego sposobu, aby ustawić nagłówekX-Frame-Options na stronach GitHub, co oznacza, że atakujący może załadować Twoją stronę do specjalnie przygotowanego iframe I ściągnąć atak XSS ., Jeśli jednak jesteś dedykowany, możesz obejść ten problem, prosząc użytkowników o potwierdzenie hasła lub tokenu 2FA przy każdym wrażliwym działaniu lub przekazując token CSRF przy każdym uwierzytelnionym żądaniu.

głównym problemem dla niektórych jest to, że korzystając z bezpłatnych publicznych repozytoriów na Githubie, Twoja strona i Kod źródłowy są dostępne dla każdego, kto chce je rozwidlić lub pobrać. Więc myślę, że problem tutaj jest źle umiejscowiony.

zawartość statyczna nie jest kodem źródłowym w tym sensie, że nie jest kompilowana ani przetwarzana jako skrypt przed podaniem użytkownikowi., Twój użytkownik otrzyma dokładnie tę samą statyczną kopię strony internetowej, jeśli uruchomi Robot internetowy wskazujący na Twoją stronę. Chociaż hosting kodu w repozytorium GitHub z pewnością ułatwia pobieranie kopii witryny, nie ujawnia niczego, co nie było jeszcze publiczne.

skalowanie, nieograniczone skalowanie

pomysły przedstawione w tym artykule nie ograniczają się do darmowego hostingu małych aplikacji.,

możesz zbudować warstwę front-end opartą na nowoczesnym frameworku JavaScript, podłączyć ją do dużej skali opartej na chmurze Backend-as-a-Service (Baas), takiej jak Firebase, i tworzyć złożone aplikacje bez martwienia się o serwery, czas pracy lub inne problemy związane z infrastrukturą.

robisz nową ekscytującą grę internetową?! Sprawdź GameSparks, i jesteś gotowy do pracy.

podsumowanie, spowiedź i linki

w tym artykule sprawiłem wrażenie, jakbym ręcznie opublikował moją aplikację Reactową nagh-pages. Nie zrobiłem czegoś takiego., Pracowałem nad masterI kiedy przyszedł czas na wdrożenie, uruchomiłemnpm run deploy, który uruchomił skrypt kompilacji i przesunął kompilację dogh-pages. Proszę zajrzeć do gałęzi master mojego repozytorium, aby zobaczyć jak to działa.,

Takeaways

plusy:

• natychmiastowe wdrożenie
• łatwa współpraca
• bezpieczne środowisko hostingowe

zastrzeżenia:

• brak dostępu do nagłówków HTTP
• łatwe pobieranie kopii witryny
• wymagana wiedza GitHub
• zależy od dostawców technologii

linki: