Installing Bookdown

1. In RStudio, paste the following code in the console: install.packages("bookdown", dependencies = TRUE).
2. Start a new blogdown website by clicking File → New Project → New Directory → Website using blogdown.
3. Enter a Directory Name. This will either be the name of an empty folder in which you want to store the project or the name of a folder you wish to create.
4. Enter a Hugo Theme. Click here for a list of Hugo themes.
5. Then, click Create Project.
6. If you want to share your code with others, you can add Git functionality to the project (click here to install Git). Paste the following code in the terminal, while substituting ‘Username’ with your GitHub username and ‘PackageName’ with your desired package name:

git remote add origin https://github.com/Username/PackageName.git
git push -u origin master7. 

7. Paste the following code in the console: blogdown::serve_site()

Well done! You now have a blogdown website that can be customized and published.

config.toml

The config.toml file allows you to customize the homepage of your website and set parameters. What you can do and add depends on the Hugo theme you select. Additionally, the wording may vary across themes, but generally, all themes have similar customization features. For this example, I’ll be using hello-friend-ng. Let’s go over the things that you may want to edit.

• baseURL = – Enter the domain name for your website.

• title = – Enter the title of your website that will be visible on the homepage.

• homeSubtitle – Add a description of your website that will be visible on the homepage.

• [author] – Add the name of the person who edited your website.

You can change the title of your ‘Home’ link under [params.logo]. This is where people will click to get back to the homepage of your website. A good idea is to name it ‘Home’ or after the title of your website. Here’s an example:

  [params.logo]
    logoText     = "Home"
    logoHomeLink = "/"

You can also add links to other websites, such as your social media pages, by editing [[params.social]]. Here’s an example:

  [[params.social]]
    name = "facebook"
    url  = "https://facebook.com/jane_doe" 

One of the most important things you can customize is the website tabs/pages. This can be found under [[menu.main]]. Editing here will generate or remove tabs/pages, allowing people to navigate with ease through your website. Here are some examples:

  [[menu.main]]
    identifier = "about"
    name       = "About"
    url        = "about/"
  [[menu.main]]
    identifier = "contact"
    name       = "Contact"
    url        = "contact/"

Doing such would add ‘About’ and ‘Contact’ tabs/pages to the website.

Now that you have the shell for your website down, it’s time to start adding content.

content

In the content folder, you will add R Markdown pages that correspond to the website tabs/pages you created earlier. The name of the R Markdown file must be identical to that of the identifier = name. Otherwise, it won’t work properly.

Let us begin by creating an R Markdown file:

1. In the project, click File → New File → R Markdown. Title the R Markdown page whatever you may like (it can be changed later) and click OK.
2. Immediately save the R Markdown file in the content folder of the project. Remember to name the file after the website tab/page you want it to correspond to.
3. Delete everything under the header in the R Markdown file so you can start fresh.
4. You can change the title of the page by editing title: in the header. This will be the title that appears on the website page.

Now you have content for your website! The most common thing is to add text and images to these pages. It is important to consider how you’d like the text to appear, so let’s talk about that first.

Using the # symbol will place the text on different levels. For example:

# = Level 1 header (Large font)
## = Level 2 header (Medium font)
### = Level 3 header (Small font)

Adding a # symbol makes the font smaller.

If you do not use a # symbol, the text will simply be displayed as “normal” text. This will be the smallest font you can use.

You can also bold your text by surrounding it with two * symbols. For example: **Bold example text**.

If you’d like to separate sections of your text with lines, you can use ---. Here is an example:

---

## Current projects:

Text goes here.

---

## Past projects:

Text goes here.

--- 

When you go to serve your website, --- will appear as a continuous line the separates the sections of text.

You may also be interested in adding hyperlinks to your text. Follow this example:

(Text you want to hyperlink)[pastelinkhere.com]

Another thing you may want to add is R code. For the code to appear in-line with your text, surround the code with accent marks (these little things → `). Here is an example:

Here is some example text. Check out this `code`.

When you go to serve your website, it will look like this:

• Here is some example text. Check out this code.

If you want to add lines of code, enclose the code with ```, ensuring both sets of accent marks and the code are on separate lines. Unfortunately, I can’t show you an example without R getting confused. If you do it correctly, it will look like this:

Line 1 of code
Line 2 of code

Finally, if you want to add images, see below…

static

The static folder is where you’ll place your image files. The image files MUST go here or else your images will fail to appear. Also, ensure the images are .jpg or .png files.

To add them to your R Markdown page, you can do a few things. The easiest way is the following:

1. In the project, click Addins → Insert Image (under BLOGDOWN). Browse for the image you’d like (in your static folder, that is) and click Done.

A finicky thing about images is resizing them. Technically, you can do this within the Addins tab or with code, but it doesn’t always work properly. To avoid doing this in R, I’d recommend resizing your images and then adding them to the R Markdown page. It can be more of a hassle, but at least you know it will always work. I’d recommend this website to resize your images. And of course, once you resize the images, save them to the static folder.

Now you can add images to your website and bring it to life!