How I Built and Deployed this Site

An Technical Stack Overview (with source!)

As a computer science student, having a personal website is pretty useful. Every year or so I rebuild my website with new web technologies and incremental changes to experiment and keep my coding skills fresh. This is a very brief overview of my website’s tech stack. The source code for this website is is MIT licensed on Github.

Web App

For my personal site, I built a Django application running on Python 3.7, and I’m really liking it. My first web framework was Meteor and I liked the batteries-included approach, namely the authentication system. Django has the same sort of philosophy that makes it easy to whip up an application while still feeling like you have control over the configurations. It also makes interfacing with SQL databases super easy, a problem that IMO node.js suffers from (aside from the sole option of sequelize).

For the front-end I’m using Bulma as my CSS framework (with an override here and there) over the standard Django rendering framework for passing data from my views to my template. The back-end is a MySQL database that stores my blog posts as well as my side projects. I then have a page for viewing side projects (with their links and GitHub repos) at /projects.

I write posts in Markdown using Ulysses (a Mac writing app) and then I use the Django Admin page to securely insert into my database. I also use a package called markdown2 to convert my raw markdown to HTML. Finally, I wrap the generated HTML in a div to style it with CSS.

Deployment

My website is hosted on a Ubuntu virtual machine in the cloud. I like using vultr for hosting because scale isn’t a huge concern for me and $2.50/month is a steal for cloud hosting. However, lately I’ve been playing around with Google Cloud after receiving $300 in free credit (static assets on this site are hosted using Google Cloud Storage). I’ve been thinking about a move since it might consolidate my cloud resources (Google Cloud repositories suck compared to GitHub though).

I use Docker to containerize my Django web application, containing environment variables, an Nginx server and an SSL certificate using LetsEncrypt. Although you could do this all manually, I use an open source PaaS named Dokku to automate all this for me whenever I git push. I use Dokku to deploy my various web-based side projects to subdomains (i.e. atphraseviz.kirubarajan.com).

Tutorial

Soon, I’ll be writing a two-part tutorial aimed at computer science students to build a personal site complete with its own blog with a dynamic page for side projects. In addition, the second part will cover hosting and deployment so you can get your website running and available at yourname.com in less than, like 20 minutes.

Stay tuned!


Read more posts or learn more about me.