How I created a responsive personal website with Django and Bootstrap in a week
Nowadays it feels like there is a whole laundry list of benefits to having a personal website. So, I decided to join the fray.
This project began as a convenient way to learn the ins and outs of the “full-stack” of web development. Recently, I applied to be a part of a “hackathon”, where the main premise was to create a final web application. The goal was to create something that is practical and productive for society.
Quite boldly, I sent off my application without even the slightest clue of how to accomplish something even vaguely functioning. But, armed with ignorance and a little confidence, I dove head first into the realm of web development, deciding that it couldn’t be all that bad.
I was almost immediately proven to be wrong, but that only made me want to dive in deeper.
Update 6/1/2022:
Since writing this I have updated the website! There’s still a lot of valuable information here, but if you’re interested in using an easy-to-use modern framework, check out my post about the revamped website.
What the heck is a framework, and which one should I use?
The first question to ask when learning how to develop a website is how to even start.
Conveniently, there are services like WordPress and Squarespace. They promise to make the whole process as easy as dragging and dropping expertly crafted elements. You no longer needed to worry about doing any coding, or wondering if it would actually work. All you needed was an eye for design and the time to implement it.
So of course, I opted to build one instead.
Admittedly, I could have achieved better results in less amount of time and with less frustration had I used one of these services. However, learning how to do it on my own came with its own benefits. Hopefully I could glean some understanding of the mystery of how the internet works. And maybe I could make a nice website that I could be proud of. So I began my search, looking for some clues as to how to accomplish such a feat. And preferably, in the versatile language of Python.
Almost immediately, I was thrown into the clutches of a war. One between two leading “web-frameworks” for Python, Django and Flask.
Stepping back a bit, a “web framework” is simply a piece of software which aids in the creation of a web application. It handles the often laborious overhead of a website. Functions of a web-framework can range from database management, template creation, or allowing for simple code to have profound effects.
Deciding between Django and Flask
Equipped with this knowledge, I began to research this seemingly all-encompassing choice.
Flask, touted as the light-weight of the two options, comes with less features out of the box. However it has a simpler learning curve, which makes creating a simple website such as mine a cinch. It lacks built-in features for database management, admin control, and much more, but makes up for it with a wide library of extensions and modules. These make the process of website development as flexible as the possible needs for a website.
Django on the other hand, comes stocked to the brim with features.
- An ORM (Object Relational Mapping) database system which allows for custom “models” data types
- A fully functional admin page to handle this data
- Fully-fleshed out user account management.
However, with this comes the steep learning curve of actually learning how to implement all of these systems.
Falling right in line with my habit of choosing the harder but ultimately more rewarding choice, I decided upon Django. Primarily motivated by the hope that if I learned it now it would pay dividends in the future, and its sleek and modern documentation, I set forth learning how to use the framework.
Getting started with Django
1. Setting up a virtual environment
Recently, I’ve been working my way through Data Science from Scratch by Joel Grus. One of his main emphases is writing clean, pythonic, and reproducible code. As a part of this, he recommends, as many others do as well, to create a virtual environment.
A virtual environment is essentially a container that you can keep all of the different components your project may need separate from your base installations. These components, known as dependencies or packages, are open-source pieces of code that can streamline portions of development.
However, if you need a certain version of a package for one application and a different one for another application, that can be an issue. Say for example, if my website needed a specific version of Django, say 3.1, and another project on my computer used Django 1.9. A virtual environment allows you to keep dependencies specific to the problem installed in places that are specific to the problem.
Thankfully, they are easy to create through Anaconda, and can be made in only one line of code:
conda create -n yourenvname python=x.x anaconda2. Installing all the needed packages
For my website, I installed the following packages (and they are easy to see because of the virtual environment!)
- Django (3.0.8), a Python web-framework
- django-ckeditor (5.9.0), a WYSIWYG editor
- python-dotenv (0.14.0), an environmental variables manager
Django is of course the web-framework that I used for this project.
Django-ckeditor extends Django to allow for comprehensive “what you see is what you get” (WYSIWYG ) editing in Django’s admin site. All of the steps for installation are found on its GitHub page. GitHub is a website where code is shared, collaboratively developed, and version controlled, I would highly recommend checking it out and using it!
Python-dotenv allows for the creation of “environmental” key-value pairs in a .env file in your project directory. Essentially, it allows you to store some variables you need in a separate file and load them into your code. This way, you can easily upload your project to GitHub without fear of precious API keys and secrets being publicly available online.
3. Learning how to use Django
Of course, before I could use Django I had to know how to even get started.
The resources I found the most beneficial were:
- Corey Schafer’s excellent YouTube series
- This comprehensive series of articles by Mozzila
- And of course, the Django documentation
Through these resources, I was able to scrape together the foundations of my website.
Django divides the content of a website into several different “applications”. My website was broken down into three main components.
- “Core”, which handled the main page
- “Blog”, which quite surprisingly contains information about this blog
- “Webapps”, which doesn’t really accomplish too much at this point.
Despite some hurdles, actually building up the website in Django took surprisingly not that much time, and I was able to get it accomplished in just a few days.
Making it pretty with Bootstrap
Now at this point, my website was effectively bolted together back-end services with a database. There was nothing to make it worth visiting at all.
While learning how to make the skeleton of my website with Django, I heard of this service that could help me put some meat onto my project. With its slightly odd name but wonderful-sounding promises, I decided to learn what Bootstrap has to offer.
In an effort to live up to the idiom, I decided to ‘pull myself up by my own bootstraps’ and forgo finding a tutorial for it.
Why did I do this? I have no clue. Was it a good idea? Not necessarily, but I learned so much in the process.
Bootstrap is a front-end development toolkit which promises to yield responsive websites, mobile-compatible websites with its innovative grid system. Components can be added to a “row” of the grid and given a specified width to allow for dynamic structural transformations even if the browser is scaled down to another size.
By grabbing snippets of code from the Bootstrap documentation, reverse engineering what the heck they were doing, and riffing off of their core ideas to create my own style, I was able to create some semblance of a modern website.
Beyond this, I had to learn the fundamentals of HTML and CSS, the design duo at the head of every aesthetic bit of a website. There are a vast number of tutorials for this online. Honestly, I learned the most by picking through the Bootstrap examples and googling what didn’t make sense.
Learning Bootstrap, alongside HTML and CSS, made it clear to me just how vast the possibilities are with front-end design. I hope to be able to explore this space more in the future.
What’s next for my website?
Now that the real meat and potatoes of the site is done, I’d like to start adding a lot of spice to it.
I’ve begun adding some web applications that I built using Spotify’s API to the website. They were just some fun projects to help me learn how to use APIs, and I hope to make some more in the future.
Also, I’ve been incredibly interested in data science recently, so expect some posts about that. Specifically, I’ve been combing my way through Data Science From Scratch by Joel Grus, and finding a lot of enjoyment out of it.
Thank you for reading!
- Jordan
Originally published at https://www.jordantwells.com.
