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
github / personal-website
Code that'll help you kickstart a personal website that showcases your work as a software developer.
- 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 thesocial_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 afterhttps://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 belowbehance
'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.
Top comments (0)