* РБК — новости

* *

Как настроить статический сайт, используя GitHub Pages и Cloudflare с вашим собственным доменным именем.

  1. Эти дни... Если вы хотите настроить веб-сайт, есть много разных опций, таких как Wordpress, Squarespace,...
  2. Многие гиды, которые я видел ...
  3. Причина, по которой вы должны использовать GitHub Pages и Cloudflare вместе, заключается в том, что ...
  4. Хватит болтать, давай начнем ...
  5. ВАЖНЫЙ ШАГ
  6. Теперь мы добавляем файлы и меняем некоторые настройки ...
  7. На мясо этого усилия ...
  8. Мы еще не закончили. Ну, почти...
  9. И это все ...

Эти дни...

Если вы хотите настроить веб-сайт, есть много разных опций, таких как Wordpress, Squarespace, Wix, Weebly и многие другие. Проблемы с этими «создателями веб-сайтов» состоят в том, что вам нужно зарегистрироваться и платить за функции большую часть времени, если вам нужна функциональность. Эти функции могут включать в себя: отправку форм, кэширование и даже оптимизаторы SEO. Не все это платные плагины, но часто они есть. И самое страшное ... объявления. Беда существования каждого, особенно когда вы не можете удалить их, если не заплатите. Вы хотите, чтобы ваш сайт был вашим! Создание собственного статического веб-сайта, такого как персональный, для демонстрации вашей работы - отличный способ открыть себя миру и показать им, что у вас есть!

Вы можете заплатить кому-то ...

Хотя большинство из вас, кто может прочитать это, находится в техническом сообществе и знает кое-что о веб-разработке, многие из вас могут этого не знать. Это совершенно нормально. Покажите им это руководство, если они не знают, как обслуживать ваш сайт, и не хотите создавать какой-нибудь сумасшедший бэкенд для статического сайта. Я знаю, я бы не хотел!

Многие гиды, которые я видел ...

Они рассказали мне о том, как обслуживать веб-сайт, но всегда есть подробности, пропущенные руководством, такие как: SSL-сертификаты, A-записи и CNAME-записи. Прежде чем понять все это, я бы почесал голову, чтобы найти ответы. Не с этим уроком. Я передаю вам все знания, которые я собрал в одном полном пакете.

Причина, по которой вы должны использовать GitHub Pages и Cloudflare вместе, заключается в том, что ...

Ну ... ОНИ ОБА ПОЛНОСТЬЮ БЕСПЛАТНЫ! Нет, серьезно. Вам не нужна какая-то необычная услуга веб-хостинга или покупка SSL-сертификатов. Эти два сервиса справляются со всеми основными задачами для вас с легкостью, включенной в пакет, который является БЕСПЛАТНЫМ. Кто не любит бесплатно? Сумасшедшие люди. Это кто.

Хватит болтать, давай начнем ...

Прежде всего, если у вас его еще нет, создайте учетную запись GitHub. Это быстро и супер просто. (И если вы студент, как и я, вы получаете много бесплатных вещей из пакета разработчика: Dev Pack). Затем, если вы еще этого не сделали, создайте новый репозиторий. Кнопка должна быть справа на зеленом фоне (на момент написания этой статьи). Ваш следующий экран должен выглядеть следующим образом, если он изменился:

ВАЖНЫЙ ШАГ

В качестве имени репозитория вам необходимо указать конкретное имя, так как именно так GitHub позволит нам изменить доменное имя позже. Имя репозитория, если вы используете это для личного сайта, будет: <USERNAME> .github.io , или просто любое простое имя репо подойдет для проекта. Так что мой - landonp1203.github.io, так как это мое имя пользователя. Если вы сделаете это неправильно, все это не будет работать, и вы будете чесать голову позже, если вы установите 1 вместо I. Простое исправление позже, но тройная проверка сейчас, чтобы вам не пришлось позже. Затем вы можете добавить описание, если хотите, а также README, но это выходит за рамки данного руководства. Затем нажмите «Создать репозиторий». БУМ! Первый шаг сделан!

Теперь мы добавляем файлы и меняем некоторые настройки ...

Надеемся, что до этого урока вы или кто-то другой создал свой сайт с помощью HTML / CSS / JS. Теперь возьмите эти файлы и загрузите их на GitHub. Опять же, это выходит за рамки данного руководства, и если вы не знаете, как это сделать, посмотрите на эту ссылку, чтобы помочь вам: Как загрузить файлы на GitHub , Далее, 1. мы собираемся создать новый файл с именем CNAME-файл. Файл CNAME этот , 2. Внутри файла CNAME мы собираемся написать имя нашего доменного имени. Мой landonpatmore.com так вот что я буду печатать. Затем вы нажмете «совершить новый файл», и он будет добавлен в ваш репозиторий.

Наконец, мы собираемся изменить некоторые настройки внутри репо, поэтому перейдите на вкладку « Настройки » в верхней части страницы. Затем прокрутите вниз, пока не увидите раздел 1. Страницы GitHub . Это очень важная часть. 2. В текстовом поле пользовательского домена введите свое доменное имя в точности так, как вы написали его в файле CNAME. Опять же, неспособность сделать это должным образом приведет к проблемам в дальнейшем. 3. Затем нажмите Сохранить .

Поскольку мой веб-сайт уже настроен, у меня есть сообщение о статусе, сообщающее, что мой сайт опубликован и все хорошо. Когда вы сделаете это в первый раз, вы получите предупреждение о том, что Github не может разрешить доменное имя или что-то в этом роде. Не волнуйтесь, потому что следующие шаги исправят это для нас!

На мясо этого усилия ...

В настоящее время мы закончили с GitHub, но в конце вернемся, чтобы убедиться, что GitHub видит все наши изменения. Следующее, что мы хотим сделать, это зайти на хост нашего домена, мой домен Domain.com и войти в систему. Затем нажмите на свой веб-сайт и перейдите в настройки DNS. Мы хотим перейти к настройкам, которые говорят «Nameservers» или «NS Records». Вот как Cloudflare будет обрабатывать наши настройки DNS для нас! Оказавшись на этой странице настроек, откройте новую вкладку и перейдите к Cloudflare.com , Зарегистрируйтесь, если вы еще этого не сделали, и пройдите все шаги, чтобы добавить свой сайт в Cloudflare. Это супер просто! Вы должны прийти к участию в настройке, где вам дадут «Cloudflare Nameservers». Скопируйте эти серверы имен по одному и добавьте их на соответствующий сервер имен. Должны быть Nameserver 1 и Nameserver 2. Мои, "paul.ns.cloudflare.com" и "rihana.ns.cloudflare.com" соответственно. (Да как певец В настоящее время мы закончили с GitHub, но в конце вернемся, чтобы убедиться, что GitHub видит все наши изменения ). Ваш, вероятно, будет другим, так что используйте их, а не мои.

Это позволит Cloudflare управлять вашими настройками DNS, а это именно то, что нам нужно, поскольку это позволит нам использовать HTTPS, который сегодня очень важен, даже если это веб-сайт, содержащий только изображения кошек. МЯУ! (Как мило эта кошка ???)

Теперь они говорят, что смена Nameserver вступит в силу через 24 часа , но, по моему опыту, для распространения требуется не более 10 минут, если все сделано правильно. Вы можете обновлять страницу Cloudflare до тех пор, пока она не подтвердит, что они контролируют ваши настройки DNS. Далее мы собираемся добавить некоторые записи DNS в Cloudflare. Нажмите кнопку DNS в верхней части страницы, и вы попадете в свои записи DNS.

Вы можете удалить свои другие записи, если таковые имеются, если они не используются для чего-либо важного. Мне просто нравятся чистые записи именно того, что мне нужно. Вы добавите 2 записи имени . Во-первых, имя будет вашим доменным именем в точности так, как вы его указали в файле CNAME, а IPv4-адрес, на который он указывает, будет 192.30.252.153 . Вторая запись будет иметь то же имя, за исключением того, что адрес IPv4 будет 192.30.252.154 . Эти IP-адреса указывают на серверы GitHub для обслуживания вашего сайта для внешнего мира. Теперь мы добавим запись CNAME, имя будет www, а псевдоним <USERNAME> .github.io . Кроме того, там, где это показывает облака под Статусом , щелкните по всем этим и сделайте их оранжевыми. Это позволяет вашему веб-сайту использовать CDN Cloudflare для ускорения и защиты вашего сайта с использованием их технологии. Все это говорит: «Эй, браузер, всякий раз, когда я набираю этот адрес, ты указываешь на серверы GitHub, которые будут искать и обслуживать этот сайт». Это так просто. Также какой-то тип волшебства. Если у вас есть репозиторий , который не называется <USERNAME> .github.io , это нормально, вы введете ту же информацию. Опять же, какое-то волшебство происходит в фоновом режиме, и Github просто решает это. (CNAME в вашем репо - это то, как GitHub знает, какое репо обслуживать). Опять же, они говорят, что для распространения может потребоваться до 24 часов , но, по моему опыту, это займет всего 10 минут. Если вы вернетесь к своему репозиторию GitHub и откроете страницу настроек, и через некоторое время вы обновитесь, у вас должен быть статус All Good!

Теперь вы можете ввести свое доменное имя, и оно будет указывать на ваш сайт! Как это круто?! Но ждать больше. Как?!

Мы еще не закончили. Ну, почти...

Мы не добавили HTTPS на наш сайт глупо! Как мы это сделаем, если мы не купили сертификат SSL, а GitHub не позволяет нам использовать HTTPS из их бэкэнда? Одно слово: Cloudflare. Это делает все это. Нажмите на Firewall в верхней части страницы и прокрутите вниз, пока не увидите Уровень безопасности . Измените это на Высокий , просто для дополнительной защиты от ботов и DDOS. Затем нажмите кнопку « Крипто» в верхней части страницы и внутри поля SSL, измените настройку с Выкл. На Полный , а не на «Полный (строгий)», так как это будет означать, что вам нужны ваши собственные сертификаты SSL и целый ряд других вещей. учебник не распространяется. Это та часть, которая на самом деле может занимать до 24 часов для распространения, поскольку им нужно настроить сертификаты и другие вещи. Это заняло около 20 часов, прежде чем я увидел статус с активным сертификатом . Так что просто наберитесь терпения, все получится!

Наконец, теперь мы собираемся настроить перенаправление страниц. Мы собираемся сделать это так, чтобы независимо от того, как пользователь вводит URL, они будут перенаправлены на HTTPS-версию вашего сайта, несмотря ни на что. Нажмите « Правила страницы» в верхней части страницы и нажмите « Добавить правило страницы» .

Вот список правил страницы в порядке:

Я В первом текстовом поле введите: https: // <URL> / . Затем в области настроек щелкните раскрывающийся список и выберите « Переадресация URL» и поле рядом с ним « 301 - Постоянное перенаправление» . Ниже введите https: // www. <URL> . Нажмите Сохранить и развернуть . Это должно выглядеть так:

II . В текстовом поле введите http: // www. <URL> / *. Затем в области настроек щелкните раскрывающийся список и выберите « Всегда использовать HTTPS» . Нажмите Сохранить и развернуть . Это должно выглядеть так:

III . В текстовом поле введите https: // <URL> / *. Затем в области настроек щелкните раскрывающийся список и выберите Уровень кэширования . Для следующего выпадающего списка выберите Cache Everything . Нажмите Сохранить и развернуть . Это должно выглядеть так:

И это все ...

Это так просто. То, что мы сделали, было:

  1. Настройка бесплатного хостинга нашего статического сайта с Github

Настройте Cloudflare для обработки наших настроек DNS

  1. Настройте Cloudlfare для отправки всего трафика через HTTPS, а также кэшируйте все наши файлы, чтобы конечный пользователь мог быстрее загружаться

Если у вас возникли какие-либо проблемы, ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, проверьте настройки DNS. Используйте сайт под названием DNS Checker что позволит вам проверить ваши записи DNS. Обязательно проверьте ваши Nameservers и IP-адреса!

Я знаю, что это был длинный урок о том, как это сделать, но я хотел убедиться, что никто не был так разочарован, как я, выполняя этот процесс в первый раз. Теперь, используя эти шаги, это полный ветер, и я надеюсь, что это также для вас! Поработайте с Cloudflare, так как они предлагают много классных вещей бесплатно! Если у вас есть какие-либо вопросы или что-то вообще, пожалуйста, не стесняйтесь оставить комментарий ниже!

Приятного дня и счастливого взлома!

Кто не любит бесплатно?
Как мило эта кошка ?
Как это круто?
Как?
Как мы это сделаем, если мы не купили сертификат SSL, а GitHub не позволяет нам использовать HTTPS из их бэкэнда?

Реклама

Популярные новости


Реклама

Календарь новостей

Реклама

Архив новостей

Реклама