Домашняя страничка на GitHub: база

2019-04-07

Попытаемся тут создать домашнюю страничку на github используя только технологии CSS и HTML

Первые и самые важные шаги на github были описаны ранее , там описана история создания простейшего сайта https://c649160.github.io/staticpage/ Тут же поговорим как сделать нечто более осмысленное, а главное полезное с точки зрения интернета в целом.

Самое важное тут сформулировать задачи, вопросы должна решать ваша домашняя страница? Что вы считаете важно рассказать или показать людям в интернете, которые будут заинтересованы вашей личностью, ведь это личная страничка.

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

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

Сделать это можно при помощи бесплатного хостинга статических ресурсов gitHub pages . Этот сервис бесплатно предоставляет домен 3 уровня вида:

erdmko.github.io

Где erdmko - любой набор букв не занятый другим именем пользователя сервиса. github - домен 2 уровня предоставляемый гитхабом. io домен 1 уровня tld, выделеный для британских территорий в индийском океане согласно википедии .

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

В моем случае это было erdmko.github.io, но нужно понимать, что выбора тут особо нет, выше описано что все доменные уровни строго определены.

Добавим простой HTML файл что бы убедиться в работоспособности хостинга.

Создадим новый файл в пустом репозитории

Содержимое самого HTML файла:

Важно, чтобы имя файла было именно index.html так как это имя используется для определения входной точки в проект.

Так же важно заметить, что теперь у нас в разметке есть ссылка на файл стилей, который тоже нужно добавить в репозиторий.

Нужно закоммитить файл index.html и добавить новый.

Так же можно заметить что когда в репозитории появились файлы у него появилась и enviroment это косвенный признак о том что данные уже выкладываются в сеть

Добавим еще один файл с названием которое должно совпадать с тем что мы указали ранее в index.html style.css с простым селектором по цвету

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

После коммита нового файла, можно проверить доступность исходного сайта в сети. Сайт должен быть доступен по адресу https://<ваш логин на github>.github.io

Так же важно заметить, что сайт сразу из коробки работает по шифрованному протоколу https это значит, что сайт будет больше цениться поисковиками и пользователями, так как будет считаться более безопасным.

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

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

Далее обсудим заголовочные теги страницы.