Laurence Mercer

How I built this (Django) blog

24 November 2024

For those who are curious... this blog was built using Simon Willison's django-plugin-blog package, which is a plugin for DJP, his recently announced plugin system for Django.

Installation

I installed django-plugin-blog using a combination of instructions from django-plugin-blog and DJP.

Install packages

As per the django-plugin-blog README, install the relevant packages (django-plugin-blog, djp, Markdown, and pluggy).

pip install django-plugin-blog

Enable DJP

As per the DJP README, edit your main settings.py and urls.py files.

Migrate models

django-plugin-blog includes models for Tag, Entry, and Authorship, which must be migrated.

Test

The blog should now be available at /blog.

Theming

By default, django-plugin-blog features basic blog theming which is separate from a website's theme. However, this can be overridden.

First, in my core app's settings.py file, I instructed django-plugin-blog to use the same base template as my website. This overrides django-plugin-blog's default base template (/django_plugin_blog/templates/django_plugin_blog/base.html).

# core/settings.py 
DJANGO_PLUGIN_BLOG_BASE_TEMPLATE = BASE_DIR / 'templates/base.html'

django-plugin-blog also includes several other default template files (archive.html, entry.html, index.html, tag.html, and year.html) which display, respectively, the expected pages. For example, entry.html is used for an individual blog entry page. I copied these files to my website's templates/django_plugin_blog directory and edited them as required.

For reference, this gives a tree of:

# tree (abridged) 
lm/
├── core/
│   ├── settings.py
│   └── urls.py
├── templates/
│   ├── django_plugin_blog/
│   │   ├── archive.html
│   │   ├── entry.html
│   │   └── etc.
│   └── base.html
└── manage.py

Tags

By default, a blog entry's tags (for example, 'django') are not displayed. I added them to my entry.html and index.html templates like so:

<ul class="tags">
  {% for tag in entry.tags.all %}
    <li><a href="/blog/tag/{{ tag.slug }}" class="tag" title="All posts tagged {{ tag.name }}">{{ tag.name }}</a></li>
  {% endfor %}
</ul>

Styling

Finally, I added some CSS, and, for code blocks, implemented highlight.js plus the a11y-dark theme.

Return to blog