Бесплатный хостинг!

tsumbaluk.in.ua28 Июнь 2017

Github pages что это?

Github-pages это далеко не новый сервис и я как front-end developer пользуюсь им не один год. Но долей случая одна из моих коллег завела тему о создании небольшого одностраничника вроде портфолио или сайта визитки, и о том как уже имея какую то верстку представить её миру. Поэтому я решил осветить эту тему и поделиться своими знаниями и мыслями по этому поводу.

Где и кому может пригодиться сервис бесплатного хостинга от github? Так например джуну пытающемуся получить свою первую работу это идеальное решение поскольку предоставив хоть какие-нибудь наработки он уже будет впереди очень многих кандидатов. И к тому же на заре карьеры front-end девелопера нет смысла вникать что такое домен, хостинг, сервер и прочее (да и еще все это удовольствие не бесплатное), а лучше сосредоточить усилия на трех китах веба html, css, javaScript. Еще вариант(по крайней мере так было у меня) представьте вы взяли какой-то заказ на фрилансе и делаете прототипы или верстку будущего сайта клиента. Ну и естественно хочеться продемонстрировать результаты ваших трудов, с помощью сего чуда вы легко предоставите клиенту ссылку с результатами своих стараний. В общем вещь классная и полезная.

Как настроить Github pages

с начала нам понадобиться аккаунт на github там все просто, как и везде заполняем регистрационные формы и вуаля. Далее необходимо создать новый репозиторий подробно об этом я писал вот тут(Первый комит). Один важный момент название репозитория должно бить в формате "login".github.io где "login" логин вашего аккаунта у меня получилось вот так rodan888.github.io. Теперь когда репозиторий с нужным именем создан необходимо запушить сюда вашу верстку, после чего по ссылке которую ви найдете на скриншоте ниже будет доступно ваше творение. Github-pages

Ограничения в работе с ресурсом

  • Стоит отметить вы можете заливать только статический html
  • Базы данных, ajax запросы и прочие прелести здесь работать не будут
  • Не очень радужно дела обстоят с индексацией, в выдачу google увы вам не попасть
  • Нет возможности создать более одного домена на одном аккаунте

Как опубликовать несколько сайтов на Github pages?

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

  • Cоздать в вашем репозитории под папки каждая из которых будет корнем для сайта.
  • Git submodule позволяет внедрять в ваш проект другие репозитории как под папки. Они имеют собственную историю коммитов и могут изменяться независимо от основного репозитория.

В этой статье мы рассмотрим первый вариант так как он прост до безобразия и большинству подойдет именно такой подход. Итак, все что нужно сделать это организовать структуру корня репозитория, например назвав одну из деректорий portfolio, а другую blog мы сможем достучаться к ним по следующим ссылкам http://"login".github.io/portfolio ну и http://"login".github.io/blog соответственно. А файловая структура будет примерно следующей.
|--- portfolio
----- css
----- js
----- img
----- index.html
|---- blog
----- css
----- js
----- img
----- index.html
|--- landing-page
----- css
----- js
----- img
----- index.html

Также я рекомендую оформить README.md файл он как раз и будет отображать список всех проектов в вашем репозеторие у меня это выглядит вот так. Ниже для примера мой README.md

# [M2E](https://rodan888.github.io/m2e-landing/)
Main page. Landing

# [Kupi Shtory](https://rodan888.github.io/kupishtory-main/)
Main page. E-shop

# [Quick remont](https://rodan888.github.io/quick-remont/)
Main page. Business web page

# [it-24](https://rodan888.github.io/it-24/)
Main page. Business web page

# [10 News](https://rodan888.github.io/10-news/)
All pages. News portal

# [Erotic](https://rodan888.github.io/erotic-landing/)
All pages. Blog

Новое в блоге

e2e тестирование приложений. Используя Protractor
tsumbaluk.in.ua || 30.04.2017

e2e тестирование приложений. Используя Protractor

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно

Gulp инструмент для удобной и быстрой front-end разработки!
tsumbaluk.in.ua || 05.10.2016

Gulp инструмент для удобной и быстрой front-end разработки!

Как определить страну и город по IP адресу, javascript?
tsumbaluk.in.ua || 05.10.2016

Как определить страну и город по IP адресу, javascript?