<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://cameron.ci/feed.xml" rel="self" type="application/atom+xml" /><link href="https://cameron.ci/" rel="alternate" type="text/html" /><updated>2025-09-30T12:48:28+00:00</updated><id>https://cameron.ci/feed.xml</id><title type="html">Cameron</title><subtitle>Site Reliability Engineer</subtitle><entry><title type="html">Rust: How to build a Docker image with private Cargo dependencies</title><link href="https://cameron.ci/rust-docker-cargo-pt1/" rel="alternate" type="text/html" title="Rust: How to build a Docker image with private Cargo dependencies" /><published>2019-05-01T22:00:00+00:00</published><updated>2019-05-01T22:00:00+00:00</updated><id>https://cameron.ci/rust-docker-cargo-pt1</id><content type="html" xml:base="https://cameron.ci/rust-docker-cargo-pt1/"><![CDATA[<p><a href="https://www.rust-lang.org/">Rust</a> is growing in popularity, having earned the most loved language in <a href="https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted">Stack Overflow’s 2019 Developer Survey</a> for the fourth year in a row. While <a href="https://doc.rust-lang.org/cargo/">Cargo</a> and Rust’s tooling are great, there’s still a few tricks in getting them to work in a production setting</p>

<p>In this article, I’m going to show you how to fetch private Cargo dependencies and source them when building a Docker image. This solves a key issue with Docker of not copying over SSH keys when building an image</p>

<p>The code for this blog post is at <a href="https://github.com/c-ameron/rocket-add">https://github.com/c-ameron/rocket-add</a></p>

<h2 id="example-application-rocket-add">Example Application: Rocket-Add</h2>

<p>I’ve developed an example API called <a href="https://github.com/c-ameron/rocket-add">Rocket-Add</a> which built on top of a very cool web framework in Rust called <a href="https://github.com/SergioBenitez/Rocket/">Rocket</a></p>

<p>This application extends the ‘Hello World’ example with a new api call <code class="language-plaintext highlighter-rouge">add/&lt;num1&gt;/&lt;num2&gt;</code> which adds two numbers and outputs the result</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>curl localhost:8000/add/5/10
The <span class="nb">sum </span>of 5 and 10 is 15
</code></pre></div></div>

<p>The API endpoint is written as a function</p>
<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">#[get(</span><span class="s">"/add/&lt;num1&gt;/&lt;num2&gt;"</span><span class="nd">)]</span>
<span class="k">fn</span> <span class="nf">add</span><span class="p">(</span><span class="n">num1</span><span class="p">:</span> <span class="nb">i32</span><span class="p">,</span> <span class="n">num2</span><span class="p">:</span> <span class="nb">i32</span><span class="p">)</span> <span class="k">-&gt;</span> <span class="nb">String</span> <span class="p">{</span>
    <span class="k">let</span> <span class="n">s</span><span class="p">:</span> <span class="nb">String</span> <span class="o">=</span> <span class="nn">math_utils</span><span class="p">::</span><span class="nf">add</span><span class="p">(</span><span class="n">num1</span><span class="p">,</span> <span class="n">num2</span><span class="p">)</span><span class="nf">.to_string</span><span class="p">();</span>
    <span class="nd">format!</span><span class="p">(</span><span class="s">"The sum of {} and {} is {}"</span><span class="p">,</span> <span class="n">num1</span><span class="p">,</span> <span class="n">num2</span><span class="p">,</span> <span class="n">s</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></div></div>

<p>Looking closely, you can see the addition calls an external library <code class="language-plaintext highlighter-rouge">math_utils</code> with the call <code class="language-plaintext highlighter-rouge">math_utils::add(num1, num2)</code></p>

<p>The <code class="language-plaintext highlighter-rouge">math_utils</code> crate is from a private Github repository <code class="language-plaintext highlighter-rouge">https://github.com/c-ameron/rust-math-utils.git</code></p>

<p>For reference, this is the code for the <code class="language-plaintext highlighter-rouge">add</code> function in <code class="language-plaintext highlighter-rouge">math_utils</code> being used</p>
<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">pub</span> <span class="k">fn</span> <span class="nf">add</span><span class="p">(</span><span class="n">num1</span><span class="p">:</span> <span class="nb">i32</span><span class="p">,</span> <span class="n">num2</span><span class="p">:</span> <span class="nb">i32</span><span class="p">)</span> <span class="k">-&gt;</span> <span class="nb">i32</span> <span class="p">{</span>
    <span class="n">num1</span> <span class="o">+</span> <span class="n">num2</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="fetching-crates-in-private-repositories">Fetching crates in private repositories</h2>

<p>Before we go any further, we’re going to take a page from Ruby Bundler’s book and create a local <code class="language-plaintext highlighter-rouge">.cargo</code> folder in the project root. This will provide a project independent place to store our crates and Cargo config</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone git@github.com:c-ameron/rocket-add.git
<span class="nb">cd </span>rocket-add
<span class="nb">mkdir</span> <span class="nt">-p</span> <span class="si">$(</span>git rev-parse <span class="nt">--show-toplevel</span><span class="si">)</span>/.cargo
<span class="nb">export </span><span class="nv">CARGO_HOME</span><span class="o">=</span><span class="si">$(</span>git rev-parse <span class="nt">--show-toplevel</span><span class="si">)</span>/.cargo
</code></pre></div></div>

<p>Currently Cargo by default won’t <a href="https://github.com/rust-lang/cargo/issues/1851">fetch from private repositories</a></p>

<p>To get around this, create a <code class="language-plaintext highlighter-rouge">.cargo/config</code> file which tells Cargo to use the <a href="https://doc.rust-lang.org/nightly/cargo/reference/config.html#configuration-keys">git cli for fetching</a></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat .cargo/config
[net]
git-fetch-with-cli = true
</code></pre></div></div>

<p>Then in our <code class="language-plaintext highlighter-rouge">Cargo.toml</code> we tell Cargo to fetch our crate with SSH</p>

<div class="language-toml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">math_utils</span> <span class="o">=</span> <span class="p">{</span> <span class="py">version</span> <span class="p">=</span> <span class="s">"0.1.0"</span><span class="p">,</span> <span class="py">git</span> <span class="p">=</span> <span class="s">"ssh://git@github.com/c-ameron/rust-math-utils.git"</span><span class="p">}</span>
</code></pre></div></div>

<p>Now we can run <code class="language-plaintext highlighter-rouge">cargo fetch</code> and it will download all the crates to the local <code class="language-plaintext highlighter-rouge">.cargo</code> folder</p>

<h2 id="building-a-rust-docker-image-with-private-dependencies">Building a Rust Docker image with private dependencies</h2>

<p>A key problem when building a Docker image is downloading private dependencies without mounting an SSH key</p>

<p>To solve this problem, we can copy over our pre-fetched <code class="language-plaintext highlighter-rouge">.cargo</code> folder to the Docker image and build from there. Cargo won’t need to use any SSH keys to fetch from private repositories</p>

<p>Note that we’re having to set the <code class="language-plaintext highlighter-rouge">WORKDIR</code> and <code class="language-plaintext highlighter-rouge">CARGO_HOME</code> inside the Docker image for Cargo to resolve its crates correctly</p>

<div class="language-Dockerfile highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">FROM</span><span class="w"> </span><span class="s">rustlang/rust:nightly</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span>
<span class="k">WORKDIR</span><span class="s"> /workdir                       </span>
<span class="k">ENV</span><span class="s"> CARGO_HOME=/workdir/.cargo                       </span>
<span class="k">COPY</span><span class="s"> ./Cargo.toml ./Cargo.lock ./                       </span>
<span class="k">COPY</span><span class="s"> ./.cargo ./.cargo</span>
<span class="k">COPY</span><span class="s"> ./src ./src</span>
<span class="k">RUN </span>cargo +nightly build <span class="nt">--release</span>
</code></pre></div></div>

<p>We can also take advantage of <a href="https://docs.docker.com/develop/develop-images/multistage-build/">multi-stage builds</a> in Docker, and create a smaller binary image</p>

<div class="language-Dockerfile highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">FROM</span><span class="w"> </span><span class="s">rustlang/rust:nightly</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span>
<span class="k">WORKDIR</span><span class="s"> /workdir                       </span>
<span class="k">ENV</span><span class="s"> CARGO_HOME=/workdir/.cargo                       </span>
<span class="k">COPY</span><span class="s"> ./Cargo.toml ./Cargo.lock ./                       </span>
<span class="k">COPY</span><span class="s"> ./.cargo ./.cargo</span>
<span class="k">COPY</span><span class="s"> ./src ./src</span>
<span class="k">RUN </span>cargo +nightly build <span class="nt">--release</span>

<span class="k">FROM</span><span class="s"> debian:stretch-slim</span>
<span class="k">EXPOSE</span><span class="s"> 8000</span>
<span class="k">COPY</span><span class="s"> --from=0 /workdir/target/release/rocket-add /usr/local/bin</span>
<span class="k">ENTRYPOINT</span><span class="s"> ["/usr/local/bin/rocket-add"]</span>
</code></pre></div></div>

<p>This approach saves time downloading the same crates and we also don’t need to pass any SSH keys to Docker. However, if there’s any change to our dependencies it will require a rebuild. For a larger application with a lot of changing dependencies, this often means rebuilding from scratch several times a day</p>

<h2 id="notes">Notes</h2>

<ul>
  <li>Docker has implemented experimental support for SSH forwarding for building images in <a href="https://docs.docker.com/develop/develop-images/build_enhancements/#using-ssh-to-access-private-data-in-builds">18.09</a>, potentially negating the need for copying <code class="language-plaintext highlighter-rouge">.cargo</code> in the future</li>
  <li>If you want to fetch or build an image completely offline with Cargo, you can use the <code class="language-plaintext highlighter-rouge">-Z offline</code> flag. See <a href="https://doc.rust-lang.org/cargo/reference/unstable.html#offline-mode">https://doc.rust-lang.org/cargo/reference/unstable.html#offline-mode</a></li>
  <li>With recently released Rust 1.34, Cargo now has support for <a href="https://blog.rust-lang.org/2019/04/11/Rust-1.34.0.html#alternative-cargo-registries">alternative registries</a> other than <code class="language-plaintext highlighter-rouge">crates.io</code></li>
</ul>]]></content><author><name>cameron</name></author><category term="blog" /><category term="rust" /><category term="docker" /><category term="git" /><category term="cargo" /><category term="github" /><summary type="html"><![CDATA[Rust is growing in popularity, having earned the most loved language in Stack Overflow’s 2019 Developer Survey for the fourth year in a row. While Cargo and Rust’s tooling are great, there’s still a few tricks in getting them to work in a production setting]]></summary></entry><entry><title type="html">Markdown Extra Components</title><link href="https://cameron.ci/markdown-extra-components/" rel="alternate" type="text/html" title="Markdown Extra Components" /><published>2016-02-24T22:48:00+00:00</published><updated>2016-02-24T22:48:00+00:00</updated><id>https://cameron.ci/markdown-extra-components</id><content type="html" xml:base="https://cameron.ci/markdown-extra-components/"><![CDATA[<h2 id="summary">Summary:</h2>

<p>You can pick as item to see how to apply in markdown.</p>

<h4 id="especial-elements">Especial Elements</h4>
<ul>
  <li><a href="#evidence">Evidence</a></li>
  <li><a href="#side-by-side">Side-by-Side</a></li>
  <li><a href="#star">Star</a></li>
  <li><a href="#especial-breaker">Especial Breaker</a></li>
  <li><a href="#spoiler">Spoiler</a></li>
</ul>

<h4 id="external-elements">External Elements</h4>
<ul>
  <li><a href="#gist">Gist</a></li>
  <li><a href="#codepen">Codepen</a></li>
  <li><a href="#slideshare">Slideshare</a></li>
  <li><a href="#videos">Videos</a></li>
</ul>

<hr />

<h2 id="evidence">Evidence</h2>

<p>You can try the evidence!</p>

<p><span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"evidence"</span><span class="nt">&gt;</span>Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.<span class="nt">&lt;/span&gt;</span></code></pre></figure>

<hr />

<h2 id="side-by-side">Side-by-side</h2>

<p>Like the <a href="https://medium.com/">Medium</a> component.</p>

<p><strong>Image</strong> on the left and <strong>Text</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://cameron.ci/https://avatars.githubusercontent.com/u/6181947"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="https://cameron.ci/https://avatars.githubusercontent.com/u/6181947" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<p><strong>Text</strong> on the left and <strong>Image</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://cameron.ci/https://avatars.githubusercontent.com/u/6181947"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="https://cameron.ci/https://avatars.githubusercontent.com/u/6181947" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

<hr />

<h2 id="star">Star</h2>

<p>You can give evidence to a post. Just add the tag to the markdown file.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">star: true</code></pre></figure>

<hr />

<h2 id="especial-breaker">Especial Breaker</h2>

<p>You can add a especial <em>hr</em> to your text.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"breaker"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="breaker"></div>

<hr />

<h2 id="spoiler">Spoiler</h2>

<p>You can add an especial hidden content that appears on hover.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spoiler"</span><span class="nt">&gt;&lt;p&gt;</span>your content<span class="nt">&lt;/p&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

<hr />

<h2 id="gist">Gist</h2>

<p>You can add Gists from github.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }</code></pre></figure>

<script src="https://gist.github.com/sergiokopplin/91ff4220480727b47224245ee2e9c291.js"> </script>

<hr />

<h2 id="codepen">Codepen</h2>

<p>You can add Pens from Codepen.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">data-height=</span><span class="s">"268"</span> <span class="na">data-theme-id=</span><span class="s">"0"</span> <span class="na">data-slug-hash=</span><span class="s">"gfdDu"</span> <span class="na">data-default-tab=</span><span class="s">"result"</span> <span class="na">data-user=</span><span class="s">"chriscoyier"</span> <span class="na">class=</span><span class="s">'codepen'</span><span class="nt">&gt;</span>
    See the Pen <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier/pen/gfdDu/'</span><span class="nt">&gt;</span>Crappy Recreation of the Book Cover of *The Flame Alphabet*<span class="nt">&lt;/a&gt;</span> by Chris Coyier (<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier'</span><span class="nt">&gt;</span>@chriscoyier<span class="nt">&lt;/a&gt;</span>) on <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io'</span><span class="nt">&gt;</span>CodePen<span class="nt">&lt;/a&gt;</span>.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//assets.codepen.io/assets/embed/ei.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class="codepen">See the Pen <a href="https://codepen.io/chriscoyier/pen/gfdDu/">Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>

<hr />

<h2 id="slideshare">Slideshare</h2>

<p>Add your presentations here!</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l"</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">marginwidth=</span><span class="s">"0"</span> <span class="na">marginheight=</span><span class="s">"0"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">style=</span><span class="s">"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;</span> <span class="nt">&lt;/iframe&gt;</span></code></pre></figure>

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>

<hr />

<h2 id="videos">Videos</h2>

<p>Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!</p>

<p><strong>Example</strong></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/r7XhWUDj-Ts"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;&lt;/iframe&gt;</span></code></pre></figure>

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen=""></iframe>]]></content><author><name>jamesfoster</name></author><category term="blog" /><category term="markdown" /><category term="components" /><category term="extra" /><summary type="html"><![CDATA[Markdown summary with different options]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://cameron.ci/assets/images/markdown.jpg" /><media:content medium="image" url="https://cameron.ci/assets/images/markdown.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Markdown Common Elements</title><link href="https://cameron.ci/markdown-common-elements/" rel="alternate" type="text/html" title="Markdown Common Elements" /><published>2016-02-24T22:44:00+00:00</published><updated>2016-02-24T22:44:00+00:00</updated><id>https://cameron.ci/markdown-common-elements</id><content type="html" xml:base="https://cameron.ci/markdown-common-elements/"><![CDATA[<h2 id="basic-formatting">Basic formatting</h2>

<p>This note <strong>demonstrates</strong> some of what <a href="https://daringfireball.net/projects/markdown/">Markdown</a> is <em>capable of doing</em>.</p>

<p>And that’s how to do it.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html">This note **demonstrates** some of what [Markdown][some/link] is *capable of doing*.</code></pre></figure>

<hr />

<h2 id="headings">Headings</h2>

<p>There are six levels of headings. They correspond with the six levels of HTML headings. You’ve probably noticed them already in the page. Each level down uses one more hash character. But we are using just 4 of them.</p>

<h1 id="headings-can-be-small">Headings can be small</h1>

<h2 id="headings-can-be-small-1">Headings can be small</h2>

<h3 id="headings-can-be-small-2">Headings can be small</h3>

<h4 id="headings-can-be-small-3">Headings can be small</h4>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw"># Heading
## Heading
### Heading
#### Heading</code></pre></figure>

<hr />

<h2 id="lists">Lists</h2>

<h3 id="ordered-list">Ordered list</h3>

<ol>
  <li>Item 1</li>
  <li>A second item</li>
  <li>Number 3</li>
</ol>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">1. Item 1
2. A second item
3. Number 3</code></pre></figure>

<h3 id="unordered-list">Unordered list</h3>

<ul>
  <li>An item</li>
  <li>Another item</li>
  <li>Yet another item</li>
  <li>And there’s more…</li>
</ul>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">* An item
* Another item
* Yet another item
* And there's more...</code></pre></figure>

<hr />

<h2 id="paragraph-modifiers">Paragraph modifiers</h2>

<h3 id="quote">Quote</h3>

<blockquote>
  <p>Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.</p>
</blockquote>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">&gt; Here is a quote. What this is should be self explanatory.</code></pre></figure>

<hr />

<h2 id="urls">URLs</h2>

<p>URLs can be made in a handful of ways:</p>

<ul>
  <li>A named link to <a href="https://daringfireball.net/projects/markdown/basics">Mark It Down</a>.</li>
  <li>Another named link to <a href="https://google.com/">Mark It Down</a></li>
  <li>Sometimes you just want a URL like <a href="https://google.com/">https://google.com/</a>.</li>
</ul>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">* A named link to [MarkItDown][3].
* Another named link to [MarkItDown](https://google.com/)
* Sometimes you just want a URL like &lt;https://google.com/&gt;.</code></pre></figure>

<hr />

<h2 id="horizontal-rule">Horizontal rule</h2>

<p>A horizontal rule is a line that goes across the middle of the page.
It’s sometimes handy for breaking things up.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">---</code></pre></figure>

<hr />

<h2 id="images">Images</h2>

<p>Markdown can also contain images. I’ll need to add something here sometime.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]</code></pre></figure>

<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" /></p>

<p><em>Figure Caption</em>?</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]
&lt;figcaption class="caption"&gt;Photo by John Doe&lt;/figcaption&gt;</code></pre></figure>

<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" /></p>
<figcaption class="caption">Photo by John Doe</figcaption>

<p><em>Bigger Images</em>?</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]{: class="bigger-image" }</code></pre></figure>

<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" class="bigger-image" /></p>

<hr />

<h2 id="code">Code</h2>

<p>A HTML Example:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;title&gt;</span>Document<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Just a test<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></figure>

<p>A CSS Example:</p>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">pre</span> <span class="p">{</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">.8em</span><span class="p">;</span>
    <span class="nl">white-space</span><span class="p">:</span> <span class="n">pre</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">pre</span><span class="o">,</span> <span class="nt">table</span> <span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">code</span><span class="o">,</span> <span class="nt">pre</span><span class="o">,</span> <span class="nt">tt</span> <span class="p">{</span>
    <span class="nl">font-family</span><span class="p">:</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="n">Inconsolata</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">.05</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

<p>A JS Example:</p>

<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Sticky Header</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mi">900</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">body</span><span class="dl">"</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">show-menu</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#hamburguer__open</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="dl">'</span><span class="s1">fast</span><span class="dl">'</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">body</span><span class="dl">"</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">show-menu</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#hamburguer__open</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="dl">'</span><span class="s1">fast</span><span class="dl">'</span><span class="p">);</span>
    <span class="p">}</span>

<span class="p">});</span></code></pre></figure>]]></content><author><name>johndoe</name></author><category term="blog" /><category term="markdown" /><category term="elements" /><summary type="html"><![CDATA[Markdown summary with different options]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://cameron.ci/assets/images/markdown.jpg" /><media:content medium="image" url="https://cameron.ci/assets/images/markdown.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">:ramen: Indigo, minimalist jekyll theme</title><link href="https://cameron.ci/indigo-jekyll-theme/" rel="alternate" type="text/html" title=":ramen: Indigo, minimalist jekyll theme" /><published>2016-01-23T22:10:00+00:00</published><updated>2016-01-23T22:10:00+00:00</updated><id>https://cameron.ci/indigo-jekyll-theme</id><content type="html" xml:base="https://cameron.ci/indigo-jekyll-theme/"><![CDATA[<p><img src="https://raw.githubusercontent.com/sergiokopplin/indigo/gh-pages/assets/screen-shot.png" alt="Screenshot" /></p>

<p>Example of project - Indigo Minimalist Jekyll Template - <a href="https://sergiokopplin.github.io/indigo/">Demo</a>. This is a simple and minimalist template for Jekyll for those who likes to eat noodles.</p>

<hr />

<p>What has inside?</p>

<ul>
  <li>Gulp</li>
  <li>BrowserSync</li>
  <li>Stylus</li>
  <li>SVG</li>
  <li>No JS</li>
  <li><a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fsergiokopplin.github.io%2Findigo%2F">98/100</a></li>
</ul>

<hr />

<p><a href="https://sergiokopplin.github.io/indigo/">Check it out</a> here.
If you need some help, just <a href="https://github.com/sergiokopplin/indigo/issues">tell me</a>.</p>]]></content><author><name>johndoe</name></author><category term="project" /><category term="jekyll" /><summary type="html"><![CDATA[This is a simple and minimalist template for Jekyll for those who likes to eat noodles.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://sergiokopplin.github.io/indigo/assets/images/jekyll-logo-light-solid.png" /><media:content medium="image" url="https://sergiokopplin.github.io/indigo/assets/images/jekyll-logo-light-solid.png" xmlns:media="http://search.yahoo.com/mrss/" /></entry></feed>