Неограниченный масштаб и бесплатный веб-хостинг с GitHub Pages и Cloudflare

У меня есть секрет, который экономит моим клиентам кучу денег, обеспечивает безопасность их веб-сайтов и имеет встроенные резервные копии.

Секрет: я делаю их сайт статическим. Затем я храню и размещаю его на GitHub, а также использую Cloudflare для обслуживания через HTTPS и ускорения работы. Мои клиенты платят только за свое доменное имя, но получают гораздо больше, чем рассчитывали.

Почему статический контент?

Статические сайты удивительно быстры, так как не требуют времени обработки сервером. Кроме того, при фиксации базы кода статических ресурсов в репозитории git откат изменений просто становится вопросом возврата к предыдущей фиксации. Резервные копии — это git push , и вы, по сути, обслуживаете весь свой веб-сайт из кеша, а это означает, что вашему серверу почти никогда не придется снова обрабатывать запрос.

Создаете сложный пользовательский интерфейс?

С появлением интерфейсных фреймворков, таких как React и ему подобных, вы можете создавать волшебные возможности, используя только HTML/CSS и JavaScript. Однако вам придется отделить внутреннюю логику от внешней, но даже Ruby on Rails теперь поставляется с режимом API.

Всякий раз, когда я получаю контракт на создание веб-сайта, я думаю, достаточно ли статического сайта для удовлетворения потребностей моего клиента, и во многих случаях это так.

Вам интересно, какие варианты использования я имею в виду? Здорово! Давайте обсудим некоторые ситуации, когда вам может понадобиться статический контент, и объясним, как этот подход может сэкономить ваше время и время вашего клиента.

Веб-сайты с рекламными проспектами

Брошюрные веб-сайты предназначены для предоставления информации о бизнесе и не претерпевают существенных изменений на протяжении всей своей жизни. Динамическое приложение явно является излишним для таких сайтов, и, поскольку эти сайты годами не обслуживаются, получая мало обновлений, если они вообще есть, они обычно становятся легкой мишенью для хакеров, ну, в общем, взломать.

Статические HTML-шаблоны значительно дешевле, чем их аналоги CMS, и их легче настраивать в будущем. От разработчиков, которых просят обновить такие сайты, не требуются специальные знания о той или иной CMS. Как правило, я всегда делаю статические сайты для сайтов-брошюр.

Бонус: Малый бизнес любит не платить ежемесячную плату за хостинг. Конечно, хостинг не требует больших затрат, но клиентам просто не нужно ничего платить, кроме домена, и это здорово.

Одностраничные приложения

Вы хвастаетесь замечательным, классным новым приложением, основанным на современных интерфейсных фреймворках?

Ваше приложение уже в основном статично. Сделайте несколько дополнительных шагов, чтобы изолировать любую логику на стороне сервера в отдельное приложение и получить все преимущества от того, что ваше приложение полностью обслуживается из кеша Cloudflare.

Ваше приложение будет доступно в любое время.

Блоги

Это жесткая продажа. Трудно убедить людей, что статические сайты можно использовать для блогов, но почитайте меня — я не зашел слишком далеко.

Блоги — это не что иное, как контент, созданный с помощью шаблонов. Вам просто не нужно полноценное приложение, анализирующее каждый запрос и отображающее новую страницу. Статический сайт идеально подходит для этого варианта использования.

Возьмем Джекила. Вы даете ему шаблоны Liquid и контент Markdown, и он объединяет их вместе в статический веб-сайт. Обработка на лету не требуется, и ваш блог внезапно становится значительно быстрее.

Этот рабочий процесс особенно полезен, поскольку страницы GitHub поддерживают сборки Jekyll. Внезапно сообщения в блогах можно размещать с помощью запросов на включение, и весь ваш контент хранится в системе контроля версий. Пользователи, не являющиеся разработчиками, по-прежнему могут публиковать сообщения в Markdown, публикуя свои сообщения через Stackedit.

На самом деле, я использую Stackedit, чтобы написать этот пост прямо сейчас!

Кроме того, если вам нужны комментарии к вашим сообщениям в блоге, Disqus предоставляет вам мощную систему комментариев, вставляя фрагмент кода JavaScript.

Эта страница, которую вы читаете, также использует Disqus.

Страницы GitHub

GitHub Pages — это ответ GitHub на страницы проекта, который позволяет вам обслуживать любой статический веб-сайт прямо из вашего репозитория. Поскольку страницы GitHub поддерживают пользовательские домены, вы можете бесплатно разместить статический веб-сайт на страницах GitHub с развертыванием прямо из Git.

Развертывание на страницах GitHub.

Хватит болтовни, давайте посмотрим на это в действии!

Я пошел дальше и сделал одностраничное приложение React, которое извлекает и отображает текущий обменный курс пакистанской рупии из общедоступного API. Давайте развернем это на GitHub Pages.

Во-первых, давайте создадим новый репозиторий 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:

Важно отметить:

• Страницы GitHub обслуживают файл 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 ...

Во-вторых, давайте укажем CNAME для нашего поддомена на DNS GitHub по адресу USERNAME.github.io :

Внимание: НЕ используйте это для домена вершины! Добавление записи CNAME в корень вашего домена отключит ваши записи MX и TXT . Используйте это только для своего поддомена. Домены Apex обсуждаются позже.

На этом этапе наш веб-сайт должен работать на нашем собственном домене по HTTP:

Важно отметить:

• Домен *.github.io по умолчанию обслуживается через HTTPS.
• Наше пользовательское доменное имя обслуживается через небезопасный HTTP.
• НЕ используйте запись CNAME в своем домене вершины, если вы не хотите убить свои электронные письма.

Ограничения страниц GitHub:

• Размер файла репозитория не должен превышать 1 ГБ.
• Размер файла веб-сайта не должен превышать 1 ГБ.
• Ежемесячный лимит пропускной способности составляет 100 ГБ. Мы обойдем это позже.

Использование домена apex в качестве личного домена

Самый простой способ обойти это ограничение — использовать www в качестве поддомена и перенаправить весь HTTP-трафик с вершины на www . В моем примере я бы перенаправил gilani.me на www.gilani.me , который указывает на мой статический сайт, но я не люблю делать все по-простому.

Если вы действительно хотите использовать домен вершины, проверьте, позволяет ли ваш провайдер DNS устанавливать записи ANAME . Они находятся (упрощенно) на полпути между записями CNAME , поскольку они позволяют указывать на домены и записи A , поскольку они не аннулируют другие записи в той же зоне.

Нет ANAME ? Последний вариант — перейти на поставщика DNS, который поддерживает это: введите Cloudflare. Cloudflare обеспечивает выравнивание CNAME на доменах вершины, что эквивалентно записи ANAME . Лучше всего переключиться прямо сейчас, так как мы рассмотрим Cloudflare в следующем разделе.

TLDR : переключитесь на бесплатный DNS Cloudflare и установите CNAME в своем домене вершины. Они делают что-то особенное со своим CNAME , что заставляет его работать.

SSL и CloudFlare

Добро пожаловать в эпоху после Сноудена. Все наши худшие опасения по поводу санкционированного правительством слежения и взлома подтвердились, и мир изо всех сил пытается защитить данные в пути и в состоянии покоя.

Как современный веб-администратор, вы должны обеспечить как минимум SSL на своем веб-сайте без смешанного контента .

Дошло до того, что Google Chrome помечает простые веб-сайты HTTPS как небезопасные, а Google Search начинает более выгодно отдавать предпочтение веб-сайтам HTTPS в своем рейтинге. Позже мы обсудим еще больше стратегий обеспечения безопасности внешнего интерфейса, а пока рассмотрим только SSL.

К счастью, теперь у нас есть Let’s Encrypt.

Это некоммерческий и полностью автоматизированный центр сертификации (ЦС), который позволяет вам программно выпускать краткосрочные 90-дневные SSL-сертификаты для любых доменов, которыми вы управляете. Это легкий ветерок в использовании; это с открытым исходным кодом; и проект поддерживается множеством компаний, включая Mozilla и Electronic Frontier Foundation.

Использование Cloudflare с пользой

Cloudflare — это служба защиты DNS, CDN и DDoS.

Он кэширует ваш веб-сайт и обслуживает его для пользователей с географически близких серверов, что делает ваш веб-сайт быстрее. Дополнительным преимуществом является то, что вы не выходите за пределы пропускной способности GitHub в 100 ГБ, потому что даже если ваш веб-сайт станет безумно популярным, большинство запросов попадут в кеш и никогда не достигнут сервера.

Вдобавок к этому Cloudflare предлагает услугу под названием Universal SSL, где они выдают вам бесплатный SSL-сертификат от своих партнеров CA, поэтому вы получаете HTTPS бесплатно… навсегда.

Почему Cloudflare?

Я знаю, о чем вы думаете: Гилани, вы только что рассказали мне, какой классный Let’s Encrypt. Почему вы говорите о Cloudflare? Что ж, все сводится к простоте.

В качестве умственного упражнения представьте себе настройку нескольких кэшей Nginx и обратных прокси-серверов по всему миру, предоставление им всех действительных сертификатов SSL и обслуживание веб-страниц пользователей из их ближайших местоположений.

Это приводит к тому, что ваш веб-сайт обслуживается через SSL, даже если исходный сервер не имеет SSL-сертификата, хотя Cloudflare предоставляет вам специальные самозаверяющие сертификаты, которые вы можете поместить на свой исходный сервер для защиты соединения с серверами Cloudflare. Это то, что Cloudflare дает вам с бесплатным планом, и вам даже не нужно продлевать свой сертификат каждые 90 дней.

Как фрилансер, я получаю клиентов, которые хотят, чтобы сайт работал как можно быстрее. Они не понимают и не заботятся о проблемах безопасности, проблемах современной сети или шифровании во время передачи. Некоторым клиентам трудно понять идею доменных имен, и их раздражает, когда им приходится платить 15 долларов в год «только для того, чтобы мой сайт работал». Так что попробуйте объяснить им, почему они должны платить за кластер обратных прокси, защищающий их сайт, который работает на бесплатном хостинге.

Настройка Cloudflare SSL

Давайте снова запачкаем руки. Первое, что нужно сделать, переключиться на маршрутизацию всего вашего трафика через Cloudflare:

Затем в разделе Crypto установите для уровня SSL значение «Полный».

Принудительно «Автоматическая перезапись HTTPS», чтобы отключить предупреждения о смешанном содержимом.

На этом этапе наш веб-сайт будет работать как через HTTP, так и через HTTPS. Давайте настроим HTTPS для всего в нашем домене.

Все сделано. Наш веб-сайт всегда должен загружаться через HTTPS с зеленым рейтингом «Безопасно» в Chrome.

Заключительные слова и соображения безопасности

Есть несколько вещей, которые я не обсуждал выше, и я хотел бы воспользоваться моментом, чтобы прояснить некоторые моменты.

Проницательные среди вас укажут, что в этой настройке есть несколько вопиющих проблем с безопасностью, а именно отсутствие безопасных заголовков HTTP, таких как:

• Content-Security-Policy : загружает скрипты и активы из белого списка хостов и может запрещать встроенные js.
• X-Frame-Options : отключает загрузку вашего веб-сайта в iframe.

И ты прав. Страницы GitHub и даже Cloudflare не позволяют настраивать заголовки HTTP . Однако вы можете установить CSP с помощью meta HTML.

Просто вставьте это на свою веб-страницу:

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

Однако на данный момент нет практического способа установить заголовок X-Frame-Options на страницах GitHub, а это означает, что злоумышленник может загрузить вашу веб-страницу в специально созданный iframe и осуществить XSS-атаку. Однако, если вы посвящены, вы можете обойти эту проблему, попросив пользователей подтвердить свой пароль или токен 2FA при каждом конфиденциальном действии или передав токен CSRF при каждом аутентифицированном запросе.

Некоторых серьезно беспокоит то, что при использовании бесплатных общедоступных репозиториев на GitHub ваш веб-сайт и исходный код доступны всем, кто хочет их разветвить или загрузить. Так что я думаю, что беспокойство здесь неуместно.

Статическое содержимое не является исходным кодом в том смысле, что оно не компилируется и не обрабатывается как сценарий перед предоставлением пользователю. Ваш пользователь получит точно такую ​​же статическую копию веб-сайта, если он запустит поисковый робот, указывающий на ваш веб-сайт. Хотя размещение кода в репозитории GitHub, безусловно, упрощает загрузку копии вашего веб-сайта, он не раскрывает ничего, что еще не было общедоступным.

Масштабирование, неограниченное масштабирование

Идеи, представленные в этой статье, не ограничиваются бесплатным веб-хостингом небольших приложений.

Вы можете создать интерфейсный уровень на основе современной инфраструктуры JavaScript, подключить его к крупномасштабной облачной платформе Backend-as-a-Service (BaaS), такой как Firebase, и создавать сложные приложения, не беспокоясь о серверах, времени безотказной работы, или любой другой вопрос, связанный с инфраструктурой.

Делаем новую захватывающую веб-игру?! Проверьте GameSparks, и все готово.

Резюме, признание и ссылки

В этой статье я сделал так, как будто я вручную опубликовал свое приложение React на gh-pages . Я ничего подобного не делал. Я работал над master , и когда пришло время развертывания, я запустил npm run deploy , который запустил скрипт сборки и отправил сборку на gh-pages . Пожалуйста, посмотрите master ветку моего репозитория, чтобы увидеть, как это работает.

Выводы

Плюсы:

• Мгновенное развертывание
• Простое сотрудничество
• Безопасная среда хостинга

Предостережения:

• Нет доступа к заголовкам HTTP
• Легко скачать копию сайта
• Требуется знание GitHub
• Зависит от поставщиков технологий

Ссылки:

• Вы найдете исходный код моего приложения по адресу amingilani/price-check.
• Это приложение доступно по адресу pricecheck.gilani.me и должно быть доступно в течение неопределенного времени.