Commit f1e0fc17 authored by Pallav Agarwal's avatar Pallav Agarwal

New pages added, Disqus added.

parent eb9f9269
......@@ -25,11 +25,13 @@
<div class="container">
<div class="row" id="menu">
<div class="table_this" id="tableRow">
<div class="col-sm-3 vcenter" id="site_title">VARSTACK</div>
<div class="col-sm-3 vcenter" id="site_title"><a href="/" style="color:black;">VARSTACK</a></div>
<div class="col-sm-6 vcenter">
<div class="row" id="top_menu">
<ul class="nav nav-pills">
<li class="active" id="blog"><a class="color_change" href="#">Blog</a></li>
<li class="active" id="blog"><a class="color_change" href="/">Blog</a></li>
<li id="tips"><a class="color_change" href="/tips/">Tips</a></li>
<li id="algo"><a class="color_change" href="/algo/">Behind The Scenes</a></li>
<li id="about"><a class="color_change" href="/about_me/">About Me</a></li>
</ul>
</div>
......@@ -138,6 +140,20 @@ But what makes IITK special is that even first years are part of the team. In ro
</div>
</div>
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'varstack';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<div class="col-sm-2">
</div>
......
......@@ -23,11 +23,13 @@
<div class="container">
<div class="row" id="menu">
<div class="table_this" id="tableRow">
<div class="col-sm-3 vcenter" id="site_title">VARSTACK</div>
<div class="col-sm-3 vcenter" id="site_title"><a href="/" style="color:black;">VARSTACK</a></div>
<div class="col-sm-6 vcenter">
<div class="row" id="top_menu">
<ul class="nav nav-pills">
<li class="active" id="blog"><a class="color_change" href="#">Blog</a></li>
<li class="active" id="blog"><a class="color_change" href="/">Blog</a></li>
<li id="tips"><a class="color_change" href="/tips/">Tips</a></li>
<li id="algo"><a class="color_change" href="/algo/">Behind The Scenes</a></li>
<li id="about"><a class="color_change" href="/about_me/">About Me</a></li>
</ul>
</div>
......@@ -143,6 +145,20 @@ be as perfect as other linux package managers.</p>
</div>
</div>
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'varstack';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<div class="col-sm-2">
</div>
......
......@@ -25,11 +25,13 @@
<div class="container">
<div class="row" id="menu">
<div class="table_this" id="tableRow">
<div class="col-sm-3 vcenter" id="site_title">VARSTACK</div>
<div class="col-sm-3 vcenter" id="site_title"><a href="/" style="color:black;">VARSTACK</a></div>
<div class="col-sm-6 vcenter">
<div class="row" id="top_menu">
<ul class="nav nav-pills">
<li class="active" id="blog"><a class="color_change" href="#">Blog</a></li>
<li class="active" id="blog"><a class="color_change" href="/">Blog</a></li>
<li id="tips"><a class="color_change" href="/tips/">Tips</a></li>
<li id="algo"><a class="color_change" href="/algo/">Behind The Scenes</a></li>
<li id="about"><a class="color_change" href="/about_me/">About Me</a></li>
</ul>
</div>
......@@ -66,15 +68,17 @@
<hr />
<div class="row text-justify" id="content-holder">
<blockquote><p>"It always takes longer than you expect, even
when you take into account Hofstadter's Law."</p>
when you take into account Hofstadter's Law."
<p style="text-align:right"> —Hofstader's Law </p></p></blockquote>
<p><p style="text-align:right"> —Hofstader's Law </p></p></blockquote>
<p>I am Pallav Agarwal, a sophomore at the department of
<p>Hi, let me first introduce myself.
I am Pallav Agarwal, a sophomore at the department of
Computer Science and Engineering, Indian Institute of
Technology, Kanpur.</p>
Technology, Kanpur. I love trying new tech, languages,
programs, operating systems.. Well, pretty much everything
remotely related to a computer.</p>
<p>My friends like to say that I'm a reinvent the wheel
<p>It has been pointed out to me that I'm a <em>reinvent the wheel</em>
kind of guy. I built this website up from scratch without
using any prebuilt themes, pain as it was to get it
cross compatible. Even for the search functionality, I
......@@ -86,7 +90,7 @@ window manager. But that isn't custom enough, and so I am
currently building my own operating system, using the
(B)LFS project.</p>
<p>Ok, now I'm guessing that you agree with my friends.
<p>So, now I would like to offer an explanation,
I may like to reinvent the wheel, but I only do it
because everytime I complete one of my custom projects,
I end up adding a lot to my knowledge. To make this
......@@ -96,8 +100,36 @@ ruby, and NLP in python. The LFS project taught me more
about the linux operating system, than most linux
enthusiasts learn in a lifetime.</p>
<p>My only motive in creating this blog was so that
I could provide answers to some questions that
I had trouble finding the answers to.</p>
<p>You can:</p>
<ul>
<li>Message me on <a href="http://fb.com/pallavagarwal07">Facebook</a></li>
<li>Follow me on <a href="http://github.com/pallavagarwal07">Github</a></li>
</ul>
<h3>Enjoy ☺</h3>
</div>
</div>
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'varstack';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<div class="col-sm-2">
</div>
......
<title>Behind the Scenes - VARSTACK</title>
<meta charset="utf-8"/>
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/highlighting.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/SmoothScroll.js"></script>
<script src="/js/script.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="container">
<div class="row" id="menu">
<div class="table_this" id="tableRow">
<div class="col-sm-3 vcenter" id="site_title"><a href="/" style="color:black;">VARSTACK</a></div>
<div class="col-sm-6 vcenter">
<div class="row" id="top_menu">
<ul class="nav nav-pills">
<li class="active" id="blog"><a class="color_change" href="/">Blog</a></li>
<li id="tips"><a class="color_change" href="/tips/">Tips</a></li>
<li id="algo"><a class="color_change" href="/algo/">Behind The Scenes</a></li>
<li id="about"><a class="color_change" href="/about_me/">About Me</a></li>
</ul>
</div>
</div>
<div class="col-sm-3 vcenter">
<div class="row">
<form action="/search/" id='search-form'>
<input id="search-box" type="text" name="query" placeholder="Search..">
</form>
</div>
</div>
</div>
</div>
<div class="row" id="content">
<div class="col-sm-3" id="recent">
<h4>RECENT POSTS</h4>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="/2015/06/26/Linuxbrew/" class="color_change">Package Management without root access -...</a>
</li>
<li>
<a href="/2015/06/18/IIT-Kanpur/" class="color_change">IIT Kanpur: The First Year</a>
</li>
</ul>
</div>
<div class="col-sm-7">
<div class="row" id="data">
<br />
<h3>Behind the Scenes</h3>
<hr />
<div class="row text-justify" id="content-holder">
<p>When I decided to make a blog, I wasn't sure how I
was going to make it. I had a variety of options,
whether to use <a href="http://getbootstrap.com">bootstrap</a> or not.
Where to host my website? Whether I would need databases
or not. Or if I should just go ahead and install
<a href="http://wordpress.org">Wordpress</a>.</p>
<p>It was then that I heard of <a href="http://jekyllrb.com">Jekyll</a>.</p>
<blockquote><p>Jekyll is a simple, blog-aware, static site
generator. It takes a template directory containing
raw text files in various formats, runs it through
a converter (like Markdown) and our Liquid renderer,
and spits out a complete, ready-to-publish static
website suitable for serving with your favorite web
server.</p>
<p>Jekyll also happens to be the engine behind
GitHub Pages, which means you can use Jekyll to
host your project’s page, blog, or website from
GitHub’s servers for free.</p></blockquote>
<p><strong>Jekyll had quite a few advantages that I was looking for:</strong></p>
<ul>
<li>I could write posts directly in markup (markdown or liquid)</li>
<li>I could host it directly on github, and thus get a reliable
hosting for free.</li>
<li>Jekyll would take care of preprocessing and I could code
in CoffeeScript, Sass without running their separate compilers.</li>
<li>Since there was no server side (Jekyll creates a static
website), the pages would load up faster and unlike Wordpress,
my blog wouldn't succumb on loads of requests.</li>
<li>Git support meant I would have complete version control
over the website.</li>
</ul>
<p><br /></p>
<p><strong>Unfortunately, there were also some disadvantages:</strong></p>
<ul>
<li>No server side!!! How would I implement search?</li>
<li>No server side!!! How would I implement comments?</li>
<li>No server side!!! You get the idea...</li>
</ul>
<p>If you notice on the top, my site <strong>does</strong> have a search.
Go ahead.. Try it out. It works.</p>
<p>But I didn't use google custom search, or any implementations
available on the internet. I tried almost all of them, but
none of them seemed to work that well. The primary problem with
those implementations was that they could be atmost of two
types:</p>
<ol>
<li><p>Like google search. Redirect to another domain for
the search. This would probably give the most accurate
search results, but I don't want the search results
to be displayed on a different domain.</p></li>
<li><p>Based on Javascript - They would either search only
in the titles of everypage or download ALL the posts to the
user's computer to search through it all. Not a good idea
either.</p></li>
</ol>
<p><br /></p>
<p><strong>So how did I implement the search?</strong></p>
<p>Well.. Programming is one thing I'm good at. I needed a
way so that I could search through atleast the important words
of the content - Tags. But adding tags manually for each post
is definitely <strong>not</strong> the way to go. I would be wasting too
much time writing tags. So I decided to use a python library
based on NLP (Natural Language Processing) to detect and extract
important words and phrases from the text. Once I did that, I had
to find a way to integrate those tags with the search functionality.</p>
<p>If you have ever used Jekyll (or Liquid), a lot of content is
manipulated using filters. These filters are basically snippets
of ruby code acting on the text/numbers/arrays. All I had to do
is to integrate my python program with ruby to create a filter to
extract tags from passed content. And voila, I had a page with all
posts' titles, and tags.</p>
<p>Now I wrote some javascript to search for the passed content in the
post data, and hide the ones with a low enough score (Each tag has
a weight score) and sort the rest.</p>
<p>If you navigate to the search results page, you can actually see
the tags that were generated, in your browser's developer tools.
If you want to implement something like this on your own blog,
or website, you can do so (the source code for everything is public on
github). Although it would be nice if you gave me credit.</p>
<p><br /><br />
<br /><br /></p>
</div>
</div>
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'varstack';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Image Preview
</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="max-height: 100%; max-width: 100%;">
</div>
</div>
</div>
</div>
......@@ -25,11 +25,13 @@
<div class="container">
<div class="row" id="menu">
<div class="table_this" id="tableRow">
<div class="col-sm-3 vcenter" id="site_title">VARSTACK</div>
<div class="col-sm-3 vcenter" id="site_title"><a href="/" style="color:black;">VARSTACK</a></div>
<div class="col-sm-6 vcenter">
<div class="row" id="top_menu">
<ul class="nav nav-pills">
<li class="active" id="blog"><a class="color_change" href="#">Blog</a></li>
<li class="active" id="blog"><a class="color_change" href="/">Blog</a></li>
<li id="tips"><a class="color_change" href="/tips/">Tips</a></li>
<li id="algo"><a class="color_change" href="/algo/">Behind The Scenes</a></li>
<li id="about"><a class="color_change" href="/about_me/">About Me</a></li>
</ul>
</div>
......@@ -76,6 +78,20 @@
</div>
</div>
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'varstack';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<div class="col-sm-2">
</div>
......
......@@ -27,11 +27,13 @@
<div class="container">
<div class="row" id="menu">
<div class="table_this" id="tableRow">
<div class="col-sm-3 vcenter" id="site_title">VARSTACK</div>
<div class="col-sm-3 vcenter" id="site_title"><a href="/" style="color:black;">VARSTACK</a></div>
<div class="col-sm-6 vcenter">
<div class="row" id="top_menu">
<ul class="nav nav-pills">
<li class="active" id="blog"><a class="color_change" href="#">Blog</a></li>
<li class="active" id="blog"><a class="color_change" href="/">Blog</a></li>
<li id="tips"><a class="color_change" href="/tips/">Tips</a></li>
<li id="algo"><a class="color_change" href="/algo/">Behind The Scenes</a></li>
<li id="about"><a class="color_change" href="/about_me/">About Me</a></li>
</ul>
</div>
......@@ -103,6 +105,20 @@
</div>
</div>
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'varstack';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<div class="col-sm-2">
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment