Модернизация существующего веб-сайта Bootstrap с использованием CSS Next.js и Tailwind (8 частью)
Этот блог является частью серии, в которой I документируют восстановление веб-сайта, который опирается на HTML, CSS и Bootstrap в React.js, используя Frameworks Next.js для повышения производительности, снижения затрат и увеличения моего рабочего процесса для будущих изменений.
Готовый сайт (размещенный на страницах GitHub): https://wallisconsultance.co.uk Исходный код: https://github.com/james-wallis/wallisconsultancy.
Использование пользовательского домена с страницами GitHub
Настройка пользовательского домена для вашего сайта GitHub Pages — GitHub Docs
В моем предыдущем блоге я продемонстрировал, как запустить статический веб-сайт на страницах GitHub. Но он использовал доменное имя по умолчанию, специфичным для Github, так как не был очень профессиональным. Мы можем исправить это, сделав его доступным, используя свое собственное доменное имя выбора (Wallisconsultancy.co.uk в моем случае).
Давайте изменим страницы GitHub, чтобы использовать пользовательский домен. Это будет сделано на три этапа:
- Модифицировать
.travis.yml.yml.yml - Добавьте пользовательский домен на страницы GitHub
- Обновите DNS-настройки
Модифицировать .travis.yml.yml.
Сначала нам нужно изменить .travis.yml Файл, который мы создали в предыдущем, чтобы добавить fqdn поле.
fqdn Поле говорит Трэвису создать Cname Файл с нашим доменом в каждый раз, когда мы нажимаем на GH-Pages филиал. Если мы не будем продолжать создавать это, он будет удален на следующем толчке.
language: node_js
node_js:
- 12
cache:
directories:
- node_modules
script:
- npm run eslint
- npm run build
- npm run export
- touch out/.nojekyll
deploy:
provider: pages
skip_cleanup: true
github_token: $github_token
local_dir: out
fqdn: wallisconsultancy.co.uk # This instructs Travis to create a CNAME file with wallisconsultancy.co.uk as the contents on every deployment to the gh-pages branch
on:
branch: master
Добавьте пользовательский домен на страницы GitHub
Далее нам нужно сказать GitHub, который мы собираемся использовать пользовательский домен.
Сделать это:
- Перейдите к настройкам вашего репозитория GitHUB для проекта
- Прокрутите до раздела страниц GitHub
- Введите свой домен в пользовательской домене
Настройки страниц GitHub с пользовательским доменом
Ваш .gitub.io/Репозиторий Домен теперь будет перенаправлять на ваш пользовательский домен.
Тем не менее, сайт еще не будет доступен, так как нам нужно обновить настройки DNS для доменного имени.
Обновите настройки DNS, чтобы указать на страницы GitHub
Теперь страницы GitHub ожидают достижения через пользовательский домен и перенаправляют старый user.github.io/ к этому. Теперь нам нужно установить домен, чтобы он указывал на сервер GitHub, в котором проводится сайт.
Чтобы обновить настройки DNS, вам необходимо перейти к вашему поставщику DNS и выполните следующие действия: Примечание: я использую цифровой океан, поэтому все примеры используют их интерфейс
Создать Cname для www.yoursite.com это указывает на ваш .github.io адрес без подпункта.
Пример: Мои настройки записи CNAME на цифровом океане
По желанию, используя домен APEX, а не www.
Если вы хотите, чтобы ваш домен был yoursite.com а не www.yoursite.com. Вам нужно сделать дальнейший шаг.
Создать А Запись, чтобы указать на следующие IP-адреса ( Проверьте документы GitHub, чтобы убедиться, что они не изменились с момента написания этого поста .
Пример: Мои настройки записи на цифровом океане
Вот и все Вы успешно настроили свой веб-сайт для запуска на страницах GitHub, используя пользовательское доменное имя. Изменения DNS могут занять несколько минут, но вскоре ваш сайт будет готово к производству!
ПРИМЕЧАНИЕ. Если вы изменили свой код для выпуска подпункта GitHUB выше, теперь вы можете пробить этот код.
Округлять
Этот блог продемонстрировал, как настроить веб-сайт Next.js на страницах GitHub с пользовательским доменным именем.
Сайт консультаций Wallis теперь публикуется в производстве. Это отмечает конец серии сообщений в блоге, в которых я перестроил старый консультационный сайт Wallis Consultancy, который бежал с использованием Bootstrap в React.js, используя Next.js и, наконец, принимал его на страницах GitHub.
Модернизация существующего веб-сайта Bootstrap с использованием CSS Next.js и Tailwind (8 частью)
Оригинал: «https://dev.to/jameswallis/using-a-custom-domain-with-github-pages-1g1m»