Distraction Free Writing in WordPress using App.classeur.io / Markdown

Distraction Free Writing in WordPress using App.classeur.io / Markdown

Writing blog content has never come easy to me. I know exactly what I want to write but many times I cannot find the correct words and descriptions to make my post easy to read.

However, I found an intermediate solution that works fairly well for me (skip the intro to next section if you’d like). Before I get into that, a little background on my blogging history:

Over the years I tested out many platforms for writing general blog content so I could publish things I’ve learned so that others may benefit from it. These platforms include, but are not limited to:

I have always had issues consolidating my thought process in some platforms but in others I have found much better success.

For instance, things that I find to work specifically for me:

Forums like reddit.com makes it extremely easy for me to write great blog content. It feels like I’m having a conversation with someone, because I am, and I know any content I push out there with will be immediately read and generally commented on

Starting a blank wordpress blog is a different story all together. It doesn’t feel like I’m writing to anyone, making it difficult to appreciate the writing process alltogether. This in turn leads to poor writing content. Or sometimes content that feels so mechanically written without a consistent “voice to it”, kind of like when you write a project report at work or in school

Something that has really stuck to me in terms of effective writing has been “markdown syntax”. Mostly because, when I first started writing content, I got really used to reddit.com formatting.

I assume you have heard of markdown syntax, but if not you can read up on it here at the official source: https://daringfireball.net/ . Basically, markdown syntax takes away all of the formatting in writing, using simple conventions like **bold** for bold text as opposed to highlighting a word and pressing CTRL+B in microsoft word.

The biggest appeal to markdown format for me is that the conventions are the same in any editor / notetool that supports it. So I can train myself to write better content anywhere, simply by using markdown conventions

Why I use wordpress for blogging

I chose wordpress over other blog platforms like Medium or ghost because it has:

  • more flexible and has many extensions
  • significantly more useful at a platform overall (can be used for ecommerce using woocommerce, etc)
  • content I own on my sitegrounds website, not through another platform like Medium
  • easier to manage several wordpress blog sites down the road as opposed to other platforms
  • the most used blogging platform out there, meaning it has a huge amount of development support

It doesn’t make sense to learn a platform that doesn’t scale well with my interests. I chose wordpress because wordpress has everything I need.

Problems with publishing content directly through wordpress itself

I’ve covered thus far why I use markdown syntax for writing, and wordpress for blogging.

Now for publishing

There’s a number of ways to publish content directly through wordpress itself. I will name all of them, and why in my opinion they are all poor solutions for writing blog content, and then my solution

  1. Publishing directly in admin panel
  2. Publishing in wordpress.com via jetpack plugin

1. Publishing in admin panel

Just compare wordpress’s admin panel to writing posts

to medium…

The red box + arrow indicates what area you are actually interested in when writing. WordPress does an extremely poor job for making a “friendly distraction free writing environment” in its admin panel. Just compare the areas outside the red box. There’s just WAY too much stuff going on wordpress’s sidebars to even stay focused while writing directly here.

2. Publishing via wordpress.com

You can publish directly through wordpress.com itself, assuming you linked jetpack to your selfhosted website (more on that later)

This is what the publishing area looks like directly through wordpress.com

You might think this is a huge step in improvement (given there’s less clutter), but there’s still a big issue for me. No native markdown syntax

WordPress does have external support for markdown, using things like

  1. WP-markdown
  2. Direct markdown support from wordpress itself

However, both of these solutions are not optimal.

WP-markdown suffers in that you still have to use the backend admin panel in your wordpress site, which is still very distracting

Direct markdown support from wordpress itself through ✪ Admin Panel → Settings → Writing → Enable markdown, does not even work with newer wordpress editors such as 4.7.4 (the one I’m currently using)

In either case, these are both either unreliable or poor solutions to writing blog content overall

The solution: App.classeur.io

There’s a great online writing tool that I’ve used for the past year, called app.classeur.io

A gif of what my draft looks like as I am writing this out would explain it better

  • The left side is where I write my blog post in markdown format.
  • The right side is the live preview

I linked my notes here, so you can see what my drafts look like

https://app.classeur.io/#!/files/77egsieQWhAJFDVodX6Q

There’s a few core advantages in writing things in app.classeur.io

  • You can use HTML to edit out notes you don’t want to use when publishing <!-- Comment out -->
  • You can live preview your images and gifs to get a feel of what your blog post will look like
  • Distraction free writing. Literally everything on your screen is dedicated to writing
  • You can edit your view modes so you don’t see live preview, or add a table of contents using headers
  • You can publish directly from app.classeur.io right into wordpress, without going to your wordpress site

There’s other tools similar to app.classeur.io for publishing content from your own markdown text editor to a wordpress post.

There’s an app called Ulysseus https://ulyssesapp.com/blog/2016/09/publish-to-wordpress/

It does the same thing as app.classeur.io, however, it is only for apple MacOS and iphone users.

App.classeur.io is crossplatform as it is not a desktop tool, but an online tool that works with LinuxOS, windows, apple, android, etc

How to integrate App.classeur.io into WordPress using Jetpack

I use sitegrounds as my wordpress host. My wordpress site, vincentmtang.com, is not hosted directly through wordpress.com

This means, I cannot have app.classeur.io directly “talk” to my wordpress site on sitegrounds

You would have to do two things:

  • Have a wordpress.com account setup**
  • Install jetpack on your wordpress site in sitegrounds

NOTE: WordPress.org is not the same thing as wordpress.com.

To get a better idea of the big picture, I drew a diagram:

1. Make a wordpress.com account

First thing you want to do is make a wordpress.com account.

Follow the prompts through to create your account. WordPress forces you to make a website through its own hosting domain. When you get to step 4, just enter any random bits of information here, it doesn’t matter, your not going to be using this.

Select “Free plan” on step 5

On step 6 choose an actual username you want to associate yourself with, as well as your email address + password. I would highly suggest using the same email address you associate with your wordpress host

2. Setup jetpack plugin

Navigate to your admin panel. For me, its http://vincentmtang.com/wp-admin into your admin panel. Now go Settings → Add new → search for “Jetpack by WordPress.com

Install and Activate it

Connect it with wordpress.com

Sign in and approve of it

Go to settings in topright corner

Click here to link blog posts:

Link the “Wordpress” blog

Write your blog name and URL, hit link

You should see this dialog prompt

Login into your admin panel after when it prompts you

You can see if its linked now on app.classeur.io

4. Writing blog content

Start writing out your post. When the drafts finished, go to MENU → PUBLISH

Add any metadata you want to it. Categorize it, tag it, add a title, etc.

If you have issues posting just leave everything default, tinker around with settings, etc

Alternatively, you can always modify the post after the fact directly in your admin panel

2 thoughts on “Distraction Free Writing in WordPress using App.classeur.io / Markdown

  1. Hi Vincent,

    Very nice blog. I stumbled across it through Hacker News. I like your writing and range of topics.

    I used to use WordPress, but found it too distracting, especially for composing.

    Plus I’m a control freak and want my content to originate as text files on my machine.

    So, I built my own static site generator, which does only what I want and need it to do. I compose in vim, and use python and bash to convert to html and publish.

    Not implying you should do the same, just felt like sharing.

    Best regards,
    Mitch

    1. Thanks for the kind words 🙂

      I have a hate/love relationship with wordpress. On one side it has some nice built in tools on the other end. But I really prefer something simple like Jekyll / Hugo.

      I had used another site generator called Hexo which was based on NodeJS, but I didn’t like adding compilation steps to the process. It meant I had to have dependencies installed on my PC, which sometimes caused errors.
      It added a lot of friction to the writing process which I didn’t really enjoy at all. Not only that I associate programming languages with actual programming.
      So writing in VIM / vscode / etc just feels weird to me, when I write README.md docs in my repos they are usually emotionless and mechanically written

      Also, I don’t use app.classeur.io anymore I just use wordpress.com/my_user_name. Works decently its got nice white space :). I use a program called shareX to make the images, and I paste an imgur link in my post. WordPress automatically uploads it and embeds the image so its convenient

      I run backups automatically (updraft) and occasionally manually as well. I too am a control freak (at least, only on my computer(s)) too, so I resonate with you there

      One thing about wordpress that I find helpful is only have it take up half the screen. I see less so its easier to focus on writing

      Thanks for sharing 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *