Flask за час. Часть 2: завершаем разработку и размещаем сайт на GitHub Pages


🐍🥤 Flask за час. Часть 2: завершаем разработку и размещаем сайт на GitHub Pages

Создаем разделы «Резюме», «Портфолио», «Блог», «Контакты», экспортируем статические страницы и заливаем сайт на хостинг.

🐍🥤 Flask за час. Часть 2: завершаем разработку и размещаем сайт на GitHub Pages

Третий этап

На этом этапе мы сделаем и включим в index.html шаблоны resume.html, counters.html, skills.html, interests.html, которые составляют секцию «Резюме» и portfolio.html – для, соответственно, раздела «Портфолио».

Для начала сохраните этот код в index.html:

Создайте шаблоны resume.html, counters.html, skills.html, interests.html. Фото автора для резюме поместите в static/img. Обновите страницу – раздел «Резюме» полностью готов:

Секция резюме состоит из 4 шаблонов

Секция резюме состоит из 4 шаблонов

Последнее, что мы сделаем на этом этапе – шаблон для секции «Портфолио». Код для шаблона возьмите здесь – portfolio.html. Не забудьте включить портфолио в index.html:

Первая версия портфолио готова – мы доработаем ее на следующем этапе:

Карточки проектов скоро будут открываться

Карточки проектов скоро будут открываться

Весь код и контент для третьего этапа есть здесь.

Четвертый этап

На заключительном этапе мы реализуем просмотр карточек проектов в портфолио, а затем сделаем секцию блога, контактную форму и страницу 404.

Карточки портфолио

Вся базовая информация о проектах (название и краткое описание) пока что находится прямо в шаблоне portfolio.html. Если добавлять туда еще и подробное описание проектов, объем шаблона быстро станет неприлично большим. Гораздо удобнее иметь отдельный Markdown-файл с подробным описанием каждого проекта: такие карточки проще редактировать и сортировать в нужном порядке.

Для просмотра детальной информации по каждому проекту в портфолио нужно:

  • добавить в директорию content вложенную папку portfolio;
  • сохранить в этой папке тестовые карточки проектов;
  • добавить в mysite.py новый маршрут;
  • сделать шаблон card.html.

Начнем с mysite.py. Добавьте туда новую переменную:

Внесите изменения в функцию представления – теперь она должна выглядеть так:

И добавьте маршрут к карточкам портфолио:

Осталось сделать шаблон для карточек card.html – возьмите код здесь и внесите изменения в шаблон portfolio.html – теперь в нем должен быть такой код . Контент для карточек – здесь .

Раздел портфолио готов

Раздел портфолио готов

Секция «Блог» и фильтрация по тегам

Как и в секции «Портфолио», в блоге статьи представлены в виде карточек. Загрузка содержимого статьи происходит без обновления страницы, для перехода между записями используется горизонтальный свайп.

Фильтрацию записей в блоге выполняет скрипт isotope.js. Сортировка проводится в соответствии с тегами, которые указываются в YAML-записей. Извлечь теги поможет этот фрагмент кода – его нужно вставить в функцию представления в файле mysite.py:

Множество tags = set() гарантирует уникальность тегов. Код для самого блога возьмите здесь – blog.html , а тестовые записи – здесь . Добавьте соответствующее включение в index.html:

Модуль FlatPages передает теги в шаблонизатор, откуда их получает скрипт isotope.js – теперь можно фильтровать контент блога без перезагрузки страницы:

Фильтрация по тегу Django

Фильтрация по тегу Django

Но записи по-прежнему рендерятся в тестовом шаблоне post.html и выглядят неказисто. Измените код шаблона на новый и добавьте в папку /static/img/portfolio фоновое изображение . Блоки кода пока что выделены только моноширинным шрифтом. Однако мы установили модуль Pygments, который определяет стили форматирования кода. Все они находятся здесь – .venv\Lib\site-packages\pygments\styles.

Для подсветки синтаксиса добавим в mysite.py маршрут к pigments :

Теперь блоки кода выделены:

Подсветка синтаксиса

Подсветка синтаксиса

Контактная форма

Для секции «Контакты» мы создадим отдельный шаблон contacts.html и включим его в index.html:

Наш сайт будет размещаться на хостинге GitHub Pages, который не поддерживает Flask (и вообще поддерживает только Jekyll с ограниченным набором плагинов). Поэтому разместить там можно только статическую копию сайта, которую сгенерирует модуль Frozen Flask. В статическом режиме, естественно, обработка формы работать не будет. Но возможность подключения внешнего обработчика к формам на статических сайтах существует. Мы воспользуемся услугами одного из таких сервисов – Formspree. Полученную после регистрации ссылку нужно вставить в код формы:

Обработку формы берет на себя внешний сервис

Обработку формы берет на себя внешний сервис

Теперь можно получать сообщения от посетителей сайта:

В платной версии есть переадресация после отправки

В платной версии есть переадресация после отправки

Посетитель увидит уведомление об отправке, а владелец сайта получит сообщение на емейл, указанный при регистрации. Formspree фильтрует спам. Другие подобные сервисы по обработке форм на статических сайтах – 99Inbound и KwesForms .

Страница 404

Осталось создать функцию представления и шаблон для страницы ошибки 404. Сохраните этот код в 404.html и добавьте обработку ошибки 404 в mysite.py:

Примечание: Frozen Flask не станет экспортировать страницу 404, она будет работать только в «живой» версии Flask-приложения на сервере. На GitHub Pages кастомную страницу 404 придется создать вручную, мы сделаем это чуть позже.

Экспорт статической версии сайта

Когда работа над приложением и контентом окончена, нужно изменить значение site_url в settings.txt на название реального хоста, после чего можно приступать к экспорту статических страниц:

В ходе выполнения этой команды в корневой директории проекта будет создана папка build, содержащая «замороженную», статическую копию сайта. Чтобы проверить, не сломалось ли что во время экспорта, нужно запустить встроенный http-сервер из папки build:

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

Деплой на GitHub Pages

По правилам GitHub Pages, на одном аккаунте можно разместить один сайт username.github.io и сколько угодно сайтов username.github.io/site. После создания репозитория для сайта нужно найти пункт Pages в меню Code and automation и выбрать там branch/main и root:

Настройки репозитория для сайта

Настройки репозитория для сайта

Нюансы GitHub Pages

Если сайт будет размещаться на username.github.io, в коде ничего менять не надо. В случае размещения сайта в проектной директории username.github.io/site нужно добавить название папки ко всем ссылкам на статические файлы. То есть вместо таких привычных ссылок:

должны быть такие:

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

Кастомная страница для GitHub Pages

Чтобы GitHub Pages показывал кастомную страницу ошибки 404 вместо стандартной, достаточно загрузить готовый файл 404.html в корневую директорию репозитория. Переадресацию хостинг обеспечит сам.

Подведем итоги

Простота, гибкость, наличие огромного количества расширений и удобный шаблонизатор – главные преимущества Flask. При работе над проектом модуль FlatPages избавил нас и от необходимости подключения базы данных, и от написания скрипта для конвертации Markdown-файлов в html. Модуль Frozen Flask обеспечил автоматический экспорт статической копии сайта без ущерба для функциональности. Реализация этих операций на каком-либо другом фреймворке потребовала бы куда больше кода и усилий. Напоминаем, что весь код проекта находится здесь , а готовый сайт доступен на GitHub Pages.


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *