Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Jekyll & Octopress

Using Jekyll & Octopress

A quick tour through Jekyll & Octopress features and how to use it for Log(n)'s blog.

Esteban Torres

June 12, 2015

More Decks by Esteban Torres

Other Decks in Technology


  1. Agenda — Jekyll : What is it? How do you

    eat it? ! — Octopress: "#? Is it $? — This sounds hard to process… % — How to use it for our nefarious purposes & — Deploying the blog? ' — Why does every single item has an emoji❓
  2. History Let's start with a little bit of history because;

    who doesn't LOVE some history!???… hello… hello!??? is thing on !?? Jekyll Jekyll is a simple, blog-aware, static site generator.
  3. History Octopress ! " Octopress is is a «blogging framework».

    Basically it runs «above» Jekyll and automates most of the boring tasks that otherwise we would have to code by hand on the terminal ! and instead we just run a couple of rake commands.
  4. First… CLONE!! ! => ! git clone github.com/lognllc/lognllc.github.io lognSUPERAWESOMEBLOG pushd

    lognSUPERAWESOMEBLOG Notice that we are automatically on a branch named source; this is because the blog will be living in master; just like you read it. master will hold the actual blog and source will hold the content used to generate it. I know it might sound confusing but bear with me just a little longer.
  5. Second: Configure ! Now that we have the code downloaded

    AND we are inside the lognSUPERAWESOMEBLOG folder we can proceed to run a ONCE IN A LIFETIME (you'll never read a better offer) command: make This will make sure that you have bundler install and that you have all the required gems and the latest version of them (we don't want you to write using old
  6. Generating posts/pages Just be sure you are on the «source»

    branch and on the root of the folder and run the following command: rake new_post That's it; Octopress then will ask you for a name for the post and a new .markdown file will be added to the _posts folder for you to fill in with those juicy ideas later. !
  7. What's that weird syntax above my post?? Above every new

    post and page there's some predefined syntax called YAML Front Matter which pretty much explains the content to the renderer so that it can smartly generate the site accordingly. --- layout: post title: "Using Jekyll" date: 2015-06-11 17:10:31 -0600 comments: false categories: how-to blog post guide author: Esteban Torres socialHandle: <a href="http://twitter.com/esttorhe">@esttorhe</a> published: false ---
  8. What's that weird syntax above my post?? Custom tags {{

    author }} - {{ socialHandle }} The default value is a link to Log(n)'s website: socialHandle: <a href="http://logn.co">logn.co</a>
  9. Now What!? OK; you are done with the greates blog

    post in the history of blog posts; but… how does it look? Rest easy my friend; just head to your trusty friend the terminal and write the following: rake test Then head to your browser of choice and point it to: localhost:4000
  10. Deploying the blog? There's rsync, push, root_directory/ subdirectory, github_pages and

    probably a bunch I don't even know about. This blog comes «pre configured» to use push. And the heck does that even mean?
  11. Deploying the blog? Well… it means that with a simple

    command: rake generate rake deploy Note: it is REALLY important to run rake generate before attempting to do a deploy. More so if we just cloned the repository because this means that our public folder is non existent; and if it's not «freshly» cloned this could mean we would be pushing «stale» data.
  12. BUT Don't you hate it when there's a «but»!? And

    the worst… there's ALWAYS a «but». This blog will work as a blend between Gitflow and Pull Requests. This means that our master branch will be the same as in Gitflow, the latest stable version. Our development branch will source.
  13. Why? Well; we would like to have curated content and

    also do an editor job and «pre check» that there are no typos, grammar or syntax issues with the writing before hitting pubic ! to deliver the best content we can make to the rest of the world.
  14. Finish the flow Once the PR get's merged back to

    «source» whoever approves the merge will be in charge of running the generate and deploy tasks and check that everything went as smoothly as possible.