Jekyll2019-02-13T04:28:37-08:00https://burden.cc/feed.xmlburden.ccI've been a contributing netizen since 1998, when it was common to use a self appointed handle. Paying homage to the lessons of duality, "burden" always seemed appropriate as a reminder to stay humble.burdenBoilerplates are updated to bulma 0.7.4 and more…2019-02-13T01:29:49-08:002019-02-13T01:29:49-08:00https://burden.cc/blog/updates/bulma074-boilerplates-update<p>Wound up giving a little love to all of the boilerplates.</p>
<p>In all instances…</p>
<ul>
<li>updated ruby to 2.5.3</li>
<li>updated jekyll to 3.8.5</li>
<li>updated bulma to 0.7.4</li>
<li>updated font-awesome to 5.7.1</li>
<li>updated google analytics</li>
<li>now using beacon transport for ga</li>
<li>added screenshot</li>
<li>improved README.md</li>
<li>fixed maintainers message in footer</li>
</ul>
<p><strong>jekyll-cards-boilerplate</strong></p>
<ul>
<li>improved home page</li>
</ul>
<p><strong>jekyll-cards-boilerplate</strong></p>
<ul>
<li>add new film</li>
</ul>
<p><strong>jekyll-sponsor-boilerplate</strong><br />
<em>Counter bar improvements</em></p>
<ul>
<li>counter bar can be configured in campaign.yml</li>
<li>added section about counters in README</li>
<li>updated section about campaign includes in README</li>
<li>improved main.js</li>
</ul>burdenWound up giving a little love to all of the boilerplates.Launch notes 🎉2019-01-25T04:39:58-08:002019-01-25T04:39:58-08:00https://burden.cc/blog/updates/launch-notes<p>👋 Oh, hello again there stranger. Sure was a long time coming but I’m so glad you were able to make it to another launch party! How do you like the new digs?? Hit me up from the site footer until I get a contact form setup.</p>
<p>This time around I’ve made my site open source. Be sure to see <a href="https://github.com/burden/burdendotcc">Github</a> if you’re interested in checking out what’s under the hood.</p>
<h2 id="make-yourself-at-home">Make yourself at home</h2>
<p>This latest burden.cc ditches <a href="https://bourbon.io">Bourbon</a> in favor of <a href="https://bulma.io">Bulma</a> for style. The primary color is a classic deep cyan. When you throw that cyan into a color wheel you get a yellow that reminds me of a ripe banana, which is sort of a thing for me that means “health is wealth”– a reminder of rougher seas long ago. For a font I chose <a href="https://github.com/JulietaUla/Montserrat">Montserrat</a> because it has a wonderful range of weights built for making walls of text easy to look at and I’ve been really itching to work with it.</p>
<p>My intentions with this site in the past were always aimless, which wasn’t doing anyone a favor. Moving forward I’ll be trying my hand at generating <em>meaninful</em> content, beginning with a walkthrough blog series and the introduction of 4 Jekyll boilerplates, which can be found on the home page under the <a href="/#showcase">Showcase</a> section.</p>
<h2 id="walkthrough">Walkthrough</h2>
<p>In addition to a completely redesigned home page, I wanted to kick off the new blog with a walkthrough series that basically shows you how to create your very own website with Jekyll from scratch. Spoiler alert. When you get to the end of the series, you’ll be left with a functioning blog.</p>
<ul>
<li><a href="/blog/updates/welcome">Welcome to another burden.cc</a></li>
<li><a href="/blog/updates/stage">Continuous Integration, testing and staging</a></li>
<li><a href="/blog/updates/customize-pt1">Getting settled in (part 1)</a></li>
<li><a href="/blog/updates/customize-pt2">Getting settled in (part 2)</a></li>
<li><a href="/blog/updates/a-real-hullabaloo">Preparing for a real hullabaloo</a></li>
</ul>
<h2 id="future-site-updates">Future Site Updates</h2>
<p>Upcoming site updates will be accompanied by a summary of new futures and in some cases I may even include a little bit of a deep-dive. All site updates can be found in the “updates” category.</p>
<p>So there you have it. Please have a look around and enjoy your stay.</p>burden👋 Oh, hello again there stranger. Sure was a long time coming but I’m so glad you were able to make it to another launch party! How do you like the new digs?? Hit me up from the site footer until I get a contact form setup.Preparing for a real hullabaloo2018-09-24T01:18:04-07:002019-01-16T13:23:05-08:00https://burden.cc/blog/updates/a-real-hullabaloo<p>This last one’s about building out the pages for the blog, so that I can use the home page for something else.</p>
<p>In this edition, we’re gonna be adding a page for this blog to call home. Then we’ll build out the template for articles and add some navigation.</p>
<p>Before we get started, create a new branch and open another beer.</p>
<pre><code>$ git checkout -b blog
</code></pre>
<h2 id="dependencies">Dependencies</h2>
<p>First we need to add a library to our project to handle pagination. We’ll get into it later in this article, but we need to add one to produce redirects as well.</p>
<p>Edit the <code>Gemfile</code> then add <code>jekyll-paginate</code> and <code>jekyll-redirect-from</code> to the <code>:jekyll_plugins</code> block.</p>
<pre><code>group :jekyll_plugins do
...
gem "jekyll-paginate"
gem "jekyll-redirect-from"
end
</code></pre>
<p>Next you’ll need to make some additions to <code>_config.yml</code>. First add <code>jekyll-paginate</code> and <code>jekyll-redirect-from</code> to the <code>plugins:</code> block.</p>
<pre><code>plugins:
...
- jekyll-paginate
- jekyll-redirect-from
</code></pre>
<p>For contextual purposes, we want to keep everything in the address bar that’s blog related behind <code>/blog/</code>. To do that, add directives for pagination, and permalink.</p>
<pre><code>...
paginate: 4
paginate_path: /blog/:num/
permalink: /blog/:categories/:title
</code></pre>
<p>As you may have been able to deduce, we’ll end up with paginated pages at <code>/blog/2/</code> and articles at <code>/blog/category/article-title</code></p>
<p>With dependencies in place we can get started on our next tasks.</p>
<h2 id="blog-pages">Blog Pages</h2>
<p>In the spirit of displaying our collection of articles in a reasonable manner, the blog’s home page will be…</p>
<ul>
<li>located at <code>/blog/</code></li>
<li>paginated</li>
<li>with the newest article displayed first</li>
<li>4 articles per page</li>
<li>each article displayed within 1 column of a 2x2 square</li>
<li>bonus! a featured article at the top of page 1</li>
</ul>
<p>Sounds pretty straight forward, so let’s get started.</p>
<p>On the subject of listing articles, we’re going to build an article preview that can be included throughout the site. It’ll accept two arguments. A <code>post</code> object containing the post to preview, and a boolean called <code>box</code> to indicate whether or not you’d like the preview to include the box class.</p>
<p><code>_includes/article-preview.html</code></p>
<pre><code>
<article{% unless include.box == false %} class="box"{% endunless%}>
<h3 class="title"><a href="{{ include.post.url | relative_url }}">{{ include.post.title | escape }}</a></h3>
{% assign topic = post.categories.first %}
<p class="subtitle">{% if topic %}in {{ topic }} {% endif %}{{ include.post.date | date: "%b %-d, %Y" }}</p>
<div class="content">
{{ include.post.excerpt }}
</div>
<a href="{{ include.post.url }}" class="button is-primary is-outlined">Keep reading</a>
</article>
</code></pre>
<p>With that out of the way, let’s start working on our blog page. Create a <code>/blog/</code> directory, and add an <code>index.html</code> file.</p>
<pre><code>$ mkdir src/blog
</code></pre>
<p><code>src/blog/index.html</code></p>
<pre><code>
---
layout: page
---
{% if paginator.page == 1 %}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Featured
</h1>
{% assign featured = site.posts.last %}
{% include article-preview.html post=featured %}
</div>
</div>
</section>
{% endif %}
<section class="section section-blog-page">
<div class="container">
<h2 class="title">{% if paginator.page == 1 %}Latest{% else %}Page {{ paginator.page }}{% endif %}</h2>
<div class="columns is-multiline">
{%- for post in paginator.posts -%}
<div class="column is-half">
{% include article-preview.html post=post box=false %}
</div>
{%- endfor -%}
</div>
</div>
</section>
</code></pre>
<p>At this point we can implement pagination with the help of Bulma’s <a href="https://bulma.io/documentation/components/pagination/">pagination</a> component.</p>
<p><code>_includes/nav-pagination.html</code></p>
<pre><code>
{% if paginator.total_pages > 1 %}
<nav class="pagination is-right" role="navigation" aria-label="pagination">
<a {% if paginator.previous_page %}href="{{ paginator.previous_page_path }}"{% endif %} class="pagination-previous"{% unless paginator.previous_page %} disabled{% endunless %}>Previous</a>
<a {% if paginator.next_page %}href="{{ paginator.next_page_path }}"{% endif %} class="pagination-next"{% unless paginator.next_page %} disabled{% endunless %}>Next</a>
<ul class="pagination-list">
{% for page in (1..paginator.total_pages)%}
{% capture page-url %}{% if page == 1 %}{{ site.paginate_path | replace: ':num/', '' }}{% else %}{{ site.paginate_path | replace: ':num', page }}{% endif %}{% endcapture %}
<li><a href="{{ page-url | prepend: site.baseurl | prepend: site.url }}" class="pagination-link{% if page == paginator.page %} is-current{% endif %}">{{ page }}</a></li>
{% endfor %}
</ul>
</nav>
{% endif %}
</code></pre>
<p>To wrap things up for the blog page, we’ll add <code>nav-pagination.html</code> under the articles in <code>/src/blog/index.html</code>.</p>
<pre><code>
<hr>
{% include nav-pagination.html %}
</code></pre>
<h2 id="articles">Articles</h2>
<p>Display header</p>
<ul>
<li>Title of article as H1</li>
<li>Display article tags above Title</li>
<li>Display date beneath Title</li>
<li>Show article contents under Title</li>
</ul>
<pre><code>
<section class="section section-blog-post">
<article class="container">
<header class="header has-text-centered">
<div class="tags is-centered">
{% for tag in page.tags %}
<span class="tag">{{ tag | capitalize }}</span>
{% endfor %}
</div>
<h1 class="title">{{ page.title }}</h1>
<p class="subtitle">{{ page.date | date: "%b %d, %Y" }}</p>
</header>
<div class="content">
{{ content }}
</div>
</article>
</section>
</code></pre>
<h2 id="getting-around">Getting around</h2>
<p>After our visitor has finished reading, you must be able to feed that voracious appetite with moar delicious content. We’ll need…</p>
<ul>
<li>Links to the previous and next articles under the article</li>
<li>The next 5 most recent articles to the right of the article</li>
<li>Redirect category pages</li>
</ul>
<p>Ok, so let’s begin with the previous and next links. Jekyll is nice enough to provide us with <code>page.previous</code> and <code>page.next</code>. We’ll just need to be careful to check if we’re on the first or last post. In those instances we’ll just say “current page” and display the title as text.</p>
<p><code>/src/_includes/prev-next.html</code></p>
<pre><code>
<div class="columns is-mobile">
<div class="column is-6">
{% if page.previous %}
<h2>Previous article</h2>
<p><a href="{{ page.previous.url | prepend: site.baseurl | prepend: site.url }}" title="{{ page.previous.title }}" rel="prev">&laquo; {{page.previous.title}}</a></p>
{% else %}
<h2>Current article</h2>
{{page.title}}
{% endif %}
</div>
<div class="column is-6 has-text-right">
{% if page.next %}
<h2>Next article</h2>
<a href="{{ page.next.url | prepend: site.baseurl | prepend: site.url }}" title="{{ page.next.title }}" rel="next">{{page.next.title}} &raquo;</a>
{% else %}
<h2>Current article</h2>
{{page.title}}
{% endif %}
</div>
</div>
</code></pre>
<p>After saving, include it in <code>src/_layouts/post.html</code> under the article.</p>
<pre><code>
{% include prev-next.html %}
</code></pre>
<p>For our last edit to <code>src/_layouts/post.html</code> we’ll do a quick unordered list to show off the latest articles. Skip the current article.</p>
<pre><code>
<ul>
{% for article in site.posts limit: 5 %}
{% if article.title == page.title %}{% continue %}{% endif %}
<li><a href="{{ article.url }}">{{ article.title }}</a></li>
{% endfor %}
</ul>
</code></pre>
<p>Finally, if you’ll recall how we setup article urls, each article is behind a category page (ex: /blog/<em style="color: #ff3860">category</em>/article-title). If a lookie-loo were to visit <code>/blog/category/</code> they would be treated to a generic index page (or perhaps a 404). Building out category pages is certainly on our todo list, but it’s out of scope for this round. Instead, we’re going to use that <code>jekyll-redirect-from</code> plugin to redirect requests over to <code>/blog/</code></p>
<p>Open <code>/src/blog/index.html</code> and update it’s frontmatter.</p>
<pre><code>...
redirect_from:
- /blog/site-update/
</code></pre>
<p>For now, we only have one category to redirect. As you add articles with new categories, be sure to come back and update this block. On that note, if you want to create category pages at a later date, you’ll need to delete the relevant lines.</p>
<h2 id="final-thoughts">Final thoughts</h2>
<p>At last! We can wrap things up with a quick push to our remote repo for a PR.</p>
<pre><code>$ git add .
$ git commit -m "Upgrading blog"
$ git push origin blog
</code></pre>
<p>At this stage, we’re free to do what we need to do with the home page because we have an awesome new blog page. Not only that but we took the opportunity to give our articles a rudimentary sense of direction.</p>burdenThis last one’s about building out the pages for the blog, so that I can use the home page for something else.Getting settled in (part 2)2018-05-31T17:25:29-07:002019-01-23T03:21:52-08:00https://burden.cc/blog/updates/customize-pt2<p>In part 2, I’ll be putting everything together to build our new template.</p>
<p>First, we have to deal with the aftermath of part 1. htmlproofer was bitching to me about SSL connect errors so we need to update <code>.travis.yml</code> telling travis to rock openSSL instead.</p>
<pre><code>addons:
apt:
packages:
- libcurl4-openssl-dev
</code></pre>
<p>…and now back to our regularly scheduled programming…</p>
<h2 id="a-new-default">A new default</h2>
<p>Because we’re ditching minima, we’re going to need to build out some templates, and drop in our own style. Let’s get started!</p>
<p>Let’s begin by removing references to minima from <code>_config.yml</code> and <code>Gemfile</code>.</p>
<p>Update bundler.</p>
<pre><code>$ bundle install
</code></pre>
<p>Now we can create a stylesheet <code>src/_assets/css/style.scss</code>. Note the first <code>s</code> in <code>.scss</code> which affords us super powers.</p>
<pre><code>@import 'bulma/bulma';
</code></pre>
<p>We’ll be using some javascript soon enough <code>src/_assets/js/main.js</code></p>
<pre><code>//= require jquery/dist/jquery.min.js
</code></pre>
<p>Note: back in part 1, we added <code>src/_assets/vendor</code> to the asset configuration’s <code>source:</code> list, so in both instances, it knows where to look.</p>
<p>Finally we’ll create a default layout <code>src/_layouts/default.html</code> which will act as our base for all the pages.</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ site.title }}</title>
{% asset style.css %}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<h1 class="title is-1 has-text-centered">{{ site. title }}</h1>
{{ content }}
{% asset main.js %}
</body>
</html>
</code></pre>
<h2 id="moving-right-along">Moving right along</h2>
<p>Jekyll leads you on with “post”, “page”, and “home” layouts by default, which sorta makes sense, so I’m gonna go with it.</p>
<p>Let’s work on that, starting with <code>src/_layouts/home.html</code>.</p>
<pre><code>---
layout: default
---
<section class="section">
<div class="container">
<div class="content">
{{ content }}
{%- if site.posts.size > 0 -%}
{%- for post in site.posts -%}
<div class="box">
<p class="title is-3"><a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></p>
<p class="subtitle is-5">{{ post.date | date: "%b %-d, %Y" }}</p>
{{ post.excerpt }}
</div>
{%- endfor -%}
<p>subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}
</div>
</div>
</section>
</code></pre>
<p>This will be the home page which will just loop through all of the posts and call it a day.</p>
<p>Now let’s move on to <code>src/_layouts/post.html</code></p>
<pre><code>---
layout: default
---
<section class="section">
<div class="container">
<article class="content">
<h1 class="title is-3">{{ page.title }}</h1>
<p class="subtitle is-5">{{ page.date | date: "%b %-d, %Y" }}</p>
{{ content }}
</article>
</div>
</section>
</code></pre>
<p><code>src/_layouts/page.html</code> is basically the same, but instead of an article tag, we’re just using another div.</p>
<pre><code>---
layout: default
---
<section class="section">
<div class="container">
<div class="content">
{{ content }}
</div>
</div>
</section>
</code></pre>
<p>At last, to end this 2-parter, I’m finally gonna get personal with <code>_config.yml</code>.</p>
<pre><code>title: burden.cc
email: your-email@example.com
description: Sometimes weird; occasionally unfiltered-- almost certainly not untrue.
</code></pre>
<p>You’ll want to replace those values with your own. Let’s do what we do, and finally turn our attention to that blog.</p>
<pre><code>$ git add .
$ git commit -m "Adding customize post pt2"
$ git push origin ci
</code></pre>burdenIn part 2, I’ll be putting everything together to build our new template.Getting settled in (part 1)2018-05-31T14:50:28-07:002019-01-23T03:21:52-08:00https://burden.cc/blog/updates/customize-pt1<p>Up until I finish these “Getting settled in” posts, the site is using a boring old default minima theme. It’s actually really well rounded, but me being me, I can’t live with default.</p>
<p>As usual, we’ll start the post with a new branch.</p>
<pre><code>$ git checkout -b assets
</code></pre>
<h2 id="dependencies">Dependencies</h2>
<p>For part 1 of <em>this</em> part of <em>this</em> “Let’s start from scratch” series, we’re finally getting around to installing asset dependencies with the help of <a href="https://bower.io">Bower</a>.</p>
<p>No site is complete without <code>jquery</code>, and for prettys I am ditching <code>bourbon</code> in favor of <code>bulma</code>.</p>
<p>First we’ll create a <code>.bowerrc</code> file that disables usage statistics, and tells Bower where to save the dependencies.</p>
<pre><code>{
"analytics": false,
"directory": "src/_assets/vendor"
}
</code></pre>
<p>Then we’ll initialize the <code>bower.json</code> file. Get ready to answer some questions.</p>
<pre><code>$ bower init
</code></pre>
<p>Install <code>jquery</code> and <code>bulma</code> which creates the <code>src/_assets/vendor</code> directory. On a side note, we’ll be in that <code>src/_assets/</code> directory a <em>whole</em> bunch.</p>
<pre><code>$ bower install --save <package>
</code></pre>
<p>Let’s scope out <code>bower.json</code> real quick.</p>
<pre><code>{
"name": "burdendotcc",
"authors": [
"burden <burden@burden.cc>"
],
"description": "",
"main": "",
"license": "",
"homepage": "burden.cc",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"src/_assets/vendor",
"test",
"tests"
],
"dependencies": {
"jquery": "^3.2.1",
"bulma": "^0.7.1"
}
}
</code></pre>
<p>Update <code>.gitignore</code>.</p>
<pre><code>www
src/_assets/vendor
</code></pre>
<p>Add an <code>assets:</code> section to <code>_config.yml</code>.</p>
<pre><code>destination: www
assets:
sources:
- _assets/vendor
digest: true
compression: true
gzip: false
defaults:
js: { integrity: false } # true on JEKYLL_ENV=production
css: { integrity: false } # true on JEKYLL_ENV=production
img: { integrity: false } # true on JEKYLL_ENV=production
compress:
css: false
js: uglifier
</code></pre>
<p>Wrapping everything up, we need to make a quick addition to
<code>.travis.yml</code>, telling it to do the bower thing before building.</p>
<pre><code>before_script:
- npm install -g bower
- bower install
</code></pre>
<p>At this stage, we’re not doing anything with the dependencies yet. Next time around, we’ll do something about that. Let’s commit and move on.</p>
<pre><code>$ git add .
$ git commit -m "Adding customize post pt1"
</code></pre>burdenUp until I finish these “Getting settled in” posts, the site is using a boring old default minima theme. It’s actually really well rounded, but me being me, I can’t live with default.Continuous Integration, testing and staging2018-05-30T14:59:58-07:002019-01-23T03:21:52-08:00https://burden.cc/blog/updates/stage<p>This round, we’re going to be getting Travis-CI talking to Github so that we can</p>
<ol>
<li>Build the site on a vm</li>
<li>Run tests on vm</li>
<li>Upon success, save build to gh-pages branch</li>
<li>Push gh-pages branch to Github</li>
<li>Point DNS to Github Pages</li>
</ol>
<p>To get started, sign up for an account at Travis-CI by linking your Github account. Then link your <code>burdendotcc</code> repository.</p>
<h2 id="continuous-integration">Continuous Integration</h2>
<p>To begin most tasks, it’s usually good practice to branch from master.</p>
<pre><code>$ git checkout -b ci
</code></pre>
<p>Update the <code>Gemfile</code></p>
<pre><code>gem "minima", "~> 2.0"
gem "html-proofer"
</code></pre>
<p>As you can see, We’ve adopted html-proofer for a basic test as per Jekyll’s recommendation. This thing checks HTML best practices, then verifies that images and links work. That will come in handy when we need to verify that all of our assets were compiled and linked correctly.</p>
<p>Update bundler</p>
<pre><code>$ bundle install
</code></pre>
<p>Create a new file <code>.travis.yml</code></p>
<pre><code>language: ruby
rvm:
- 2.4.2
script:
- bundle exec jekyll build
- bundle exec htmlproofer ./www
env:
global:
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
sudo: false # route your build to the container-based infrastructure for a faster build
</code></pre>
<p>Note: When Travis builds our project, it saves gems in a <code>vendor</code> directory. Since we have our source files in <code>src</code>, there’s nothing to stress about.</p>
<h2 id="staging">Staging</h2>
<p>So with regards to a work flow, we’re going to utilize Github’s Pull Request feature to trigger a build, then deploy to Github Pages for a stage. Some day we’ll use a merge to the master branch to trigger a production deploy, but that won’t be covered in this walkthrough.</p>
<p>First we need to <a href="https://help.github.com/articles/setting-up-a-www-subdomain/">setup a CNAME</a> on the DNS server pointing to <code>burden.github.io</code>.</p>
<p>Next create a file named <code>CNAME</code> and save it in the <code>src</code> dir.</p>
<pre><code>stage.burden.cc
</code></pre>
<p>Finally we must update <code>_config.yml</code></p>
<pre><code>include:
- CNAME
</code></pre>
<p>Moving along, we need to generate a <a href="https://github.com/settings/tokens">Personal Access Token</a> from Github. The only scope needed is repo:public<em>repo. _Be sure to note down the token, because you’ll only be shown that shit once and Travis is going to hide it from you later</em></p>
<p>Over in settings on Travis, set an environment variable.</p>
<p>It is <em>critical</em> to make sure that the <code>Display value in build log</code> toggle is set to <code>Off</code>!</p>
<pre><code>GITHUB_API=<token>
</code></pre>
<p>While we’re in the settings let’s toggle off the <code>Build pushed branches</code> option, since that is not necessarily inline with our proposed workflow. No need to overwork Travis.</p>
<p>Finally we get to adding onto <code>.travis.yml</code></p>
<pre><code>after_success: |
if [ -n "$GITHUB_API" ]; then
cd "$TRAVIS_BUILD_DIR/www"
git init
git checkout --orphan gh-pages
git add .
git status
git -c user.name='travis' -c user.email='auto@travis-ci.org' commit -m stage
# Make sure to make the output quiet, or else the API token will leak!
# This works because the API key can replace your password.
git push -f -q https://burden:$GITHUB_API@github.com/burden/burdendotcc gh-pages &2>/dev/null
cd "$TRAVIS_BUILD_DIR"
fi
</code></pre>
<p>Let’s wrap things up with a quick push to our remote repo.</p>
<pre><code>$ git add .
$ git commit -m "Adding ci post"
$ git push origin ci
</code></pre>
<p>At this point, all we need to get the build party started is a pull request on Github.</p>
<p>After you create your pull request, you can then scope out the action on the dashboard at <a href="https://travis-ci.org">travis-ci</a>. If all goes well, you can then hit up your stage <a href="https://stage.burden.cc">stage.burden.cc</a></p>burdenThis round, we’re going to be getting Travis-CI talking to Github so that we canWelcome to another burden.cc2018-05-25T14:59:58-07:002019-01-23T03:21:52-08:00https://burden.cc/blog/updates/welcome<p>Welcome to another edition of “Let’s start from scratch”. Get a beer, because this time around there’s examples so you can follow along.</p>
<p>In this series of blog posts, we’ll build a Jekyll blog from scratch and use Github Pages as a stage. If you follow along, please be sure to switch out values for your own.</p>
<p>First we need to make sure Jekyll is installed…</p>
<pre><code>$ gem install jekyll
</code></pre>
<h2 id="moving-in">Moving in</h2>
<p>I’m starting with a clean git repository so I can take full advantage of Github. Scope it out: <a href="https://github.com/burden/burdendotcc">burden/burdendotcc</a>.</p>
<pre><code>$ jekyll new burdendotcc
$ cd burdendotcc
$ git init
$ git add .
$ git commit -m “Initial commit”
</code></pre>
<p>Next we’ll lock in Ruby version <code>2.5.3</code>.</p>
<pre><code>$ echo 2.5.3 > .ruby-version
</code></pre>
<p>Tell <code>Gemfile</code> about it by adding a line after <code>source</code>.</p>
<pre><code>source "https://rubygems.org"
ruby RUBY_VERSION
</code></pre>
<p>Now for some plugins…</p>
<ul>
<li><a href="https://github.com/envygeeks/jekyll-assets">jekyll-assets</a></li>
<li><a href="https://github.com/gettalong/kramdown">kramdown</a></li>
<li><a href="https://github.com/lautis/uglifier">uglifier</a></li>
</ul>
<p>Update the <code>:jekyll_plugins</code> block in <code>Gemfile</code>.</p>
<pre><code>group :jekyll_plugins do
gem "jekyll-feed", "~> 0.6"
gem "jekyll-assets"
gem "kramdown"
gem "uglifier", "~> 3.2"
end
</code></pre>
<p>Update the <code>plugins</code> block in <code>_config.yml</code>.</p>
<pre><code>plugins:
- jekyll-feed
- jekyll-assets
- kramdown
- uglifier
</code></pre>
<p>Setup Bundler and install the plugins.</p>
<pre><code>$ gem install bundler
$ bundle install
</code></pre>
<p>Now we can get that asset pipeline going. Configure <code>jekyll-assets</code> by adding some lines to <code>_config.yml</code></p>
<pre><code>assets:
sources:
- _assets/vendor # for dependencies
digest: true # cache busting
compression: true # remove whitespace from css and js
defaults:
js: { integrity: false } # true on JEKYLL_ENV=production
css: { integrity: false } # true on JEKYLL_ENV=production
img: { integrity: false } # true on JEKYLL_ENV=production
compress:
css: true
js: uglifier
</code></pre>
<p>Tell <code>.gitignore</code> not to commit the asset cache</p>
<pre><code>.jekyll-metadata
.jekyll-cache
</code></pre>
<p>When building the site, Jekyll makes you choose whether to A) maintain a black list of files to exclude or B) specify a source directory. I find it to be more organized, safer, and overall much easier to just specify a source directory.</p>
<p>I also like switching the destination directory from <code>_sites</code> to <code>www</code>.</p>
<p>Tell <code>.gitignore</code> not to commit the destination directory.</p>
<pre><code>.asset-cache
www
</code></pre>
<p>Add the following under <code># Build settings</code> in <code>_config.yml</code></p>
<pre><code># Build settings
source: src
destination: www
markdown: kramdown
</code></pre>
<p>Move all of the files.</p>
<pre><code>$ mkdir src
$ mv index.md about.md 404.html _posts src
</code></pre>
<p>Finally we fire up that welcome page.</p>
<pre><code>$ bundle exec jekyll serve
</code></pre>
<p>Save our progress and push the project files to the <code>master</code> branch on Github.</p>
<pre><code>$ git add .
$ git commit -m "Adding welcome post"
$ git remote add origin git@github.com:burden/burdendotcc.git
$ git push -u origin master
</code></pre>
<p>In the next post we’ll setup Github Pages to use as a stage.</p>burdenWelcome to another edition of “Let’s start from scratch”. Get a beer, because this time around there’s examples so you can follow along.