Tim Deschryver

Posted on Jun 12, 2019 • Originally published at timdeschryver.dev

Writing a dev.to blog post with VSCode

#vscode #writing #showdev #blogging

Today, I present you 📝 New Blog Post a simple way to create and publish dev.to blog posts from within Visual Studio Code.

Installation

To install the or search for 📝 New Blog Post in the extensions go to the marketplace https://marketplace.visualstudio.com/items?itemName=timdeschryver.new-blog-post.

Writing a dev.to post

The default template of this extension is the dev.to template. To create create a new blog post, right click in the explorer or use the command palette and select 📝 New Blog Post

Publishing to dev.to

In order to be able to publish your post to dev.to, you have to first create an API access token.
You can create one at https://dev.to/settings/account. Once you have your token copy paste the token in your VSCode settings with the post.publishToken setting:

{
  "post.publishToken": "jbVJ8mwfY2WrPUGfDWjx4xxB"
}

To add this to your config, search via the command palette for settings

When you have added the token to your settings, go back to your post and you can use the 🚀 Publish to dev.to command in the command palette.

Why

I created this extension to get familiar with VSCode extensions.

Also, my workflow to write my blog posts is to:

write them within VSCode
publish them to GitHub
there's a now trigger that automatically deploys a new version to timdeschryver.dev
manually cross-post on dev.to

To make it a little bit easier to myself, I think this extension is a good addition to save a few minutes 🙂.

More info

For more info and the source code of this extension, go to the GitHub repo

Top comments (32)

Ben Halpern • Jun 12 '19

Installed! Please everyone let us know if there are other APIs we can provide to improve this experience so folks feel like they have full confidence in this process. Really fun stuff!!!

Tim Deschryver • Jun 12 '19 • Edited

Thanks Ben!
If I encounter something I will definitely create an issue on GitHub 😃

Maybe one thing that took my a couple of minutes, would be to add some kind of validation responses in the response. For example: if the title has not been filled in, the response is 500: Internal Server Error.

curl -X POST -H "Content-Type: application/json" \
-H "api-key: ACCESS_TOKEN" \
-d '{"article": {"body_markdown": "a body"}}' \
https://dev.to/api/articles

But as I'm writing this, I also noticed that the api docs mentioned these validation messages - so it is probably me who's doing something wrong 😅

If you want I can create an issue for this and we can take it from there.

Christian Brintnall • Jun 12 '19 • Edited

Could still benefit from a proper status code, in this case it sounds like you were missing information, so maybe a 400 is appropriate?

Derk-Jan Karrenbeld • Jun 12 '19

422 would probably be more appropriate, but yes, a 4xx status is the way to go.

Tim Deschryver • Jun 13 '19

Yes, I think having a 4xx would make these "errors" more understandable for us.

Cyril Niobé • Jun 13 '19

Nice tool! Thanks to share it :)

I visited your website, could you explain a bit your flow you used to update your website based on Now to create a new post on your site? I'm curious about it!

thanks

Tim Deschryver • Jun 14 '19

Thank Cyril!

I'm using Sapper as a static site generator (you could use more popular ones like Gatbsy, Gridsome, Next, ...). When I push changes to GitHub, Now has a trigger to build the website and deploy it to their servers.

In your repo, you should have a now.json for config, and a now-build script.

You can find out more info on Now for GitHub, if you have a question, feel free to DM me.

Shreyas Minocha • Jul 10 '19

+1 for now. now is great.

Gabe • Jun 12 '19

Really cool - between this and VS Code's Spotify extension I may never have to leave my editor now

Lautaro Lobo • Jun 12 '19

Spotify extension? Holy Mowly! That goes to the 'search it after exams' list 😁👍

Tim Deschryver • Jun 12 '19

Thanks Gabe! 🙏

Chris Bertrand • Jun 18 '19

Nice job, just hoping that token is not your real one!

Tim Deschryver • Jun 19 '19

It WAS my real one.
The thing was that I couldn't revoke my access token, so I had to delay the publication of this post. Good thing the dev.to team solved this issue in a day 😁

Chris Bertrand • Jun 19 '19

Phew! Gotta be wary of those sorts of things!

Matt Hagner • Jun 13 '19

Awesome VSCode extension! I made a CLI @hagnerd/devto inspired by this extension for any non-VSCode users. I'm sure it's a little rough around the edges still, but figured anyone who stumbled on this post might be interested. :)

Cecelia Martinez • Jun 13 '19

Using this now! I had a question about code snippets but I was able to figure it out using markdown. Thanks for sharing!

Tim Deschryver • Jun 13 '19

Yes, the post you write is completely in markdown. I'm sorry I did not mention it.

Cecelia Martinez • Jun 13 '19

I'm getting an "internal server error" when I try to publish. Any ideas how I could troubleshoot this? I'm not extremely fluent with VS Code extensions yet.

Tim Deschryver • Jun 13 '19

This version of the extension, simply calls the dev.to API and shows the response of the API. I will work on this, so these errors will be more readable in one of the upcoming versions.

I think you're getting this error because one of the front matter properties are not filled in - for more info see the api docs and search for front matter.
For now, feel free to DM me your blog post (or a trimmed down version) and I can take a look.

Cecelia Martinez • Jun 13 '19

That makes sense! I didn't have the cover image and canonical url filled out. I'll let you know how it goes with my next post, planning on making another by early next week.

Tim Deschryver • Jun 13 '19

For what its worth, I just tried it with an empty image and canonical and it seems to be working on my end. The only required field (that I know of) is the title