How It's Done

It's been a while since I've had any sort of blog. I've had countless blogs in the past, but I am really hoping to stick with this one. It'll mostly be general ramblings, how to articles, pictures, and whatever else I feel like spewing forth onto the Internet.

I'd like to dive into how I made this blog for my first post. As I am not really creative or a design person, I did utilize the theme here as a base. I then pulled apart some of the CSS and layout of the page to make it more "me". What you see now is a combination of the above linked template and my own work. I did want to get some of the Font-Awesome stuff working, but I haven't gotten a chance to yet (Coming Soon!).

The backend is completely custom PHP and MySQL. It's not terribly complicated. The MySQL database consists of a few tables to store my data. The PHP involved is also not very complicated. It mostly just basic calls to PHP to pull the data from the database and then display it:

$result = mysql_query("SELECT * FROM articles WHERE active='Y' ORDER by id DESC LIMIT 15");
if (!$result) {
    echo 'Could not run query: ' . mysql_error();
}
    
while ($row = mysql_fetch_array($result)) {
    /* Do some stuff. */
    echo $html;
}

Of course a lot happens in that little while loop to generate some code, but hopefully you get the gist of it.

I am utilizing highlight.js to handle code/syntax highlighting. It's really easy to implement and use in your entries. It also takes some of the load off you server (as opposed to using something like Pygments) as it's handled client-side.

I also use Emoji on my blog. For that I use another Javascript provided by hassankhan/emojify.js. Before some recent updates it used to be that an end-user would need to download a 5-10MB CSS file. Fortunately there has been some great work done on this so that does not need to happen. Emojify.js works in conjunction with the emoji-cheet-sheet.com. I can't be expected to memorize all the emoji's! 😝

In the last few months, I've become quite the fan of Markdown. It's dead simple and makes a lot of sense to me. In order to get it working in my blog, I had to utilize a library from michelf/php-markdown. Getting it to work on my site, was quite easy. Just a simple autoloader!

# Install PSR-0-compatible class autoloader
spl_autoload_register(function($class){
    require preg_replace('{\\\\|_(?!.*\\\\)}', DIRECTORY_SEPARATOR, ltrim($class, '\\')).'.php';
});
    
use \Michelf\MarkdownExtra;

Now, I can easily use Markdown! I can make things bold or italic or even make a simple list:

  • One
  • Two
  • Three

Easy as pie!

In total I probably spent 6-8 hours building this from the ground up. Since I knew some PHP/MySQL/CSS previously I was able to get most of it functioning quickly. I spent most of my time tweaking things to look and work exactly as I wanted them. I still have a couple things I'd like to work on, but the core of the site works. I also forgot to mention I am using Disqus to handle commenting on the blog.

If someone is looking for an easy to do PHP/MySQL project, I highly recommend this one. Creating your own personal blog is super easy and you'll learn about most of the PHP/MySQL basics.


comments powered by Disqus

Morgan W.

Head over heels for gadgets!

Search



Instagram

Twitter