my web dev background

Today

• teach nothing about CSS, HTML

• talk as little as possible about R

• prepare the basic setup

• offer an overview

open R(Studio)

install blogdown

install.packages("blogdown")

errors?

install.packages("missing-package")

and try again:

install.packages("blogdown")

blogdown installed!

install HUGO

blogdown::install_hugo()

HUGO installed

Requirements

1) build website

1) build website

1) build website

1) build website

setwd('~/Desktop/jc')
blogdown::new_site(
  dir = 'site1',
  theme = 'gcushen/hugo-academic',
  install_hugo = TRUE,
  sample = TRUE,
  theme_example = TRUE,
  to_yaml = TRUE)

1) build website

1) build website

1) build website

blogdown::serve_site()

1) build website

Serving the directory C:\Users\jog54yy\Desktop\jc\site1 at http://127.0.0.1:6868

1) build website

website built

2) modify website

Documentation for the academic theme at: https://sourcethemes.com/academic/

2) modify website

config.toml

# Configuration of Academic
# Documentation: https://sourcethemes.com/academic/
#
# This file is formatted using TOML syntax - learn more at https://learnxinyminutes.com/docs/toml/
# Each configuration section is defined by a name in square brackets (e.g. `[outputs]`).
# Title of your site
title = "Academic"
# The URL of your site.
# End your URL with a `/` trailing slash, e.g. `https://example.com/`.
baseurl = "/"
# Enter a copyright notice to display in the site footer.
# To display a copyright symbol, type `©`. For current year, type `{year}`.
copyright = ""
############################

# Configuration of Academic
# Documentation: https://sourcethemes.com/academic/
#
# This file is formatted using TOML syntax - learn more at https://learnxinyminutes.com/docs/toml/
# Each configuration section is defined by a name in square brackets (e.g. `[outputs]`).
# Title of your site
title = "This is actually personalized!"
# The URL of your site.
# End your URL with a `/` trailing slash, e.g. `https://example.com/`.
baseurl = "/"
# Enter a copyright notice to display in the site footer.
# To display a copyright symbol, type `©`. For current year, type `{year}`.
copyright = ""
############################

2) modify website

content/

2) modify website

content/

2) modify website

static/

2) modify website

themes/

website modified!

3) publish website

make a netlify account

Go to netlify.com and sign-up

drag & drop the folder public

For updates go to Deploys and drag & drop public folder

website published

Theme anpassen

Blogpost verfassen

GitHub Integration

• GitHub Account erstellen
• Netlify zugriff auf das Respository gewähren
  • Netlify kann die Seite mit einer eigenen HUGO-Engine generieren, oder
  • Seite lokal generieren (wie wir es eben getan haben)
• GitHub push löst Deployment auf Netlify aus.

Eigene Domain nutzen

Integration mit GitHub-Pages