-
Notifications
You must be signed in to change notification settings - Fork 14
[Гайд]Создание личной страницы на AngularJS из шаблона
Переходим на страницу репозитория с шаблоном личной страницы. Далее создаем копию (форк) репозитория в свой аккаунт Github. Для этого нажимаем на кнопку "Fork" вверху страницы:
После создания форка Github редиректнет вас на страницу с созданным репозиторием:
Переходим в настройки ранее созданного репозитория, нажав на кнопку "Settings":
На странице настроек убеждаемся, что выбрана вкладка "Options":
Здесь мы можем предварительно поменять название репозитория. Например, если назвать репозиторий в формате username.github.io
, где username
- имя вашего аккаунта на Github, личная страница после публикации будет размещена по короткому адресу https://username.github.io
. Во всех остальных случаях страница будет размещена по адресу https://username.github.io/repository
, где repository
- имя, которое вы дадите репозиторию. Например, сменим название репозитория на pupkin-page. Страница будет размещена по адресу https://design2020.github.io/pupkin-page
.
После этого вернемся снова в настройки, на вкладку Options и пролистаем страницу до раздела "Github Pages". Чтобы страница была размещена, необходимо выбрать источник. Т.к. данный проект на AngularJS представляет собой простое веб приложение, состоящее из файлов html, css и js и имеющее в корне файл index.html, для его размещения достаточно просто выбрать текущую единственную ветку репозитория - master
, которая и содержит все необходимые файлы:
Вверху появится сообщение о том, что источник страницы сохранен:
Вернемся на главную страницу репозитория и увидим, что напротив последнего коммита появилась зеленая галочка, которая информирует о том, что сервис GitHub Pages успешно собрал и разместил файлы из нашего репозитория:
Страница теперь доступна по адресу https://design2020.github.io/pupkin-page
Редактировать файлы в репозитории можно прямо в браузере. Давайте отредактируем html файлы, чтобы изменить в них статический текст.
Для начала отредактируем файл index.html
и изменим заголовок, который отображается в тулбаре страницы. Кликаем на файл index.html
и нажимаем на кнопку редактирования:
На вкладке "Edit" в редакторе меняем текст внутри тега <title>
(для смены заголовка страницы в браузере) и содержимое внутри тегов <h1 flex md-truncate><b></b></h1>
(для смены заголовка, отображаемого в тулбаре) на свои. Затем можно просмотреть изменения на вкладке "Preview changes":
Чтобы сохранить изменения, нажимаем на кнопку "Commit changes":
После каждого сохранения изменений, Github заново публикует нашу страницу:
Через некоторое время изменения отразились на самой странице:
Аналогично отредактируем текст и ссылку в разделе "О сайте". Для этого отредактируем файл app/about/about.template.html
: