Рубрики
Без рубрики

Создайте статический блог, используя колбу Python

Зачем колбу? Я хотел быстро запустить блог с Python самым простым способом … Tagged с Python, WebDev.

Я хотел быстро запустить блог с Python самым простым способом, который я мог бы, не используя какие -либо обычные инструменты, такие как WordPress of Blogger. После некоторого исследования я наткнулся flask_flatpages и flask_frozen и настроен на работу.

flask_flatpages Позволяет нам написать наши сообщения в блоге в .md -файлах, позволяя нам сосредоточиться на контенте, а не на тегах HTML, в то время как flask_frozen «Flattens» наш веб -сайт в статический .html Файлы, которые мы можем загрузить на любой хост без и хлопот. Поскольку мы используем GIT для обновления нашего репозитория, добавление нового сообщения в блоге так же просто, как и записать пост в новом .md Файл, замораживание приложения и обновление репозитория.

Намерение этой статьи состоит в том, чтобы охватить следующее:

  • Настройка приложения Flask
  • Использование Flask Flatpages для генерации ваших сообщений в блоге
  • Использование flask_frozen для генерации статических HTML -файлов
  • Хостинг на github.io
  • Развертывание с использованием git
  • Настройка пользовательского домена
  • Регистрация сайта с помощью Google Analytics
  • Резюме

Как всегда я начинаю с настройки новой виртуальной среды для своего проекта

cd projects
mkdir blog
cd blog
virtualenv -p python3 venv
source venv/bin/activate

Затем установил зависимости, которые я знаю, мне понадобится использование пип установить

pip install flask flask_flatpages flask_frozen

Вот и все. Теперь у нас есть все, что нам нужно, чтобы начать.

Теперь в новом файле app.py Нам нужен код коренного колбы. Мой немного отличается от того, что на руководстве по QuickStart Flask, но я объясню, почему.

from flask import Flask, render_template, url_for
from flask_flatpages import FlatPages
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'


if __name__ == "__main__":
    app.run(debug=True)

Если __name__: Оператор должен позволить нам легко запустить сервер разработки из консоли, используя команду Python app.py Анкет Это не обязательно, но это просто облегчает жизнь. И поскольку мы собираемся генерировать статический сайт, используя это приложение Flask, нам не нужно беспокоиться о том, чтобы отладка была установлена в True, так как мы не будем подчиняться приложению Flask It Self.

Таким образом, чтобы проверить, что это работает, просто запустите сервер разработки с Python run.py и откройте URL, который дается нам в консоли, что -то вроде http://127.0.0.1:5000/ . Мы должны увидеть пустую веб -страницу со словами «Привет, мир!» наверху. Если мы это сделаем, все сработало, и у нас есть приложение для рабочей колбы. Но это еще мало что делает, так что давайте доберемся до мясистых кусочков.

Написание сообщений будет намного проще, если мы напишем каждое сообщение в блоге в .md -файл. Работа Флэста плоские страницы это взять эти .md Файлы и, по сути, скажите Flask, чтобы обслуживать их в браузере как .html Анкет

Чтобы начать, нам нужно сказать flask_flatpages Чтобы найти файлы с расширением .md . По умолчанию это будет искать их в /pages/ каталог. Мы в порядке с этим, поэтому мы оставим это как есть. Однако по умолчанию он будет искать .html файлы вместо .md Анкет Итак, давайте добавим некоторую конфигурацию и создаем экземпляр Flatpages () Класс, проходя в нашем приложение пример. (Также не забудьте импортировать плоские страницы).

from flask import Flask, render_template, url_for
from flask_flatpages import FlatPages
from datetime import datetime

app = Flask(__name__)
app.config['FLATPAGES_EXTENSION'] = '.md'

pages = FlatPages(app)

Чтобы сохранить простой, мы удалим маршрут в нашем приложении Flask и добавим свой собственный. Позже мы добавим еще один маршрут, чтобы послужить домашней страницей, но сейчас мы просто хотим иметь дело с нашими сообщениями в блоге. Мы делаем это, заменив маршрут, который у нас уже есть на следующее:

@app.route('/.html')
def page(path):
    page = pages.get_or_404(path)
    return render_template('page.html', page=page)

Этот маршрут ищет файл в нашем Страницы/ каталог и, если он существует, служит в нашем браузере как .html Анкет Если его не существует, это вернет ошибку 404. Так, например, если мы попытаемся следовать http://127.0.0.1:5000/blogpost.html , маршрут будет искать файл с именем blogpost.md В каталоге страниц.

Это полезно, потому что это означает, что мы можем просто поместить все наши сообщения в блоге в Страницы/ Directory и наше приложение Flask смогут обслуживать их как и когда нам нужно, без необходимости явно добавить все отдельные URL -адреса в наше приложение.

Теперь, чтобы увидеть содержание наших страниц, нам нужно настроить пару файлов HTML. Любой, кто использовал колбу для создания веб -приложения раньше, будет знать, что мы делаем это с помощью шаблонов. Итак, давайте сделаем новый каталог под названием Шаблоны и добавить шаблоны.html Анкет Этот шаблон будет определять, как выглядит весь веб -сайт, наряду с его сопровождающим файлом .css, но настройка является совершенно другим руководством. Все, что нам нужно знать сейчас, это то, что в нашем шаблоны.html Файл, который мы хотим показать контенту сообщения в блоге, мы должны просто добавить:

    {% block content %}
    {% endblock %}

После этого это так же просто, как создание еще одного HTML -файла, который будет содержать только содержание нашего блога. Мы назовем это page.html и это будет содержать следующее:

    {% extends "template.html" %}
    {% block content %}
        
{{ page.title }}

        
{{ page.html|safe }}

        {{ page.author }} {{ page.date }}
    {% endblock %}

Биты кода в кудрявых кронштейнах будут заменены метаданными в верхней части наших файлов .md благодаря Jinja (двигатель, используемый Flask). Мы можем захватить эти переменные, потому что мы передали нашу страницу в шаблон в нашем маршруте ранее с Page = Page Анкет Мы определяем наши мета -переменные в верхней части нашего .md Файл очень легко, как это (не забывая оставить разрыв в 2 строки между мета и содержание)

    title: Post title goes here
    date: 19 Jun 20
    author: Me! :)
    description: This is a summary of the post


    # This is the start of my content!

Надеюсь, это должно быть!

Все, что нам не хватает сейчас, это домашняя страница, которая содержит список наших сообщений в блоге. Мы захотим отобразить эти посты в обратном порядке по дате, чтобы первым увидеть самое последнее. Мы делаем это, используя функцию лямбды, которая может быть довольно сложно понять, поэтому вот Ссылка на то, как это работает Анкет Но все, что нам нужно знать сейчас, это то, что он работает! При этом давайте добавим новый маршрут в приложение.

    @app.route('/')
    def index():
        posts = [p for p in pages if "date" in p.meta]
        sorted_pages=sorted(posts, reverse=True, key=lambda page: datetime.strptime(page.meta["date"], "%d %b %y"))
        return render_template('bloghome.html', pages=sorted_pages)

Измените « %d %b %y» Чтобы отразить ваш предпочтительный способ написания даты в метаданах в своем блоге. Более подробную информацию об этом форматировании можно найти Здесь Анкет

Нам нужен bloghome.html В нашей папке шаблонов сейчас, которую мы можем использовать для отображения нашего списка записей в блоге. В этом файле мы используем для цикла для итерации над каждой из наших страниц, как это:

    {% extends "template.html" %}
    {% block content %}
        {% for page in pages %}
        
{{ page.title }}

        
{{ page.description }}

        
{{ page.date }}

        

        {% endfor %}
    {% endblock %}

Просто как тот. Теперь вы должны иметь возможность перемещаться со своей домашней страницы в блоге на посты в блоге. Если вы хотите добавить ссылку обратно на домашнюю страницу, убедитесь, что вы добавили ее в Шаблон.html Так что это появляется на всех ваших страницах.

Using flask_frozen to generate static html files

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

    from flask_frozen import Freezer
    from flask import url_for
    from app import app, pages


    app.config['FREEZER_DESTINATION_IGNORE'] = ['.git*', 'CNAME']
    freezer = Freezer(app)

    @freezer.register_generator
    def pagelist():
        for page in pages:
            print(f"making page for {page.path}")
            yield url_for('page', path=page.path)

    if __name__ == "__main__":
        freezer.freeze()

Обратите внимание на конфигурацию приложения здесь. На этом этапе нам на самом деле не нужна эта линия, но она пригодится позже, когда мы хотим добавить больше постов и подтолкнуть их к нашему репозитории GitHub. Всякий раз, когда мы по умолчанию, созданные файлы будут записаны в новый каталог под названием /build/ Анкет При этом все в папке сборки будет удалено первым. CNAME – это файл, необходимый позже для нашего пользовательского URL, и .git* позволяет нам использовать это в качестве нашего происхождения. Эта конфигурация просто говорит flask_frozen игнорировать эти файлы и не удалять их.

Все, что нужно сделать сейчас, это запустить freeze.py в терминале с:

    python freeze.py

Простой! Теперь мы должны иметь все наши необходимые файлы в /build/ каталог.

Важно отметить, что если вы откроете недавно созданные файлы в браузере, ссылки обратно на корень не будут работать должным образом. Но это потому, что они делают именно это, ссылаясь на / Анкет Как только эти файлы загружаются в корневую папку вашего хоста (я использую github.io ), ссылки должны работать корректно.

Это очень просто. Если у вас нет учетной записи GitHub, создайте одну, и сделайте новый репозиторий. Назовите свой репозиторий следующим образом:

    .github.io

Убедитесь, что вы не включаете Readme.md . Мы хотим, чтобы наша веб -страница загрузилась в первую очередь вместо этого.

Вот и все! Больше нечего сказать.

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

cd 
git init
git remote add origin 
git add .
git commit -m "First commit"
git push origin master

Если все прошло хорошо, вы сможете увидеть свой новый блог, следуя по ссылке:

    http://.github.io

С этого момента, если вы добавите сообщение в блог в свой проект, все, что вам нужно сделать из вашего каталога приложений:

    python freeze.py
    cd build/
    git add .
    git commit -m "commit comment"
    git push origin master

Однажды мы могли бы работать над автоматизацией этого шага, но сейчас у нас есть функциональность!

Остальная часть этого блога не является обязательной, но для регистрации пользовательского домена и настройки Google Analytics читайте далее.

Существуют поставщики поставщиков для доменов, но я использовал Godaddy.com Анкет После того, как вы заставили домен, идите вперед, и сделайте новый файл в корневой папке репозитория с названием Cname и напишите домен, который вы только что купили в файле.

Затем перейдите на веб -сайт вашего поставщика домена и ищите настройки DNS, на GoDaddy это на вашей странице Active Products. Вы должны увидеть таблицу записей. Изменить запись с помощью типа Cname и имя www Анкет Измените значение на .github.io Анкет

Последний шаг – добавить еще четыре записи. Так нажмите Добавить и введите тип как A и имя как @ . Вы захотите выполнить этот шаг четыре раза, каждый раз вводя одно из следующих значений:

    185.199.108.153
    185.199.109.153
    185.199.110.153
    185.199.111.153

Обратите внимание, что это специфично для github.io

Вернемся к GitHub сейчас. В настройках вашего репозитория, если вы прокрутите вниз, вы должны увидеть галочку с вопросом, хотите ли вы нажимать HTTPS. Может потребоваться некоторое время, прежде чем вы сможете тичь Но как только вы сможете пойти на это.

Если у вас есть какие -либо проблемы на этом этапе, может быть, стоит посетить раздел справки, связанный Здесь Чтобы искать решение.

Прохладный. были сделаны. Google Analytics Далее!

Registering the site with Google Analytics

Еще один супер простой шаг здесь. Создайте учетную запись с Google Analytics Анкет После того, как вы закончите, на вашей панели приборной панели вы увидите какой -то код, который должен быть скопирован в HTML вашего сайта. Так что скопируйте этот код и скопируйте его в свой Шаблон.html прямо под ярлык.

Сделанный.

Если все сработало, у вас должен быть рабочий блог. Спасибо, что нашли время для чтения, и если у вас есть какие -либо комментарии или предложения, не стесняйтесь обращаться ко мне. Моя ручка в Твиттере @arrantate Анкет

Этот пост был создан на мой 5 -й день #100daysOfCode Challenge и, надеюсь, станет первым из многих. Я узнал об этом методе создания блога Здесь Анкет Я столкнулся с несколькими проблемами, но сумел выяснить их, используя следующую документацию и репозитории в качестве ссылки:

Оригинал: “https://dev.to/arrantate/create-a-static-blog-using-python-flask-1oab”

Читайте ещё по теме: