DEV Community

Cover image for How I Write Online Articles

How I Write Online Articles

John Papa on April 01, 2019

Straight to the Point I like to write, and when I do, I prefer writing in markdown. Lately, people have been asking my writing process i...
Collapse
 
aspittel profile image
Ali Spittel

Wow, our workflow is almost identical! I just always make my cover images in Sketch or Figma, but other than that totally the same setup!

Collapse
 
john_papa profile image
John Papa

Great minds think alike! :)

I haven’t used sketch. I’m mostly a paper and pen person these days - old school

Collapse
 
lankydandev profile image
Dan Newton

Agree with this. Nice to have some self validation that my routine is taken by others 😄

Collapse
 
martinakuzniecowa profile image
martinakuzniecowa

If i wants to send ready article using api directly to the website using nuxtjs, how to do it quickly?

Collapse
 
lauragift21 profile image
Gift Egwuenu

This is a great article! Thanks for writing it. I typically follow the same process as you do. I use VS Code for writing my articles and sometimes use paper by dropbox too. Then I copy to Grammarly to check spelling errors and then push to GitHub. I then publish to my blog and cross post on dev.to! I absolutely love the idea of having an API it'll be really cool to try out. Thanks for sharing the extensions too I've been looking for an extension like Grammarly on VS Code but discovered that does not exist.

Collapse
 
makky_og profile image
Amaks

Hey Gift! Random question: what do you use for the backend of your blog.

I am about to create mine and I have no idea what to use since my stack is frontend.

Collapse
 
lauragift21 profile image
Gift Egwuenu

Hi @Amaks I use Gridsome and it uses GraphQL as the data layer.

Collapse
 
john_papa profile image
John Papa

Thanks! I hope to get some community contributions too on the extension.

Collapse
 
geocine profile image
Aivan Monceller

I recently published a gatsby source for Dev.to API. The idea is , you write your content on Dev.to and it would be posted on your website.

Collapse
 
john_papa profile image
John Papa

Very cool! thanks for sharing

Collapse
 
amejiarosario profile image
Adrian Mejia

@john_papa I thought that summiting the same post on multiple sites would hurt the SEO. So, the canonical_url avoid this issue?

Collapse
 
john_papa profile image
John Papa

Yes. Exactly the idea behind it.

Collapse
 
djangotricks profile image
Aidas Bendoraitis

As I am working from a Mac, I use MacDown for Markdown. I am very happy with it. I usually use the images from unsplash.com with some layouts from canva.com. And I also at first publish it on a personal blog first, and then on dev.to through the RSS feed. For version control and history of the texts, I use Bitbucket and local disk backups.

As for a plugin to direct publish from an editor to the target platform, I think, it is essential before publishing to be able to see the style of your blog post on that platform.

Collapse
 
softchris profile image
Chris Noring

I was using MacDown but I'm all Typora now..

Collapse
 
john_papa profile image
John Papa

Thanks for sharing!

Collapse
 
aaronpowell profile image
Aaron Powell • Edited

I'm similar but I use a static site for my blog so I just write the content in markdown and push it to GitHub when it's ready (generally done on master, but if it's a longer piece or a piece for review I'll use a branch).

I've then connected up dev.to to the RSS feed for my blog so that once a new post is published on my site it appears on dev.to with the canonical URL linking back to my site. I'll then review it on here (since it's parsing the markdown from the rendered HTML) and publish it.

Collapse
 
martinakuzniecowa profile image
martinakuzniecowa

can you you tell me how to this blog -> rss

Collapse
 
aaronpowell profile image
Aaron Powell

I use a static site generator, Hugo, with all the markdown stored in a git repo.

I've just written a blog today about how I do it with GitHub Actions:

Collapse
 
eekayonline profile image
Edwin Klesman

I instantly downloaded the VS Code plugins. Loving it. Thanks for the nice article on your workflow.

Question:

The peacock plugin works only when you're using a workspace, right?
Do you have a dedicated "content writing" workspace? Or do you write alongside the codings stuff that happens to be open?

All the best John 🙌🏻

Collapse
 
john_papa profile image
John Papa

Yes - Peacock needs a workspace. I have a github repo of my articles, so that is the workspace that i use for writing

Collapse
 
eekayonline profile image
Edwin Klesman

Awesome. btw: i used Pexels too, now I'm into Pixelmob.co: it is an "umbrella search page" that searches for images in multiple free image repos (i believe it searches through Pexels, too). Very nice.

Thanks for your reply!

Collapse
 
amansubhan profile image
Aman Subhan

I like the workflow you use. Surely i will adapt your way of writing too 😊

Collapse
 
john_papa profile image
John Papa

😊choose your own adventure- there are many ways to write!

Collapse
 
amansubhan profile image
Aman Subhan

Sure, thanks for the push!

Collapse
 
chiangs profile image
Stephen Chiang • Edited

I use Notion and Figma, sometimes Lightroom. Notion is great for markdown and spell check..you can lock the note, etc. I was using VS Code before, but switched when I started using Notion to manage projects, schedules, work outs, meeting notes, etc. so it seemed the logical place to put writing in as it's always on either my PC or phone.

I haven't had to use until just today, but it also tracks page versions so that you can go back in time and restore it if you accidentally delete something and close the page. Saving happens automatically too!

Collapse
 
john_papa profile image
John Papa

Very cool! thanks for sharing

Collapse
 
wesgrimes profile image
Wes

We share a very similar work flow for writing articles. Nice job documenting this for others!

Collapse
 
john_papa profile image
John Papa

Very cool! Thanks for reading this!

Collapse
 
dvddpl profile image
Davide de Paolis

nice and useful post. my workflow is similar but i am not yet fully disciplined into it.
I love writing in markdown and I also use Visual Studio and saving posts in a git repo but since I don't have an own hosted blog and I published directly to Dev.to (sometimes copying-pasting to medium) I still have too many drafts only on dev.to dashboard.
I didn't think about the CanonicalURL - very good idea!
Haven-t tried sketchnotes yet. :-)
thanx for sharing

Collapse
 
john_papa profile image
John Papa

thanks for reading!

Collapse
 
lkopacz profile image
Lindsey Kopacz

Oh I learned about some new extensions I need to add to my Markdown setup! Thank you!

Collapse
 
john_papa profile image
John Papa

Nice! I’m always experimenting with extensions. If you find any new cool ones let us all know.

Collapse
 
radio_azureus profile image
Radio Azureus • Edited

I like this article. Thanks to you I now have another viewpoint for writing and revision control of my .md text-files.

I had just added git revision control, to my .md files, after reading an informative tweet an hour or two ago

My markdown editor in win64 has a build-in spellchecker, so I can use that when I feel the need.

Thank you for sharing

Collapse
 
3leftturns profile image
Andrew T Johnson

Hey I'm a fan of SketchNotes too - what markers are those in the picture above? Is that just the Copic markers or something else? Curious on your pen choices too.

Collapse
 
john_papa profile image
John Papa

Yeah. Copic markers. I’ll be posting about my tools soon too.

Collapse
 
gypsydave5 profile image
David Wickes

This was a fun read John. As my workflow is pretty different to yours I've written it up in a separate post:

Thanks for the inspiration!

Collapse
 
moneerrifai profile image
Moneer

Great post! So have you experimented with the best approach as to where you publish your articles?

I see that you write in a few places, including here and Medium and your own blog. Do you post everything on your blog and then cross-post? I have been debating on how to approach this. I see that you have duplicate content in some cases.

Collapse
 
admiralrohan profile image
Rohan Gayen

Thanks for sharing this, this is very useful. I have one confusion though. If you want to update any article later how do you manage integrity among all articles published across all the platforms and also in the local copy?

Collapse
 
rizwanjavaid profile image
Rizwan⚡️

I use Ulysses for all my writing but now that I have started using VS Code I’m drawn to the idea of using It for my writing as well. 🤯

Thanks for sharing your process. 👍🏼

Collapse
 
john_papa profile image
John Papa

I hadn’t heard of that tool. Thanks for sharing

Collapse
 
vicoerv profile image
Vico

I ever found good less distraction editor app in Github but I forgot to bookmark or I too lazy to search in my star list, if anyone knows about apps that I've been talking about please comment out. I want to be a blogger and write articles in dev.to 😊

Collapse
 
franwatafaka profile image
Fran Sosa

Great Workflow John! Im new in this of writing so i not sure what it is the best option. So, im using IO in mac os, its very minimallistic and i can concentrate in one thing... write, in the dead time in the travel to work, im trying PRETEXT in iOs to write fast ideas in the bus.
But... reading how easy is use vs code with some adds on, maybe i would try VS Code with SPELL RIGHT

Collapse
 
petersimnz profile image
Peter Sim

Thank you for this article. You mentioned Grammarly/Word as part of the proofing process. I've never used Grammarly so I can't comment on other features it offers. In addition to grammar checking, Word has readability statistics including the percentage of passive sentences in the document, the Flesch Reading Ease score and Flesch-Kincaid Grade Level. These are things you can focus on to also help improve the quality of your writing.

Collapse
 
yashints profile image
Yaser Adel Mehraban

Thanks for sharing, it's a great flow

Collapse
 
anilkhandei profile image
Anil Kumar Khandei

Well i am a newbie to tech blogging. All the above tips are very helpful. I started writing dev.to articles using stackedit.io online editor or writing directly on dev.to. VS Code is my fav editor and will use that now for documentation as well.

Collapse
 
faizanhussainrabbani profile image
Faizan Hussain Rabbani

The genuine idea of making a card by hand for every article depicts your effort and thought put in the article.

Collapse
 
john_papa profile image
John Papa

thanks - i enjoy doing it and it helps me think through problems

Collapse
 
tomfern profile image
Tomas Fernandez

Thanks for sharing. I have a very similar workflow, but instead of VS Code I use Emacs orc mode. Then I export to Markdown (or any other format) with pandoc.

I tried other tools but for me, nothing is better to write than org mode.

Collapse
 
johnpaulada profile image
John Paul Ada

Great article! I've only just discovered the other front matter stuff you can add like canonical_url!

Collapse
 
john_papa profile image
John Papa

Thanks for reading :)

Collapse
 
thaianhduc profile image
Thai Anh Duc

Thanks John. This post has encouraged me to start on dev.to. I was afraid of copying and pasting contents from my blog to other site, but the canonical_url has solved the issue.

Collapse
 
brianafm profile image
Briana Ford

Great process! I’ll have to try this out myself.

Collapse
 
niranjankala profile image
Niranjan Singh

This article is worth to read and i do write on my website first then on any other website. For editing i used Open live writer but i think i need to switch markdown if BlogEngine support markdown.

Collapse
 
leandroruel profile image
Leandro RR

sadly i can't use sketch since i'm using ubuntu... =/

Collapse
 
martinakuzniecowa profile image
martinakuzniecowa

If i wants to send ready article using api directly to the website using nuxtjs, how to do it quickly?

Collapse
 
shanif profile image
Shani Fedida

Just about to do the same. Does the markdown plugin support Dev.to liquid embeds? It is a bit annoying you have to copy-paste into Grammarly. I like it to be available always.

Collapse
 
hte305 profile image
Ha Tuan Em

The article very short and useful. I think I found the way how I learn to quick something, like other programming language !
Thank you so much !

Collapse
 
nickmaris profile image
nickmaris

I'm experimenting with a workflow based on gitlab, feel free to fork. dev.to/nickmaris/post-dev-to-artic...