Website met distill

Distill

Mijn eigen Harrie’s Hoekje blog, over een aantal ontwikkelingen in de dataanalyse, maak ik ook met het gebruik van het pakket Distill. Met Distill kun je wetenschappelijke websites maken, een blog en artikelen schrijven. Over hoe je dat doet schreef Lisa Lendway een kort en krachtige blog. Dat kan ik niet beter. Dank je, Lisa, hiervoor. Haar blog staat hier

Waarom een website?

Nou, eindelijk heb ik het gedaan!, zo begint zij haar blog dat ik (Harrie) hier verder volg.

Ik (Lisa) heb een website gemaakt. En om dat te vieren, ga ik met jullie delen hoe ik het gedaan heb. En waarom heb ik dat gedaan? Twee belangrijke redenen zijn er: 1. om materiaal te delen dat nuttig kan zijn voor anderen, 2. om wat dingen voor mezelf te documenteren, allemaal op één plek.

Ik koos voor een {distill} site omdat het me genoeg vrijheid leek te geven om mijn site aan te passen en ook weer niet zo veel vrijheid dat ik zou verzanden in details (bv. kleuren kiezen … oeps, daar heb ik toch nog veel tijd aan besteed).

Bronnen

Voordat ik begin, zal ik wat bronnen delen die ik heb gebruikt.

Alison Hill en Desirée De Leon’s webinar over Sharing on Short Notice. KIJK HIERNAAR voordat je verder gaat. Hier werd ik voor het eerst geïntroduceerd op netlify en toen zag ik pas hoe makkelijk het is om html-files tot een website om te vormen website. Je zou daar zelfs eerst mee kunnen beginnen voordat jij je op een website springt. Misschien spreken sommige van de andere opties die ze bespreken jou meer aan dan {distill}.
De distill documentatie, ook al in de vorm van een … distill website!
Distill websites van anderen: Ijeamaka Anyene, Shannon Pileggi(aka Piping Hot Data), Miles McBain, Tom Mock, en meer!
Alison Hill’s website voor hoog niveau inhoud en design inspiratie. Iedere keer vind ik wel een nieuw bron als ik haar website bezoek. Bijvoorbeeld, bekijk eens haar praatje op ‘Recent updates in the R markdown family’.
En meer! Ik zal proberen in dit blog op enkele bronnen terug te komen.

Kijk ook naar de video die Lisa maakte en die je hier vindt.

Bouwen van de site

Laten we nu verder gaan met het maken van de site. Onderweg kom ik terug op de YouTube-video. Ik kom steeds terug op dezelfde YouTube-video, maar ik zal ze daar zetten waar ik het op dat moment over heb. Zo is het makkelijker voor je om delen over te slaan als je dat wilt.

Een GitHub repo opzetten & het project starten

Kijk naar Tom Mock’s post hier. Ik denk dat zijn manier om dit te doen logischer is dan de mijne. Helaas, zag ik het toen ik mijn ding had gedaan :(

Ik probeer er een gewoonte van te maken om al mijn projecten met een GitHub repo te beginnen. Dus, dat is wat ik hier ook heb gedaan. Hier zijn alle stappen:

Maak een repo
Creëer project in R Studio door de repo te klonen * Laad de {distill} bibliotheek
Maak een “starter” site met de create_website() functie. Ik heb dit gebruikt in plaats van create_blog() omdat ik van mijn hoofdpagina een About pagina wilde maken in plaats van een blog. Ik zal het blog gedeelte later toevoegen. Lees de {distill} documentatie om je te helpen bij het beslissingsproces. Omdat ik eerst mijn GitHub repo heb gemaakt, moest ik wat rare dingen doen om de mappenstructuur te fixen. Het werkt, maar het is een beetje lelijk.
- Verplaats alle bestanden behalve het .Rproj bestand van de zojuist gemaakte map naar de hoofdmap van het archief.
- Verwijder de website map (zou leeg moeten zijn, behalve het .Rproj bestand).
- Verwijder het README.md bestand in de hoofdmap van het archief (als ik dat niet deed, bouwde de site later niet).

Of kijk naar dit deel van de video (tot minuut 8:04):

De site voor de eerste keer bouwen

Vervolgens willen we de site bouwen. Om dit op een eenvoudige manier te doen, sla je jouw bestanden op, sluit je RStudio en open je het opnieuw, waarbij jij ervoor zorgt dat je je in het project van jouw distill-site bevindt. Wanneer je dit doet, zou er een Build tab moeten verschijnen in jouw paneel aan de rechterbovenhoek (of waar u gewoonlijk jouw Environment, History, enz. hebt). Klik op het Build Website-icoon en je zou je site moeten zien! (8:25 in de video, als je het mij wilt zien doen).

Op dit punt zijn er veel verschillende richtingen die je op kunt gaan. Ik zal je vertellen wat ik gedaan heb. Als je niet veel meer wilt aanpassen, kun je naar @ref(netlify) gaan om een eenvoudige manier te vinden om je website te publiceren.

Aanpassen van de home page

Ik wilde dat mijn “Home” pagina mijn “About” pagina zou worden. Om dit te doen, heb ik eerst wat veranderingen aangebracht in het _site.yml bestand, het “About” gedeelte van de navigatiebalk verwijderd en de tekst voor de homepage hernoemd naar “About”.

Dan, om te beginnen met het aanpassen van mijn “About” pagina, voeg ik een foto van mezelf toe aan het index.Rmd bestand en plaats ik wat plaatshouders voor plaatsen waar ik wat informatie zal schrijven.

Bekijk dit in de video (tot minuut 17:35):

Voeg het blog toe en maak jouw eerste post

Als je de blog route vanaf het begin hebt gevolgd, hoef je dit deel niet te doen. Merk op dat ik in de video de dingen in de verkeerde volgorde deed

Voeg een post toe met create_post("mijnpost"). Dit genereert een R Markdown bestand met de naam mypost.Rmd (tenzij je de slug verandert), een _posts map, en een map die de datum en de naam van het bericht heeft. Door te beginnen met de datum, houdt het je berichten in een mooie volgorde :)
Bewerk jouuw blog post-Rmarkdownbestand naar believen. Zorg ervoor dat je dit bestand knit zodat het op de blog verschijnt. Deze bestanden worden niet automatisch gebreid. Dat is met opzet.
Maak een nieuw R Markdown bestand met ALLEEN een yaml kop met een titel en listing. Sla het op in de hoofd repository.
Wijzig het _site.yml bestand om de listing pagina te linken. De tekst kan zijn wat je maar wilt - dit is wat er op de navigatiebalk komt te staan. De href waarde is de .html van het listing .Rmd bestand.
Voeg een aangepaste blog preview afbeelding toe. Zet de afbeelding die je hiervoor wilt gebruiken in de map voor de blog post. In de yaml kop van het R Markdown bestand van uw blog, voeg je preview: image.png toe, waar image.png de naam van jouw afbeelding is. Standaard zal de preview de eerste plot zijn die gegenereerd wordt in uw R code.

Bekijk dit in de video (tot minuut 33:27):

Pas`_site.yml` aan

In dit deel voeg ik enkele aangepaste iconen toe aan de bovenste navigatiebalk van de site. Deze bevatten een persoonlijke favicon aan de linkerkant (die ik uiteindelijk toch weer weghaal) en links naar mijn GitHub, LinkedIn en Twitter pagina’s (en later voeg ik er een toe aan mijn YouTube kanaal).

Voeg het volgende toe aan het _site.yml bestand na de navbar koptekst. Wees voorzichtig met inspringen. Je kunt mijn bestand hier bekijken (ik heb meer bewerkt sinds het maken van de video, dat wel).

- icon: fa fa-github
  href: https://github.com/YOUR_USERNAME
- icon: fa fa-linkedin
  href: https://www.linkedin.com/in/YOUR_LINKEDIN/
- icon: fa fa-twitter
  href: https://twitter.com/YOUR_TWITTER

Om een gepersonaliseerde favicon toe te voegen, voeg het volgende toe na navbar:, waar ll.png de persoonlijke favicon is. Je kunt ook een link naar een website toevoegen waar hij naartoe gaat als je er op klikt. Nogmaals, wees voorzichtig met inspringen.

  logo:
    image: ll.png

Volg de video hieronder (tot minuut 44:22). Toen ik dit de eerste keer deed, maakte ik wat fouten, dus ik laat je dat deel van de video overslaan.

Publiseer de site via netlify

Nu je een website hebt, kun je die gemakkelijk publiceren via netlify. Ik zal je laten zien hoe je deze aan je GitHub repo kunt koppelen, zodat iedere keer dat je wijzigingen naar GitHub stuurt, je website die wijzigingen zal weergeven. Ik raad aan om eerst een account op netlify aan te maken.

Bekijk de video om te zien hoe ik het doe (tot minuut 48:22):

Maak het je eigen!

Het laatste stuk is om wat aanpassingen te doen. Dankzij de geweldige {distill} auteurs, kunnen we de create_theme() functie gebruiken om ons door het aanpassen van wat css te leiden. Ik ben een echte beginner als het op css aankomt, dus er is van een makkelijkere manier. Ik raad ten zeerste aan om de documentatie over theming en de recente updates door te lezen. En lees grondig de tekst van de website (misschien heb ik dat de eerste keer niet gedaan)!

Voegtheme: "my_theme.css" aan de bodem van de _site.yml file toe.

Je kunt de video tot het einde bekijken: