Cyrus Sinai, PhD on Hugo Apéro

Netlify

Sat, 02 Jan 2021 00:00:00 +0000

So far, we’ve been leveraging GitHub Pages for publishing. This works great, but for blogdown we’ll start using Netlify. Let’s start RIGHT NOW with a site we’ve already built and published.

Pre-requisites

Pick either your postcards site, or your distill site from day 01. Refresh your memory- which repository was it again?

A first post

Fri, 01 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/01-spoonful.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

does this work?

or this?

Let’s start.

A GitHub profile

Fri, 01 Jan 2021 00:00:00 +0000

Profile

https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/personalizing-your-profile

Pin projects to profile

https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/pinning-items-to-your-profile

Profile README

This is new! Let’s do it:

Prework

Fri, 01 Jan 2021 00:00:00 +0000

Welcome to the Introducing Yourself Online workshop! We look forward to meeting you. Before attending the workshop, please complete the following prework.

Set up RStudio Cloud

Sign up for a free RStudio Cloud account at https://rstudio.cloud/ before the workshop. I recommend logging in with an existing Google or GitHub account, if you have one (rather than creating a new account with another password you have to remember). I want you to be able to work from your own laptop in this workshop, but Cloud is an important back-up plan should you run into troubles.

A postcard

Sat, 02 Jan 2021 00:00:00 +0000

Pre-requisites

First, make sure you have the latest version of the postcards package installed from CRAN:

install.packages("postcards")

Restart your R session. If you use RStudio, use the menu item Session > Restart R or the associated keyboard shortcut:

Ctrl + Shift + F10 (Windows and Linux) or
Command + Shift + F10 (Mac OS).

packageVersion("postcards")
[1] ‘0.2.0’

Create GitHub repo

Online.

A second post

Sat, 02 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/02-spoonful/index.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

Images in this page bundle:: /blog/spoonful-series/02-spoonful/sidebar-inverse.jpg

part 2!

does this work?

now for some very cool things

get ready!

Using blogdown

Fri, 01 Jan 2021 00:00:00 +0000

Pre-requisites

First, make sure you have the latest version of the blogdown package installed from CRAN:

install.packages("blogdoown")

Restart your R session. If you use RStudio, use the menu item Session > Restart R or the associated keyboard shortcut:

Ctrl + Shift + F10 (Windows and Linux) or
Command + Shift + F10 (Mac OS).

packageVersion("blogdown")
[1] ‘1.0’

Create GitHub repo

Online.

A third post

Sun, 03 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/03-spoonful/index.markdown

Here is my R Markdown source file:: blog/spoonful-series/03-spoonful/index.Rmarkdown

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

Images in this page bundle:: /blog/spoonful-series/03-spoonful/featured-photo.jpg

are you still here?

does this work?

final stretch!

A distill site

Sat, 02 Jan 2021 00:00:00 +0000

Pre-requisites

First, make sure you have the latest version of the distill package installed from CRAN:

install.packages("distill")

Restart your R session. If you use RStudio, use the menu item Session > Restart R or the associated keyboard shortcut:

Ctrl + Shift + F10 (Windows and Linux) or
Command + Shift + F10 (Mac OS).

packageVersion("distill")
# [1] ‘1.2’

Create GitHub repo

Online.

Warm woolen mittens

Sat, 02 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/collection/day02/03-blogdown/index.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: collection

My layout is:: single-series

part 2!

does this work?

now for some very cool things

get ready!

Set up your social

Thu, 28 Jan 2021 00:00:00 +0000

There are five places where you can choose to show social icons. Here is the tl;dr:

site header (set in config.toml),
site footer (set in config.toml),
homepage (set in content/_index.md),
about page in the sidebar (set in content/about/sidebar/index.md), and
contact page (set in content/form/contact.md).

Read on to learn how to set up your social icons, and how to show/hide them.

Wherever you end up wanting to show your social icons, you’ll need to start by setting up the links in your site config.toml file. Open that up and scroll down to the [[params.social]] section. The start of it looks like this:

Style your site colors

Wed, 27 Jan 2021 00:00:00 +0000

You can totally customize your site’s theme colors within minutes of creating a new site. Read on to find out how, and decide which of the three options meets your needs.

Use a color theme

Hugo Apéro includes 8 built-in color themes that work “out of the box.” This means you can use a color theme to quickly customize the look of your site without needing to write any CSS. You can select the color theme in your config.toml file. Scroll down to find:

Style your site typography

Wed, 27 Jan 2021 00:00:00 +0000

As with color themes, you can completely customize your site’s fonts within minutes of creating a new site. How you do it depends on how much control and customization you need.

Embedded fonts

Hugo Apéro includes 6 embedded fonts that work “out of the box.” We selected 3 serif and 3 sans-serif options that we thought looked good with this theme, in our humble opinions. All embedded fonts include real italics so you may emphasize to your heart’s content :heart:! How to choose?

An evergreen post

Wed, 20 Jan 2021 00:00:00 +0000

Rendering mathematical equations

Examples from the mathjax demo. But they work with katex as well.

Rmarkdown

In .Rmarkdown documents, you can use either

A campfire

Tue, 12 Jan 2021 00:00:00 +0000

I’m really excited to give this talk! Stay tuned for video and slides.

Using panelsets

Sat, 02 Jan 2021 00:00:00 +0000

Courtesy of panelset.js by Garrick Aden-Buie, from his xaringanExtra package: https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset

For example, this panelset:

Hello! 👋

hello

Goodbye 💨

goodbye

Was created by combining this theme’s panelset and panel shortcodes:

{{< panelset class="greetings" >}}
{{< panel name="Hello! :wave:" >}}
  hello
{{< /panel >}}
{{< panel name="Goodbye :dash:" >}}
  goodbye
{{< /panel >}}
{{< /panelset >}}

You could also revert to HTML as well. For example, this panelset:

Question

Which came first: the :chicken: or the :egg:?

A seedling

Fri, 01 Jan 2021 14:15:59 -0600

An Rmarkdown post

Wed, 30 Dec 2020 00:00:00 +0000

Air quality

with(airquality, boxplot(Temp ~ Month))

with(airquality, plot(Ozone ~ Temp))

mlev <- levels(with(airquality, as.factor(Month)))
with(airquality, plot(Ozone ~ Temp, 
                      pch = as.numeric(mlev), 
                      col = mlev))

A seedling

Mon, 13 Jan 2020 14:15:59 -0600

Tachyons for Style

Wed, 03 Jul 2019 00:00:00 +0000

Tachyons is a design system that allows you to design gorgeous interfaces in the browser with little effort.

Because Speed

Building this static site generator theme was the first time I used an Atomic (or Functional) CSS system like Tachyons. It’s a design system that provides very small (which means fast) CSS modules that you can use in your HTML. So, rather than writing every line of CSS, you apply the style you need as you write your HTML with easy to understand shorthand class names. This makes for a very powerful way to style, in the browser, or while building a static site like this one – since you can see every change with every save. It’s a joy to use.

CSS Grid Scaffold

Tue, 02 Jul 2019 00:00:00 +0000

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

— Chris House, A Complete Guide to CSS Grid Layout ¹

Overview

Since I began building websites in Y2K, I’ve lost count how many times the phrase “…there’s got to be a better way to do this” has passed my lips. Most times, while fighting with floats and widths of content and sidebars or just basically trying to get something beside something else without using a stupid TABLE.

Palmer Penguins

Tue, 02 Jul 2019 00:00:00 +0000

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

— Chris House, A Complete Guide to CSS Grid Layout ¹

Bakeoff

Mon, 01 Jul 2019 00:00:00 +0000

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

This theme has a form-to-email feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the front matter of the form (/content/forms/contact.md). Of course, the example shown below (your@email.here) must not be used. Please use your actual email address.

Built-in Contact Form

Mon, 01 Jul 2019 00:00:00 +0000

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

Contact

Mon, 25 Feb 2019 13:38:41 -0600

** Contact page don’t contain a body, just the front matter above. See form.html in the layouts folder.

Formspree requires a (free) account and new form to be set up. The link is made on the final published url in the field: Restrict to Domain. It is possible to register up to 2 emails free and you can select which one you want the forms to go to within Formspree in the Settings tab. **

Typography Styles & Element Examples

Mon, 18 Feb 2019 12:27:33 -0600

Font Sizes

A	A	A	A	A	A	A	A
6rem (96px)	5rem (80px)	3rem (48px)	2.25rem (36px)	1.5rem (24px)	1.25rem (20px)	1rem (16px)	.875rem (14px)

Type Samples

Headline

Subheadline

Level 1 Heading

One page to rule them all...well, not really. This page displays sample typography and page elements to illustrate their style. Things like headings and paragraphs showing the beautiful type scale, form elements, tabular data, and image layouts just to name a few.

Contributors

Mon, 01 Jan 0001 00:00:00 +0000

Thank you to all the folks who have contributed both technical and creative skills to this project:

Desirée De Leon :giraffe: (designed 5 of the custom color themes, made illustrations for the workshop, and provided general aesthetic feedback along the way)
Garrick Aden-Buie :mage: (debugged headroom.js and lent his panelset.js code to the theme)
Allison Horst :dog2: (awesome illustrations of campfires, seedlings, and evergreens, as well as my R Markdown hedgehog mascot :hedgehog:)

License

Mon, 01 Jan 0001 00:00:00 +0000

My blog posts are released under a Creative Commons Attribution-ShareAlike 4.0 International License.

Cyrus Sinai, PhD on Hugo Apéro

Netlify

Pre-requisites

A first post

does this work?

or this?

A GitHub profile

Profile

Pin projects to profile

Profile README

Prework

Set up RStudio Cloud

A postcard

Pre-requisites

Create GitHub repo

A second post

part 2!

does this work?

now for some very cool things

more

get ready!

Using blogdown

Pre-requisites

Create GitHub repo

A third post

are you still here?

does this work?

final stretch!

A distill site

Pre-requisites

Create GitHub repo

Warm woolen mittens

part 2!

does this work?

now for some very cool things

more

get ready!

Set up your social

Configure social

Style your site colors

Use a color theme

Style your site typography

Embedded fonts

An evergreen post

Rendering mathematical equations

Rmarkdown

A campfire

Using panelsets

A seedling

An Rmarkdown post

Air quality

A seedling

Tachyons for Style

Tachyons is a design system that allows you to design gorgeous interfaces in the browser with little effort.

Because Speed

CSS Grid Scaffold

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

Overview

Palmer Penguins

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

Bakeoff

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

Built-in Contact Form

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

Contact

Typography Styles & Element Examples

Font Sizes

Type Samples

Head­line

Sub­head­line

Level 1 Heading

Contributors

License

Headline

Subheadline