Adding the DEV badge to github.dev starter website

Date published: 12-Oct-2019

2 min read / 429 words

jekyll

beginner

webdev

tutorial

Hey everyone! How is your Hacktoberfest going on? Mine has been awesome so far and I hope yours has been too!

Getting my portfolio site has always been on the back of my mind as a project I would like to complete this year. I recently learned about two great ways you could easily start with a basic portfolio/showcase/blog site just by performing a few clicks.

The Github Personal website generator
The DEV's very own Static Blog

I decided to try out both of them and am currently experimenting on the GitHub personal website. One of the awesome features of it is that many of the basic features like adding your Social Tags, your programming interests and enabling blogs are extremely easy to do. I found it to be more feature-rich than DEV's offering, which is a given since DEV's offering is new and just launched the last month.

So, off I went configuring basic elements of the site while also reading up on Primer the site's CSS framework for future modifications. While configuring my social links, I noticed that DEV was missing 😱! At the back of my mind, I remembered that DEV gives a link to easily configure your badge on your personal site in the Settings of your Profile. Time to get that badge on my site!

Tutorial

Once you have configured your personal website as per the instructions in the README.md of github/personal-website follow these steps:

Go to _config.yml and scroll down till you see the social_media dictionary begin.
Under Behance's line, with a similar amount of padding as the other lines, add dev: <username> where <username> is the text after https://dev.to/ on your profile link.
E.G.: My profile link is https://dev.to/amorpheuz so I will add dev: amorpheuz.
Go to social_media.yml in the _data folder. Add the following content below behance's icon_svg in a similar arrangement as the other social media sites:

dev:
  name: DEV
  profile_url_prefix: https://dev.to/
  icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512" fill="#959da5"><path d="M137.3,201.5c-4.4-3.3-8.9-5-13.3-5H104v119.4H124c4.4,0,8.9-1.7,13.3-5c4.4-3.3,6.7-8.3,6.7-14.9v-79.6C143.9,209.8,141.7,204.8,137.3,201.5L137.3,201.5z M461.8,0H50.2C22.5,0,0.1,22.4,0,50.1v411.9C0.1,489.6,22.5,512,50.2,512h411.7c27.7,0,50.1-22.4,50.2-50.1V50.1C511.9,22.4,489.5,0,461.8,0z M176.2,296.2c0,21.5-13.3,54.1-55.3,54h-53V161.1h54.1c40.5,0,54.1,32.5,54.1,54L176.2,296.2L176.2,296.2z M291.3,194.9h-60.9v43.9h37.2v33.8h-37.2v43.9h60.9v33.8h-71.1c-12.8,0.3-23.4-9.7-23.7-22.5v-143c-0.3-12.7,9.8-23.3,22.5-23.6h72.2L291.3,194.9L291.3,194.9z M409.7,326.7c-15.1,35.1-42.1,28.1-54.2,0l-44-165.5h37.2l34,130l33.8-130h37.2L409.7,326.7L409.7,326.7z"/></svg>'

NOTE: I have slightly modified the SVG provided by the DEV to remove the padding around the logo, as the logo spacing is taken care of by default by the site and others logos are added similarly without any padding. If you do change how logos are arranged/shown on the site always be sure to leave adequate spacing around every logo to make them distinctly clear from other elements.

And that's it! Startup your local development server by running bundle exec jekyll serve and bask in the glory of your own custom DEV badge 🎉🎉🎉.

That was all for this short tutorial, special thanks to DEV for providing the SVG at an accessible location! Feel free to ask help with any troubles you encounter during the setup process.