Thoughts On Crunch Time And Building Themes For Ghost

I've decided that this will be my first post using a non-stock photo. It's 4 A.M and that's me in a blanket trying to knock out a Ghost theme with a Hello Kitty pencil. Yes, I do own an actual HVAC at home but I'm near a window at the coldest part of the house. I could push up the temperature but even with every door open in the house my kids and wife would fry in their rooms. So that's that.

I'm taking more time than I probably should to complete a conversion of a theme for http://lazytech.tv

This is the Wordpress theme I'm trying to convert...

Here's what's done:

1. Choosing Which Variants Of The Template I Need

When you look at the Wordpress Zox Theme I had six layouts to choose from and eight variants of how each post would display. I took way longer than I needed thanks to the perfectionist in me. At least I'm happy. I can feel comfortable knowing that the look and feel is one I'm sticking to without any compromises.

2. Saving Wordpress HTML Outputs

This part was easy. It was literally doing a Save As... on the Chrome browser and pulling the raw HTML files in a single folder.

3. Combining Assets Under A Single Folder

This definitely took awhile. When you save a webpage on Chrome, it creates a separate folder for each page that you save. You're then left with the task of finding out which of the elements are common among the webpages (e.g. headers, meta tags, navigation, menu, footers, etc.) and slam them all into a single folder - or at least a few of them. These elements included things like javascript (JS) files, CSS files, images and fonts.

4. Cleaning Up The HTML/CSS

The Zox Theme had a TON of CSS Classes that had to be removed or at least commented out. This was a big part of the effort. I also wanted to reduce the file size and rename the classes to make it more custom.

5. Remove Wordpress and WooCommerce Specific Stuff

Ghost still does not have the ability to search posts; at least not yet. So those were taken out. The Zox Theme also had the ability to work with WooCommerce, an e-commerce extension for Wordpress, but thanks to a little search-and-replace it wasn't so bad stripping that code out.

6. Setup The Ghost Environment Locally On My Machine

This was way too easy. Whenever I setup an environment for Wordpress to build themes, I still have to set up a software stack. That means installing LAMP or its variations e.g. WAMP, XAMP, etc. LAMP is Linux, Apache, MySQL and PHP. THEN, you still have to setup the database instance, configurations, etc. All of those wonderful things have to be done before you can install Wordpress. While there are software installers that do all four like WAMP, a Ghost environment takes seconds.

On Ghost, it's just two things: Installing the Node.JS runtime and running two npm commands:

npm i -g ghost-cli@latest
npm start

That's it. Bam. You're off and running. Crazy. Props to the Ghost development team for using the latest stuff.

7. Convert The HTML To HBS Files And Renaming Them For Ghost's File Structure

Once most of the HTML/CSS was cleaned up, I had to rename the files. Not hard. Ghost likes this kind of structure. I had to draw alot of arrows. For example, lztv_homepage.html became index.hbs

So I went from this...

To this...

8. Modify The Theme To My Liking

This is where I'm spending way too much time but I'm enjoying every bit of it. Handlebars is an awesome template language. It literally took me ten minutes to learn it.

The result was this...

And that's where lazytech.tv is at. As of this writing, the site is running on a ghost environment with static content and some handlebar tags already in place.

So What's Left?

There's quite a bit to cover but not difficult. All of this is in order of priority.

1. Posting More Filler Data

Lazytech.tv has the six categories that need to be prefilled with articles. I'm probably looking at least 36 entries. A must-do.

2. Separate Common HTML Pieces Into Partials

Header, Footer, Menu Navigation, Ads are still not separated. Not hard but must be done before anything else.

3. Work On The post.hbs And Related Files

The post.hbs file is the one where I'm ramping up my efforts on. It's the actual file that produces the article itself. It's the thing you read after clicking on something that looks interesting.

4. Write Up Some Actual Articles

I will probably have to spend some equal time on this and ask my business partner to help in the efforts. A line will have to be drawn between releasing the site over having enough articles.

5. Update The Social Networks To Reflect The Site's Look

That includes the logo, design, scheme, etc.

6. Final Clean Up And Sliding Mobile Menu

Obvious but not hard. Pretty much downhill once I get to this point.

In The End

I'm shooting to release lazytech.tv on the 30th so hopefully my kids don't do anything crazy like set my living room on fire. With the kids home, they'll need just as much nurturing as the business if not more.

Stay tuned and thanks for reading.