Jekyll2021-07-27T14:14:17+00:00https://rakshitsoral.com/feed.xmlRakshit SoralRakshit Soral is a Digital Marketer, conversion strategist and seasoned web developer. Read his blog or contact him via Email.Rakshit Soralrakshitsoral@gmail.comWhy JAMStack Websites are the Next Big Thing for Marketing Experiments2020-07-25T00:00:00+00:002020-07-25T00:00:00+00:00https://rakshitsoral.com/jamstack-websites-marketing-experiments<p><span class="first-letter">W</span>hen I first wrote the blog post about <a href="https://rakshitsoral.com/build-blog-for-free-part-one/" target="_blank">building a Jekyll website</a>, I never knew that JAMStack or static-site generators could be getting popularity among marketing community.</p>
<p>It wasn’t obvious to me until I witnessed a few marketers who use JAMStack for their personal and side experiments.</p>
<div class="jekyll-twitter-plugin"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sooner or later, the marketing industry will move to JamStack websites as they have a lot of advantages in terms of speed, SEO, and security. I am glad to witness some people who use it currently. <a href="https://twitter.com/Suganthanmn?ref_src=twsrc%5Etfw">@Suganthanmn</a> is definitely one of them. I am following 🧐<a href="https://twitter.com/hashtag/JamStack?src=hash&ref_src=twsrc%5Etfw">#JamStack</a> <a href="https://twitter.com/hashtag/marketing?src=hash&ref_src=twsrc%5Etfw">#marketing</a></p>— Rakshit Soral (@RakshitSoral) <a href="https://twitter.com/RakshitSoral/status/1282714018881265671?ref_src=twsrc%5Etfw">July 13, 2020</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<p>Boy, are we, as marketers, glad to have witnessed the popularity of JAMStack and static websites. It’s fair to say that at least I had had my fair share of experience working on such kinds of websites. I’m all for it, anytime!</p>
<p>Don’t get me wrong, I still love WordPress and use it at work. But I had my reasons for moving to Jekyll, which I wrote in Part 2 of “<a href="https://rakshitsoral.com/build-blog-for-free-part-two-jekyll/" target="_blank"> Building a FREE website</a>” article series. I felt that the community is in pretty good shape and it will only keep growing.</p>
<p>In this article, I would like to mention my thoughts on JAMStack and why I think it could be the next big thing for the Marketing community.</p>
<h2 id="the-scalable-options-available-for-marketers-to-launch-marketing-experiments">The scalable options available for marketers to launch marketing experiments</h2>
<p>There are many options available for marketers for launching their marketing experiments, but only a few are scalable and cost-efficient. Although unscalable options have their place in building user acquisitions but if you want to run successful marketing experiments, you need scalability.</p>
<p>To answer it right up front, the scalable options to launch marketing experiments are:</p>
<ul class="round">
<li>WordPress</li>
<li>Webflow</li>
<li>Blogger</li>
<li>Weebly</li>
<li>Wix</li>
<li>JAMStack</li>
</ul>
<p>Almost all the marketers and SEOs are familiar with either all or a few of the aforementioned channels. The very obvious reason why marketers choose one of these options to launch the marketing experiments and campaigns boils down to these things: money, developers, and marketing team.</p>
<p>Since this article is not to talk about all these platforms, but only one among them: JAMStack. Let’s dig into the meat of the matter already!</p>
<h2 id="what-is-jamstack-and-what-we-as-marketers-should-know">What is JAMStack and What we, as Marketers, should Know?</h2>
<p>The word JAM in JAMStack refers to JavaScript, APIs, and Markup. For starters, here’s what these specific letters mean:</p>
<ul class="round">
<li><b>J for JavaScript:</b> the client-side language to build your website</li>
<li><b>A for APIs:</b> the APIs are the interface to access all database actions and server-side actions. But it does not mean that it involves the server. </li>
<li><b>M for Markup:</b> the Markup here means a piece of code to the pre-render website on the browser. The code can consist of a tag or some elements that tell browsers how to display the web page. </li>
</ul>
<p>In simpler terms, JAMStack is a tech-stack that is referred to as a way to build static websites – a set of HTML files that represent an actual webpage. In general, static websites don’t involve rendering from a server, but a browser. Having said that, most of the back-end processing takes place in the user’s browser.</p>
<p>Moreover, since there is no involvement of server and backend, the scalability comes more naturally and conveniently. What’s more, JAMStack websites are by default secure as there is no scope of database and server security attacks.</p>
<p>Mathieu Dionne, the lead Marketer at Snipcart, defines it succinctly,</p>
<blockquote>“JAMstack is a significant shift in focus from the now abstractable backend to the now powerful frontend.” - Mathieu Dionne</blockquote>
<p>For marketers who are still new to this concept, here’s what JAMStack websites may have for you in-store:</p>
<ul class="round">
<li><b>Speed:</b> Since the content gets served via a CDN, no unnecessary dealing with server requests. Hence more speed!</li>
<li><b>Security:</b> Since serverside and database operations are already out of the equation, there are no chances of security exploits.</li>
<li><b>Scalability:</b> With storage like Github pages, there is no need to worry about storage and hosting. Even 100,000 visitors are no concern for you as a marketer. Scale as you want and experiment with campaigns without worrying at all!</li>
<li><b>Stability:</b> 100% uptime and availability with Github pages. </li>
</ul>
<h2 id="the-jamstack-ecosystem---the-sky-is-the-only-limit-">The JAMStack Ecosystem - The Sky is the only Limit …</h2>
<p>If you are still finding it confused to understand the whole JAMStack idea, understanding the community around it might help.</p>
<p>There are hundreds of tools and technologies for building the JAMStack websites and the number only keeps on increasing.</p>
<p>For starters, here are definitely some technologies that stand out from others:</p>
<h3 id="the-frontend-js-frameworks">The Frontend JS frameworks</h3>
<p>JS is everywhere, even in JAMStack. You might have probably heard the terms Single Page Applications (SPA) and Progressive Web Apps (PWA). There is a bunch of frameworks or libraries that help you to build those: Angular, React, and Vuejs. In the JAMstack, you will use these technologies to deliver safe, fast, and dynamic sites without relying on web servers.</p>
<p>Since you will be using these technologies in the frontend, here are some in-hand best-practices that you’d want to utilize:</p>
<ul class="round">
<li>Deliver the content via a CDN or via an API, such as Content Management System</li>
<li>Leverage the credibility and benefits of serverless functions and webhooks to make your site dynamic, and</li>
<li>Establish a git workflow for automatic deployment and continuous workflow. </li>
</ul>
<p>For marketers, here are some of the benefits over the top of my mind:</p>
<ul class="round">
<li><b>Better user-experience:</b> Serving static content from globally-distributed CDNs with re-direct logic will allow you to reliably serve information to your users fast.</li>
<li><b>Cost:</b> Since you are uncoupling your frontend from backend, you can directly tell your developer to focus only on the frontend side. Not only this will save you some bucks, but also speed up the development process. Also, storage with cloud and Netlify free hosting is also affordable options available.</li>
<li><b>CMS:</b> Yes, you read that right. With JAMStack, you have the liberty to add a convenient and user-friendly CMS to save you the headache for playing around with text-editors every time. </li>
<li><b>Scalability:</b> I mentioned it already, haven’t I? </li>
<li><b>Improved technical knowledge:</b> In a world where technology is in everything we use, you should not shy away from learning it. JAMStack can greatly improve your technical skills including HTML, CSS, Javascript, and API integration.</li>
</ul>
<p>However, not every tech stack is all sunshine and rainbows. Here are some downsides of using JAM Tech stack for marketers:</p>
<ul class="round">
<li><b>Time:</b> Adding content from a CMS like Netlify and Headless is not exactly the same as with WordPress. At worst, it can take you a lot of time to learn it. </li>
<li><b>Bugs:</b> As new tech keep adding in JAMStack, you might come across some cases wherein an existing bug has not solved for a period of time. </li>
<li><b>Lack of some features:</b> Since JAMStack community still has a long way to improve and get mature, there can be some features that you can’t expect in the form of a plugin or a tool. In worst-case scenarios, you will need to code it from scratch. </li>
</ul>
<h3 id="static-site-generators">Static site generators</h3>
<p>With JAMStack, you will be probably dealing with a lot of code. But it doesn’t mean that you are required to wear your developer hat every time and code all features manually. Luckily, some static site generators like Jekyll, Hugo, Pelican, Gatsby, etc. gives you the flexibility to implement basic functionalities like SEO without deeging deeper into code.</p>
<p>Although I wouldn’t deny the fact that it will need some developer skills upfront (and so does every framework, yes even our favorite WordPress!).</p>
<h3 id="wordpress-vs-static-site-generators">WordPress vs Static site generators</h3>
<p>Okay. Let’s make it clear upfront: WordPress is a good choice for all of our marketing experiments since it is easy to set up and run. But it isn’t the only choice available. And I see no reason why it should?</p>
<p>Of course, it gives you the liberty to use plugins for even complex features like WooCommerce. But, think about it for a minute: is it convenient every time to increase your hosting limit every time your marketing experiment goes viral?</p>
<p>I have seen WordPress websites going down even if they hit 1000+ visitors at a time. Is this what you call scalability?</p>
<p>Now you would argue that hosting from a good service provider or even cloud will rarely hit the rock bottom in marketing experiments. Yes, I’ll give you that!</p>
<p>But what’s with this search for a good hosting provider that you as a marketer should bother about? Think about this!</p>
<p>Besides, an average WordPress website needs about 20-30 plugins. Some of these may even slow down your website loading speed: read <a href="https://onlinemediamasters.com/slow-wordpress-plugins/" target="_blank">here</a> and <a href="https://wordpress.org/support/topic/wordpress-site-loading-really-slow/" target="_blank">here</a>.</p>
<p>Sure, it makes sense to use these plugins since not everything needs manual implementation. Makes sense! But if using plugins hinders your marketing experiments and growth, who’s to be blamed?</p>
<p>JAMStack websites are easy to build and host your content. Most importantly, they give you the benefit of speed and scalability. The options to host your web pages are numerous with GitHub Pages, Netlify, or Zeit being popular ones.</p>
<h3 id="content-management-systems-for-extending-backend-functionalities">Content Management Systems for extending backend functionalities</h3>
<p>With JAMStack, you can always integrate CMS to enjoy basic facilities like adding editor roles, managing user permissions, and adding content. There are tools like Netlify CMS, Headless CMS, and Contentful for that.</p>
<p>Since your end goal is building websites that are good for marketing experiments, it’s recommended to use any CMS that has a robust API to send content to your site. In this way, you can store all of your content in a CMS even if you are not a fan of using GitHub Pages.
In general, CMS like Netlify and headless can be easily integrated with whatever frontend stack you are using, and for static websites, you might also want to use static-site ready CMS options like Siteleaf and Forestry. Your options are endless, so you might as well want to google them and read about them.</p>
<h2 id="the-jamstack-use-case-for-marketers">The JAMStack use case for Marketers</h2>
<p>For marketers, here are some options that can be part of your JAM Tech stack:</p>
<ul class="round">
<li><b>Marketing website:</b> If you are to build a website for your marketing efforts, use either Jekyll, Pelican, Hugo, or Gatsby to generate the website, deploy it on Github Pages, Netlify, and use Staticman, Netlify for form submissions. If you are not a fan of using markdown or HTML to format the content, use a CMS like Netlify CMS.</li>
<li><b>eCommerce website:</b> If you are to build an eCommerce website, use Reactjs for frontend and headless CMS as the content management system. You can also use existing solutions like Snipcart for eCommerce.</li>
<li><b>Landing page:</b> If you are to build a simple landing page to generate leads for an online business, Jekyll, Hugo, and Pelican have plenty of single-page themes available. Why not build a microsite for lead generation?</li>
<li><b>SPA: </b> If you are to build a SPA with dynamically generated content and good SEO, choose Next/ Nuxt.js to build statically generated applications. You can even convert these SPAs into PWAs just by adding manifest file and following the google lighthouse instructions.</li>
</ul>
<h2 id="key-takeaway-try-jamstack-the-next-time-you-want-to-run-a-marketing-experiment">Key takeaway: Try JAMStack, the next time you want to run a marketing experiment</h2>
<p>Gone are the days when web used to be boring and slow. Today’s users expect the browsing experience as seamless and smooth. Forget slow load times, now your users truly value the secrecy and privacy of their confidential information.</p>
<p>Things Change! As we move closer to an era of all-things-digital, the way we approach marketing and user’s expectations also changes.</p>
<p>If you are not offering a good and engaging experience to your user, you are probably missing out on something very important. As marketing becomes more complex, the metrics like speed, performance, and scalability are more critical than ever.</p>
<p>Sure, JAMStack can be an infancy term for marketers but I see a huge potential in it to go mainstream and become a part of our tech stack. I would recommend you to try the JAMStack for atleast one of your marketing experiment and analyze the results.</p>
<p>Till then, Sayonara! Thanks for reading.</p>RakshitIn this article, I will define the new thing in marketing i.e JAMStack. I will mention how JAMStack can change how marketers run experiments and what are some tools and technolgies available for marketers to build JAMStack websites.Click Depth - Why and How it matters for a Website’s pagination and SEO2019-11-10T00:00:00+00:002019-11-10T00:00:00+00:00https://rakshitsoral.com/click-depth-website-pagination-seo<p><span class="first-letter">A</span> lot has been written on on-page SEO factors and how they affect search engine rankings.</p>
<p>Unfortunately, not every article covering on-page SEO factors lists Click Depth or Page Depth as a ranking factor.</p>
<p>In fact, John Muller (Webmaster Trend Analyst at Google) has himself described Click depth as an important <a href="https://www.searchenginejournal.com/google-click-depth-matters-seo-url-structure/256779/" target="_blank"> ranking factor for SEO</a>, even more important than a URL structure. As per Muller, Google considers the number of clicks from a homepage to your content as the most important ranking factor in terms of SEO.</p>
<p>In this article, we will understand the concept of Click Depth in SEO and how it influences internal linking, pagination, and crawl budget of your website.</p>
<p>Let’s dive in!</p>
<h2 id="what-is-click-depth-and-how-it-helps-in-seo">What is Click Depth and How it helps in SEO?</h2>
<p>The term ‘Click Depth” describes the number of clicks needed from the homepage of your website to navigate to the other page.</p>
<p>For instance, the page clicked from your homepage has a click-depth of one.</p>
<p>In Google eyes, a website homepage is considered as a cornerstone material whereas every other page is considered as an essential material for SEO. Therefore, it should be your goal to make it easy for the users to navigate to the important content of your website from the homepage.</p>
<p>To make you understand how exactly does the click depth of a home page affect search rankings, let’s take an example of a 300-page website.</p>
<h2 id="the-anatomy-of-a-300-page-website-and-its-seo-performance">The Anatomy of a 300-page Website and its SEO performance</h2>
<p>Imagine having a site with pagination from 1……300. For the purpose of this example, let’s assume they are blog posts with unique content. Here page number 1 is the Home page of the website and 300 is the last page of the website.</p>
<p>Now assume that the site consists of pagination where these pages are connected to a simple “next page” link at the bottom of each blog post. (See image attached below for better understanding)</p>
<p><img src="/images/Previous next pagination scheme.webp" alt="Previous next pagination scheme" /></p>
<p>From a human point of view, the pagination scheme is simple: you click the “next page” link and it takes you to the blog post number 2. You click on the “next page” one more time, it takes you to the number 3. To visit each and every page (say 300 times), you need to keep clicking on “next page” until you reach the page you want to visit. This looks like a holy grail of website pagination. Isn’t it?</p>
<p>From the crawler’s point of view, however, the site looks like this:</p>
<p><img src="/images/300 Pagination.webp" alt="300-page website pagination" /></p>
<p>The image above illustrates the visual representation of a discovery path that a search engine crawler has to follow to crawl the whole 300-page website. The tail shown in the diagram is a “tunnel” which represents a long connected sequence of pages that the crawler has to crawl at a time. Note that, for each page, the “next page” link works like navigation to the consecutive page. For a user, it will take 299 clicks to go to the last page of the website. Google sees this as a click depth of 299 clicks, which is very bad for SEO since it offers a poor user experience for your website.</p>
<p>As per Google, the optimal click depth of the home page should not be greater than three clicks. This way the SE crawlers can easily find your website and your website can have a good crawl budget.</p>
<p>Here’s what Google’s John Muller has to say about the importance of Click Depth in SEO,</p>
<blockquote>“What does matter for us ... is how easy it is to actually find the content. So especially if your homepage is generally the strongest page on your website, and from the homepage, it takes multiple clicks to actually get to one of these stores, then that makes it a lot harder for us to understand that these stores are actually pretty important."<br /><br />
“On the other hand, if it’s one click from the home page to one of these stores then that tells us that these stores are probably pretty relevant, and that probably we should be giving them a little bit of weight in the search results as well. So it’s more a matter of how many links you have to click through to actually get to that content rather than what the URL structure itself looks like.”</blockquote>
<p>In essence: If a page needs more than 3 clicks to be reached, it’s performance will be considered as poorly to search engines. Hence, the pages that are deeper in your website silo’s will have issues to crawl as compared to the page of click depth one or two.</p>
<p>If the stats are to be believed, deep pages have a lower page rank because search engines are less likely to find them. Hence, crawling issues will be there. These pages are less likely to perform and rank as compared to the pages that are easily found from the home page.</p>
<p>In our example of the 300 pages website, the last page will have a click-depth of 300. The key takeaway from this kind of website pagination is that the traditional form of “next” and “previous” type of pagination is simply inefficient. Neither it is good for SEO, nor user experience.</p>
<p>If I were to make a list of problems that “Next” and “Previous” kind of pagination has, then here would be my key points:</p>
<ul class="round">
<li>When a site’s content gets buried deep in the form of links, it sends a poor message to the search engines that the content is not important for users. Hence, bad SEO. </li>
<li>Even worse, if any of the links among “next” and “previous” returns an error, crawlers will not crawl the pages that are deep inside the pagination.</li>
<li>Website visitors won’t click up to the 300th page or even lesser than that. That’s a bad user experience. </li>
</ul>
<p>So, how do we improve the click depth of a 300-page website?</p>
<h3 id="enter-the-midpoint-link-pagination-scheme">Enter the Midpoint link pagination scheme</h3>
<p>The midpoint link pagination scheme is best for sites having a large number of pages. Here, pagination for the homepage looks like this:</p>
<p><img src="/images/simplest mid point pagination.webp" alt="simplest mid point pagination" /></p>
<p>In the above image, 201 is the midpoint of the pagination and it lowers down the click depth from 300 to only a few clicks. What’s more, this scheme makes it possible for a crawler to navigate from any page to any other page in just a few steps.</p>
<p>Here’s the crawl chart for the Midpoint pagination strategy:</p>
<p><img src="/images/crawl chart for midpoint pagination1.webp" alt="crawl chart for midpoint pagination" /></p>
<p>Notice how easily your user will be able to go to the last page of your website from page no. 201. This leads us to an incredible level of crawlability improvement as compared to the previous “next” and “previous” pagination scheme.</p>
<h2 id="what-is-the-relation-between-click-depth-and-page-rank">What is the relation between Click Depth and Page Rank?</h2>
<p>If a website (or Homepage) has a poor Click Depth then it can adversely affect search engine rankings.</p>
<p>The reason is simple: Google will not crawl the pages that are linked far away from the homepage. As a result, these pages won’t make their way to index. This will impact the rankings as there is little to no traffic on the pages.</p>
<p>The relationship between Click Depth and Page Rank is directly related as both of them are highly important to evaluate a page’s importance. The Page Rank algorithm does this by counting the quality and number of links to the page. On the other hand, Click Depth does this by automatically influencing the Page Rank depending on the number of clicks taken by the google bot to find the deep-linked pages from the website homepage.</p>
<p>So, how do we improve the Page Rank of the 300-page website?</p>
<p>The answer to this question lies in the internal linking graph optimization scheme. Your website, irrespective of the number of pages, can be optimized for Page Rank by internally linking the most important pages of your website.</p>
<p><a href="https://twitter.com/Kevin_Indig" target="_blank">Kevin Indig</a>, VP SEO & content at G2.com, has written a really awesome article on the internal linking graph optimization scheme of a website that has 1000+ pages. Kevin’s article illustrates a <a href="https://www.kevin-indig.com/internal-link-optimization-with-tipr/" target="_blank">TIPR model</a> that dives deep in a robin-hood fashion to improve the page rank of poor pages of a website by linking them internally from stronger pages.</p>
<h2 id="what-are-some-strategies-to-improve-the-click-depth-of-your-website">What are some strategies to improve the Click Depth of your website?</h2>
<p>To improve the click depth of a website, all you need to do is to make all your pages accessible within three to four clicks from the homepage.</p>
<p>For starters, it can be done by visualizing your website as a tree graph to understand the overall structure of the website. (See the image attached below for reference)</p>
<p><img src="/images/Tree graph of a big website.webp" alt="Tree graph of a big website" /></p>
<p>Notice how efficient it becomes to understand the website structure if we visualize the tree graph and put it on a paper. In large websites, you can improve the Click Depth by internally linking the poorly performed pages to the useful pages.</p>
<p>Internal linking improves your website’s Click Depth by:</p>
<ul class="round">
<li>Lowering the number of clicks it takes for a user to reach the page, thereby facilitating the crawler job</li>
<li>Distributing the page rank throughout the website by linking poorly-performing pages to top-performing pages</li>
<li>Decreasing the bounce rate since your users can easily navigate and access the linked pages</li>
</ul>
<p>Apart from internal linking, other strategies to improve the click depth of a website include:</p>
<ul class="round">
<li>Sidebars to link top-performing pages and articles</li>
<li>Breadcumbs to navigate the previous pages and home-page</li>
</ul>
<h2 id="conclusion">Conclusion</h2>
<p>Click depth (also referred to as Page depth sometimes) should be a key consideration while designing pagination for a website with a large structure. With the right approach, SEO can get the most out of Googlebot’s crawl budget, thereby improving the visibility of the site’s content.</p>
<p>Is there any other way to improve CLick Depth of a large website? Let me know in the comment section.</p>Rakshit SoralIn this article, we will learn how to implement website pagination in a 300 pages website. We will learn this in a way such that it will help in website SEO and achieve rankings.How to Build a Jekyll Blog for FREE2019-11-02T00:00:00+00:002019-11-02T00:00:00+00:00https://rakshitsoral.com/build-jekyll-blog-free<p><span class="first-letter">S</span>o you finally decided to build a blog that costs you nothing. I am sure you have read <a href="https://rakshitsoral.com/why-start-a-blog/">the benefits of building a blog</a> before taking the decision. Buckle up, as I take you through the next part which deals with building a free blog with Jekyll on Github pages.</p>
<p>To make you navigate through the blog in an easy way, I divided this blog into two parts:</p>
<ul class="round">
<li>Choosing the platform: Why Static Site Generator? What are its advantages over Wordpress?</li>
<li>Jekyll: Getting Started with Jekyll in Ubuntu and Windows</li>
</ul>
<h2 id="choosing-the-platform-why-static-site-generator">Choosing the platform: Why Static Site Generator?</h2>
<p>In 2017, I created my <a href="https://huntfordigital.com/" target="_blank">first ever blog</a> on WordPress and it was an awesome experience. The process was not at all time consuming, let alone cost-effective. Since a lot of marketing experiments deal with Wordpress, it was obvious to be my initial choice. However, I wanted to experiment with something different; something which makes me learn one thing or two.</p>
<p>I stopped working on Wordpress as I invested a major chunk of my time learning HTML, CSS, and Javascript. SEO was not new to me; I am doing it since the beginning of my career. I wanted to do something more interesting.</p>
<p>In 2019, I decided to build my personal site on Github. I played around with Bootstrap for a while but found it time-consuming. The other day a friend of mine mentioned the concept of static-site-generators to me, I found it appealing. Since my favorite note-taking format remained Markdown, I liked the concept at first glance.</p>
<p>Wordpress was always an alternative for me but I dislikened the whole process of choosing, buying and renewing the hosting and domain name. With Static-site-generators, I had the option of serving the HTML on Github pages for FREE. Here’s why I settled on Jekyll using Github pages after trying out several Static-site options such as Pelican and Hugo. Of course, I had my other reasons to support the decision such as speed, cost-savings, security, maintainability, and customizations.</p>
<p>Let’s take these advantages one-by-one:</p>
<h3 id="cost">Cost</h3>
<p>One of the main reasons for choosing Jekyll over Wordpress would be the cost.</p>
<p>Wordpress makes your pocket loaded with investments like domain name, hosting (webserver), PHP and a database. Although most hosting plans give you a good deal for the first year but after a couple of years, it does get pricey.</p>
<p>For me, since I have hosting and domain for about three years, this came out to Rs. 2500 (hosting for 3 years) + Rs. 1000 (domain for 1 year). With static sites such as Jekyll, the cost goes down to Rs. 0/year (or only Rs. 1000 if I want a .com domain extension). What’s more, you can host your static site for free using platforms like Github Pages and Netlify.</p>
<h3 id="speed">Speed</h3>
<p>Another solid reason to build a blog with a Static-site generator is speed.</p>
<p>Wordpress gives you a dynamic way of loading the content live in a database, which gets converted into HTML only when a user wants to see the page. The entire process is request-heavy with steps like building the page from a template or theme, grabbing the content and sending the completed page to the user.</p>
<p>With Jekyll or any other static site, the whole site gets uploaded to the server as a folder full of assets (HTML, CSS, images, etc.). The entire process of requesting and fetching the content is seamless as the assets are already statically loaded on the server. This improves the page load speed significantly. With Wordpress, however, you still need to optimize the performance and speed with a variety of plugins which slows down the website. If you are still not convinced, Nikola has written a nice blog on the topic: <a href="https://getnikola.com/handbook.html#why-static" target="_blank">“Why Static?”</a>.</p>
<p>Below are tests I ran using the <a href="https://tools.pingdom.com/" target="_blank">Pingdom Website Speed Test</a> on my WordPress and static site.</p>
<h4 id="wordpress-test">WordPress Test</h4>
<p><img src="/images/Wordpress speed test.webp" alt="Wordpress test" /></p>
<h4 id="static-site-test">Static Site Test</h4>
<p><img src="/images/static site speed test.webp" alt="Wordpress test" /></p>
<h3 id="security">Security</h3>
<p>When was the last time you heard someone telling you to update your CMS and plugins for better security in Wordpress? If the stats are to be believed, over <a href="https://www.wpwhitesecurity.com/statistics-70-percent-wordpress-installations-vulnerable/" target="_blank">70% of all WordPress installs are vulnerable to known security glitches.</a></p>
<p>Static sites, on the other hand, give you a free hand to experiment with your code without having to worry about malware. Static sites are built on a production machine (probably the machine you are reading this on) by static site generators, which take your code and spit out flat HTML files with CSS and JavaScript. When a user requests a page from your site, the server just sends them the file for that page, instead of building that page from various assets each time. No build process means standard hacking attacks like scripting or database security exploits just don’t work.</p>
<h2 id="choosing-jekyll-as-a-static-site-generator-getting-started">Choosing Jekyll as a static site generator: Getting Started</h2>
<p>The other day I was looking for options to build a static-site, the numbers are overwhelming. At the time of writing this blog, there are over 463 options to build a static site. And the numbers are increasing day by day!</p>
<p>Remember I mentioned about trying options such as Pelican and Hugo for building a blog. It was fun playing with them but I decided to stick with Jekyll. I will tell you exactly the reasons for choosing Jekyll as a static site generator in an upcoming blog.</p>
<h3 id="prerequisite-of-working-with-jekyll">Prerequisite of working with Jekyll</h3>
<p>Although you won’t require much language knowledge to get a static site up and running, I would still recommend you to polish basic HTML and CSS skills. You will require them during website customization. As an addition, I would recommend you to learn basic Git commands to work on Ubuntu.</p>
<p>Now that the prerequisites are known, let’s move on and learn how to build a blogging website with Jekyll for Free.</p>
<h2 id="building-a-free-blog-setting-up-jekyll-on-github-pages">Building a FREE blog: Setting up Jekyll on Github Pages<br /></h2>
<h3 id="step-1-installing-jekyll-with-ruby"><em>Step 1:</em> Installing Jekyll with Ruby</h3>
<p><b>First things first, let’s install Jekyll on your computer</b></p>
<p>Since Jekyll is a static site generator, there is no involvement of the server, database, and backend. All you need is to have a local copy of the site on your computer. You will edit the local files on your machine directly and deploy the changes to the Github repo which is the online version of the site.</p>
<p>To work with the local copy, you need to install Jekyll on your computer. The first step would be to update all the system packages in Ubuntu to their latest release.</p>
<pre>sudo apt update
sudo apt -y upgrade
sudo reboot</pre>
<p>To work with Jekyll, you will need to have a working Ruby development environment which includes libraries. Use the following commands to install Jekyll and various build tools required:</p>
<pre>sudo apt -y install make build-essential</pre>
<p><b>Install Ruby package and development tools:</b></p>
<pre>sudo apt -y install ruby ruby-dev</pre>
<p>The next step would be to instruct Ruby’s gem package manager to place gems in the user’s home directory. Add Environment variable to <code>~/.bashrc</code> field.</p>
<pre>echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc
echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc
source ~/.bashrc</pre>
<p>Use gem to Install Jekyll and Bundler which is a tool used to manage gem dependencies.</p>
<pre><b>$ gem install bundler</b>
Fetching: bundler-2.0.2.gem (100%)
Successfully installed bundler-2.0.2
Parsing documentation for bundler-2.0.2
Installing ri documentation for bundler-2.0.2
Done installing documentation for bundler after 2 seconds
1 gem installed</pre>
<p>Install Jekyll on Ubuntu with the following command:</p>
<pre>$ gem install jekyll</pre>
<h3><b>#Step 2:</b>Choose a Jekyll theme you like to have on your Website</h3>
<p>This is the thing I like about Jekyll: an extensive theming system. With Jekyll, you will find almost dozens of communities that offers community-maintained templates and styles to customize your site’s presentation.</p>
<p>You can find and preview Jekyll themes on the following galleries:</p>
<ul class="square">
<li><a href="https://jamstackthemes.dev/" target="_blank">jamstackthemes.dev</a></li>
<li><a href="http://jekyllthemes.org/" target="_blank">jekyllthemes.org</a></li>
<li><a href="https://jekyllthemes.io/" target="_blank">jekyllthemes.io</a></li>
<li><a href="https://jekyll-themes.com/" target="_blank">Jekyll-themes.com</a></li>
</ul>
<p>To install a theme, navigate to the theme’s Github Repo and fork it. In my case, I used Urban Jekyll template on my Jekyll website. Here’s a fork for the same:</p>
<p><img src="/images/Forking the repo.webp" alt="Forking the repo" class="lazyload" /></p>
<p>The next step will be to rename the repository to username.github.io. In my case, I shall rename it to rakshitsoral.github.io.</p>
<p><img src="/images/Renaming the forked repo.webp" alt="Renaming the forked repo" /></p>
<p>Now clone the repo to your local machine:</p>
<pre>$ git clone https://github.com/rakshitsoral/urban-jekyll-template.git</pre>
<p>Now move to the folder containing all the files:</p>
<pre>$ cd urban-jekyll-template</pre>
<p>Initialize the git repo</p>
<pre>$ git init </pre>
<p>Run the site on your local machine:</p>
<pre>$ bundle exec jekyll serve</pre>
<p>Navigate to <a href="http://localhost:4000/" target="_blank">http://localhost:4000/</a> and Voilla, your site is live. It should look like the following image:</p>
<p><img src="/images/urban jekyll template.webp" alt="Urban Jekyll Template" class="lazyload" /></p>
<p>It doesn’t look bad, does it?</p>
<h2 class="note">Wrapping up</h2>
<p>There you go! In this part, you learned how to build a FREE blog using Jekyll. In the next part of the series, I would walk you through the way I customized the whole site. It will include modifying the home page, setting up the Goodreads quote widget, adding recent posts widget and a lot more.</p>
<p>Untill then, Saayonara!</p>Rakshit Soralrakshitsoral@gmail.comIn this blog, I will walk you through the process of building a Jekyll blog for FREE. You will learn the step-by-step process of building a jekyll website.Why I started this blog and Why you Should too. [Updated]2019-10-18T00:00:00+00:002019-10-18T00:00:00+00:00https://rakshitsoral.com/why-start-a-blog<p><span class="first-letter">L</span>et’s accept this:</p>
<p>As marketers, we all have pondered over starting a blog at some point in our career.</p>
<p>And why not?</p>
<p>According to OptinMonster, marketers who <a href="https://optinmonster.com/blogging-statistics/" target="_blank"> prioritize blogging</a> are 13x more likely to have a positive ROI on their efforts.</p>
<p>As it turns out, blogging not only attracts the quality traffic to your website but it also helps you build authority and establish yourself as a subject matter expert in your domain.</p>
<p>In fact, this is one such reason why I started this blog and I’d rather you should start building it too. So without wasting much time, let’s uncover some reasons to start a blog.</p>
<h2 id="is-starting-a-blog-worth-your-time-and-efforts">Is starting a blog worth your time and efforts?</h2>
<p>Off lately and time and again, you must have experienced an unprecedented surge in discussions over the web on starting a blog.</p>
<p>While many people think that it requires a serious investment of time and resources to build and manage a blogging website, these arguments are nothing but senseless and a pure waste of time. The question should be whether a blog can help you achieve your personal, academic or professional goals, rather than whether one should build one or not.</p>
<p>Having a blog on your name is a great way to make your network and grow on the ‘personal” as well as “professional” front, but, like all tools, it requires a certain investment of time to manage and use it skillfully.</p>
<p>At this point, almost each and every marketer should consider blogging as a serious investment. Here’s why.</p>
<h3 id="identity">Identity</h3>
<p>A personal blog is the best way to carve your identity in the minds of the people. There’s a popular belief that says “Good employers like to google a candidate name online before they interview him; just to know him better”.</p>
<p>There are always high chances that your potential future employer can do the same. Afterall they don’t want to hire someone who’s a complete ghost online. Here’s why it makes sense to start a blog now. A blog, whether it be a personal or professional, represents your identity. It allows people to know who you are. So better start working on your identity now and build your career.</p>
<h3 id="knowledge-learning">Knowledge/ Learning</h3>
<p>Building a blog can be great learning experience worth your time. There’s a lot you can do with a website than to fill it with content. When I made this website on Jekyll, I learned a lot more things. I had the good fortune of spending my large chunk of time playing with HTML, CSS, and Javascript. I learned that it’s still possible for anyone to make a website without bearing any cost. I have deployed my blog on Netlify, which is an amazing content management system. What’s more, you get to host your static pages on Netlify for FREE; with no hassle of purchasing those expensive hosting plans.</p>
<p>I’m by no means an expert web developer, but I can fix small issues on this blog site, all by myself. Isn’t it amazing? Yes, it is.</p>
<p>A sneak peek of a few things I learned about while building this blog:</p>
<ul class="round">
<li><b>Static web pages:</b> Wordpress is good, but Jekyll is a lot better. I’d tried my hands-on different static site generators like Hugo and Pelican in the past, but I decided to stick with Jekyll. I learned how to host a static website on gh-pages of Github. </li>
<li><b>Git:</b> If you are a marketer, you hardly know the basics of Git. But I found it pretty amazing to deal with. Initially, it was a lot of pain to find out the bugs and fix them. But slowly it all paid off at the end. I learned basics Git commands and ways to roll-back the previous versions of the code. </li>
<li><b>HTML-CSS:</b> Like I previously mentioned, HTML and CSS are something that I really love to play with. These kinds of stuff are an absolute necessity when you are running your blog on a static website. I’ve made some really nice layouts on my site and I’m slowly learning Javascript which I found really hard to grasp. But I think I’ve still a long way to go. </li>
<li><b>Website deployment with Netlify:</b> One of the painful things of continuing with a static website is deployment. You write some code that breaks your website and you spend a large chunk of time figuring out what went wrong. I found Netlify as an amazing way to incorporate <a href="https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/" target="_blank"> continuous integration and deployment</a> to your static website. Just hit the publish button and Netlify would handle the rest of things. In case your website goes unpublish, you can read the deploy notes and figure out what’s wrong with the code. </li>
</ul>
<p>The list goes on and on. While some of these are stuff that I don’t do when I am in the office, I am glad that I learned them. This is an amazing thing when you own a blog. You learn things, which you don’t get to learn in your profession.</p>
<h3 id="practice">Practice</h3>
<p>Practice makes a man better, and so does a blog. When you work on your website, there will be tons of things that you would be implementing day by day. Although, you can’t remember doing all the stuff after a few days. There will be a time when these tips are on your fingertips and you can do your work more quickly. Initially, it took me a lot of time to fix even the smallest of things on my blog website. But as I continue to practice, I can fix things in a minute or five.</p>
<h2 id="parting-words">Parting words</h2>
<p>The year 2020 is on the verge of ending. In a few days, we will be in the year 2021. No matter what situations the upcoming year brings to your life, don’t continue to embarrass yourself. Even worse, don’t wait. Start building your personal blog. I am sure there will be tutorials online. In the upcoming article, I will walk you through the process of building a static website with Jekyll.</p>
<p>Stay tuned and Sayonara!</p>Rakshit Soralrakshitsoral@gmail.comShould you care to start a blog ever in your career? If you've been ever experienced this dilemma then you are at the right place.Best Design Resources (Free and Paid) for Marketers2019-10-12T00:00:00+00:002019-10-12T00:00:00+00:00https://rakshitsoral.com/best-design-resources-free-and-paid-for-marketers<p><span class="first-letter">W</span>hile I don’t consider myself as a designer, I see design as an essential skill for marketers. No matter if you are someone who fancy writing awesome content; someone who gets busy sending newsletters to an audience, or someone who is earning as a freelancer. Marketing without Design is like coconut without water. Here’s why, I love to try different tools and enhance my creativity. Here are some design resources I prefer to use as a marketer:</p>
<h2 id="-creating-and-editing-marketing-collaterals-and-images">🖼 Creating and Editing Marketing collaterals and Images</h2>
<p>When it comes to creating Images with scratch, I recommend you to play around with <a href="https://www.figma.com/" target="_blank">Figma</a> and <a href="https://www.canva.com/" target="_blank">Canva</a>. While Figma isn’t free except for the trial version, Canva still is a great tool for designing images for your blogs and websites.</p>
<p>I also use <a href="https://www.designer.io/en/" target="_blank">Gravit Designer</a>, which is still a great alternative to tools like Adobe Illustrator and Sketch. Unlike Sketch, which doesn’t let you convert a JPG or PNG image to vector format, Gravit Designer is an excellent tool for creating prototypes and logos. You can download Gravit designer for your desktop or you can use it online.</p>
<h3 id="bonus-design-tools-i-recommend-to-boost-your-design-ambitions">Bonus Design tools I recommend to boost your design ambitions:</h3>
<ul class="round">
<li><a href="https://pablo.buffer.com/" target="_blank">Pablo by Buffer</a>: I recommend Pablo to quickly create Images for Social media such as Instagram, Pinterest, etc. </li>
<li><a href="https://duotone.shapefactory.co/" target="_blank">Duotone</a>: If you fancy creating images with exciting backgrounds, you can use Duotone which lets you upload an image and add different effects to it. </li>
<li><a href="https://www.remove.bg/" target="_blank">Remove.bg</a>: If you want to remove the background of human-centered Images, remove.bg is an excellent resource. It won’t work in removing the background of every other Image though. </li>
<li><a href="https://squoosh.app/" target="_blank">Squoosh</a>: Squoosh will help you to compress your images without compromising the quality. </li>
</ul>
<h2 id="-icons-and-illustrations">👻 Icons and Illustrations</h2>
<p>One skill that I currently lack is drawing illustrations and icons. Ergo, I recommend you to use Icons and illustrations from these awesome free design resources:</p>
<ul class="round">
<li><a href="https://www.emojicopy.com/" target="_blank">Emojicopy</a>: I love to use emoji’s in the blog, for they are helpful in conveying my emotions to the reader. This free tool will make sure you mention emoji’s in blog without any hassle. </li>
<li><a href="https://www.iconsdb.com/" target="_blank">Iconsdb</a>: A clean and intuitive icon sets which I use in almost every design project. Icons here are free and easy to use with almost every size. What’s more, you also get the color customization option that other design resources lack with this tool. </li>
<li><a href="https://undraw.co/" target="_blank">unDraw</a>: An opensource collection of colorful illustrations that are fun to have in your design.</li>
<li><a href="https://www.humaaans.com/" target="_blank">Humaans</a>: I rarely use this, but I find it amazing resource to mix-match with different scenes and characters. You can use it in your ebooks, infographics, social media graphics, etc.</li>
<li><a href="https://www.freepik.com/" target="_blank">Freepik</a>: This resource need no special mention. I think most of you might be aware of Freepik website that lets you use free of cost graphics and illustrations in your projects. </li>
<li><a href="https://creazilla.com/" target="_blank">Creazilla</a>: Oh boy, I would recommend you Creazilla over Freepik anyday. Not only does it contains free illustrations but also free silhouttes and cliparts. </li>
</ul>
<h2 id="summing-up">Summing up</h2>
<p>While I don’t know much about designing, I really enjoy designing pleasant and colorful designs. For starters, I recommend you read these <a href="https://twitter.com/i/moments/879086180909764608?lang=en">UX tips from Steve Schoger</a> that will make sure you prepare clean and intuitive designs.</p>
<p>Remember, it takes a lot of time to understand the basics of designing. The resources mentioned above will help marketers to prepare awesome graphics and design collaterals. Designers, however, should learn how to design sketches or images from scratch. After all, there’s more to design than copying something already available on the web. I hope that the resources I shared in this article help you in any way.</p>
<p>Which design tool or resource you use? Let me know in the comments.</p>RakshitIn this article, I will mention some of my favourite design resources that will help you implement design as a marketer. These design resources include, but are not limited to, icons pack, design softwares, online tools, free illustration websites, img compressors, etc.