13 Blogdown

13.1 ⭐️Overview

This chapter contains blogdown notes. I started writing it as I was creating my bradcannell website on 2021-12-21.

13.3 📦Load packages

library(dplyr, warn.conflicts = FALSE)
library(blogdown)

When creating my site, I closely followed the steps outlined in Up & running with blogdown in 2021.

Below there are some additional notes, and solutions I used for issues I came up against along the way.

13.4 Blogdown commands to remember

When you start a new R session, it can be useful to view a preview of the site in the Viewer window. You do that with

blogdown::serve_site()

To check content

blogdown::check_content()

To check the status of Netlify

blogdown::check_netlify()

In the past I got the following error:

Checking netlify.toml…
Error in find_config() :
Cannot find the configuration file config.toml | config.yaml | config/_default/config.toml | config/_default/config.yaml of the website

Ultimately, I just had to quit R and reopen – not just restart R session.

To check the Hugo versions

blogdown::check_hugo()

Let’s run one final check, which wraps all 5 checking functions we’ve used so far into a single final checklist:

blogdown::check_site()

13.5 Creating new content

Here are some notes from when I created the “Students” section of the brad.cannell website. Basically, I want a page were students can view currently available opportunities to get involved in research and find guidance on a range of topics.

When creating new content with the Academic template, you can choose to add a widget to the homepage or to create a new page (or set of pages), which can also include widgets. I wanted “students” to be a separate page - not displayed on my homepage.

I’m following guidance on Wowchemy’s Create content page to make the students page.

13.5.1 Step 1. Create a landing page

I followed the guidance on Wowchemy’s Create a landing page documentation for this step. As a reminder, landing pages don’t necessarily contain much actual content. They contain widgets that link to content.

  1. Create the content/students folder.
  2. Create index.md inside content/students, and add a YAML header. This will be a widget page like the homepage.
  3. Create a nav bar link to the index.md.
    • Open config/_default/menus.yaml
    • Create a new entry
      • Set name: to Students (or whatever you want to appear in the nav bar)
      • Set url: to 'studetns/' (the name of the folder we created in 1 above)
      • Adjust the weight to control the placement of the link on the nav bar

13.5.2 Step 2. Add widgets to the landing page

I followed the guidance on Wowchemy’s page builder documentation for this step.

I think I want to create the individual jobs (or job categories) as “blog posts” then display them on the students page in a portfolio widget or a featured content widget. I’m playing around with both.

13.5.2.1 Add a welcome section

  1. I added a blank widget to the top of the students page and added some welcome text below the YAML header.

13.5.2.2 Add a portfolio widget to the students landing page

  1. I opened home/projects.md and saved it as students/opportunities_portfolio.md.
  2. Change active: false to active: true. At that point, the widget should should up on the students landing page.
  3. I started adjusting some of the parameters in the YAML header. For example, I changed the weight to 20, added a title, etc.
  4. Ultimately, I didn’t use the featured content widget. But, if you use it in the future, make sure the featured: parameter in the YAML header is set to true. Otherwise, the post won’t show up in the featured content widget.

13.5.3 Step 3. Add content to the widgets

Individual content pages seem to always go in folders. The folders contain index.md files for written content and they also contain any other files the page needs (e.g., images or citation files). The banner photo has to be named featured.

For the research opportunities widget on the students page, I created a new folder called opportunites in content. I tried putting it directly in the students folder, but that didn’t work.

You tell markdown document that creates the widget (i.e., students/opportunities_portfolio.md) to use the documents in the content/opportunites folder by setting the content: page_type: parameter to the folder name. In this case, content: page_type: opportunites.

If you want an image on the content page, it needs to be stored in the same folder as the index.md file that contains the content. Additionally, the image file must be named featured.

Here was the YAML header for the GRA content page I made

---
# GRA page accessed from the students page via a widget.
title: Graduate research assistantships
summary: Graduate research assistantships (GRAs) are paid positions. As a GRA, you are sort of a jack of all trades. You may be asked to help with completing human subjects protection documentation for the Institutional Review Board (IRB), data collection, data management and analysis, literature reviews for papers and grants, paper and grant writing, submitting reports to funding agencies, and administrative tasks (e.g., purchasing and arranging travel).
date: "2022-03-04"
authors:
- admin
featured: true
image:
  caption: 'Photo by <a href="https://unsplash.com/@esteejanssens?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Estée Janssens</a> on <a href="https://unsplash.com/s/photos/schedule?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>'
  focal_point: ""
  preview_only: false
tags:
- GRAs
---

You can add markdown content below the YAML header.

13.5.4 Step 4. Add a banner image to the landing page.

  1. I found an image I wanted to use on unsplash.
  2. Copy home/banner.md to students/banner.md.
  3. The image file goes in assets/media/.
  4. Update the path to the picture and play around with other settings as needed.
    • I adjusted the image size by experimenting with spacing:padding: ["250px", "0", "100px", "0"].

Don’t forget to give attribution to the photographer. For example:

Photo by <a href="https://unsplash.com/@homajob?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Scott Graham</a> on <a href="https://unsplash.com/@mbcann01/likes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Produces: Photo by Scott Graham on Unsplash

13.6 Editing widget metadata

content > home

13.7 Editing about widget content

This includes degrees and social media stuff.

authors > admin > _index.md

13.8 Adjusting site configuration files

For example, nav bar.

config > _default >

13.9 Other little adjustments

Banner image To make my banner image full screen I had to add

advanced: css_class: fullscreen

To content > home > banner.md

Map zoom in the contacts widget

I changed the map zoom in the contacts widget to 9 instead of 15. I changed it in params.yaml.

Copyright

I added a copyright to the website in config.yaml I removed the license stuff from the footer in params.yaml. Search for copyright_license.

13.10 Custom CSS

Here is the Wowchemy documentation.

I created a custom CSS file at assets/scss/custom.scss.

13.11 Changing the domain

I had to add bradcannell.netlify.app to the www CNAME on godaddy.

13.12 Error fixes

13.12.1 blogdown::check_netlify()

Checking netlify.toml…
Error in find_config() :
Cannot find the configuration file config.toml | config.yaml | config/_default/config.toml | config/_default/config.yaml of the website

Ultimately, I just had to quit R and reopen – not just restart R session.