johndusel.com

A personal blog for one of my clients powered by Django and Next.js.

Features

• Backend
  • Authentication and models with Django
  • API with Django Rest Framework
  • Content editor from TinyMCE
  • Database from SQLite
• Frontend
  • Static site generated by Next.js
  • Styling inspired by Every Layout
  • RSS feed
• Deployment
  • Nginx reverse proxy serving static files with Whitenoise
  • Media files stored in AWS S3 with the help of django-storages
  • Gunicorn and self-hosted next start running as systemd services on an AWS EC2 Ubuntu instance

Overview

Django speaks to our database to store blog post and admin user data.

Next.js asks Django for our posts through two main function in our page component:

• getStaticPaths() to define each individual blog post
• getStaticProps() to populate the data for each blog post

The name of the file tells Next.js how to form the blog post URLs, i.e., [slug].tsx means use the slug to get our final paths. Hence, "get static paths."

To Deploy Backend Updates

1. Pull the new code to the server
2. Migrate database changes with python manage.py migrate
3. Collect static files with python manage.py collectstatic
4. Restart gunicorn service

To Deploy Frontend Update

1. Build the new code with npm run build
2. Restart the Next.js server with npm run start

Local Development

See backend and frontend documentation.