996.icu — 955.holiday — используйте Github для размещения статических веб-сайтов.

внешний интерфейс

Статический веб-сайт (955.holiday), весь процесс от заявки на доменное имя до онлайн-релиза.

задний план

996.ICUКружок кодового земледелия стал популярным за одну ночь. Конечно, это стало темой нашего обеденного стола. Коллега сказал: Компании «с девяти до пяти» не редкость, и мы также можем создать аналогичный веб-сайт, чтобы представить некоторые позитивные компании.

тогда955.holidayпоявился.

Github (ищу звезду):Github.com/955Dholiday / ...

Как он шаг за шагом вышел в онлайн? Перейдем к делу:

Заявка на доменное имя

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

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

Для регистрации доменных имен рекомендуются два веб-сайта:

Внутренний поставщик услуг:Али Клауд

преимущество:Относительно дешевый и простой в записинедостаток:Требуется аутентификация по реальному имени

Иностранные поставщики услуг:GoDaddy

преимущество:Не требуется аутентификация по реальному имени, поддерживается Alipayнедостаток:высокая цена

Если у вас есть необходимость в регистрации, выберите Alibaba Cloud. Конечно, не все доменные имена могут быть зарегистрированы. Пожалуйста, проверьте, какие доменные имена могут быть зарегистрированы:Объявление Информации об управлении отраслью доменных имен Министерства промышленности и информационных технологий

Если необходимости в подшивке нет, а разница в цене невелика, выбирайте GoDaddy.

Создавать страницы на гитхабе

github pagesМы можем предоставить статический хостинг веб-сайтов для каждого из наших git-репозиториев.

Давайте создадим доступный статический веб-сайт:

Новый проект

Сначала нам нужно создать новый репозиторий для нашего сайта, например:hello-pages

Создать статический веб-сайт

Затем давайте создадим статический веб-сайт локально

mkdir hello-pages && cd hello-pages

новыйindex.html

<html>
  <head>
    <title>hello pages</title>
  </head>
  <body>
    hello pages
  </body>
</html>

Создайте Git Repo локально и загрузите на Github

$ echo "# hello-pages" >> README.md # 增加 readme 文件
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin git@github.com:<your-name>/hello-pages.git # 这里要修改为你自己的仓库地址
$ git push -u origin master

Посетите github, откройте репозиторий hello-pages и убедитесь, что наш проект был запущен.

открыть страницы гитхаба

Нажмите на страницу проекта github hello-pages.Setting, вниз, чтобы найтиGitHub Pages -> Sourceвыберитеmaster branch

обновление страницы, возвратGitHub PagesПоказывает, что релиз прошел успешно. Доступ к странице возможен в обычном режиме.

Вы можете просмотреть исходный код для этого этапа здесь

Привязать доменное имя

До сих пор нашhello-pagesК нему можно получить доступ в обычном режиме, но адрес доступа по-прежнему является доменным именем github.

Ниже мы дополнительно разрешаем доменное имя нашему сайту.

Настроить DNS

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

1. Адрес доступа — доменное имя верхнего уровня.

Например: example.com

новыйAЗапись, укажите запись на следующие четыре ips

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Для получения подробной информации см.:Setting up an apex domain

2. Адрес доступа — доменное имя второго уровня.

Например: www.example.com blog.example.com

новыйCNAMEзапись, укажите запись на<your-github-name>.github.io

Для получения подробной информации см.:Setting up a custom subdomain

3. Адрес доступа представляет собой доменное имя верхнего уровня и доменное имя второго уровня www.

Например, example.com и www.example.com могут быть доступны одновременно, но доменное имя второго уровня здесь может быть только www.example.com.

Этот метод требует настройки вышеуказанного1а также2

Для получения подробной информации см.:Setting up an apex domain and www subdomain

Добавить CNAME-файл

Добавить в репозиторий gitCNAMEфайл, содержимое является адресом доступа личного доменного имени.

Обратите внимание, что этот файл может содержать только один адрес.

Если DNS настроен как顶级域名а такжеwww 二级域名Можно получить доступ одновременно, нужно только заполнить CNAME顶级域名Вот и все.

изменитpushна гитхаб

Посмотреть эффект

Посетите адрес, который вы настроили, и страница уже должна быть открыта.

Существует задержка в разрешении DNS. Если его не удается открыть, это может занять некоторое время.

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

HTTPS

GitHub Pages поддерживает протоколы http и https, но не переходит автоматически.

Мы можем принудительно перейти на сайт https через конфигурацию.

Нажмите на страницу проекта github hello-pages.Setting, вниз, чтобы найтиGitHub Pagesчек об оплатеEnforce HTTPS

Пока можно изменитьHTML, УвеличиватьCSSПришло время украсить ваш сайт.

Вы можете просмотреть исходный код для этого этапа здесь

Создавайте и публикуйте автоматически

Сегодня большинство интерфейсных проектов основаны на фреймворках (таких какReact,VUE) построен.

Для этих элементов нам нужно пройтиbuildДля генерации браузер может разобратьHTML,CSS,JS.

Если каждый раз, когда проект меняется, нам нужно модифицировать исходный код, а затемbuild, а потомbuildрезультаты подталкиваются кgithub-pagesпроект. Это на самом деле довольно сложно.

Можем ли мы уменьшить эту бесстрашную нагрузку?

ответ да

Используйте ветку gh-pages

GitHub Pages позволяет размещать статические файлы в трех местах:

  1. главная ветвь
  2. В каталоге docs ветки master
  3. ветка gh-страниц

Мы можем поместить исходный код проекта вmasterпод веткой будетbuildрезультат вgh-pagesразветвляться каждый разbuildКогда закончите, обновитеgh-pagesветвь.

Если вышеуказанные операции по-прежнему выполняются вручную, это не снизит нагрузку.

Нам нужна помощь持续集成服务(Непрерывная интеграция, CI) для достижения дальнейшей автоматизации.

Автоматическое развертывание с Travis CI

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。

К пониманиюTravis CIВы можете обратиться к официальной документации или прочитать Ruan Yifeng.Учебное пособие Travis CI по службе непрерывной интеграции.

Всякий раз, когда мы отправляем код на github, Travis CI может автоматически собирать и обновлять результаты сборки в ветке gh-pages. только чтоTravis CIПредусмотрена и такая функция. Видеть:GitHub Pages Deployment

Далее мы начинаем

Создайте GitHub access_token

Нажмите на свою аватарку в правом верхнем углу ->Settings -> Developer settings -> Personal access tokens -> Generage new token

ЗаполнитьToken description

чек об оплатеrepoподтвердить создание

access_tokenСоздано успешно, временно сохраните его для последующего использования.

Настроить Travis CI

  • использоватьGithubлогин аккаунтаTravis CI

  • нажмите+

  • нажмитеSync account

  • Включите репозиторий проекта hello-pages.

  • нажмитеSetting

  • закрытиеBuild pushed pull requests

  • Environment VariablesДобавить элемент нижеnameдля ГИТ_РЕПОValueдля тех, кто только что подал заявкуaccess_token

Изменить элемент

Мы продолжаем модифицировать предыдущий проект hello-pages, здесьReactПример проекта

$ npm i create-react-app -g

# create-react-app 创建项目前，需要删除之前的文件
$ rm -rf index.html CNAME

$ create-react-app .

существуетpublicСоздайте то же самое ниже, что и раньшеCNAMEдокумент. цель до концаbuildкаталог содержитCNAMEдокумент.

новыйtravis.yml

language: node_js
node_js:
  - "10"
install: yarn

script: npm run build

deploy:
  provider: pages
  local_dir: ./build
  skip_cleanup: true
  github_token: $REPO_TOKEN
  keep_history: true
  on:
    branch: master

После того, как изменение завершено,commitи отправить на github.

Через несколько секунд вы увидите в Travis CI, что проект начал строиться. После успешной сборкиgh-pagesВетка была автоматически отправлена ​​на github.

Вернитесь на страницу проекта github hello-pages и нажмитеSetting, вниз, чтобы найтиGitHub Pages -> Sourceвыберитеgh-pages branch.

После успешного переключения вы можете получить к нему обычный доступ.

окончательный код

SEO

Github pagesХоть и хорошо, но всегда была головная боль, то есть сайт нельзя включить в Baidu. Говорят, что это из-за того, что Github заблокировал поисковый робот Baidu.

Если у вас есть потребности в поиске, вы можете рассмотреть возможность использованияcoding.net. Функции в основном такие же, как и у github, поэтому я не буду здесь вдаваться в подробности.

Оригинальная ссылка:blog.sjfkai.com/

Добро пожаловать на официальный аккаунт «Большого Front-End разработчика». Предоставьте вам больше передовых технологий и информации

Категории