How I Created This Blog

Posted on 05/31/2013

When I decided to create a blog to log my thoughts and ideas, I didn't want to use any of the existing blogging platforms. For one, most of the existing (free) blogging sites require you to have a subdomain of their domain (i.e. Tumblr was the only one I found that did not require this, but I will stay away from it now that it has been purchased by Yahoo. For another, these sites only give you a fixed number of free themes to work with, and instead of taking the time to write my own theme, I can simply use the CSS files I already have for my website. This all led me to create this blog from scratch. I would like to take this time to describe how I did that.

The base of the blog consists of three HTML pages (one being the "Credits" page), two CSS files, two JavaScript files, and three PHP scripts. The first HTML page is the main blog page. It shows a preview (read: first paragraph) of the five most recent posts. It also displays the date the post was created, the date it was updated, and a link to the comments of the post (which will be "Disqus-ed" later). These are all displayed using PHP code in the HTML file. You may also notice an "Archive" section; this will be discussed later. The second HTML file displays a desired blog post to the reader. It uses the $_GET variable to retrieve the desired post. The PHP code that does this is robust; if the user changes or deletes the "post" entry in the URL, the code handles this by displaying an error message. The post HTML file also displays dates, comments, and archive mentioned above. The third HTML file is the credits page. It lists the appropriate credits and mentions for resources used in the blog.

The CSS files are self-explanatory. Yes, there are two. I decided that I wanted the blog to be responsive. This gives a bigger, easier to read version for screens with width 680 pixels or smaller. This is achieved using CSS media types and a viewport meta tag.

The first of the two JavaScript files is self-explanatory as well; it is the jQuery version 1.9.1 code included via jQuery's CDN. The second was probably the most troublesome part of the building this blog (at least for me while I learn all of these languages). If you haven't noticed already, the Archive section on the right has a clickable "hide-and-show" feature. As the years go by and I create more posts, the years will be listed when the page loads. A click on a year shows the months of that year which have posts, and a click on the month shows the titles of the posts for that month in the order they were created. The layout of this section is handled with a PHP script, but this hide-and-show function is handled with the second JavaScript file.

Not surprisingly, the three PHP files are the "meat and potatoes" of the blog. The first creates a class called "Post" which is used throughout the blog. Each Post contains instance variables title, body, dateCreated, and dateUpdated as well as getters and setters for each. I realize that creating a class for a blog post is a little overkill at this point, but as the blog evolves and features are added, I feel that having a Post class will be beneficial. The second PHP file creates the layout for the Archive section. This script searches the relevant directories for posts and puts them in the correct layout. All the HTML code for the hide-and-show functionality is also added by this PHP script. The last PHP file uses Pushover's API to send alerts to me when someone visits one of my blog posts (not the blog itself). This is just temporary; as my blog becomes more established, I won't care about getting these notifications in real-time. I would like to point out that I did find a way to use Pushover's API without using cURL as they suggest. The server where this blog was developed did not have cURL installed, and I did not have privileges to install it. Therefore, I had to find this workaround. If you are interested in how I did this, please leave a comment below and I will be happy to write about it. However, the current server has cURL. I switched cURL so that errors and callbacks can be handled.

The posts are saved in directories according to the date they were posted. For example, this post is saved in the directory Posts/2013/May/ with file name 31. The posts are written in simple HTML so that links and code will render properly. The first line of the file is the title and the body of the post is everything else.

There are three other things on which I should comment. First, there are and Twitter share buttons that go with each post. Their code was pulled directly from these websites. The blog credits page has direct links to the information used. The header of each page also includes follow buttons for both of these social networks. The code and resources for these are found in the same places are the share buttons. Secondly, the comments for this blog are handled by Disqus. That is a simple and effective solution for me. Lastly, you may have noticed the social media icons to the right. They are free and their license and location can be found on the credits page. Please feel free to interact with me however possible on those social networks. My preference is, however, please use whichever is yours.

Finally, I did test this blog with a few browsers, but if you find any issues please let me know.

Update: @rikishiama pointed out that I was lacking an RSS feed. I have added one along with a link to subscribe on the right. This file was hand-written, but I will write a PHP script to handle its creation.

Tags: Tech, Development
Updated on 04/02/2021

Quick Archive
Full Archive

By YearBy Category