Jekyll Migration 🔬

Feb 8, 2016 • Comments

I’m currently travelling South America (in Colombia to be more specific) and found some time to give my website a refresh.

Before:

The first version was something I hacked together really quickly. A custom single page app.

The entire site was one HTML file.
Pages were implemented as Markdown files converted to HTML files using a grunt task.
When menu buttons were clicked, an AJAX call would fetch the pre-built HTML and inject it into the page.

Pros:

Super easy to add new pages.
Worked with Markdown files.
Header could be downloaded and content injected after (progressive rendering).
No page refreshes (single page “app”).

Cons:

URL did not change based on the page (no way to link to other pages).
HTML generated from Markdown was bloated.
No way to selectively load CSS/JS based on the page.

Site Version 1

After:

Since I’m using Github Pages, Jekyll seemed like a better option for building a site.

Changes:

Nicer theme (thanks Jekyll defaults!)
Background of all pages is the source code for that page #IM-SO-META-EVEN-THIS-ACRONYM.
(check out show-code to see how that works)
Updated content (things have changed since I last built my site…)
No more AJAX requests on page load.
Better control over what CSS/JS is included with each page.
A blog!

Site Version 2

I’m still figuring out all the features of Jekyll, but so far it’s been working reasonably well.

If you find any bugs/issues, don’t hesitate to email me.

Comments


      <div id="content" class="wrapper">
        <article class="post" itemscope="" itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title" itemprop="name headline">Jekyll Migration 🔬</h1>
    <p class="post-meta"><time datetime="2016-02-08T00:00:00+00:00" itemprop="datePublished">Feb 8, 2016</time>
	
	
		• <span>
			<a href="https://haroldtreen.com#disqus_thread">Comments</a>

		</span>
	
	</p>
  </header>

  <div class="post-content" itemprop="articleBody">
    <p>I’m currently travelling South America (in Colombia to be more specific) and found some time to give my website a refresh.</p>

<h4 id="before"><strong>Before</strong>:</h4>

<p>The first version was something I hacked together really quickly. A custom single page app.</p>

<ul>
  <li>The entire site was one HTML file.</li>
  <li>Pages were implemented as Markdown files converted to HTML files using a grunt task.</li>
  <li>When menu buttons were clicked, an AJAX call would fetch the pre-built HTML and inject it into the page.</li>
</ul>

<p><strong>Pros:</strong></p>

<ul>
  <li>Super easy to add new pages.</li>
  <li>Worked with Markdown files.</li>
  <li>Header could be downloaded and content injected after (progressive rendering).</li>
  <li>No page refreshes (single page “app”).</li>
</ul>

<p><strong>Cons:</strong></p>

<ul>
  <li>URL did not change based on the page (no way to link to other pages).</li>
  <li>HTML generated from Markdown was bloated.</li>
  <li>No way to selectively load CSS/JS based on the page.</li>
</ul>

<p><img src="/assets/site-v1.jpg" alt="Site Version 1"></p>

<h4 id="after"><strong>After</strong>:</h4>

<p>Since I’m using Github Pages, Jekyll seemed like a better option for building a site.</p>

<p><strong>Changes:</strong></p>

<ul>
  <li>Nicer theme (thanks Jekyll defaults!)</li>
  <li>Background of all pages is the source code for that page <strong>#IM-SO-META-EVEN-THIS-ACRONYM</strong>.<br>
(check out <a href="https://www.github.com/haroldtreen/show-code">show-code</a> to see how that works)</li>
  <li>Updated content (things have changed since I last built my site…)</li>
  <li>No more AJAX requests on page load.</li>
  <li>Better control over what CSS/JS is included with each page.</li>
  <li>A blog!</li>
</ul>

<p><img src="/assets/site-v2.jpg" alt="Site Version 2"></p>

<p>I’m still figuring out all the features of Jekyll, but so far it’s been working reasonably well.</p>

<p>If you find any bugs/issues, don’t hesitate to <a href="/contact">email me</a>.</p>

  </div>

  
	<header class="post-header">
<h1 class="post-title">Comments</h1>
</header>
<div id="disqus_recommendations" style="margin-bottom: 12px;"></div><div id="disqus_thread"></div>
<script>
var disqus_config = function () {
  this.page.url = 'https://haroldtreen.com/site/update/tech/2016/02/08/jekyll-migration/';
  this.page.identifier = '/site/update/tech/2016/02/08/jekyll-migration';
};
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

  

</article>

      </div>