Landing page github: landing-page · GitHub Topics · GitHub

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

Сервис 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.png
 
	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, например:

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

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

Генерация статичного 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/.

---

Создание сайтов (Украина) →

---

LESS-компиляция через Node. js и Grunt

Как выложить свой проект на GitHub.com

целевая страница · Темы GitHub · GitHub

Здесь 5690 общедоступных репозиториев соответствует этой теме…

муравьиный дизайн / муравей-дизайн-посадка

Звезда 5.1k

причина / Организатор

Спонсор Звезда 4.1k

крупа / открыть-реагировать-шаблон

Звезда 2,4к

mdbootstrap / adminlte-laravel

Звезда 1,8к

крупа / шаблон целевой страницы попутного ветра

Звезда 1,7к

данки11 / реагировать Saas-шаблон

Звезда 1,5к

StartBootstrap / startbootstrap-целевая страница

Спонсор Звезда 1,4к

флексдинеш / dev-целевая страница

Звезда 1,2к

мескон / Муксимукс

Звезда 1,1к

иксартц / Next-JS-Landing-Page-Starter-Template

Звезда 934

попутный ветер / Целевая страница

Звезда 884

Иссаафалькаттан / React-Landing-Page-Шаблон

Звезда 748

LiveDuo / раскладывать

Звезда 702

Эма Суриано / Гэтсби-стартер-помощник

Звезда 529

сандоче / Шаблон целевой страницы мобильного приложения

Звезда 458

Блазити / следующий-saas-стартер

Звезда 447

СтефМа / Хьюго-Фреш

Спонсор Звезда 440

виджет / астровинд

Звезда 373

ХвостСетки / попутный ветер-UI-компоненты

Звезда 369

обычный / халява

Звезда 333

Улучшить эту страницу

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

Курировать эту тему

Добавьте эту тему в свой репозиторий

Чтобы связать ваш репозиторий с целевая страница тему, перейдите на целевую страницу репозитория и выберите «управление темами».

Учить больше

целевых страниц · Темы GitHub · GitHub

Здесь 91 публичный репозиторий соответствует этой теме…

муравьиный дизайн / муравей-дизайн-посадка

Звезда 5.1k

BuilderIO / строитель

Звезда 4,2к

иксартц / Next-JS-Landing-Page-Starter-Template

Звезда 934

Квайбхав01 / Landing-Page-Animation

Звезда 50

геворгмакарян / предварительный просмотр

Звезда 39

макссайт / альбирео

Звезда 22

фьерби / Целевая страница-html-шаблон начальной загрузки

Звезда 16

Алитахир4024 / Лимерик

Звезда 12

КиранАминПанджвани / Work-Flash

Звезда 12

ронилауккаринен / современный-html5-шаблон

Спонсор Звезда 8

полиэтиленовая пленка / целевая страница

Звезда 8

аркфизз / игровой автомат

Звезда 7

Федиленд / www.

fediland.github.io Звезда 6

3MetasOS / Угловая посадка

Звезда 6

ИндраМахаяна / целевая страница-начальная загрузка

Звезда 5

анкерапп / anker-приложение

Звезда 4

kathirr007 / Электронная почта-рабочий процесс-Dev

Звезда 4

лилполимат / целевые страницы

Звезда 3

девназир / Майнан

Звезда 3

ламорбидамакхина / безопасные посадки

Звезда 3

Улучшить эту страницу

Добавьте описание, изображение и ссылки на целевые страницы страницу темы, чтобы разработчикам было легче узнать о ней.