DEV on Jekyll Now
Tags: webdev, blog, jekyll, github
Published: 2020-09-26 14:28:58

You may have heard of [Jekyll](https://jekyllrb.com/). It is a *simple static site generator* that you can use to create blogs and websites in general to expose your thoughts and content. Most of people use Jekyll as it is a ready to use solution for Github Pages, a free place on the Internet where you can host a website.

[Jekyll Now](https://github.com/barryclark/jekyll-now) is a Jekyll theme that integrates already most of the features that you need for your blog, such as adding content using Markdown or YAML, styling using SASS and mobile responsive support. Although the coolness of Jekyll Now, it has a downside which is that it hasn't been updated for more than two years now (last commit on April, 2018). The lack of updates scars some of the features it provides. One of these scar features is social media referring on the footer of your blog.
Jekyll Now has a main configuration file name `_config.yml`. When you stumble upon it, you notice that you can refer your social media profile, which will later be shown as an icon that upon clicking will redirect to your profile. For example you can reference your Github page, Twitter profile or even LinkedIn. However you can't reference your dev.to or even Medium profile. To enable we need to dig deep in Jekyll Now "engine" and perform some updates.

Heading over to `_includes` folder we notice a file with references for the available footer links: `svg-icons.html`. This is the first step to include our custom footer social media link, the HTML. By copying one of the lines and replacing the website name with dev.to, we create a reference link for DEV.

```
{% if site.footer-links.dev-to %}<a href="https://dev.to/{{ site.footer-links.dev-to }}"><i class="svg-icon dev-to"></i></a>{% endif %}
``` 
<center>Code Snippet 1 - dev.to footer link included in svg-icons.html</center>

Once having the HTML defined, we need to customize it, by adding some CSS. You may have noticed that the footer element is composed by an `<i>` element that refers a CSS class: `svg-icon`. If it is referring some CSS class, then this class must be also living on the engine. As referred before, Jekyll Now uses SASS for styling. A folder named `_sass` can be found, which includes the styling for `svg-icon`. Similar to what has been done before on `svg-icons.html`, by opening `_svg-icons.scss` we can extend the class to support the dev.to icon. Copying a line and replacing previous references with what was defined in the `<i>` element will style the HTML element that we just created. Just make sure to correctly refer the base64 string of the icon SVG icon and adopt the icon size (otherwise SVG layers may be displayed duplicated).

```
&.dev-to{ background-image: url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoICBmaWxsPSIjMDAwMDAwIiBkPSJNMTIwLjEyIDIwOC4yOWMtMy44OC0yLjktNy43Ny00LjM1LTExLjY1LTQuMzVIOTEuMDN2MTA0LjQ3aDE3LjQ1YzMuODggMCA3Ljc3LTEuNDUgMTEuNjUtNC4zNSAzLjg4LTIuOSA1LjgyLTcuMjUgNS44Mi0xMy4wNnYtNjkuNjVjLS4wMS01LjgtMS45Ni0xMC4xNi01LjgzLTEzLjA2ek00MDQuMSAzMkg0My45QzE5LjcgMzIgLjA2IDUxLjU5IDAgNzUuOHYzNjAuNEMuMDYgNDYwLjQxIDE5LjcgNDgwIDQzLjkgNDgwaDM2MC4yYzI0LjIxIDAgNDMuODQtMTkuNTkgNDMuOS00My44Vjc1LjhjLS4wNi0yNC4yMS0xOS43LTQzLjgtNDMuOS00My44ek0xNTQuMiAyOTEuMTljMCAxOC44MS0xMS42MSA0Ny4zMS00OC4zNiA0Ny4yNWgtNDYuNFYxNzIuOThoNDcuMzhjMzUuNDQgMCA0Ny4zNiAyOC40NiA0Ny4zNyA0Ny4yOGwuMDEgNzAuOTN6bTEwMC42OC04OC42NkgyMDEuNnYzOC40MmgzMi41N3YyOS41N0gyMDEuNnYzOC40MWg1My4yOXYyOS41N2gtNjIuMThjLTExLjE2LjI5LTIwLjQ0LTguNTMtMjAuNzItMTkuNjlWMTkzLjdjLS4yNy0xMS4xNSA4LjU2LTIwLjQxIDE5LjcxLTIwLjY5aDYzLjE5bC0uMDEgMjkuNTJ6bTEwMy42NCAxMTUuMjljLTEzLjIgMzAuNzUtMzYuODUgMjQuNjMtNDcuNDQgMGwtMzguNTMtMTQ0LjhoMzIuNTdsMjkuNzEgMTEzLjcyIDI5LjU3LTExMy43MmgzMi41OGwtMzguNDYgMTQ0Ljh6Ij48L3BhdGg+PC9zdmc+);}
```

<center>Code Snippet 2 - Custom styling for dev-to HTML element</center>

The final step is to edit the `_config.yml` file to include our dev-to profile display. Under the `footer-links` collection, add the following tag:

```
dev-to: <your_dev.to_username>
```

<center>Code Snippet 3 - YAML tag for displaying dev.to profile</center>

That's it. If everything went well, you should see the dev.to icon on the footer of your blog and when clicking on it, it should redirect to your profile!

![Screen Recording2020-09-26at15.13.10.mov](https://dev-to-uploads.s3.amazonaws.com/i/csv3nnhnndd9bb5a14l4.gif)