Why I wrote my own CMS so I could write a novel in a month

November 2, 2012 | 8 comments

Growing up, I always wanted to be a professional writer. It’s still something I aspire to, but I get just as many creative kicks out of building software – and the pleasure is even greater when, just occasionally, I get to combine the two.

I’ve tried to participate in NaNoWriMo, the National Novel Writing Month, before. Usually, I flake out. To have “won” NaNoWriMo means that you’ve written a complete novel of over 50,000 words over the course of the 30 days of November, and most of the time I stall at 3,000 or less. I’m ashamed to admit that part of my inability to complete any kind of long-form content is my dependence on the Internet: I’m so used to tweeting and getting feedback that the thought of getting to 50,000 words without anyone seeing it is daunting. (There’s a whole other piece to be written about this – I’ll get there another time.)

So, I decided that this year I’d try it again, but I’d publish publicly as I went. It’s an exercise in perseverance more than anything else, so I’ve tricked myself into thinking that this is okay. So here it is – but I’ve chosen to write it a homegrown CMS rather than using Word or WordPress. I wanted to prominently see the word count as I typed, to track my progress towards 50,000 words. And I didn’t want to deal with the increasingly-complicated WordPress interface (which I gladly use for this blog) or be tied to a single computer in the way I would be with Word. I also wanted to play around with some little bits of flair that would be hard with an existing piece of software.

So, I spent an hour or two the other night putting something together.

(My Writemo editor, above, vs WordPress’s editor, below.)

The CMS is a series of PHP scripts sitting on a single-table MySQL back-end. I’ve split the novel up into segments, which are effectively posts. That makes it easy for me to edit small chunks of the novel at once, rather than having to open the whole thing up each time. It also allows me to syndicate the novel in an RSS feed, and give people the choice to read it novel-style, with the segments in ascending order, or blog-style, with the newest segment at the top.

There are no images. I set the background to #eeeeee, the text color to #333333, and the font to Kameron from the Google Web Fonts collection. The editor is a simple textarea control, but in order to ensure I can use tabs, I use the following jQuery (which I found on StackOverflow, although I’ve now lost the source page):

$('#maintext').keypress(function (e) {
    if (e.keyCode == 9) {
        var myValue = "\t";
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;
        var scrollTop = this.scrollTop;
        this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos,this.value.length);
        this.focus();
        this.selectionStart = startPos + myValue.length;
        this.selectionEnd = startPos + myValue.length;
        this.scrollTop = scrollTop;

        e.preventDefault();
    }
});

I also count the number of words in the textarea with each keypress, and display both the number of words in the current segment, but also the number of words across the whole project (top and bottom numbers respectively in the screenshot). For this, I used C. Bavota’s jQuery word count plugin as a starting point, and pared it down into something simple enough for my needs.

Because I didn’t want to mess with wysiwyg editing, I chose to use markdown notation in the editor. That way, I can italicize a passage by using _underscores on either side of it_, for example. It’s very intuitive, particularly if you’ve ever edited anything on Wikipedia or in Mediawiki. And Michel Fortin’s PHP Markdown project is extremely simple to use: you simply wrap your string with the Markdown($string) function in order to turn it into perfectly serviceable HTML. The only niggle is that I noticed it doesn’t handle single line-breaks very well, so I deliberately double-space my text before I convert it from markdown.

And that’s it; the editor itself is deliberately designed to be extremely simple, and (if I push Firefox to full-screen mode) feels like a low-rent iA Writer or other distraction-free writing utility. I can edit from anywhere, on anything that supports standard HTML, and my pages are extremely low-impact. And most importantly, I’m getting the words out.

Anyone else rolling their own software for this kind of thing? I’d love to compare notes.

Related entries

8 Comments

  1. Very cool and I think you’re onto something with the crowdsourced writing/review process for longer-term projects. Helps for immediate feedback and continued motivation. btw, love this: “I figured I’d head to California and see the part of the world where knowing your way around an Integrated Development Environment isn’t seen as an enormous character flaw.”

    Mike November 2, 2012 (6:03 pm)
  2. Cool project. What are your thoughts on the distraction free mode that comes with WordPress? Probably not that hard to pull a word count in there. I integrated typewriter sounds inside WP’s editor and it’s strangely quite a pleasurable kind of feedback to have while writing longer pieces. I thought I’d be turning it off after a month or so but lo and behold it’s turned out to be a keeper.

    Peter Knight November 2, 2012 (10:50 pm)
  3. I love typewriters. Actually have an electric one that I use to write sometimes, but I feel bad about wasting the paper.

    The distraction-free mode in WordPress is great – I just wish there were fewer distractions getting there! And my attention span is so fragile that just knowing the other options are there is enough to keep part of my brain whirring. (And let me be clear: I love WordPress. I just wanted something else for this project.)

    Ben Werdmuller November 2, 2012 (11:33 pm)
  4. Look for eBookmakr, this might help.

    Christoph Kappes November 5, 2012 (3:21 am)
  5. As the story gets longer it’s getting painful for the reader I’m afraid. I either have to scroll, scroll *scroll* in normal mode, or do weird read down scroll upping (if I’m a bit behind) in blog mode. Especially hard if you added to a chapter I thought I’d finished and didn’t notice. Don’t let that stop you though – love the story, just help your readers out a bit if you carry on developing this tool…

    Katie Piatt November 28, 2012 (2:08 pm)
  6. Yeah, I feel your pain. I’ve got to admit that I initially optimized this for my writing rather than reading – which is working out pretty well. My intention was to continue to build out the reader portion, but it’s turned out that I’ve spent all my available time writing the story.

    So, here’s what I planned to do (and may well implement after the fact): as you scroll down, the page remembers the furthest-down point you’ve reached, and sets a bookmark there. The bookmark is also manually settable wherever you like. In both cases, the position is saved to a cookie in the first interation. And then, there’s a permanent, hovering button that will take you directly to where you left off.

    Ben Werdmuller November 28, 2012 (9:32 pm)
  7. hello, Ben Werdmuller,i’m a chinese,I have no idea that do u know chinese novels or like the style of chinese novels.I like read novels,but also now i’m looking for a php or other language built script for novel,that means i wanna find a novel web script regardless of the display language whether in chinese or english,I wanna build a website with amouts of novels.except this i also suppose if i could translate english novels into chinese,but I got stuck in finding english novels,so can u recommand me some free english novels.well, my email is gyrate360@qq.com,how i wish i could get respose from u, thanks!

    steven lee September 10, 2013 (8:32 am)
  8. […] year I wrote a simple database-backed CMS to help me write. My brain was so addled by blogging for a decade that I found I could only be creative in a big […]

Leave a comment