Developing With Wee
It's about time I got around to explaining how I developed this website, or at the very least, my Journal. To begin with, I went through the usual means of wireframing and visual compositions, using Photoshop. However, my initial plans involved using Wordpress as the Content Management System, but this soon changed as I discovered Wee_, developed by David Turner (@Herrwulf). Wee_ is a simple flat-file CMS using John Gruber's Markdown as a method of adding posts, pages and potentially a lot more.
I suppose the main advantage I found to using Wee_ over Wordpress is that by implementing updates with Markdown, using this flat-file format, it reduces the need for a MySQL database. For the primary task of designing and updating a blogging website, Wee_ wins. What's great about Wee_ from the perspective of an Interactive Multimedia student, is not only does it encourage you to apply your own design, but also helps in understanding the code used to build it. I'll try not to regurgitate the back-end details of how Wee_ works but more on how I have editted pieces of code to achieve the results I wanted.
Throughout the design, however, I gave in to making changes as I simply wasn't happy with certain aspects and also thanks to some feedback by Chris Grant (@duckbox). This is an ongoing development process so as I continue to work on creating extra functionality, I will aim to document it here, hopefully with some feedback in the comments.
So to begin, after downloading the zipped script files from I strongly recommend that you keep the zip file in a safe place as a reference when something goes wrong... and if you're not as savvy as myself or David when it comes to PHP, you will most certainly need it. So you unzip, extract, load into your localhost and your pretty much ready to get started playing around with it.
Note: Wee_ currently only works when used within the uppermost level directory i.e. not within a sub-folder. However, if you were to create a sub-domain on your live server (e.g. blog.colmmorgan.com) it should work as intended.
Setting up a sub-domain on your localhost (e.g blog.colmmorgan.localhost) can prove to be more difficult. I'll probably throw up another post on how to create a subdomain in localhost at a later stage.
Get familiar with the structure
Your folder directory should look something like this:
Your domain folder should typically be the name of your site, it's just good practice and makes it less likely to forget what the project is if you're really busy/popular/reputable etc. and have loads of projects... eventually. 'Journal' can be renamed to 'Blog' or whatever it is you want, but tread carefully as it may upset some of the back-end markup. Specific error pages such as your 'Coming Soon' page or 'Error 404' can be editted just like your regular postings, through Markdown. Finally, and, of course, most importantly, your own theme. Just as you would do in Wordpress when designing your own theme you would do it here too, except without an interface to get in the way.
Starting with the basics
The config.php file is typically where everyone should start, mainly the areas shown below
# Pick one of these, used for defining whether site urls should have www. at the start or not.
// If you don't want to replace www. in urls...
// $url = 'http://'.$_SERVER['SERVER_NAME'];
// ...otherwise...
// $url = 'http://'.str_replace('www.', '', $_SERVER['SERVER_NAME']);
// When using Wee_ in localhost...
$url = 'http://127.0.0.1';
// ...remember to change this before uploading to your live server.
// Your website will not be on the visitor's device.
Next, define the core elements of your website...
# Site Information used in various parts of the CMS.
define("SiteName", ""); // Used in RSS feed, can be used for Page Title generation
define("Desc",""); // Used to set the RSS Feed's Description
define("Author", "", true); // Sets default post Author. Can be overridden on individual posts
define("siteEmail",""); // e.g. for contact forms
At first, you may not have any posts written. That's ok, but as you continue through the process of indulging your fans with what's going on in your head, you will need to break down your posts manageably so as not to overload their browser. Also, if you are using an RSS feed, you may want to limit the amount of posts that appear.
# Post totals for category page and for RSS feeds
define("PostsPerPage", 5); // Posts per category page
define("FeedTotal", 20); // Posts listed in the site's RSS feed.
In the days of Yore, before people used Dreamweaver, web pages were built from scratch, using a blank text document in Windows Notepad or TextEdit for Mac. It therefore involved writing out those meta tags for keywords, site description etc. Now it's as easy as this...
# Default <meta> information for site, only used in very limited circumstances
define("SiteDescription","");
define("SiteKeywords","");
...and with this in place, Google will be happy, especially if you are using Google Analytics...
define("ga", "UA-01234567-8"); // Setting the Google Analytics Key for the site.
Please note, that isn't my actual Google Analytics code. Dont' be silly.
Now, something quite specific I used was the format of each post date, using the <time> element, which has been reinstated by W3C
# Optional formatting for content
define('dateFormatBefore',"");
// Required if you want post dates to show up.
// Replaces <!--[TimeStamp]--> in posts.
define("dateFormat",'D, M j\<\s\u\p\>S\<\/\s\u\p\>, Y');
// by <!--[Author]--> is a possibility
define('dateFormatAfter','');
Once again, with a little help from Chris Grant, I was able to configure my own date format and how I wated it to display. This required knowledge of the different variables in displaying date and time. As a reference, I found [ExpressionEngine][10] to be quite useful. The format syntax you see would then display as "Day, Month 01st, Year" where 'Day' and 'Month' are only using the first 3 letters, however, no leading '0' on the the date, followed by a 4 digit 'Year'.
The other variables you see allow you to write the date in a full sentence format, using pre-defined text before and after.
Finally, or along the way, you would probably like to define your own theme to be used throughout your site...
// Setting theme for site, can be editted in /-template/themename/
define("theme", "your_theme_name");
I typically found that in order to familiarise myself with how Wee_ works, I removed all stylesheets within the original zip file before adding my own, effectively creating a 'Starkers' theme for Wee_, i.e. no styling.
There are other parts to this config.php file but for now that should be enough to get you up and running.
Writing your postings
As you may have noticed, some of the dummy posts in place have all been written in Markdown, particularily '/markdown-101/post.md', detailing all the possibilities of what you can do, including a picture of a cat (because it's the internet and it wouldn't be right if there was no cat!).
At the beginning of each post, you'll also notice
Pubdate: 26-08-2011 19:11
Tags:
Desc:
Title: Markdown 101
This is where your core web page data is declared, and is subsequently transformed into the relevant meta tags.
That's, more or less, that when it comes to posting something in your blog, but in order to make them truely visible on your site, you would then need to add the name of the file your posting to an upper level index, like so...
`/categories/journal/index.md`
developing-with-wee
the-end-of-time
project-planning-with-tibus
major-project-chosen-idea
major-project-proposal
The order in which these posts are listed is important. The top line will be the first to appear on the page, the bottom being the last. Remember that variable we saw earlier, define("PostsPerPage", 5);? Well, that now comes into play when there are more posts listed than the number declared, a new page is effectively created, listing all other posts etc., in this example, with 5 posts per page.
When I say 5 posts per page, what I mean is the heading, timestamp and anything else before the tag <!--[More]--> acts as a breaker. At this stage, it may also be helpful to have an anchor tag surrounding your main heading.
Defining your HTML code structure
If you have created a static HTML pageas a basis to work from, which you probably should do after your visual compositions, then the final step is to just break it up in two, placing everything in your static HTML page that appears before your content into the file /template/~template-name/header.php and everything after your content into /footer.php. In fact the only thing left to do now is to configure how you want user comments and comment form to be displayed, but this is dependent on whether you provide this availability in config.php. Kind of like I have done, as you may see below.
Speaking of which, what's your thoughts?
Are you keen to try out this new CMS for your own website?
If you're already using it, do you find this post useful?
Or perhaps after reading, you are implementing the CMS for yourself, how did this guide help you out and what did I miss out or could improve?
Let me know as any help throughout the web development community is key to the progress of Wee_ in making it more widely used as a simple blogging tool.
References
undefined, 10/11/2011, Revert request for r6783 from Paul Cotton on 2011-11-03 (public-html@w3.org from November 2011) [W3C Public Mailing List Archives], [online]. Available: http://lists.w3.org/Archives/Public/public-html/2011Nov/0011.html [13/11/2011].
null, 31/10/2011, HTML5 Drops the Time Element | Webmonkey | Wired.com [Webmonkey - The Web Developer's Resource | Wired.com], [online]. Available: http://www.webmonkey.com/2011/10/html5-drops-the-time-element/ [31/10/2011].
undefined, 13/11/2011, Date Variable Formatting - ExpressionEngine v2.3.1 documentation [ExpressionEngine - Publish Your Universe!], [online]. Available: http://expressionengine.com/user_guide/templates/date_variable_formatting.html [13/11/2011].
Comments
Do you think there's anything to discuss? Tell me