Testing blogdown + Hugo

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.

Draft

• 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.

Deployment

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
ff_new

And then ftp?

library(RCurl)
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

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