class: inverse, center, middle #Create a Website Using R! <br/> ##An Introduction to .amber[blogdown] <br/><br/><br/><br/> ####Luna L. Sánchez Reyes ####University of California, Merced <br/><br/><br/><br/> .pull-right[March 12, 2020 · Merced, California] --- class: split-two center name: steps .row.bg-cyan[.content.vmiddle[ # .amber[Step 1:] [Create an academic backbone](#install-blogdown) of a website ]] .row.bg-amber[.content.vmiddle[ # .light-blue[Step 2:] [Customize the backbone](#customize) with your profile and work ]] --- class: split-2-1-1, left name: install-blogdown .row[.content.vmiddle.center[ #Installing .amber[blogdown] ]] .row.bg-amber[ .content.v40[ ###   ⬇️ You can install any package in R with the function .cyan.font-mono[install.packages()] ]] .row.slide-in-right[.content.v40[ ###   ✏️ Open R and just do .amber.font-mono[install.packages("blogdown")] ]] .row[ ] --- class: split-20 .row[.content.vmiddle.center[ # Starting a .amber[new website project] ]] .row.split-30[ .row.slide-in-right.bg-amber[.content.vmiddle[ ###   💯 This will .light-blue[download all the necessary files] to create the backbone of your website ]] .row[.content[ .row.split-two[ .column[.content.nopadding[ <img src="media/dsquintana1.gif" width="100%" /> ]] .column.split-four[ .row[.content.vmiddle[ ### ⬅️ Go to the .amber[File] menu > .amber[New project...] ]] .row[.content.vmiddle[ ### 📁 Name your project in .amber[Directory name] ]] .row[.content.vmiddle[ ### ❗ Make sure to enter .amber[gcushen/hugo-academic] as the Hugo theme ]] .row[.content.vmiddle[ ### ✔️ Keep all other options .amber[the same] ]] ] ] ]] ] --- class: split-25 .row[.content.vmiddle.center[ # Creating an .amber["hugo"] website backbone ]] .row.split-two.center[ .column.split-two.center[ .row[.content.vmiddle[ ### 📚 Load blogdown using the command .amber.font-mono[library(blogdown)] ]] .row[.content[ ### ⬇️ Install the "hugo" framework with .amber.font-mono[blogdown::install_hugo(] ### .amber.font-mono[force = TRUE)] ]] ] .column.split-two.bg-amber.slide-in-right.center[ .row[.content.vmiddle[ ###   🦴 This generates the .light-blue[backbone files] that constitute the template website ]] .row[.content[ ###   📝 Wee will see later how to .light-blue[edit these files to customize] the website ]] ] ] --- class: split-1-2-1 .row[.content.vmiddle.center[ # Building the .amber[template] of the website ]] .row[ .row.split-two[ .column[.content.nopadding[ <img src="media/dsquintana2.gif" width="100%" /> ]] .column.split-two.center[ .row[.content.vmiddle[ ### 🍜 Run the command .amber.font-mono[blogdown::serve_site()] ]] .row[.content.v30[ ### 👀 Run this command every time you want to .amber[check] what your website will look like ]] ] ] ] .row.split-two.slide-in-left.bg-amber[ .row[.content.vmiddle[ ###   📲 This builds a mobile version of your site on the RStudio .light-blue[viewer window] ]] .row[.content.vmiddle[ ###   💻 Copy-paste the .light-blue[server address] into a web browser for a desktop version of your site ]] ] --- class: split-20 name: customize .row[.content.vmiddle.center[ # Let's .cyan[customize] the website! ]] .row.split-70.slide-in-left[ .row.split-two[ .column.split-four[ .row.bg-deep-orange[.content.vmiddle[ ### Control basic information of your website ]] .row.bg-green[.content.vmiddle[ ### Change the general appearance of the website ]] .row.bg-main2[.content.vmiddle[ ### Add your academic content ]] .row.bg-pink[.content.vmiddle[ ### Upload your CV ]] ] .column[.content.center.nopadding[ <img src="media/file-viewer2.gif" width="100%" /> ]] ] .row.split-two.center[ .column.bg-cyan[.content.vmiddle[ ###   📝 You will do this by .amber[editing the files on the project backbone] ]] .column[.content.vmiddle[ ###   ☝️ .cyan[Open] any file by .cyan[selecting] it from your .cyan[file browser] ]] ] ] --- class: split-10 .row[.content.center.vmiddle[ ## Controlling .deep-orange[basic info] on your website ]] .row.split-60[ .row.split-two[ .column[.content.center[ <img src="media/config-toml1.gif" width="95%" /> ]] .column[.content.center[ <img src="media/config-toml2.gif" width="95%" /> ]] ] .row.slide-in-right.split-25[ .column[.content.v20.center[ ## ☝️ Open the .deep-orange[config.toml] file and edit it to: ]] .column.split-three.bg-deep-orange[ .row[.content[ ###   🚩 Change the .amber[title] of your website ]] .row[.content[ ###   🔗 Add the .amber[URL] of your site once you have one ]] .row[.content[ ###   ©️ Add a .amber[copyright]. Just follow the instructions on the file ]] ] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Control the .green[general appearance] of your website ]] .row.split-two[ .column.split-25[ .row[.content.vmiddle.center[ ## 👇 Files in the .green[config/_default] folder will allow you to: ]] .row[.content.nopadding[ <img src="media/config-folder.gif" width="100%" /> ]] ] .column.split-four[ .row.bg-teal[.content.vmiddle[ ### 🍔 Customize the website .amber[menu]. <!-- the elements of the menu and their order within the menu, as well as the menu's general position in the site. --> ]] .row.bg-green[.content.vmiddle[ ### 📬 Modify your .amber[contact] information ]] .row.bg-lime[.content.vmiddle[ ### 🎨 Set the color and font .orange[theme] of the site in any way you want! ]] .row.bg-light-green[.content.vmiddle[ ### 💬 Configure the site in various .amber[languages] (Example website code [here]()) ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Customize the website .teal[menu] ]] .row.split-90[ .row.split-60.bg-teal[ .column[.content.nopadding.center.vmiddle[ <img src="media/blogdown1.gif" width="100%" /> ]] .column.split-two[ .row[.content.vmiddle[ ###   👈 As you probably know, each element of the menu is a .amber[link] that allows users to easily navigate across the content of a site ⛵⛵⛵ ]] .row[.content[ ###   You can control the .amber[position] of the menu, its .amber[content] and the .amber[order] of its elements ]] ] .row[.content[ ]] ] ] --- class: split-60 teal .column.split-two[ .row[.content.center.nopadding[ .pull-right[<img src="media/menu-position2.gif" width="100%" />] ]] .row[.content.center.nopadding[ .pull-left[<img src="media/menu-position1.gif" width="100%" />] ]] ] .column.split-two[ .row[.content.center.v30.black[ # Modifying the menu's .teal[position] ]] .row.split-two.slide-in-right[ .row[.content.vmiddle.left[ ###   👈 Go to the "Advanced" section of the .amber[params.toml] file ]] .row[.content.vmiddle.left[ ###   🔁 And just change the .amber[align] parameter ]] ] ] --- class: split-60 teal .column.split-two[ .row[.content.center.nopadding[ <img src="media/menu-order2.gif" width="100%" /> ]] .row[.content.center.nopadding[ <img src="media/menu-order.gif" width="100%" /> ]] ] .column.split-two[ .row[.content.center.v50.black[ # Modifying the .teal[order] of the menu's elements ]] .row.split-two.slide-in-right[ .row[.content.vmiddle.left[ ### 👈 Go to the .amber[menus.toml] file. Each section starting with .amber["[[main]]"] defines settings of a menu element ]] .row[.content.vmiddle.left[ ### 🏋 Change the .amber[weight] parameter to modify the position of each element relative to other elements ]] ] ] --- class: split-60 teal .column.split-two[ .row[.content.center.nopadding[ <img src="media/menu-content2.gif" width="100%" /> ]] .row[.content.center.nopadding[ <img src="media/menu-content1.gif" width="100%" /> ]] ] .column.split-two[ .row[.content.center.v80.black[ # Modifying the menu's .teal[content] ]] .row.split-three.slide-in-right[ .row[.content.vmiddle.right[ ### .transp["]#️⃣ Also in the .amber[menus.toml] file, place a .amber[hashtag] symbol at the beginning of a line that defines an element you don't want in the menu ]] .row[.content.vmiddle.right[ ### 📌 This is known as .amber[commenting out] ]] .row[.content.vmiddle.right[ ### 🧁 Extra: Change the .amber[name] argument and see what happens ]] ] ] --- class: bg-white split-20 .row[.content.center.vmiddle[ ## Modifying your .green[contact information] ]] .row.split-70[ .row.split-two[ .column[.content.center[ <img src="media/contact1.gif" width="95%" /> ]] .column[.content.center[ <img src="media/contact3.gif" width="95%" /> ]] ] .row.slide-in-right.split-two[ .column.bg-white[.content.v20.center[ ## ☝️ Go to the .green[Contact details] section of .green[params.toml] ]] .column.bg-green[ .content.v45.center[ ## And simply edit it with your own information 😜 ] ] ] ] --- class: bg-white split-20 .row[.content.center.vmiddle[ ## Customizing the .lime[font and color] themes! ]] .row.split-70[ .row.split-two[ .column[.content.center[ <img src="media/themes-rstudio.gif" width="95%" /> ]] .column[.content.center[ <img src="media/themes-browser.gif" width="95%" /> ]] ] .row.slide-in-right.split-two[ .column.bg-white[.content.v20.center[ ## ☝️ Go to the .lime[Theme] section of .lime[params.toml] ]] .column.bg-lime[ .content.v45.left[ ## And modify the .orange[theme] argument 👨🎨 👩🎨 ] ] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Add .color-main4[content] to your website ]] .row.split-two[ .column.split-25[ .row[.content.vmiddle.center[ ## Files in the 👇 .color-main4[content/] 👇 folder will allow you to: ]] .row[.content.nopadding[ <img src="media/content-folder-v2.gif" width="100%" /> ]] ] .column.split-three[ .row.bg-main4.black[.content.vmiddle[ ### 🧪 🔭 🔬 Edit yours and your colleagues' .amber[bios] ]] .row.bg-main1.gray[.content.vmiddle[ ### .amber[Design] the .amber[content] of your home 👷♂️ 🏠 👷♀️ ]] .row.bg-main2.black[.content.vmiddle[ ### 🤓 Add your .amber[work:] courses, blogposts, projects, publications, tutorials and talks ]] ] ] --- class: split-60 color-main4 .column.split-two[ .row[.content.center.nopadding[ .pull-right[<img src="media/bio1.gif" width="100%" />] ]] .row[.content.center.nopadding[ .pull-left[<img src="media/bio.gif" width="100%" />] ]] ] .column.split-20[ .row.bg-main3[.content.center.v30.black[ .font2[Adding your .white[bio] into] .font1-85.white[content/authors/admin/] ]] .row.split-four.slide-in-right.font_medium[ .row[.content.v20.left[ 📸 Add or update a .amber[profile photo] by saving it into this folder. ⚠️ Name the file .amber[avatar.jpg] ]] .row[.content.v20.left[ 🎓 Edit your.amber[biography] details (e.g, position, affiliation, education details) in the .amber[_index.md] file ]] .row[.content.v20.left[ 🍹 Add your .amber[social media] details and a link to your Google Scholar profile page, also in .amber[_index.md] ]] .row[.content.left[ 🤝 .font0-75[Add a colleague's bio: Make a new folder into .amber[content/authors/]. Name it whatever you want, but it has to have the files .amber[_index.md] and .amber[avatar.jpg]] ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Design the .color-main3[content] of your home page 🏠 ]] .row.bg-main1.split-60[ .column[.content.nopadding.center.vmiddle[ <img src="media/home-files.gif" width="100%" /> ]] .column.split-10.center.gray[ .row[.content.font0-85[ Most content of a website lives in the home page ]] .row.split-four[ .row[.content.v10.color-main4[ It is easier to identify different parts of your website when each has its own personality or .amber[design] ]] .row[.content.font_medium[ Different ways of presenting content are called .amber[widgets] ]] .row[.content.color-main4[ 👈 .font1-5[Each `".md"` file within the folder .amber[content/home/] represents a different widget] ]] .row[.content.v50[ Go to [Hugo Academic's documentation](https://sourcethemes.com/academic/docs/page-builder/) for more details on widgets ]] ] ] ] --- class: split-60 .column.split-two[ .row[.content.center.nopadding[ .pull-right[<img src="media/menu-position2.gif" width="100%" />] ]] .row[.content.center.nopadding[ .pull-left[<img src="media/menu-position1.gif" width="100%" />] ]] ] .column.split-two[ .row[.content.center.v30.bg-main1.gray[ # .color-main3[Adding] or .purple[removing] a widget from home ]] .row.split-two.slide-in-right.color-main1[ .row[.content.center[ ### 👈 Open up the .amber[.md] file of the widget you want to remove ]] .row[.content.v20.center[ ###   👀 And just change ### .amber[active=true] to .amber[active=false] ]] ] ] --- class: split-60 .column.split-two[ .row[.content.center.nopadding[ .pull-right[<img src="media/menu-position2.gif" width="100%" />] ]] .row[.content.center.nopadding[ .pull-left[<img src="media/menu-position1.gif" width="100%" />] ]] ] .column.split-two[ .row[.content.center.vmiddle.bg-main1.gray[ # .color-main3[Duplicating] a widget in the home ]] .row.split-two.slide-in-right.color-main1[ .row[.content.center[ ### 👈 Select the .amber[.md] file of the widget you want to duplicate ]] .row[.content.v20.center[ ###   👯 And simply duplicate the file into the same folder (.amber[content/home/]) ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Add .purple[products] of your work ]] .row.bg-purple.split-60[ .column[.content.nopadding.center.vmiddle[ <img src="media/work-content.gif" width="100%" /> ]] .column.split-two[ .row[.content.vmiddle[ ### 👈 Widgets in the home link to your work. This is stored in folders within the .amber[content/] folder ]] .row[.content[ ### The folders .amber[courses/], .amber[posts/], .amber[projects/], .amber[publications/], .amber[slides/] and .amber[talks/] are preset, but you can add as many sections as you need 📂🗃🗄 ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Last but not least: .pink[add a PDF of your CV] ]] .row.split60.bg-pink[ .row.split-60[ .column[.content.nopadding.center.vmiddle[ <img src="media/cv-section.gif" width="100%" /> ]] .column.split-two[ .row[.content.vmiddle.center[ ### Add a pdf file of your CV to .amber[static/files/] <br/> and save it as .amber[cv.pdf] ]] .row[.content.v30.center[ ### Go to the the .amber[CV section] of .amber[config/_default/_menus.toml] file and uncomment it (remove the #️⃣ at the beginning of each line) ]] ] ] ] --- class: left, middle Bonus! 1. Modify the mini-logo on the browser To 2. add other sharing links or remove the ones that appear on posts or publications, go to `data/page_sharer.toml` and change `enable= true` to `enable= false`, or visceversa, depending on what you want to appear on yur website <br/><br/><br/> --- background-image: url("https://media.giphy.com/media/l1EtdgbvFeTLxx2W4/giphy.gif") background-position: 50% 65% background-size: 650px ## Time for a break!