Про создание этого сайта

Предыстория

Около трех лет я довольно-таки регулярно вел блог, который переехал на субдомен old.kigorw.com. Тот блог был на вордпрессе. Последние пол года мне его стало вести не в кайф. Объясню. Мне не нравится сама структура типичного блога на вордерессе — эти все камменты, шаблоны, апи, социализация и остальная хрень. Это все загоняет в какие-то рамки и приходится тратить время на борьбу с интерфейсом (шаблоны, апи и прочее) вордпресса.

Далее, мне не нравится навигация в ВП-блогах. Там довольно-таки сложно что-либо найти. А когда у блоггера множество интересов — тем более. В итоге мой блог превратился в кашу и он мне перестал приносить удовольствие.

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

В итоге я понял, что надо сделать себе сайт самому. Сделать интернет-базу, на которой собирать и каталогизировать все статичные по своей сути материалы. А всю социализацию перенести в ЖЖ и Твиттер.

О чем сайт

Мне нравится собирать, складировать и спустя какое-то время смотреть на результаты.
Например, я прочитал много интересных книг. У меня есть коллекция билетов на разные мероприятия. Мне нравится делать фото-обзоры посещенных мест. Бывает я пишу статьи на технические темы.
Все это, как нельзя лучше, подходит для этого сайта.

Требования к движку

Поняв суть информации, которую я хочу размещать на сайте, я осознал каким должен быть движок.

Дешевым, супер-дешевым — у меня совсем не было времени на создание чего-либо сложного.
Гибким — я хотел иметь возможность менять как угодно любые страницы сайта, с легкостью добавлять разделы, фишечки, рюшечки и т.д.
Разумеется, сайт должен тянуться.

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

Дизайн

Поскольку сайт, должен быть максимально дешевым я не стал тратить время дизайнеров нашей студии (у которых и так задач выше крыши) и решил сам сделать дизайн.

Его я придумал практически мгновенно. На листике в клеточку я разметил модульную сетку и набросал туда структуру главной страницы.

Затем я скачал макеты модульной сетки для фотошопа в ЖЖ Черенкевича и приступил созданию страниц сайта. Можно сказать, вместе с этим началась разработка сайта. Также я начал вести записи по потраченному времени.

На разработку всех макетов (главная, страница списка книг, страница списка статей, страница статьи) ушло около 10 часов.

Разработка движка

Сайт я решил разрабатывать на Джанго. Также решил попробовать шаблонизатор Jinja2. Тут сделаю отступление и скажу интересный факт про джинджу.
Автора шаблонизатора зовут Армин Ронахер (возможно, на русском его имя пишется именно так). Первую версию шаблонизатора он выпустил когда ему было 17 лет (2007 год). Кто не верит, может убедиться (страница о нем) и посмотреть страницу его проектов (в его-то 17 лет!) .
Джангу с Джинжей связал с помощью библиотеки Коффин

Структура сайта. Я постарался сделать максимальную унификацию. Поскольку БД я не использую, я должен был решить как хранить статьи и как делать элементарые выборки.
Все материалы хранятся в папке
/content
Внутри нее такая структура
/content/articles
/content/places
/content/books
/content/pages
/content/
index.html

Возьмем эту статью. У нее такая структура
/content/articles/about-site/
about-site.html
about-site.ini

Парсер.Внутри ини-файла находится мета-информация о странице (все страницы имеют подобную структуру).

1
2
3
4
5
6
7
8
9

[article]
category: other
category_title: Разное
title: Про создание этого сайта
date: 18 марта 2010
pub_date:18.03.2010 13:12
published: False
tags: джанго, штмл5, джинджа, сайты, модульные сетки, вордпрес
description: рассказываю про архитектуру этого сайта и почему я его сделал

В данном случае список стандартных атрибутов. Для каждого раздела могут быть свои атрибуты.
Движок считывает все и генерирует обьект с данными (на основе урла заходит в нужную директорию и формирует обьектный граф, с которым дальше работает). В шаблоне я указываю какие поля использовать.
Выборки последних статей как и генерация РСС делаются автоматически.

Верстка. Верстал я сразу начисто в шаблонах джинджи.
Аморально и прагматично использовал таблицы для создания резины, чем очень доволен.
Вот выдержка с главной :)

1
2
3
4
5
6
7
8

<table class="b-main">
	<colgroup>
		<col width="6%"/>
		<col width="66%"/>
		<col width="22%"/>
		<col width="6%"/>
	</colgroup>
	<tbody>

При верстке я выразил еще один аспект своего отношения к «правильности». Я за то, чтобы не тратить деньги клиента (в данном случае свои), на правильность и стандартность верстки, которую конечный пользоваетель браузера даже не увидит. Поэтому спокойно могу инлайном прописать нужный стиль, особо не заморачиваясь.
Для каждой задачи должно быть свое решение.

JavaScript. Использую jQuery и classy.js. Спасибо Джону Ресигу.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<p>
	Статуи.
	{{img_v("IMG_4977")}}
	{{img_v("IMG_4978")}}
	{{img_v("IMG_4980")}}
</p>
<p>
	Роден и его статуи.
	{{img_h("antiq-salon")}}
</p>

Где IMG_4977 является импортированной фоткой IMG_4977.JPG, которая лежит в директории с докладом. Макрос img_h сжимает фотку до нужного размера, кладет ее в папку со статикой, добавляет вотермарк и отдает правильный путь к картинке. Внтури скрипта стоит проверка, так что преобразование выполняется только один раз.
Это супер-удобно для комфортного создания заметок с фотками.

Форматирование кода.. Сделал тег code, который использует библиотеку pygments.
{%code «html» %}
Тут пишу свой код.
{%endcode%}

Презентационный двиг.. Разработал интересную структуру для комфортного создания штмл-презентаций. Собираюсь ее доточить и рассказать подробнее. Статья о презентационном движке. А пока можно посмотреть пример, с которым я уже выступил.

Обновления сайта

В свн-репозитории хранится сайт, из него я и обновляю все на сервере.
На моем компьютере поднята локальная версия сайта. Так что сначала я все тестирую локально и только потом заливаю на сервер. Мне такой способ нравится — очень удобно.

Время на создание сайта

На момент написания статьи уже потратил часов 60 на создание и заполнение сайта. Делал это, в основном, ночами. Нынешняя статья вышла спустя 4 календарных недели от начала работы над сайтом.

Итожу

Получаю большое удовольствие от работы со своим детищем. Планирую собрать много полезной и интересной информации. Так что, стей тюнет:)