Adding the DEV badge to github.dev starter website
Tags: beginners, webdev, tutorial, jekyll
Published: 2019-10-12 19:41:29

Hey everyone! How is your [Hacktoberfest](https://hacktoberfest.digitalocean.com/) 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](https://github.dev/)
{% github https://github.com/github/personal-website no-readme %}
- The DEV's very own [Static Blog](https://dev.to/devteam/you-can-now-generate-self-hostable-static-blogs-right-from-your-dev-content-via-stackbit-7a5)
{% post https://dev.to/devteam/you-can-now-generate-self-hostable-static-blogs-right-from-your-dev-content-via-stackbit-7a5 %}


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](https://github.com/github/personal-website) follow these steps:
1. Go to `_config.yml` and scroll down till you see the `social_media` dictionary begin.
2. 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`.*
3. 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](https://d2fltix0v2e0sb.cloudfront.net/dev-badge.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 🎉🎉🎉.


![How the logo looks on my site](https://thepracticaldev.s3.amazonaws.com/i/kbcx46vvdllb4bx62qki.png)

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.