DEV Community

Cover image for How to Write Your First Post on DEV

How to Write Your First Post on DEV

Chris Achard on September 05, 2019

So you've been reading dev.to and you're ready to post. Great! Here's how to do that, and what to expect next: 0. Sign Up If you don'...
Collapse
 
kayis profile image
K

Also:

Write about anything you like, it doesn't have to be mega complicated or technical.

There are more beginners out there than you think. Many people are a few steps behind you and happy to read what helped you to understand things.

Collapse
 
chrisachard profile image
Chris Achard

YES! Absolutely

Collapse
 
emmabase profile image
Emmanuel Eneche

Absolutely got this ❤️

Collapse
 
faizelgaroeb profile image
faizelGaroeb

Awesome comment dude!

Collapse
 
maxime1992 profile image
Maxime

You can also enjoy the power of GIT to have versions on your posts, Prettier to format your Markdown post, Github so that people can fix your posts by making a PR and many more by using my-dev-to template 😊 dev.to/maxime1992/manage-your-dev-...

Collapse
 
michaeltharrington profile image
Michael Tharrington

Chris, I can't tell you how many people I've pointed here to use this tutorial. Thank you for writing such handy documentation! 😀

By the way, would it be cool with you if we add the tag #meta to this?

Collapse
 
chrisachard profile image
Chris Achard

Awesome! And sure :)

Collapse
 
gochev profile image
Nayden Gochev

Nice post,
however to me it is not clear how to add highlight for the code template ?

Screenshot from your post

By default in Markdown you can write with 3 ` the begining of a code block and the end with 3 ` however also at the beginning you can write the language for highlight which doesnt seems to work.

Example of markdown with highlight not in dev.to but in general :

```javascript
console.log("this should be highlighted with javascript but this is not the case);
```

So can you explain how to paste a code block WITH a highlight intext in the post.

Collapse
 
chrisachard profile image
Chris Achard • Edited

... oh weird! I just wrote this comment about how it should work, but then it didn't for me... I'm looking into it; not sure what's going on

Collapse
 
chrisachard profile image
Chris Achard

Ah! Got it - if I have a backtick (just a single one) in the post like you do BEFORE the three backticks, then the parser gets confused... try just doing threebackticks with the "javascript" and it should show up like this:

console.log("this should be highlighted with javascript but this is not the case);

Does that work for you?

Thread Thread
 
gochev profile image
Nayden Gochev • Edited

We should add this to the markdown ? btw when writing post :))

Sometimes it looks it doesnt work .. its weird but now it works.. :) weird !

```javascript
console.log("no color");
```

now in the post I have `*3 times but here bellow when trying I am typing just 3 times without SPACES and I got it !

console.log("test JavaScript");

weird why it wasn't working above.

System.out.println("test again Java ");
Console.WriteLine("whoo c# has to be lowercase c");
Collapse
 
beingayushgupta profile image
AYUSH GUPTA • Edited

Thanks for the tutorial Chris.

Note; I published my first post here but I noticed that my article contains noindex/nofollow tags. Not sure why so?

Anyways I think my article is visible to dev community members. :)

Collapse
 
chrisachard profile image
Chris Achard

Glad it helped!

Hm; not sure about the noindex/nofollow - (would be a question for the DEV team perhaps).

Collapse
 
teaglebuilt profile image
dillan teagle

How can you add a drscription for your post?

Collapse
 
chrisachard profile image
Chris Achard

What type of description are you looking to add? I only know about the title and tags; plus you can add a cover image that will show up on twitter, etc.

Some of the "descriptions" you see might just be the first few lines of the post?

Collapse
 
teaglebuilt profile image
dillan teagle • Edited

Hmm well i am talking about this key "description"

:
canonical_url: "https://dev.to/teaglebuilt/is-ruby-dead-17em"
collection_id: null
comments_count: 14
cover_image: null
description: ""
flare_tag: {name: "discuss", bg_color_hex: "#000000", text_color_hex: "#FFFFFF"}
id: 174966
path: "/teaglebuilt/is-ruby-dead-17em"
positive_reactions_count: 9
published_at: "2019-09-22T14:19:40.527Z"
published_timestamp: "2019-09-22T14:19:40Z"
slug: "is-ruby-dead-17em"
tag_list: (3) ["ruby", "rails", "discuss"]
title: "Is ruby dead?"
type_of: "article"
url: "https://dev.to/teaglebuilt/is-ruby-dead-17em"

curious as of how it can be filled?

Thread Thread
 
chrisachard profile image
Chris Achard

Huh! Not sure actually :) @ben might know maybe? (don't know if @ mentions work here)

Thread Thread
 
mestrak profile image
MeStrak • Edited

I know this post is quite old but I just had the same question.

If you don't do anything then it just takes the first few lines of your article by default. If you want to set a custom description then there are two options that I could find. Option 1 seems much better to me.

Remove the ' before the --- below, I just added it before the --- to stop markdown reformatting it.

  1. Add a frontmatter section containing a description field to the top of the article (it will only be visible in edit mode):
    '---
    description: A great article about how to set the description of an article on dev.to
    '---

  2. Change the editor to basic markdown on this page: dev.to/settings/ux. When you do that new posts will have this at the top when in edit mode. However then you have other things that you need to set manually that you :
    '---
    title:
    published: false
    description:
    tags:
    //cover_image: direct_url_to_image.jpg
    '---

After setting that description field I see the custom description in the API.

Collapse
 
rosejcday profile image
Rose Day

Thank you so much for this post! I have been on Dev for a long while but not until this post did I realize there was an image button at the bottom as an option to add in an image.

Collapse
 
leewarrickjr profile image
Lee Warrick • Edited

Most importantly... Just post it

Collapse
 
chrisachard profile image
Chris Achard

Definitely! DEV's a great place to post, even if you're nervous - so just post it :)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
chrisachard profile image
Chris Achard

Thanks Dandy :) I've had a few beginners actually ask me about it, which is why I made the post! - So yes, it's pretty straightforward, but still can be daunting if you haven't written a post before 😀

Collapse
 
tha_ozowuzuwoya profile image
PatrickServ..

Can't see the 'Write a Post' section ???

Collapse
 
chrisachard profile image
Chris Achard

Do you mean you can't see the "write a post" button in the navbar? There's also a "write a post" link if you hover over your profile picture in the upper right... does that work?

Collapse
 
tha_ozowuzuwoya profile image
PatrickServ..

Ah! Seen it. Thanks.

Collapse
 
habibcseju profile image
Habib

I followed like you but image not rendering in preview mode

Collapse
 
chrisachard profile image
Chris Achard

Hm, perhaps try to upload it again, and copy the image tag again? Sometimes I find it does weird things with image uploads.

Collapse
 
offirmo profile image
Offirmo

Thanks for the tips! Applied them here: dev.to/offirmo/learn-javascript-in...

Collapse
 
marwaeltayeb profile image
Marwa Eltayeb

How to leave a space when I write article in dev.to??

Collapse
 
chrisachard profile image
Chris Achard

dev's markdown processor accepts HTML, so you can write: <br /> to get a blank line

Collapse
 
joxx profile image
joachim kliemann • Edited

Thanks for this great tutorial. 🙂

Collapse
 
mavben profile image
Mavben

This helps me a lot! Thank you :)

Collapse
 
schbenedikt profile image
schBenedikt

@chrisachard Maybe the article should be updated?

Collapse
 
jaceroldan profile image
Jace Roldan

Good guide! Happy to be on DEV 👋🏼