Файловая структура flask-приложения для генерации статичных html-страниц

Перед тем как писать код, генерирующий статичные html-страницы, необходимо перестроить файловую структуру проекта. Все файлы и папки, которые будут выгружаться на удаленный сервер, следует разместить в одном общем каталоге. Здесь, помимо готовых страниц, будут каталоги для изображений, стилей, скриптов, шрифтов (возможно стили и скрипты правильней было бы включать в тело html-файлов при их создании, так как это уменьшает количество обращений к серверу).

В html-шаблонах самого flask-приложения придется поменять адресацию соответственно переместившимся каталогам.

Пусть проект имеет файловую структуру как на скрине ниже слева.

Некоторых файлов и папок у вас может не быть. Например, jquery*, fonts, service.

Разместим весь статичный сайт в каталоге static и начнем с наведения здесь порядка.

Переместим файлы плагина jquery в каталог edit-scripts, так как эти файлы нужны только для подсветки тегов в поле для редактирования статьи.

При этом в шаблоне create.html надо поменять адрес в строках подключения плагина:

<link href="/edit-scripts/jquery.highlight-within-textarea.css" rel="stylesheet">
<script src="/edit-scripts/jquery.highlight-within-textarea.js"></script>

В каталоге static создадим подкаталоги styles и scripts и перенесем туда соответственно файлы style.css и script.js.

В шаблоне base.html поменяем строки:

<link rel="stylesheet" href="/static/style.css">
...
<script src="/static/script.js"></script>

на

<link rel="stylesheet" href="/styles/style.css">
...
<script src="/scripts/script.js"></script>

В app.py добавим функции, перенаправляющие в нужные нам каталоги:

@app.route('/styles/<style>')
def load_css(style):
    return send_from_directory('static/styles', style)


@app.route('/fonts/<path:font>')
def load_font(font):
    return send_from_directory('static/fonts', font)


@app.route('/scripts/<script>')
def load_js(script):
    return send_from_directory('static/scripts', script)

Когда сайт окажется на удаленном сервере, никакой папки static там не будет. Скрипты и стили будут находиться в корне каталога сайта. Поэтому в файлах HTML ссылки на них должны соответствовать файловой структуре статичного варианта сайта, а не flask-приложения.

Обратите внимание, как в style.css вы ссылаетесь на шрифты (если делаете это). В нашем случае адресация должна быть абсолютной. Пример:

@font-face {
  font-family: Roboto; src: url('/fonts/Roboto-Regular.ttf');
}

Или с поднятием на уровень выше:

@font-face {
  font-family: Roboto; src: url('../fonts/Roboto-Regular.ttf');
}

Переместим каталог images в static. Внутри images создадим подкаталог logo. В него перенесем файлы фавикона и логотипа. Изменим адресацию в base.html:

<link rel="shortcut icon" href="/images/logo/favicon.ico">
...
<img src="/images/logo/logo.png">

(в нашем шаблоне ссылка на логотип встречается два раза)

Файлы из каталога service следует переместить непосредственно в static (без создания подкаталога), сам каталог удалить. В app.py в теле функции service_files в вызове send_from_directory() поменять 'service' на 'static'.