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

Создаем разделы «Резюме», «Портфолио», «Блог», «Контакты», экспортируем статические страницы и заливаем сайт на хостинг.
🐍🥤 Flask за час. Часть 2: завершаем разработку и размещаем сайт на GitHub Pages

Третий этап

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

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

        {% extends "base.html" %}
{% block content %}
{% block header %}
{% include "header.html" %}
{% endblock %}
{% block resume %}
{% include "resume.html" %}
{% endblock %}
{% block counters %}
{% include "counters.html" %}
{% endblock %}
{% block skills %}
{% include "skills.html" %}
{% endblock %} 
{% block interests %}
{% include "interests.html" %}
{% endblock %}
{% endblock %}

    

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

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

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

        {% block portfolio %}
{% include "portfolio.html" %}
{% endblock %}

    

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

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

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

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

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

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека питониста»

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

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

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

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

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

        PORT_DIR = 'portfolio'
    

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

        @app.route("/")
def index():
    posts = [p for p in flatpages if p.path.startswith(POST_DIR)]
    posts.sort(key=lambda item: item['date'], reverse=True)
    cards = [p for p in flatpages if p.path.startswith(PORT_DIR)]
    cards.sort(key=lambda item: item['title'])    
    with open('settings.txt', encoding='utf8') as config:
        data = config.read()
        settings = json.loads(data)
    return render_template('index.html', posts=posts, cards=cards, bigheader=True, **settings)

    

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

        @app.route('/portfolio/<name>/')
def card(name):
	path = '{}/{}'.format(PORT_DIR, name)
	card = flatpages.get_or_404(path)
	return render_template('card.html', card=card)

    

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

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

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

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

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

        @app.route("/")
def index():
    posts = [p for p in flatpages if p.path.startswith(POST_DIR)]
    posts.sort(key=lambda item: item['date'], reverse=True)
    cards = [p for p in flatpages if p.path.startswith(PORT_DIR)]
    cards.sort(key=lambda item: item['title'])    
    with open('settings.txt', encoding='utf8') as config:
        data = config.read()
        settings = json.loads(data)
    tags = set()
    for p in flatpages:
        t = p.meta.get('tag')
        if t:
            tags.add(t.lower())
    return render_template('index.html', posts=posts, cards=cards, bigheader=True, **settings, tags=tags)

    

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

        {% block blog %}
{% include "blog.html" %}
{% endblock %}

    

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

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

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

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

        @app.route('/pygments.css')
def pygments_css():
	return pygments_style_defs('monokai'), 200, {'Content-Type': 'text/css'}  
И добавим ссылку на стиль в шаблон base.html:
<link rel="stylesheet" href="{{ url_for('pygments_css') }}">

    

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

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

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

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

        {% block contacts %}
{% include "contacts.html" %}
{% endblock %}

    

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

        <form action="https://formspree.io/f/mayvolep"  method="post" role="form" class="eform mt-4">
    
Обработку формы берет на себя внешний сервис
Обработку формы берет на себя внешний сервис

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

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

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

Страница 404

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

        @app.errorhandler(404)
def page_not_found(e):
	return render_template('404.html'), 404

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

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

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

        python mysite.py build
    

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

        python -m http.server
    

Если все в порядке, содержимое папки 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 нужно добавить название папки ко всем ссылкам на статические файлы. То есть вместо таких привычных ссылок:

        <link href=" /static/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href=" /static/assets/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href=" /static/assets/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href=" /static/assets/glightbox/css/glightbox.min.css" rel="stylesheet">
...
<script src=" /static/assets/swiper/swiper-bundle.min.js"></script>
<script src=" /static/assets/waypoints/noframework.waypoints.js"></script>
<script src=" /static/js/main.js"></script>

    

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

        <link href="/flask_site/static/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/flask_site/static/assets/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="/flask_site/static/assets/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="/flask_site/static/assets/glightbox/css/glightbox.min.css" rel="stylesheet">
...
<script src="/flask_site/static/assets/swiper/swiper-bundle.min.js"></script>
<script src="/flask_site/static/assets/waypoints/noframework.waypoints.js"></script>
<script src="/flask_site/static/js/main.js"></script>

    

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

        <a href="posts/login_in_django/"
<a href="portfolio/java_go/"

    

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

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

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

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

***

Материалы по теме

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
DevOps
от 350000 RUB
C# Developer
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ