Запускаємо простий блог на Wagtail CMS (Django)

Будучи великим фанатом Python і фреймворку Django постійно шукав рішення, як зробити розробку нових веб-проектів швидше і зручніше.

Усі, хто знайомий з розробкою на Django, знають наскільки незручно будувати на ньому інтуїтивно зрозумілу адмін.панель. До мегапопулярного WordPress дуже далеко, що робить поріг входження в розробку сайтів вище, ніж у PHP-фреймворків та CMS.
Після довгого пошуку і тестування різних рішень я знайшов для себе оптимальний варіант — Wagtail CMS.

Wagtail — це повноцінна CMS написана на Django компанією Torchbox. За що їм велике спасибі. Проект з відкритим вихідним кодом, підтримується спільнотою ентузіастів і випускається під ліцензією BSD.



Ось типовий інтерфейс Wagtail:
image

У wagtail дуже зручно працювати з контентом, створювати нові публікації, розділи, працювати з зображеннями. Всередині цього проекту багато цікавих технологій. Але сьогодні не про це.

Розкажу приклад по швидкому запуску простого блогу для новачків в Django розробки, з урахуванням багатьох труднощів, які можуть чекати на шляху.

Нам знадобиться:
1. VPS мінімум з 1gb пам'яті
2. Базове знайомство з django
3. Навички у віддаленій налаштування Ubuntu

Крок 1:
Ви запустили VPS сервер для розробки. Використовуйте Putty для віддаленого підключення SSH.
Настройка проводиться на сервері з ОС Ubuntu 14.04.

— Логинимся і починаємо базове налаштування:
sudo apt-get update
sudo apt-get upgrade


Як правило, на сервері вже стоїть Python 2 і 3 версії. Перевіряємо наступними командами:
Python -V
Python3 -V


Для проекту будемо використовувати Python 3, так як з ним краще працює Pillow і деякі бібліотеки, які нам знадобляться.
Якщо якимось чином, у вас на сервері не виявилося python3, то ставимо його командою:
sudo apt-get install python3


Так само нам знадобиться python3-setuptools і python3-dev:
sudo apt-get install python3-setuptools
sudo apt-get install python3-dev


Враховуючи, що всі ставитися на чисту систему поставимо PIP (щоб поставити свіжу версію «8.1.2» краще робити це через easy_install3):
sudo easy_install3 pip


Перевірити версію PIP можна командою:
pip -V


Якщо версія не сама свіжа, то оновлюємо pip командою:
sudo pip install --upgrade pip


Щоб надалі у нас не випадало різних помилок при установці Wagtail, відразу ставимо всі необхідні бібліотеки для Pillow:
sudo apt-get install libtiff5-dev libjpeg8-dev zlib1g-dev \
libfreetype6-dev liblcms2-dev libwebp-dev tcl8.6-dev tk8.6-dev python-tk


Тепер нам потрібно віртуальне оточення проекту, ставимо virtualenv
sudo pip3 install virtualenv


Створюємо віртуалку:
virtualenv /opt/myenv


Йдемо в папку /opt/myenv і запускаємо віртуальну середу:
source bin/activate


Ви повинні побачити рядок з назвою (myenv), що означає, що виртуалка запущена:
(myenv) [email protected]:/opt/myenv$


Крок 2: Попереднє налаштування зроблена, переходимо до установки Wagtail CMS та налаштування бази даних:
1. ставимо Wagtail і Gunicorn:
sudo pip3 install wagtail gunicorn


2. Створюємо наш майбутній блог командою
wagtail start mysite


3. Перейдемо в папку блогу (mysite) і встановимо всі залежності для проекту з файлу requirements.txt
cd mysite
pip install -r requirements.txt


4. На даному етапі ви можете провести міграції і відразу запустити тестовий сервер вашого майбутнього блогу. Але так як ми плануємо зробити все правильно, то наш блог буде працювати на PostgreSQL (Для django можна використовувати різні бази даних, в тому числі MySQL, PostgreSQL, Oracle DB і т. д). Так що проводимо налаштування бази даних:

sudo apt-get install libpq-dev 
sudo apt-get install postgresql postgresql-contrib 


5. На даний момент у вас вже запущений postgresql на порту 5432. Але щоб база даних могла взаємодіяти з Wagtail потрібно поставити psycopg2:
pip install psycopg2


6. Тепер треба створити саму базу даних для проекту, для цього зайдемо під користувачем postgres і проведемо деякі додаткові параметри:
sudo su – postgres
createdb myblog


7. Так як postgresql створює користувача не питаючи вас про пароль, нам треба призначить йому пароль через psql:
psql

Тепер ви можете виконати команду зміни пароля:
\password postgres

Виходимо з psql і закриваємо сеанс під користувачем postgres:
\q
exit

Перевірте, що ви ще у віртуальному середовищі, якщо ні то знову активуйте віртуалку.

8. Тепер нам треба налаштувати Wagtail на взаємодію c postgresql, для цього йдемо в base.py:
cd /opt/myenv/mysite/mysite/settings/
nano base.py


Відкривається файл налаштувань, нам потрібна запис DATABASES. Видаляємо, те що є і ставимо туди наступне:
DATABASES = {
 
'default': {
 
'ENGINE': 'django.db.backends.postgresql_psycopg2', # вказуємо, що база даних postgresql
 
'NAME': 'myblog', # Назва вашої бази даних
 
'USER': 'postgres',
 
'PASSWORD': '******',
 
'HOST': 'localhost',
 
'PORT': ",
 
}
 
}
 


До речі, в wagtail є російська мова, так що можете заодно у налаштуваннях поправити параметр LANGUAGE_CODE.
LANGUAGE_CODE = 'uk-ua'
 


Власне, ми провели всі необхідні настройки, і тепер можна запускати міграції.

Крок 3. Перший запуск

Перейдіть в кореневу папку вашого блогу (cd /opt/myenv/mysite/) і почніть вашу першу міграцію даних в даному проекті:
python manage.py migrate

Тепер створіть користувача під яким ви будете заходити в адмін.панель Wagtail:
python manage.py createsuperuser

Введіть ім'я (наприклад admin), пароль і пошту.

Перевіряємо, що все працює:
python manage.py runserver 0.0.0.0:8000


Перейдемо у браузері за ip адресою вашого VPS на 8000 порт (приклад 199.199.32.32:8000) і побачимо стартову сторінку wagtail.
image

Чудово, тепер перейдемо в адмін панель 199.199.32.32:8000/admin, вводимо логін і пароль користувача, які ми створили раніше і потрапляємо у зручний інтерфейс Wagtail CMS:
image

Поки що наш сайт нічого не вміє, але скоро ми навчимо його всьому необхідному для блогу.

Крок 4. Параметри стартової сторінки сайту

За головну сторінку відповідає додаток «home», яке запускається з коробки. Щоб стартова сторінка була така як вам треба внесемо деякі зміни в код.

Структура вашого сайту має такий вигляд:

mysite/
 
home/
 
migrations/
 
__init__.py
 
0001_initial.py
 
0002_create_homepage.py
 
templates/
 
home/
 
home_page.html
 
__init__.py
 
models.py
 
search/
 
templates/
 
search/
 
search.html
 
__init__.py
 
views.py
 
mysite/
 
settings/
 
__init__.py
 
base.py
 
dev.py
 
production.py
 
static/
 
css/
 
mysite.css
 
js/
 
mysite.js
 
templates/
 
404.html
 
500.html
 
base.html
 
__init__.py
 
urls.py
 
wsgi.py
 
manage.py
 
вимога.txt
 


Відредагуйте файл «home/models.py» наступним чином:
from __future__ import unicode_literals

from django.db import models

from wagtail.wagtailcore.models import Page
from wagtail.wagtailcore.fields import RichTextField
from wagtail.wagtailadmin.edit_handlers import FieldPanel


class HomePage(Page):
body = RichTextField(blank=True)

content_panels = Page.content_panels + [
FieldPanel('body', classname="full")
]


Також відредагуйте файл home/templates/home/home_page.html:
{% extends "base.html" %} 
 

 
{% load wagtailcore_tags %} 
 

 
{% block body_class %} template-homepage {% endblock %} 
 

 
{% block content %} 
 
{{ page.body | richtext }} 
 
{% endblock %}
 


Тепер, щоб нові зміни запрацювали, проведіть міграції:
python manage.py makemigrations
python manage.py migrate


Після цього ви можете зайти в адмін.панель і відредагувати текст на вашій домашній сторінці.
Збережіть зміни і знову відкрийте ваш сайт. Ви побачите свій текст, приблизно такого вигляду:
image

Для початку непогано, але треба додати розмітку і красу css.
За базовий шаблон відповідає файл «base.html» розташований в mysite/settings/base.py;
За css відповідає «mysite.css» розташований в mysite/static/css/mysite.css;
За js відповідає «mysite.js» розташований в mysite/static/js/mysite.js;

Я шанувальник materializecss і для нашого сайту ми візьмемо у них шаблон і бібліотеки.
Дивитися тут http://materializecss.com/getting-started.html

Вносимо наступні зміни в base.html:
{% load static wagtailuserbar %}

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
< meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{% block title %}{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}{% endblock %}{% block title_suffix %}{% endblock %}</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

{# Global stylesheets #}
<link rel="stylesheet" type="text/css" href="{% static 'css/mysite.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
</head>

<body class="{% block body_class %}{% endblock %}">
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Navbar Link</a></li>
</ul>

<ul id="nav-mobile" class="side-nav">
<li><a href="#">Navbar Link</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
{% wagtailuserbar %}
<div class="container">

{% block content %}{% endblock %}

</div>

<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>


</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>


<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

{# Global javascript #}
<script type="text/javascript" src="{% static 'js/mysite.js' %}"></script>

{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
</body>
</html>


Зберігаємо і знову відкриваємо наш сайт. Повинно вийти щось схоже на цю картинку:

image

Вже краще. Тепер нам треба створити блог, заради якого все і затівалося.

Крок 5. Створення блогу.

Йдемо знову в корінь нашого проекту і виконуємо наступну команду:
python manage.py startapp blog

Після цього додайте новий додаток «blog» в INSTALLED_APPS в mysite/settings/base.py.

Для кожного запису нашого блогу будуть стандартні поля — заголовок, дата, картинка, введення і основний текст. Щоб все це працювало внесіть наступні зміни в «blog/models.py»

from django.db import models

from wagtail.wagtailcore.models import Page
from wagtail.wagtailcore.fields import RichTextField
from wagtail.wagtailadmin.edit_handlers import FieldPanel
from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
from wagtail.wagtailsearch import index


class BlogPage(Page):
main_image = models.ForeignKey(
'wagtailimages.Image',
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name='+'
)
date = models.DateField("Post date")
intro = models.CharField(max_length=250)
body = RichTextField(blank=True)

search_fields = Page.search_fields + [
index.SearchField('intro'),
index.SearchField('body'),
]

content_panels = Page.content_panels + [
FieldPanel('date'),
ImageChooserPanel('main_image'),
FieldPanel('intro'),
FieldPanel('body'),
]


Тепер створіть саму сторінку, на яку все це буде виводитися blog/templates/blog/blog_page.html:

{% extends "base.html" %}
 

 
{% load wagtailcore_tags wagtailimages_tags %}
 

 
{% block body_class %}template-blogpage{% endblock %}
 

 
{% block content %}
 
<h1>{{ page.title }}</h1>
 
{{ page.date }}
 

 
{% if page.main_image %}
 
{% image page.main_image width-500 %}
 
{% endif %}
 

 
{{ page.intro }}
 

 
{{ page.body|richtext }}
 
{% endblock %}
 


Поки що нічого не працює, тому виконуємо команди
python manage.py makemigrations
python manage.py migrate


Тепер можна створити перший запис в нашому блозі, через зручний інтерфейс wagtail.

Йдемо в адмін.панель, відкриваємо «Провідник», вибираємо головну, і натискаємо «додати дочірню сторінку», з'явиться наступне вікно з вибором шаблонів для створюваної сторінки:
image
Вибираємо «Blog Page» і заповнюємо сторінку інформацією.

Ось приклад редагування сторінки блогу в адмін.панелі wagtail:
image

Досить зручно і швидко.

Зберігаємо запис і відкриваємо в браузері. Перша запис вашого блогу готова.

Якщо хоч комусь цей пост виявиться корисним, то я продовжу публікацію постів на тему wagtail, в якій розповім докладніше про різні можливості даної CMS.

Для всіх зацікавлених Wagtail CMS:
Офіційний сайт https://wagtail.io/
Гитхаб проекту https://github.com/torchbox/wagtail/
Документація http://docs.wagtail.io/en/latest/index.html
Демосайт для вивчення http://docs.wagtail.io/en/latest/getting_started/demo_site.html
Група підтримки користувачів https://groups.google.com/forum/#!forum/wagtail
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.