_
blog.codywohlers.ca
#
This
is a high-level candid overview of how I made a blog from scratch.
Follow along as I justify design decisions and point-out common
pitfalls. (If
you are looking to run your own blog on your website I recommend
using a CMS
like Wordpress or Drupal.)
I made this blog using HTML, CSS, JS and PHP and hosted it on a linux server running Apache . The comments and user info are stored in a MySQL database and interactive elements use AJAX to communicate. Now I can type up an article in LibreOffice Writer and when I'm done I run a bash script to publish it to my website as a static page. Likes, comments and subscriptions are stored in the database. It ended up being a bit more tedious than I wanted (hence the recommendation to use an existing CMS) but it works well with my infrastructure and was a fun learning experience.
Why Make a Blog?
The first question in any endeavour is why? So why have a blog? I think there are two common reasons to make a blog: (1) To make money and/or (2) As a place to publish your random thoughts and non-specific formal creations. Since the first one (making money) doesn't really happen directly, (at least without sacrificing the second one), it's the second one I'm after - a place for my musings. Some sites would describe me as a “hobbyist” blogger. I will be writing about my specific observations of technology and society and how it interacts together. Along with some other random thoughts and rants I'm sure. The threaded comment section will provide a place for discussion with others.
It is possible to make money blogging, especially by writing tailored articles such as sponsored reviews, or stories only about affiliate links. But that leads to temptations like heavy advertising, click-bait headlines, and writing for the sake of writing. If a headline tells you about the number of points it has (10 Best whatever), or about how you'll feel after reading or viewing it, then it's being made for an arbitrary reason, (such as a deadline).
Even though this blog is not for-profit, I am running small advertisements at the end of each article and sometimes convenient affiliate links for things mentioned in a post. See about for more information on this blog's advertising policy.
Why
not use an existing CMS?
Today's Content Management Systems (CMS) are quite powerful and easy to use. Wordpress is the most popular beginner one, and other contenders include Joomla, ModX, and if you really want to dive in, Drupal.
But due to them being powerful and easy to use there is also a ton of back-end php code to execute and database queries to look-up, which requires more server load per user. By writing simple static php blog posts, with database look-ups restricted to like counts and comment display, the server load is reduced. And security is increased as there is no public-facing administrative login available to be compromised.
Plus I get the added feature of being able to write my posts in a word-processor such as LibreOffice Writer or Microsoft Word. (feature or annoyance, see below)
The Process
Articles get written in LibreOffice Writer and saved in a certain folder on my workstation, along with the required images. A “publish script” is then run on my workstation which embeds the html file created in Writer into a new blog post php page, and creates thumbnails and updates the front page. This script also sends out email updates to subscribers and in the future possibly automatically tweets and/or posts to other social media.
.
Let's write the php/html templates
One of the reasons I decided to use a word processor in the workflow was to have a wysiwyg html editor. Back in the '90s and 2000s I used to use Microsoft Frontpage to make webpages, but it is now discontinued. I got excited about KompoZer as a Frontpage replacement (and it's FOSS!) but it too is now discontinued. Apparently it's a tough life for simple html wysiwyg editors.
Since we're doing php coding, an Integrated Development Environment (IDE) would be better suited than a simple editor. All the IDE's seem to have the same flavour - source code editors with auto-complete and organization helpers. Some have real-time views of the rendered page, some you need to refresh a separate web browser. So let's use my old favourite from java coding - Netbeans. It has an excellent java gui wysiwyg creator and apparently plugins for html as well (which link to a browser to control it and receive debug feedback.)
So
now is when we need to decide our layout. A blog is a pretty
straightforward website with a list of articles by date and topic
with the latest ones on the front page. So lets make a php file that
we can use as a template and just embed the html file from Writer.
We probably want our main page to be centered. Lets start with a <center> tag and... whoa WARNING: “The center element is obsolete. Use CSS instead.”
CSS and HTML5
I've heard of css before, but having not made a real webpage in almost a decade, I've never really used it. CSS, or cascading style sheets, is a modular formatting style for html. It allows you to quickly make global changes by re-using your defined styles. Cool! So the new HTML5 format requires CSS coding. Luckily there are great sources of information with quick-to-find references.
Mobilicity
With the rise of the pocket computer, (or “smartphone” as they're known), a lot of people are viewing the internet on ultra-portable displays. So your page needs to be responsive so it isn't annoying to read on a phone (like when the text is too small and panning is needed) or a full resolution desktop display (like when the text is too big). The main ingredient for this is a simple:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head> section to cause a page to become responsive.
.
Word Processing
Now that our template and layout are complete, lets write some content in our word processor. As with most word processors Writer gets finicky when you start placing images in random places and try to get the text to wrap nicely around it. In Writer text wrap works well for images but falls apart for image captions (floating <p>s that get embedded in <span>s, which is invalid HTML and won't render properly). And for workarounds like using a table for captions, wrap-around is non-existent in Writer. We'll have to forgo captions for now until Writer handles html better.
Speaking of Writer handling html it still outputs HTML4, the old style I first tried to use and Netbeans warned was decpreciated. When we embed the Writer html file in the php file we will have a combination of html5 and html4. But web browsers are excellent at cleaning up html code before rendering, even with errors, so this is not too much of a concern. As Writer gets more mature I'm sure it will support html5 soon enough so I'll leave it in the workflow. I can always switch to another editor at any time as the html file is just embedded in a php file anyway.
Likes,
Comments and Subscriptions
Firing up a mysql database to store likes, comments, and user subscription emails - and securely talking to it using our php code - is the most technical portion. Let's build the following features:
a like button (for registered users and anonymous) for posts so we can gauge the popularity of articles.
a threaded comment section inspired by the efficacy of slashdot's moderator labels and the efficiency of reddit's voting and sorting system.
a user profile system to store comment usernames and email addresses for subscription notifications.
I am quite impressed by the quality of comments on slashdot and reddit (sometimes). The category system on slashdot is a big part of the quality as the comments are categorized by the users allowing the reader to sort and filter the comments for the desired experience such as “insightful” or “funny”. Reddit's voting system also works well to keep the interesting comments up front and the less-interesting comments subtle. That way the discussions should be higher up on Graham's Hierarchy of disagreement.
Both slashdot and reddit have their source code available online. But for the same performance reasons as not using an existing CMS (as per above), I didn't bother deciphering their code. It was more straightforward to just write functions as required.
Actions are sent to a file called do_stuff.php via POST requests. Submitting a comment is a complete navigation and redirect back but comment voting and marking is handled via AJAX requests by the same file.
To reduce server traffic and load only a partial Model-View-Controller design is used. Comment voting and marking (likes, dislikes, etc.) are sent to the server via an AJAX POST request but only a confirmation is returned, not a new value to update the page display. The update is just assumed and applied unless the confirmation is not received.
HTTPS is achieved with certificate signing by the free CA Let's Encrypt. Subscription emails are sent from a cron job on the server while activation and report emails are sent instantly from the php script.
Let's Hold It All Somewhere
Let's fire up a MySQL database with enough tables to handle our comments, usernames and passwords, comment votes, marks, and subscriptions. Since our blog may grow to enormous popularity we need to consider performance. Indexing your tables is essential for a database table of any size. It will also help your pages load faster which is essential for staying under the 3-second attention span of the average internet user.
And don't forget - all user input is evil!
Sharing the friendly way
Most social networking sharing buttons have third-party javascript. This is typical so the social network can display the proper link and stats, and also to track the external page views of its users. But you can have sharing links without any third-party javascript running. See my (Share) menu below beside the page like count, each service is a traditional static link to a post submit page with the page url pre-typed. Of course I don't get the little statistic about how many times the page is shared on that site but I could probably add that in a way less invasive way if I really wanted it. These are the sites I have so far. I might add some more in the future.
https://twitter.com/intent/tweet?text=Let%27s%20Make%20a%20Blog%20by%20@codywohlers%20https://blog.codywohlers.ca/2016/lets-make-a-blog
https://www.reddit.com/submit?url=https://blog.codywohlers.ca/2016/lets-make-a-blog
http://www.facebook.com/sharer/sharer.php?u=https://blog.codywohlers.ca/2016/lets-make-a-blog
https://plus.google.com/share?url=https://blog.codywohlers.ca/2016/lets-make-a-blog
https://www.linkedin.com/shareArticle?mini=true&url=https://blog.codywohlers.ca/2016/lets-make-a-blog
I'm also releasing all blog entries under a Creative Commons Attribution-ShareAlike License. The “Attribution” portion requires others to give appropriate credit to me if they use my blog posts. And “ShareAlike” requires them to license any derivative works in the same open manner. This doesn't prevent me from releasing or selling additional copies of my works with different licenses, (for example - unrestricted use by an individual), but the original copies with the original CC BY-SA licenses will always remain and are unrevokable. Now let's write some musings.
Happy Reading! We'll see you in the comments.
Cody
Wohlers
codywohlers.ca
This
work is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.