What's Jekyll and How to build a personal blog using Lanyon ( Part II )
09/22/2018 Tags: JekyllAbstract
Further to the previous past, What’s Jekyll and How to build a personalblog using Lanyon ( Part I ), this post guides you how to add unique and useful features in your blog. Such as, linking multiple social media accounts, changing the font that you love and inserting google analytics in your website.
Instructions
Table of Contents
1. Enable Google Analytics
Google Analytics tracking is a free web analytics service that used to analyse and track website traffic. It is now the most widely used and also really easy to add the tracking code to your Jekyll static website.
First, you most create a new account in Google Analytics for this and then you will get unique tracking ID.
Now, back to your terminal, creating a new file called google_analytics.html in _includes directory. Next, pasting the following Google Analytics tracking code in this file and save it.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{ site.google_analytics }}', 'auto');
ga('send', 'pageview');
</script>
Then, opening your site _config.yml file and add the following line of code. It is important to look at your own tracking ID, so replaceing UA-XXXXXXXXX-X below with your websites unique tracking ID.
# Google Analytics
google_analytics: UA-XXXXXXXXX-X
Finally, Google recommends placing the <head> section, shown as below, in the head.html of your site that located in your site’s _include/ directroy.
<head>
...
{% if site.google_analytics and jekyll.environment == 'production' %}
{% include google_analytics.html %}
{% endif %}
...
</head>
Save it and you are good to go!!
2. Inserting Disqus Comments
Disqus is a networked community platform widely used by website. With Disqus, your website gains a feature-rich comment system complete with social network integration and extensive community functions.
First, you also need a Disqus account for this feature. Head to the website, creating an account and it’ll ask you if you want to “Add Disqus to your site”. The website will show the guideline how to add the Disqus comment system in your blog. You should create comments.html in _includes/ dircetory and paste the setting on this html file, shown as below:
<!-- Intergating Disqus comments -->
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables **/
var disqus_config = function () {
this.page.url = '{{content.absolute_url}}'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '{{content_id}}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://shirongliu.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
NOTE: Do not paste the code posted above - you’ll link to my google analytics account !
Moreover, opening the _layouts/default.html file and adding the line as shown:
<body>
....
<!-- disqus web site -->
<div class="container content">
{{ content }}
{% include comments.html %}
</div>
....
</body>
Now, run jekyll build and jeckll serve again to see Disque comments enable on the your website!
3. Adding a Archive Page
Lanyon, by default, does not provide an archive page. The archive page allows you capture, manage and search collection of your post. In this section, we will show you how to create an archive page in your website. Let’s make one.
You should create a new archive.md file in your root folder and add the following contents to it.
---
layout: page
title: Archive
---
<!-- Search posts -->
{% for post in site.posts %}
* {{ post.date | date_to_string }} »
<span style="font-size:18px;"> [ {{ post.title }} ]({{ site.baseurl }}/{{ post.url }})</span>
{% endfor %}
Now, rebuilding jekyll and then you can see the archive page on your website.
4. Adding Social Media Buttons
The Font Awesome liberary is the world’s most popular and easiest to use icon. It has grown to have over 3000 icons and continuous to add the needed icons. You can choose the icons you need. First, you should add the “font-awesome.min.css” CSS link in _includes/head.html:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Then, you can add multiple social media link buttons in any page you’ll allow appearing in. Instance, in my page, I add e-mail, LinkedIn and instagram accounts, and so on in about.md . (shown as below)
<!-- Icon Link -->
<div style="text-align: center;">
<a style="margin-right: 20px;" href="https://www.instagram.com/liulouis0419" target="\_blank" title="Instagram Page" class="x1"><i class="fab fa-instagram fa-2x" style="cursor: pointer"></i></a>
</div>
REMARK: Replace href with your social media link.
Congratulation, your social buttons are ready for action! :)
To be continued….
5. Adding your Photo to the sidebar
Reference
[1] How to build a blog using Github, Jekyll and Lanyon, by Nikhita Raghunath
[2] Google Analytics for Jekyll
Note
If you have any constructive criticism or advises, leave the comments below or feel free to email me @qazqazqaz850@gmail.com. Hope this post will help! :)
