My Website

Building the full stack

Brief: Create a reasonably good-looking, dynamic website from scratch using the Django web framework for Python.

Core Skills: Python, Django, Web Design, UI UX Design, Web Development, Custom HTML/CSS, inline JavaScript, SQLite, Version Control with Git.

The Tech stack consists of Python/Django and SQLite on the backend fronted by some custom HTML/CSS with a few lines of JS for DOM manipulation. I made this website in mid 2024 as a way to force myself to grow as a developer. There were a number of advantages to building a website for myself.

  • I had recently shifted to a new team in my workplace, I was eager to grow into the position and show I could not only manage the infrastructure but build the software too.
  • It wouldn't hurt me as a DevOps engineer to know the ins and outs of the software that most of our dev teams were using.
  • The practical experience of setting up the AWS infrastructure for my website would be valuable for the next time I have to do a similar thing for work.
  • Having my own website, with a backend of my own making and run on infrastructure I also configured and am mostly responsible for means I can put almost anything I want on here. If I can code it, I can host it.
  • I get to link to all my blog posts and share my current projects all in one neat location

An image of both website layouts, mobile and desktop. My website as of April 2025.

Design Breakdown

Frontend

I chose to write my own HTML/CSS as I didn't want to introduce any more frameworks that I wasn't fully across as a developer. Django is already a hugely powerful tool, and I wanted to build confidence with Django and its elements within my AWS environment before implementing any other new systems and JS frameworks.

Design

With that goal in mind, I borrowed heavily (ie: "ripped-off") the design of a somewhat well-known American software engineer and co-founder of Stack Overflow, Joel Spolsky. I link to my Hashnode blog from the landing page of my website. I use Hashnode's GraphQL API to get all my latest blog posts to show up on my page here.

Markdown Extension Template Tag

I added a custom template tag to Django that uses Python-markdown to parse a textfield that's provided in markdown format. To this I added a markdown extension that allows me to reference my images that are in my database to insert them inline. This allows me to more easily write project posts such as this one.

Backend

Backend was literally as simple as I could get away with. As I'll be editing this website offline mostly, I can get away with using a sqlite file as a database and just keep that in my github repo. Django comes with a neat ORM (Object Relational Model) that makes creating and accessing records in the database very fast. In order to reduce the data stored in the repo I'm using an S3 bucket to serve any static files like images and stylesheets.

Dynamic Static Storage

I configured Django's "storages" backend to default to S3 when its live but to just use local files when I'm in debug mode. This prevents excessive calls to the S3 Bucket when I'm developing the website locally, viewing page after page. This Reduces the S3 bucket activity and drastically lowering the chance that I'll go over the download limit and start getting charged for every time someone accesses my website.

HTTP Server + SSL

Django is hosted on a server with Nginx serving requests and Gunicorn spinning up worker threads that are handled by the Django app. I go into more details in my Christmas Ramble.

get in touch