Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1046 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Adding badges to your README

2:28 JavaScript lesson by

It's nice to know the status of a project. Adding badges to your readme gives first-timers and old-timers an at-a-glance peek into the status of your project. In this lesson, we'll add several badges using shields.io

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

It's nice to know the status of a project. Adding badges to your readme gives first-timers and old-timers an at-a-glance peek into the status of your project. In this lesson, we'll add several badges using shields.io

Avatar
John

I may have missed something, but ever since I started using semantic versioning with the package my npm module has shown 0.0.0 I had to add the version back to package.json to get NPM Version to get it to show that version. I am not sure what I am doing wrong. I will go back over the tutorials but if you could point me in a direction that would be great!

In reply to egghead.io
Avatar
Kent C.

Looks like you got it resolved 👍 Let me know if you have more trouble.

In reply to John

Now that we have a build and coverage reporting at our library as Published NPM, we'd like to add some badges to our Read Me, that people know the status of our project. Right now, our Read Me is looking pretty sad.

This would be a good opportunity to actually document the API of our Read Me. we're going to just add badges to our Read Me so people can keep up with the status. There is a really cool site called "Shields.iom." Here it has badges for a lot of different services.

We're going to get all of our badges from this service. First, we're going to get Travis for our build. I'll copy this. We'll get into our Read Me. We're going to put this in our mark down as an image. This is the syntax for an image. We'll have a couple of these.

This is the description. Travis Build. This is the link to the image. This is for node. If we go to that URL, it will see the build is failing for node apparently, but if we change it to this, "Star Wars Names," then we see the build is parsing.

Also, I actually prefer the flat style, flat squared. We'll say, "Style is flat square." That is what we'll use for our URL. Now we have the badge in our Read Me, but we want to actually have the badge be linked to our build. We're going to take this icon image and we'll make that a link in itself.

Now, whatever we put into here will be the URL and we want to link to our build, which is right here. Well just put that in there. Now we have a badge for Travis. Let's go ahead and add one for Codecov and a couple for NPM, information about NPM, and link to those as well.

There we have all the badges that we're going to include in this Read Me. There are a ton more that you can add from shields.iom. Many services will have their own badges as well. It's very simple. You simply add the image annotation there, with the name of the image, and a link to the image.

Then you can turn that into a link by simply surrounding it by the brackets and then putting your link in here. That's adding badges to your Read Me.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?