Sake of Making

Mar 22, 2021 | Author: Nic La | Tags: project code

Sake of Making is a project. It's only fitting that the first project posted to sakeofmaking.com is Sake of Making itself...meta. Previously, sakeofmaking.com was made using pure HTML and CSS. Obviously, this is not sustainable. To "get with the times", I decided to learn and use Django as the foundation for the new sakeofmaking.com. I'll show you the steps and struggles how to do the same.

Step 1: Register a Domain

Decide on a domain name. Best to secure your domain name first. You never know who might share your inspiration. Use a service like Zone Vision to verify the domain name is available. Choose a domain name service (DNS) provider. A good DNS provider includes services for registering your domain name and hosting it.

I already owned the domain sakeofmaking.com through NearlyFreeSpeech.net (NFS). I chose them many years ago because it cost very little to maintain a domain name. However, these days, I do not recommend them. They've fallen behind the times and lack the necessary services to properly manage a domain name. These days, I recommend Google Domain. They're integrated with your Google account, Gmail, and simplify managing your domain.

Step 2: Research Research Research

Domain name in hand, read a book. This is one of those projects best started with the end in mind. Django for Beginners by William S. Vincent provides you with everything you need to deploy your app. Adding deployment elements into your app as you build it will save you a lot of headache when it comes to deploying. Additionally, "Django for Beginners" will introduce you to Bootstrap, a library of styling templates.

Some key takeaways:

Pg 91: Add CSS to your project using Static Files
Pg 149: Always use custom user model for new projects
Pg 161: Set templates directory to main directory
Pg 217: Set TIME_ZONE according to your timezone
Pg 263: Deploy using Heroku

Additionally, I found the below resources helpful:

Django Best Practices: Referencing the User Model: I used this to add an author dropdown menu to my blog posts. If I ever plan to let someone else write for my website, the functionality is there to support multiple authors.
The Ultimate Guide to Django Redirects: I used this to redirect users from sakeofmaking.com to sakeofmaking.com/projects/.

Step 3: Build the Blog App

After taking note of deployment elements, it's time to start building your first of two apps. Follow Share Your Knowledge With a Blog to create your blog app. This guide does an excellent job detailing the steps necessary to build a working blog. However, it lacks deployment elements. Populate your app with the deployment elements you learned in Step 2 but hold off on deploying.

Step 4: Build the Project App

Follow Showcase Your Project to create the second of two apps. It doesn't really matter which app you create first. Again, populate with deployment elements.

Step 5: Add Images

This step primarily applies to content. How does one add an unspecified number of images without concern for DNS server space? To answer this, I researched many methods on how to add images.

I eventually found the Markdown Python library. This converts text to HTML. This in concert with storing my images on Google Photos Shared Album, allowed me to embed images in my blog posts.

While we're on the topic of images, follow Django Favicon Tutorial to add a favicon to your app.

Step 6: Style Your Website

The best artists steal. Find some inspiration. Visit different websites whose styling you find appealing. To get started, think about the below page elements and how to best display them. More page elements will reveal themselves as you go. Use tools to identify CSS styling. Use Google Chrome Ctrl+Shift+I to view developer tools. Right click an element and select Inspect. Use Microsoft PowerToys Win+Shift+C Color Picker to identify RGB values.

Text font
Text color
Text background color
Link color
Hover link

I personally enjoy the color pallets of Masterzen's Blog.

Step 7: Deploy to Heroku

Follow page 263 of "Django for Beginners". They summarize the deployment process and walk you through each step in detail. Even with such a detailed guide, I still struggled with certain parts of the deployment process.

Configuring static files: Make sure you have static files, e.g. base.css, in your static file folders. Git will not track empty folders.
ALLOWED_HOSTS: Add your domain name and any aliases to ALLOWED_HOSTS.
SECRET_KEY: Add config variables, including SECRET_KEY, via the Heroku settings page of your web app.

Step 8: Point Your Domain Name to Your App

You should have a domain name, e.g. www.sakeofmaking.com, and an alias, e.g. sakeofmaking.com, secured. Heroku makes it easy to add your domain names to your app. Heroku will supply you with a DNS target for each domain name. It's just a matter of configuring your DNS provider to point to the Heroku-supplied DNS target. This is known as a CNAME record. Don't do what I did. NFS doesn't allow you to create a CNAME record with an alias. To make it work, I created what's called an A record and pointed my DNS provider to the IP address of my Heroku-supplied DNS target. This is a no no as these IP addresses are dynamic. It's only a matter of time...