Создание сайта на github.io с помощью Landing Pages Framework

19-01-2015Время чтения ~ 4 мин.Albireo Framework / CMS, Git. GitHub 22814

Сервис GitHub.com предлагает не только бесплатно размещать репозитории, но и позволяет создать отдельный сайт вида USER.github.io. Сайт, правда, будет статичным, то есть его придется делать на «голом» HTML, без использования какой-либо CMS. Такие сайты создаются в рамках GitHub Pages.

Landing Pages Framework позволяет создавать статичные сайты без особых усилий. Я расскажу, как можно создать сайт на гитхабе и использовать LPF для генерации html-файлов.

Создание сайта-репозитория на гитхабе

Для того, чтобы получить свой сайт, требуется создать репозиторий с названием USER.github.io, где USER — ваш логин на гитхабе. Например у меня это maxsite.github.io. Репозиторий лучше создавать полностью пустым (без readme, лицензии и т.п.) — это упростит его подключение к локальной копии. Пока мы просто создали репозиторий, но пока его не инициализируем.

Локальный сайт

Вы можете размещать сайт на localchost так, как вам будет удобнее. Главное, чтобы этот сайт был доступен на локальном сервере. Например у меня это адрес http://localhost/max/.

В каталоге сайта разместите index.html с простым содержимым, например

Привет, мир!

Убедитесь, что сайт работает на вашем localhost. Нам эти действия нужны только для того, чтобы корректно проинициализировать гитхабовский репозиторий. Также можно разместить файл readme.txt с описанием, как это обычно просит гитхаб.

Инициализация

Теперь в каталоге сайта инициализируем репозиторий, связываем его с гитхабом и отправляем файлы. Процедура стандартная для git'а:

git init
git add .
git commit -m "Init"
git remote add origin АДРЕС
git push -u origin master

АДРЕС — это адрес вашего github.io-репозитория.

Гитхаб попросит ввести логин и пароль от аккаунта. После этого можно зайти на страницу гитхаба, чтобы убедиться, что файлы загрузились. По адресу https://USER.github.io/ будет доступен ваш новый сайт. Файл index.html главный, поэтому мы должны увидеть «Привет, мир!».

Теперь работать с сайтом можно через git-репозиторий. Внесли изменений, закоммитили их, отправили на гитхаб.

Ставим Landing Pages Framework

Вначале нужно скачать последнюю версию LPF, предварительно согласившись с лицензией. LPF не требует инсталяции. Если вы раньше не работали с LPF, то можно ознакомиться с описанием на главной странице сайта.

LPF следует поставить в подкаталог каталога основного сайта. Например, каталог нашего сайта /max/, LPF тогда ставим в /max/lpf/. При этом статичный сайт будет доступен как http://localhost/max/, а динамичный LPF как http://localhost/max/lpf/.

Строго говоря, LPF можно поставить в любой каталог. Если вы уловите суть, то сможете самостоятельно поставить его куда угодно. Я же покажу именно на таком примере, поскольку чисто практически удобно иметь конечные html-страницы рядом с их исходными.

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

Здесь же можно сразу разместить каталоги images, css и другие, которые потребуются для сайта. В итоге получится примерно такая структура:

max/
	lpf/
		... здесь размещаем LPF
 
	css/
		style.css
 
	images/
		favicon.webp
 
	index.html
	readme.txt

Теперь, если перейти по адресу http://localhost/max/lpf/ вы должны увидеть приветствие LPF.

Кратко об LPF

Задача LPF — уничтожение ватников избавление от рутины. Кратенько это так:

• Все страницы размещаются в каталоге pages.
• Главная — это home.
• Основной текст в файле index.php. По сути это то, что размещается между BODY.
• В файле variables.php — настройки страницы.
• Файл css/style.css сам подключится в HEAD.
• В каталогe js/autoload кидаем js-файлы для автоподключения в HEAD.
• В js/lazy — js-файлы в конце BODY.

Вы можете разместить любой html-код в index.php, например:

<h1>Привет, мир!</h1>

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

Генерация статичного HTML-сайта в LPF

Теперь сделаем так, чтобы созданный html-код страницы автоматом сохранялся в основном каталоге сайта. Откроем variables.php главной страницы и пропишем:

$VAR['generate_static_page'] = 'd:/xampp/htdocs/max/index.html';
$VAR['generate_static_page_base_url'] = '';

Параметр generate_static_page задаёт имя результирующего файла. Я указал полный путь на компьютере. То есть страница home будет сохранена как index.html.

Параметр generate_static_page_base_url задаёт базовый адрес сайта. В нашем случае есть смысл указать не полный http-адрес, а относительный. Поэтому мы указываем пустую строчку.

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

Не забываем также скопировать css-файл в основной каталог, а также изображения и нужные js-файлы (если они используются).

Синхронизация с GitHub

Рабочий процесс теперь такой. По адресу http://localhost/max/lpf/ работает LPF, где мы создаём нужные страницы и генерируем html-файлы в основной каталог. После отладки отправляем изменения на гитхаб:

git add .
git commit -m "Обновление сайта"
git push

Можно исключить исходные LPF-файлы из отслеживания git'ом. Для этого создадим в основном сайте файл .gitignore с одной строчкой:

/lpf/**

Теперь git не будет отслеживать всё, что происходит в каталоге /lpf/.