Romain’s site with blogdown, hugo, rbind

Romain François · 2017/05/29

I have used many platforms for blogging over the years (dotclear, wordpress, ghost) and none of them really made me happy about their workflow. I even lost some content that lived in some server I failed to renew despite the many warnings about upcoming deletion. I managed to pull back some content from the web archive and other places using various rvest foo.

I’ve now moved to the awesome combo hugo/blogdown/github/netlify. My source content lives in a github repo in the rbind organisation, I can write it as markdown or R markdown thanks to blogdown and the nice support for it in future versions of RStudio. The code is then converted to a full static website with hugo and continuously deployed on netlify. The blogdown book explains it in great detail.

I spent most of my time tweaking the theme and exhuming old content from various sources, but I’ve already written 5 new posts to get familiar with the workflow.

Having written these posts was a delight with this workflow. I will definitely want to blog again, and I can only encourage other members of the community to try blogdown. If you are anything like me, you’ll fall in love with it.

This is likely to change, but as of today, here are some of choices I’ve made for the theme. I’ve used the hugo-universal-theme as a basis but I’ve already started to tweak it for my use. It may not be obvious to understand how hugo works at first, but the documentation is well written and it is definitely worth it to learn about it.

The landing page contains:

  • a menu on top, driven by the config.toml file and the theme.
  • a picture and some words. I’ve tweaked the see_more.html partial template.

  • Recent posts, this is handled by the template. To use this, posts should have a banner in the front matter, e.g.

banner: "img/banners/go.png"

For the list of posts, I was not happy about what the theme offered, and so I’ve taken inspiration from @yihui and decided to use a minimalist list of posts, arranged by year.


I’ve also stolen some code from @yihui for the meta information of single posts, in particular for link to rss feed, to tweet the post and to edit the post on github.


I’ve added the possibilty to include gallery of images in posts


This is based on Gallery (which I have imported as a sub module), with this on the front matter.

gallery: "milanoR"

“milanoR” refers to a directory within “static/img/gallery” of the repo. The gallery variable is used by these templates:

  • layouts/_default/single.html loads the javascript library and looks for an element called links on the page. links will contain a set of links to images.
    {{ if }}
    <script src="/lib/gallery/js/blueimp-gallery.min.js"></script>

        container: '#blueimp-gallery-carousel',
        carousel: true

    {{ end }}
  • layouts/partials/gallery.html first defines a placeholder, and then loops through the content of the image directory to add links.
{{ if }}

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>

<div id="links">

  {{ $gallery := }}
  {{ $sourcePath := ( printf "static/img/gallery/%s" $gallery ) }}
  {{ $files := readDir $sourcePath }}
  {{ range $files }}
    <a href="/img/gallery/{{ $gallery }}/{{ .Name }}"></a>
  {{ end }}

{{ end }}

See you soon on