Preparation (Part 3) – Content Prep with Classeur

I apologize for the long wait, but I think I’ve mentioned before that when it comes to websites, especially with wireframing, it will take awhile for me to come up with the design portion. With that being said, I’ve made a focus on fine-tuning my text content that will eventually be in that future layout that is still work-in-progress.

In short, once we get the wireframing ready, and that we are ready to convert this wireframe into our very own Hugo theme, we will have all the content, coded and everything, ready also. Because Hugo’s core syntax is based on Markdown, we will be doing this second part of the content prep all involved with Markdown.

If you have just joined this series and are unfamiliar with Markdown, there are plenty of resources and tutorials that you can check out around the net. Or, if you prefer, you can check out my Markdown tutorial series.

There are plenty of Markdown text editors out there, but recently I have discovered a brand-new Markdown app that just recently launched back in October 2015 called Classeur. Classeur is a brand-new app created by the same folks behind StackEdit that you can use online, as a stand-alone desktop application for Mac and Windows (both coming soon!), or as a Chrome app. I love working with stand-alone apps that can be synced with online services, like my blogs, for example, and because the Mac and Windows versions aren’t out yet, I downloaded and installed the Chrome app version. If you would like to follow along, just click on the link I provided you and pick your poison.

Home Interface

Classeur Home Interface

Whether you use the online version, or you installed a Chrome app, the first thing that you’ll be seeing will be the one you see on this screenshot. Because I installed it as a Chrome app, I linked it to my Gmail account, and this is the interface that I see on my end.

You can go ahead and check out the gear icon (1) and do whatever settings as you wish that would work for you. I already created my folder for CBLW’s content by clicking on the green tab (5). I typed in Cherry Blossom, Little Wolf as the new folder name, and as a result, I get the pink tab (6).

You also have the option to import an existing folder from your hard drive. But, for the sake of this tutorial, I decided to create my folder from scratch.

Folder Interface

Click on the new tab that you created, and you will see something like this below:

Classeur Folder Interface

This is where you will be creating all your text content using Markdown. You have the option of changing the names of your folder and your file by clicking on (1) and (3). You can also share your folder or file(s) on social media by using (1) and (3) or you can also delete the file or the entire folder using those same menus.

I already created my first text file by clicking on (2), and that I named it Homepage Intro. When you create a file, not only that it will appear on your folder interface, but will also appear on the Recent Files tab (blue) and the All Files tab (green).

Editor Interface

When you create your new file from your folder, Classeur will take you to its editor interface like below.

Classeur Editor Interface


If you are already familiar with Markdown, just write away using all the special characters needed to format your text. If not, you can use the handy little menu above (1) and pretend like you’re writing using a word processor or a CMS interface like WordPress.

You can preview what you’ve written so far by using (2), where you can exit the editor, the second icon below the X lets you preview your text as how everyone else would see it (when you post it up on your website), and the last icon being that you can have a side preview of your text.

There are optional toggles that you can use (3) – toggle sidebar, where it shows you a quick guide to Markdown, and to toggle your document stats, like the one you see below (4).

This is how my preferred editor interface looks like because I really want to be efficient with everything I type at the very little time:

Classeur Custom Editor Interface

While I type, I want to see the output of how the text would look like on the web (1). I also want to have some guide to Markdown when I’m stuck at something, which is why I toggled the sidebar. If I do decide to create another section using Header 1 like I did with the current one you’re seeing right now, you’ll see the Header 1’s on the document’s Table of Contents (2).

Classeur seems to have a Discussions (3) section, but because I am writing content for a website, I don’t have to deal with that section. I think that this only applies to collaborated work with others, but this is a solo project, so I don’t have to worry about that section.

What I love about Classeur is that it also records the history (4) of what has been done to this document and who made these changes. This is very helpful with collaborated work, so at least you would know who has been contributing and who hasn’t. Again, not an important feature for me at this point.

Lastly, I’ve got plenty of options on what I can do with my document. The only thing that I plan on doing with my documents once I’m finished with them is to export them as Markdown text files (the special characters, everything), save them in my hard drive folder, and once I convert my future wireframe into a Hugo theme, all I have to do is copy and paste these files on the appropriate sections of the site.

By the way, I love how interactive Classeur is. I just had to take a screenshot to show you how the interface looks like when you press the menu (5) tab:Classeur Menu Options

To sum it all up…

I opened this section to introduce to you to this very fresh (and still in beta) Markdown editor called Classeur. I played around with it a few days ago, and I really love everything about it, which is why I added this in my list of tools for this LBP. There are plenty of other Markdown editors like its parent, StackEdit, so to each his/her own. I often used StackEdit before until I saw a link that says Try Classeur beta! on top of the StackEdit interface.

You can use Classeur for everything: writing outlines, making lists, writing blog posts, writing a novel, you name it.

I know this is a very short section, but this is what I’m currently working on at the time being. Hopefully in the next update, I can finally have a wireframe up and ready to go!