Testing blogdown + Hugo


The basic structure of hugo project folder is:

content/generate content here (blog posts, papers, …)
public/ … do not touch, gets generated automatically, upload this to web
static/ … other content (images, other sources)
themes/ … do not touch once finished
config.yaml … well, this is config

hugo-finite theme

Changing templates

Hugo builds static webpages using modular system of templates called partials. To alter and tweak the theme I have changed some of the theme partials, e.g.:

  • aside note for posts, defined in themes/hugo-finite/layouts/partials/post-aside.html
  • “footer” part of main page (place with portrait and personal info) in themes/hugo-finite/layouts/partials/whatisthis.html
  • To alter buttons/links below each paper alter url_* yaml parameter in paper *.md and themes/hugo-finite/layouts/partials/pub-links.html e.g. I added {{ with $.Params.url_doi }}<a class="button pub-link hollow" href="{{ . | absURL }}">doi</a>{{ end }} line into pub-links.html.

Changing colors

To change colors of the theme the color hex codes need to be changed in *.css files. As it is difficult to find them all manually I used bash find command. However being lazy to launch terminal and find were the correct directory is I run the command directly from R project.

So to replace all instances of a string (hex color code) recursively in all files in a directory I run:

## change #101730 to #FF4500 in all files in themes/hugo-finite-kf with bash find:
# find themes/hugo-finite-kf/ -type f -exec sed -i 's/#101730/#FF4500/g' {} \;
# \ needs to be escaped in system() so:
system("find themes/hugo-finite-kf/ -type f -exec sed -i 's/#101730/#FF4500/g' {} \\;")

These are all the changed colors:

Changing CSS style sheets

There is a multitude of css styles definitions spread over several *.css files and it is difficult to find where are which styles defined. For example buttons and their hovers are in foundation.css, but most things are (probably) in finite.css. I have included karel.css (inspired by Rob’s robjhyndman.css) in theme static/css folder. It gets loaded in /layouts/_default/baseof.html after finite.css so its styles overide the ones in finite.css. This gives me a chance to tweak things without altering the original finite.css.

Fixing ugly post summaries

The short version of posts from Rmarkdown contains raw html. (Even on Marcus site :-) ). I have tried to include <!–more–> in the text, but that did not help.

So based on some advices ( 1, 2, 3 ) I have changed the hugo-finite/layouts/partials/post-summary.html and now it is:

<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ partial "post-metadata" . }}

{{ if .Truncated }}
    {{ if .Description }}
        {{ .Description }}
   {{ else }}
    {{ .Content | markdownify | truncate 350 }}     
   {{ end }}

<p class="text-right"><a href="{{ .RelPermalink }}">Read More…</a></p>
{{ else }}
    {{ .Content | markdownify }}
{{ end }}

Now if the post have description field in its yaml front matter, than just that description forms the summary of the post, otherwise first 350 characters of markdownified content do.


  • add draft: TRUE to YAML front matter to make it just draft.

Adding discussions with Disqus

To add the comments option below each blog posts I am using Disqus.

First I have signed up and created new site on Disqus. The name of the site (bioinformin) is also its shortname. Then I added Rob’s disqus.html template into layouts (/layouts/partials/disqus.html). Then I modified /layouts/post/single.html adding <span style='font-family: Carlito'> {{ partial "disqus.html" . }} </span> to where I want the comments to appear on the page. And finaly I added the Disqus shortname into config.yaml as DisqusShortname: "bioinformin" parameter.


I will not use Netlify (suggested by Yuhui from blogdown) as it is better for use with their domains or self-hosted domains. I am using webhosting service with ftp as a means to uplod files. However I am still wondering how to upload files automatically via ftp.

Perhaps something along the lines of getting only new files:

ff <- list.files("public/post", full.names = TRUE, recursive = TRUE)
last_commit <- as.POSIXct("2017-06-15")
ff_new <- ff[difftime(file.info(ff)$mtime, last_commit) > 0] # files newer than last commit

And then ftp?

ftpUpload("Localfile.html", "ftp://User:Password@FTPServer/Destination.html")

## or system()
# something like:
# scp -rp sourceDirName username@server:destDirName

TODO: Use Bitbucket pipelines. See e.g. https://www.youtube.com/watch?v=8HZhHtZebdw
and https://stackoverflow.com/questions/36779620/changes-on-ftp-to-bitbucket-as-a-commit

Pushing repo to bioinformin.net over ftp

image: samueldebruyn/debian-git pipelines: default: - step: script: - apt-get update - apt-get -qq install git-ftp - git ftp init –user $FTP_USERNAME –passwd $FTP_PASSWORD ftp://ftp.bioinformin.net/www/karel/

Also need to set the environment variables FTP_USERNAME and FTP_PASSWORD in settings -> environment variables.

I will have to add Bitbucket IP adress to onebit.cz IP whitelist. Administration –> Services –> FTP –> Allowed IP addresses/Pool.

To get Bitbucket IP I run curl -s http://whatismyip.akamai.com/ as part of bitbucket-pipelines.yml

Bitbucket IPs

curl -T my-local-file.txt ftp://ftp.example.com –user user:secret

wput public/ ftp://jack:salty@ftp.website.com/www/mylogs/

  • apt-get -qq install ncftp
  • ncftpput -R -v -u $FTP_USERNAME -p $FTP_PASSWORD ftp.bioinformin.net /www/karel /public

  • apt-get -qq install lftp
  • lftp -u \(FTP_USERNAME,\)FTP_PASSWORD -e “mirror –only-newer –verbose –target-directory=/www/karel public /www/karel” ftp.bioinformin.net


Blogdown has the ingenious RStudio addins. To enhance their help it is advantegous to have specific global R options set. This would be normaly done in an .Rprofile. However as I do not want it in my main .Rprofile and I can not use two .Rprofiles I need to set them manually, e.g.:

options(servr.daemon = TRUE, blogdown.author = "Karel Fišer", blogdown.rmd = TRUE)

Any better way to do that?

comments powered by Disqus