DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Tutorial: Adding Holopin badges to your GitHub profile
Rob Phipps
Rob Phipps

Posted on

Tutorial: Adding Holopin badges to your GitHub profile

Making your GitHub profile more awesome!

You probably use a code sharing site like GitHub, GitLab or Bitbucket to showcase your l33t coding skills, and act as a portfolio of the sort of things you work on, but it's probably looking a bit text-heavy?

We're here to help you change that! With Holopin, you can embed a live copy of your badge board so all your badges get automatically added to your profile.

For this guide, we're going to work with GitHub. But these steps should work for any site that allows you to use a Markdown formatted file as your profile!

Markdown + Holopin = πŸ’–

Markdown is a markup language that lets you write documents with rich formatting like headings,
bullet lists, tables, bold, underline and italic text but in a way that's easy to type (no angle brackets and keywords like in HTML), fits in a completely plain text file and still looks readable even as plain text. For example, you can do things like this:

# This is a heading

This is some **bold** text, and some _italics_, and this is **really** important. Markdown is

1. Easy to type
2. Plain text
3. Readable
Enter fullscreen mode Exit fullscreen mode

(this whole blog post was written in Markdown!)

Step 1: Create a personal README on GitHub

Jump onto your GitHub account, and hop to your profile. If you've not got a personal README, you'll need to create one. Use the + symbol and choose New repository:

GitHub new repository dropdown

Once you're there, set the repository name to be your username and you'll see a message to show you're creating a "special" repo:

GitHub special repo message

Now initialise that with a README.md:

GitHub initialise with README

Once your repo is ready, you can hit the button to open an editor in browser:

GitHub edit README

This is the place where you can write a bit about yourself, and add some links to your social media.

Step 2: Customize your Holopin board πŸͺ„

If you haven't already, you'll need to create a Holopin account. Hop over to holopin.io to get started (I hear there's early bird badges available if you're quick too πŸ‘€).

Once you've got your Holopin account, head to your profile and add your badges from the inventory:

rphi's Holopin profile

Got it looking nice? Great. You may have spotted there's a bit of code under your board... this is the magic to get things showing on sites other than Holopin.

Step 3: Add your Holopin board to your GitHub profile

This is where the Markdown comes into action. That link looks like this, and you can find it at the bottom of your board:

[![@rphi's Holopin board](https://holopin.io/api/user/board?user=rphi)](https://holopin.io/@rphi)
Enter fullscreen mode Exit fullscreen mode

But what does it mean? We've got two things going on here, first we're including the image with ![](), and then we're linking that image to your Holopin profile with [](). This is the same as if you were linking to an image on the web, but we're using the Holopin API to generate the image on the fly.

Paste in your Holopin embed, hit commit, and if all has gone to plan, your board will now be in pride of place on your GitHub profile page!

Whenever you edit your board on the Holopin site, your GitHub profile will update automatically.

rphi's GitHub profile


We'd love to see how you've incorporated your Holopin badges on your GitHub profile! Tag @holopin_ on Twitter and we'll retweet it with the community... and maybe even send you a badge or two!

Top comments (19)

Collapse
 
wadecodez profile image
Wade Zimmerman

So far I have 3 badges! Can't wait for Holopin to become more popular! Hoping that after Hacktoberfest that more companies will provide integrations. Would be super cool if the @thepracticaldev synced all its badges with Holopin.

Collapse
 
2kabhishek profile image
Abhishek Keshri

+1 for this @thepracticaldev

Collapse
 
rphi profile image
Rob Phipps Author

πŸ‘€ @thepracticaldev

Collapse
 
kaspera profile image
Kasper Andreassen

And guess what? They're not NFTs.

This is what sells the product. Hallelujah πŸ™

Collapse
 
andypiper profile image
Andy Piper

Nice post, Rob - thanks for sharing. I think this is a really clear explanation of how to add these new badges to pages like a GitHub profile. I'm excited to start earning some :-)

Collapse
 
andypiper profile image
Andy Piper

OK, I couldn't resist... here's my newly-shiny profile!

Collapse
 
rphi profile image
Rob Phipps Author

Looking good 😁 - and good luck with Hacktoberfest!

Collapse
 
theaccordance profile image
Joe Mainwaring

This is a cool tutorial, but I see one fundamental problem: I can't participate. I tried, but there's no options available to me to add badges in the service.

I assume this means you just got this idea off the ground, which is awesome! But I would suggest a little more investment into usability, it'll enable people like myself to participate more easily :)

Collapse
 
theaccordance profile image
Joe Mainwaring

Okay, I have 1 badge after manually engaging with your signup workflow, so there's at least something.

This is a cool idea, but as far as adding this to my github, I would like to be able to showcase skills before I were to add it to mine. Any idea on when we might expect badges like that?

Collapse
 
rphi profile image
Rob Phipps Author

Hi Joe - great to hear the love for the platform! Holopin badges are credentials so they need to be issued to you by a partner organization. Hop on over to @hacktoberfestteam and register for this year's Hacktoberfest for another badge, and we're working to bring more issuing organizations onboard over the coming weeks so your badges have some friends! If you have any projects you'd like to see issuing badges, please tag them in this thread to spread the word 😁 (...some may also say there's another Pegasaurus about if you DM us your Holopin username πŸ¦– πŸ‘€)

Thread Thread
 
fontchangerguru profile image
fontchangerguru

Can we use special hacker text in our profile?

Collapse
 
maame_afia profile image
Maame Afia Fordjour

Great post! Saving this for later.

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

That was helpful! :)

Collapse
 
jonakadiptakalita profile image
Jonak Adipta Kalita

How to get all the badges?

Collapse
 
mrgts profile image
Oscar Felipe Palacios

x2

Collapse
 
iammhador profile image
Mehedy Hasan Ador

I created holopin account just now. But didn't show any badges in my profile
Should I wait or did I missed anything?

Collapse
 
exequielhb profile image
Exequiel Herrera

It works for me, since I didn't like any banner I had on github!
github.com/exequielhb

Collapse
 
juanvegadev profile image
Juan Vega

I also added Holopin to my github home!! πŸŽ‰

PS: Thanks for the support on twitter to issue my hackotberfest badge πŸ™‡πŸ½β€β™‚οΈ

GitHub logo jdvr / jdvr

Github profile

Juan Vega (He/Him)

@juanvegadev's Holopin board

I am a product-focused Software Engineer that believes that a key element for a software product to success is technical excellence that among other things, it includes: pragmatism, good communication skills, deep understanding of business problems, and well-sized solution.

Read more...

I am not a major contributor, but I always try to put my two cents on projects that I like. Remember to check my code contribution on github. For my last projects I have been using gitlab, so check also jdvr on gitlab

Aside from existing repositories here, I have submitted more than 40+ well-known code exercises solution to excercism.io, if you are considering me as a candidate it might worth the time to look at my public exercism profile.

Image with my exercism profile summary

πŸ’» Blog 🎀 Podcast (ES)




Collapse
 
lukadsant profile image
Lucas

it's looking nice ^^

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.