How I built this website

Mon, 29 Jun 2020 00:00:00 +0000

Why this post

As a first post, it seemed appropriate to document the process of building this website and regroup resources for future use and help some other users. I entertained the idea of a personal website since I started my graduate studies in bioinformatics to showcase my work, but also build a platform that will extend outside the frame of my thesis. Using RMarkdown as my main work document, the package blogdown is the perfect fit (almost).

Resources I used

Videos

This video (and others in this series) shows how to get your site running on netlify for free!
This video goes trough the customization options of the academic theme.

Web resources

blogdown R book details most steps to get you going.
Academic details how to customize this Hugo theme within the parameters they have made easy to modify.

There are many themes available, from complex to simple on Hugo site. The current theme is Academic, a complex theme. It conveniently has many templates and functions that allow referencing publications, projects or posts and sharing them. The downside of it’s complexity is that customizing it is difficult. One feature I tryed (and failed) to change is allowing a TOC to be displayed with posts rendered from .Rmd or .RMarkdown files.

I found a solution for .md files here. So for now, I simply set toc: true if the file is .md and toc: false if it is a .Rmd since the <root dir>/layouts/_default/single.htm has to be the same for both files.

{{- define "main" -}}
{{ if .Params.toc }}
<div class="container-fluid docs">
    <div class="row flex-xl-nowrap">
      <div class="d-none d-xl-block col-xl-2 docs-toc">
        <ul class="nav toc-top">
          <li><a href="#" id="back_to_top" class="docs-toc-title">{{ i18n "on_this_page" }}</a></li>
        </ul>
        {{ .TableOfContents }}
        {{ partial "docs_toc_foot" . }}
      </div>
      <main class="col-12 col-md-0 col-xl-10 py-md-3 pl-md-5 docs-content" role="main">
{{ end }}
        <article class="article">
            {{ partial "page_header" . }}
            <div class="article-container">
              <div class="article-style">
                {{ .Content }}
              </div>
              {{ partial "page_footer" . }}
            </div>
        </article>
  {{ if .Params.toc }}
      </main>
    </div>
  </div>
  {{ end }}
{{- end -}}

The few issues I had (that may save you time)

Change the URL in <root dir>/config.toml for the site after netlify is running to have sharable posts working.
Create new posts, courses or add publications with the addin button of Rstudio.
If you have a lot of changes (new files) to commit, git may crash when you try to stage them in Rstudio. I use the Tools>shell… git add . then commit either from Rstudio or from the shell and it should work. If git crashed, you may have to go delete the .git/index.lock by command line (if you are using windows the directory won’t be visible) cd <root dir>/.git/ then rm index.lock.
If you have accents in you path (even before your root dir where the website project is located), git won’t work properly and you may end up with a blank git tab in Rstudio.

blogdown | F. Leblanc

How I built this website

Why this post

Resources I used

The few issues I had (that may save you time)