6. Einführung in Blogdown

Vorwort zu working directory, Daten und Packages

Die Daten für dieses Tutorial werden über Github zur Verfügung gestellt. Wenn Sie den Code mit eigenen Daten reproduzieren wollten, ersetzen Sie die URL mit ihrem lokalen Dateipfad.

Definieren Sie in diesem Fall Ihren “working directory”, ihr Arbeitsverzeichnis.

setwd("YOUR/FILEPATH") 
# this will not work. if you want to use it, define a path on your computer

Dabei handelt es sich um den Dateispeicherort, wo Ihre Daten und Skripte gespeichert sind. Weitere Infos finden Sie hier.

Der Code für das Speichern von Daten und Ergebnissen ist in diesen Tutorials deaktiviert. Ersetzen Sie zum Speichern “YOUR/FILEPATH” mit ihrem gewünschten Dateipfad.

Wir haben den Code zum Laden von packages so geschrieben, dass diese installiert werden, sofern diees noch nicht auf Ihrem PC abgespeichert sind. Anschließend werden diese direkt geladen. Sofern nicht anderweitig spezifiziert werden die packages an einer standardmäßigen Stelle auf Ihrem Computer abgespeichert.

Das KISS-Prinzip

Das sog. KISS-Prinzip, das ursprünglich aus der Informatik stammt, kann auch als Wegweiser zur Erstellung von webbasierten Karten herangezogen werden. KISS ist ein Akronym, das mit den unten aufgezählten Bedeutungen verbunden wird:

  • Keep it simple, stupid. („Halte es einfach, Dummkopf!“)
  • Keep it simple and stupid („Halte es einfach und leicht verständlich“; sinngemäß: „In der Kürze liegt die Würze“)
  • Keep it small and simple („Gestalte es klein und einfach“)
  • Keep it sweet and simple („Gestalte es gefällig und einfach“)
  • Keep it simple and straightforward („Gestalte es einfach und überschaubar“)
  • Keep it short and simple („Gestalte es kurz und einfach“, aus dem Bereich des Marketing)
  • Keep it simple and smart („Mach es einfach und clever“)
  • Keep it strictly simple („Mach es konsequent einfach“)
  • Keep it speckless and sane („Mach es sauber und gesund“)
  • Keep it sober and significant („Mach es schlicht und wesentlich“)

Somit proklamiert das KISS-Prinzip, dass stets eine möglichst einfache und minimalistische Problemlösung angestrebt werden soll. Bei der Veredelung von unstrukturieretn (Geo-)Rohdaten in informative Geoinformationen und deren Kommunikation kann eine möglichst klar strukturierte und minimalistische Darstellung für den Anwender oftmals mehr Gewinn bringen, als eine überfrachtete und aufgeladene Karte.

Was ist Blogdown?

Das R Paket blogdown bietet eine Reihe von effizienten Funktionen zur Erstellung einer statischen Website ohne dass dafür ausgeprägte Kenntnisse in HTML, CSS oder JavaScript erforderlich sind. Blogdown ermöglicht es RMarkdown-Dateien in das Framework Hugo zu intergrieren und generiert eine statische Website, die keine serverseitigen Skripte wie PHP oder eine Datenbankanbindung benötigt. Darüber hinaus ermöglicht die Kombination von R und Blogdown, dass über Blogdown mit R erstellte Tabellen, Karten oder andere Visualisierung für eine Website gerendert werden können. Dies macht Blogdown insbesondere interessant für technische Berichte oder wissenschaftliche Erörterungen, bei denen mathematische Symbole, Formeln oder Zitationen eine große Rolle spielen.

Auch diese Website wurde mit Blogdown in R erstellt.

Voraussetzungen

if (!requireNamespace("blogdown")) install.packages("blogdown")
# wichtig: zusätzlich muss HUGO installiert werden
blogdown::install_hugo()

Beispiel

Mit einer Vorlage des Frameworks Hugo ist es sehr einfach mittels Blogdown eine Website zu erstellen. Dazu erstellen Sie ein neues Projekt unter einem neuen Verzeichnis in der RStudio-IDE (File -> New Project), und rufen die nachfolgende Funktion in der R-Konsole auf:

blogdown::new_site()

Konzept und Aufbau

Für den Aufbau von Hugo basierten Websites sollten drei grundlegende Konzepte bekannt sein.

Konfiguration

Die Konfigurationsdatei config.toml beinhaltet einige globale Einstellungen der Website. Auch wenn Sie den Datentyp TOML nicht kennen, können Sie möglicherweise einige offensichtliche Einstellungen ändern, z.B. den Titel der Website.

Das Verzeichnis /content

Hier legen Sie die Quelldateien R Markdown für Ihre Beiträge und Seiten ab. Unter content/ existiert neben der Datei about.md ein Unterverzeichnis /post/ mit einigen Beiträgen. Die Organisation des Verzeichnisses liegt bei Ihnen. Sie können dort beliebige Dateien und Verzeichnisse anlegen, abhängig von der gewünschten Webseitenstruktur.

Das Verzeichnis /public

Ihre Website wird in dieses Verzeichnis generiert. Das bedeutet, dass Sie in diesem Verzeichnis keine Dateien manuell hinzufügen oder abändern sollen. I.d.R. enthält sie viele .html-Dateien und deren Abhängigkeiten (.css, .js und Bilder). Sie können den Ordner public/ auf jeden Webserver hochladen, der statische Websites bedienen kann, und Ihre Website wird gestartet und läuft.

Arbeitsablauf

Website aufsetzen

blogdown::new_site()

Website kompilieren

Bevor die Website gehostet werden kann, muss sich mit build_site() kompiliert werden

blogdown::build_site()

Website anzeigen

Führen Sie folgendes aus, um eine Vorschau der Website im RStudio Viewer anzuzeigen. Dies muss nur einmalig durchgeführt werden, wenn Sie das RStudio-Projekt öffnen oder Ihre R-Sitzung neu starten. serve_site() eignet sich zur zügigen Vorschau auf dem lokalen Rechner.

blogdown::serve_site()

Website bearbeiten / Beitrag schreiben

Verwenden Sie das Addin “New Post”, um einen neuen Beitrag oder eine neue Seite zu erstellen. Verwenden Sie das Addin “Update Metadata”, um die YAML-Metadaten bei Bedarf zu ändern.

Eine Shiny-App einbetten

Dynamische Elemente einer Website, wie beispielsweise Shiny-Apps, können in das statische Framework von Blogdown bzw. Hugo nur als iframe in die Website eingebettet werden. Hier wird in die betreffende RMarkdown-Datei eine HTML-Codezeile für das entsprechende iframe geschrieben. Dabei kann die Größe des betreffenden Rahmens mittels der Befehele width und height sowie Befehle zum steuern des Fensterrahmens (scrolling, frameborder) näher defniert werden.

<iframe width="450" height="400" scrolling="no" frameborder="no"  src="https://rafho.shinyapps.io/example/"> </iframe>

Dieser Codeblock produziert z.B. folgenden Output:

Previous
Next