The BetsyG-Spot

After several people suggested I start a for-profit blog, I started to research the subject. The obvious google search (make money blog, or some such thing) led me to this incredibly helpful and thorough article: How To Make Money From Your Blog. I probably should have been scared off based on reading that, but I felt I could learn everything mentioned in the article, though not overnight. It was a go.

Blogging software and hosting
After choosing a suitable and available URL, I had to decide where to host the blog. I first considered three blogging sites: Blogger, WordPress (.com), and TypePad. Blogger allows you to use ads (and is particularly well-suited to Google Adsense ads, as it’s a Google enterprise), but I’m pretty sure you can’t use your own URL without “blogger” in the name. I think there is also separate Blogger software that you can use on a self-hosted site, but I didn’t pursue that option. WordPress.com, also a free blogging site, allows you to use your own URL for a fee, but it doesn’t currently support ads. You also pay a fee to customize the theme (well, to save the customized files…you can customize to your heart’s content and lose all your changes for free). TypePad costs money.

At my friend Erik’s suggestion, I decided to go with a self-hosted site using WordPress software from WordPress.org (not WordPress.com). At WordPress.org you can download the free blogging software, find the documentation, and access support forums. (I am curious as to how they make money. If anyone knows, please comment. I didn’t run into anything for sale on WordPress.org and it’s really comprehensive.)

Erik is a pretty knowledgeable guy (to put it mildly—MIT engineer and patent attorney extraordinaire) and had done a lot of the legwork I would have had to have done, so I relied on his judgment quite a bit. But the WordPress SEO Whitepaper I read and every other site I found useful agreed: WordPress is the best for SEO (search engine optimization), and self-hosting gives you the most flexibility if you have the stomach for doing the customization.

Hosting services and domain purchasing
While GoDaddy was recommended for both purchasing domains and hosting, WordPress software has particular needs that are more easily served by a host that is WordPress-ready. Of the companies WordPress suggested, I chose HostICan because a) they offer a free domain, and b) the latest version of WordPress is already installed. I get unlimited e-mail addresses, and they also provide a nice user interface to everything I’d want to do; though I discovered the other day that I don’t know how to FTP, which you have to do for files over 5MB.

I purchased additional domains (the .net and .org versions, and many variations on the name in the .com, .net, and .org versions) from GoDaddy and have no complaints about them or their pricing; just be careful what you click, as there are a lot of automatic add-ons. All the parking and redirecting worked like a charm (easy and well-documented on both the GoDaddy and HostICan ends), so I now have 12 addresses that all bring you to The BetsyG-Spot.

Customizing in WordPress
I was ready to go to work on my blog using the WordPress software. This is where the fun began. The documentation on WordPress is vast. I started at the beginning but soon found myself lost in it so I decided to just start doing what I knew how to do and find the answers to my questions later. I had already done a quick tutorial on CSS (enough so I could read and attempt to decipher someone else’s file, so at least I knew what it did, even if I didn’t know the semantics).

Selecting a theme. The next step was to select a WordPress theme. A theme is not a template (not really, but so close it’s hard to tell the difference) but a description of the look and feel of the blog. The theme is made up of a bunch of php files (I believe these are called templates) and a CSS file.

I tried a bunch of themes but at the time I couldn’t figure out where they were getting their header image from, so I then looked only at themes that had the Custom Image Header feature. That feature provides a user interface to changing header images. Eventually I selected a theme that seemed to have most of what I wanted and was widget-ready (meaning you can easily add elements to the sidebars using the WordPress UI), which I really didn’t need because the page design practically insists that you insert widgets manually. (It was a bitch getting the related links from Post links to look like everything else in the sidebars.) In fact, using the widget wizard was wiping out the widgets that came with the theme, so being widget-ready really didn’t help at all. I eventually discovered that the “if there are widgets, then use them” command had been put in what I would call the wrong place. I moved it, and can now use the widgets. (The only one I used was the tag cloud, and as you can see I do not control its aesthetic though perhaps with a disproportional amount of research I could figure out how to.)

Customizing the theme with CSS. I started to go about the business of customizing the theme to look as I wanted. Using the theme editor in WordPress, I opened the CSS file. At first glance, I couldn’t figure out what controlled what. Actually, on second glance I couldn’t figure it out either, so I started to change likely suspects, one at a time, and see if they affected the aesthetic. This seemed insane and painstaking, though I made progress after many, many hours. Not having all the time in the world, I started to look into alternatives. After all my research (including looking into theme generators to make my own theme and using DreamWeaver to edit the CSS), I found a document that actually said that the method I had stumbled upon was, shockingly, the recommended method to ensure compatibility. “Play detective,” the page urged. Man. I used to do coded typography, from 1978 to 1990, and of course that was supplanted by WYSIWYG. Who would want to design a page—set colors, for example—by coding? Programmers would. Editing CSS for WordPress themes is now in the domain of programmers and incredibly patient, reasonably technical people such as myself. Crazy. Graphic designers should be able to control the look of a page, and without editing CSS. Honestly, I saw a forum in which the programmers were baffled as to why the people who owned the site would want to be in control of their page aesthetics after the theme was handed off. Giant step backward or what?

After a few days of getting to know my CSS file, I was getting better at changing what I wanted when I wanted, although because I was making design decisions at the same time (trying different shades of the same color, for example), it was painfully slow. I tried the Firefox integrated developer tools, whereby you can edit the CSS, see its effect immediately, and save the CSS to a local file, but I couldn’t see my graphics while editing the CSS, and every time I clicked a link on the page, I’d lose all my unsaved work (it’s easy to forget). It looked like they also generated a bunch of files that weren’t in the original, so I decided that the hideous process I was using before was the less error-prone one. (I did on occasion return to Firefox for various trials.)

Mucking with the php files. I soon figured out that the theme functions didn’t work exactly as I wanted them to. The page buttons on the header were set to be in alphabetical order, for example, and I wanted to control the order (surprise!). I had to find the line in the right php file (php files control behavior; CSS, the aesthetic, although I’ve had to hunt down aesthetics that were erroneously and mysteriously placed in a php file) that posts pages, google it, read the WordPress doc, then modify the php file the way I thought the doc was telling me to, iterating several times until I got it right. There were quite a few elements I wanted to have this level of control over, so I soon found myself commenting out lines of php code, moving things around, looking up WordPress commands, editing HTML, editing labels, and so on in the php files. (I think I have quite nice text for my error 404 file. Here’s a bad link if you want to see it.) This was really work for a programmer, but I was able to deduce enough to achieve what I wanted in all but one circumstance, and that was with a plugin. But really: a lot of work.

WordPress plugins. The other aspect of WordPress I had to learn about was plugins. Plugins give you features that WordPress doesn’t come with; for example I use a plugin called Post Links that lets me have a “related links” element in the sidebar, conditionally if I wanted to muck with the code (and I did). I use another one called Different Posts Per Page (where you can have a different number of posts on each page, but I won’t link to their site because they turned out to be spammy). Plugins are general pretty easy, but I always read the description and install instructions and, frankly, it could be the most powerful plugin in the world but if I had to learn another thing to install it, forget it. Another plugin I like is cforms, which enabled me to make custom forms (really flexible) and modify the aesthetics (a bit of a pain, but that’s because it’s CSS). It also includes spam prevention, which was critical. Plus I reported a bug (let’s call it a small incompatibility, because the author said it was really on the WordPress end) and the author repaired it and made the plugin available immediately. It’s free software, so that’s service, baby.

That’s pretty much it on the technical side, except it took easily 10 times the amount of time it would have if there were object-oriented software available for customizing.

Design
This was a fairly rich area for making myself insane. If you’re going to do your own blog and you want it to have distinctive and attractive aesthetics, you have some work cut out for you if it’s not your thing. It is my thing, but I was so out of date on PhotoShop and knew so little about CSS, it was another painful part of the process.

A few parts of the design come to mind. One was the header. The image on the left was relatively easy; I just brought a photo into PhotoShop, cropped it, applied some filters, and uploaded it. Actually, I lie. I brought several photos into PhotoShop, tried cropping each of them in a variety of ways until I captured the segment that satisfied me, erased the house number, and applied 30 or so different filters, playing with the settings in each of them to see if I could squeeze out something just a tetch more pleasing. Then I uploaded the three finalists, previewed each of them on the site, and finally selected the one you see today.

The logo on the right was slightly more time-consuming, though it didn’t require that much PhotoShop knowledge. (Now that I’ve got layers and gradients down, life is simpler.) One issue with the logo is that I am a font freak. I spent hours looking for the perfect G (I like MyFonts for font shopping) and finally purchased one font, just for its G (Dryden…interesting font, see below). Yes, I paid $40 for a letter G. I purchased just one font because I already owned a font with quite a nice G and thought I’d try that as well. The font I already owned turned out to be the winner, but I think I’ll keep that to myself to preserve the uniqueness of my logo. (The sans-serif is Myriad Pro, which comes with PhotoShop. Gorgeous for its purpose. Thank God there was something there I liked; shopping for sans serifs is even worse because of the subtleties.) I used a few effects on the text and was done with that.

Here’s the Dryden font and the logo in Dryden:

The only complication with using a graphic for your title is that it’s not searchable by search engines. So the trick is to leave the title tag in place, and give it the “display: none” property in the CSS.

The other new thing for me was the favicon, that cute little graphic next to the URL. Not an enormous deal graphically. (The one I ended up settling on was just the third one I uploaded—not too obsessive.) Mostly you’re dealing with finding something that looks good at 16 x 16 pixels. I used a free icon editor (icoFX) to do the final editing and save it as a .ico file. It seems that with the theme I am using, favicon.ico wanted to be uploaded to both the home directory and the WordPress theme directory, and I’m not entirely sure why the designer did that; all I know is it suddenly stopped working. So I found some suggested code on the web and replaced it with that, so now it just looks in the home directory like a normal theme would. (That was a last-minute headache that made me move my launch date out a week.) It also took me a while to figure out that you have to give Explorer a lobotomy to forget the previous version. Clear cache and history. Close, reboot, click heels three times…

This HTML color picker was indispensible during the design phase.

Video editing
I know what you’re thinking: what does video editing have to do with this ? A few of my planned posts will be just that much better with video, so I shot some footage I’d planned with my son’s new Canon digital video camera. If you want me to tell you more about that, I can’t, except that the camera functions as a removable disk on a USB port, if that tells you anything.

The problems that arose here didn’t concern the video editing itself; I’m a software monkey and can figure out how to make any end-user software work, plus I have made light use of editing software in the past. The problems were that the widescreen format that the camera shoots in wanted to be smooshed into the usual TV aspect ratio and that the video editing software we had in the house (and there’s quite a bit of it) either couldn’t handle the MPEG-2 files from the camera or wouldn’t output in anything but a proprietary format. I very possibly spent more time trying to resolve this than on any other problem other than trying to place an image at the bottom of a page in HTML. (That can be done with tables, but tables are frowned up on for SEO.) I tried MPEG-2 to AVI converters. I tried modifying my codec, despite a nasty warning from Windows that I could hose my computer. I endlessly tried editing in Windows MovieMaker, saving after every change (and between crashes). And I tried to figure out how to get my audio track to play in Ulead Studio 9 and 10 when I could see it—practically touch it—but couldn’t hear it.

If I could get the widescreen to work, I couldn’t get something else to work. If a package could handle MPEG-2s and output to something useful, it couldn’t handle widescreen. My son seemed to think the smooshed images were okay, but I majored in film and worked in television…that was not going to happen.

I finally thought about it the right way and did a different search. What I needed was a nice MPEG-2 editor. Seems so obvious now that I say it, huh? But the camera came with one, and it wouldn’t output wmv, avi, or any other format, which led me to believe it was more difficult a problem to solve than it was. Ulead Studio 11 came up in the search results and, since I already like Ulead, I downloaded the free trial. (I’m sure we’ll buy it.) Anyhow, it worked, and I could output wmv files in widescreen format. Uploaded onto YouTube, put the embedded video link into my file, and I’m delighted with everything except the video’s resolution.

Revenue-generating models
Simultaneous to customizing my theme and solving the design issues, I was frantically researching the various technologies covered in Steve Pavlina’s article and in a few others. (The “related links” on this page has the best of them.) I needed to understand advertising options and how each worked. I love the idea of affiliate programs, which means my site functions as a sales site for another company and I get a commission. The Amazon Associates program was the first of these, and I think for my content Amazon is the perfect match, as I talk about books, movies, and music all the time. They offer about 20 different programs, so there’s some research needed there to decide which one to use, but also as I tried to work with them, I found they, like all the other ads, generated invalid XHTML and caused more headaches as I tracked down the problems. (They sometimes use ampersands in their links that are not entity references and, depending on where they are in the document, the validator chokes on them. Finally discovered the solution was to always insert an ampersand in the ads as a character entity reference; once I did that, the ads were go.)

Because Google Adsense (context-sensitive text-based ads) seems to be very profitable, I thought I would try them and see what kinds of ads it put up with my articles. So far it appears to need some tweaking, as it’s selling wives from Japan. I decided to use the image-only ones for my regular content and the text style ones for these technology pages. (And yes, there was more customization involved in having actually now three different sidebar styles.)

Putting the ads in place seemed to be relatively easy, until I realized the problem with the invalid HTML. I had a little difficulty creating the Google search results page, because I really, truly don’t know enough HTML to create even a simple page. But got it all worked out eventually.

Social networking
As to social networking, I found a wonderful widget called AddThis which provides the cute little buttons for adding a post to all the popular sites. Once I found that, I stopped worrying about the differences between diggit and del.icio.us, because I can now make it easy for readers to add me to whatever site they use. You can also use AddThis for subscriptions, but I’m using Feedburner, at the recommendation of both Erik and the SEO Whitepaper. When you click the Subscribe button, it takes you to FeedBurner’s subscription service, which is much more intuitive than the default. (Getting subscribers is important for getting traffic; the more subscribers you have, the higher you come up in some searches.)

FeedBurner is great in all kinds of ways, but I am most impressed with their documentation, and I’m hard to impress. They understand what people don’t understand, and they explain it clearly and calmly.

There are a few other things I need to figure out, such as how to get myself into blog directories and blog carnivals. But perhaps I can’t do it all for day one. Still, it’s important to get into the sites that publicize blogs. FeedBurner even has some advice for that.

SEO
Finally, there’s the search engine optimization, which is really a subset of traffic building (getting people to come to your site). If no one comes to your site, you won’t make money (and in my case no one will read my wonderful essays!). It’s fairly simple. But tagging your site in all the different ways possible is not. Mechanically it’s easy, even if you need plugins for some of it on WordPress. (I’m using the All-in-one SEO Pak plugin for adding search-friendly titles and keywords, for example.) But what do you tag with and what keywords should you use? This is an area of expertise, and I don’t know what I can learn before I go live. I may end up using Site Built It! just for that purpose rather than taking precious time to figure it out myself. (Site Build It! does everything I described above, or provides an easy interface to do it. But most importantly, in my eyes, is it knows how to tag.)

What else?
There was much more to it than that, because there are so many conceptual decisions to make…What goes on pages, what contact forms do I need to design, what goes in each sidebar, where shall my ads go (there was a paper on that too). Almost everything I touch turns out to be the tip of an iceberg.

That is the end of my story for now. A lot to know. I’ll be glad when I’m done and I can focus on my essay writing. I had to write this piece, because I had to document, at least in part, what I’ve been letting the house fall apart in favor of. And now, I think I’ll finally clean my bathroom.

.