Adding the DEV badge to github.dev starter website
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.
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!
Once you have configured your personal website as per the instructions in the
README.md of github/personal-website follow these steps:
_config.ymland scroll down till you see the
Under Behance's line, with a similar amount of padding as the other lines, add
<username>is the text after
https://dev.to/on your profile link.
E.G.: My profile link is
https://dev.to/amorpheuzso I will add
_datafolder. Add the following content below
behance's icon_svg in a similar arrangement as the other social media sites:
dev:name: DEVprofile_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.