Start your first post with blogdown website

After you successfully create your website with blogdown, you may want to start your first post right away. In this short section, I am going to briefly introduce how to create a new post with blogdown.

Start your first post

I highly recommend you start your post using the New Post button in Addins in RStudio. See the figure below.

It’s followed by an interface, see the figure below. You can easily fill up the basic information for your new post, such as Title, Author, and Date. The Subdirectory will allow you to specify the type of this new post, either it can be a post or publication or talk etc.

The Categories and Tags fields will automatically display the existing categories and tags. But you can add new ones directly in the fields. The Filename will be automatically generated. Finally, you are free to choose the Format you are comfortable with. The differences between these three formats are explained here

Customize your first post

After you click Done, the associated .Rmd file (if you chose the .Rmd format) will show up in the respective folder under the content folder. The YAML front matter will also be created in the .Rmd file. You can easily customize the YAML front matter based on your needs.

For instance, if the post is a draft and is not ready to display on your website, you can simply add draft: true in the YAML. When you are ready to publish the post, simply delete the draft: true or set true to false. Additionally, if you want to feature this post, just add feature: true in the YAML.

Another useful trick is that if you are writing a long post and wish to display the table of content in the post, you can add the followings to your YAML front matter.

output:
  blogdown::html_page:
    toc: true
    toc_depth: 4

How to embed images in your website

One benefit of creating website with blogdown is that it allows you to execute R code chunks in the Rmd files. That means you can easily add R plots on your website. In this section, I will focus on how to insert external images instead.

It should be noted that all static content (i.e. images, data, etc.) on your website should be stored in the static folder. You can create new folders inside the static folder to organize static contents for each of the post.

Also note that the static contents will be automatically copied to the public folder after we deploy the website.

Insert images via Insert Image in Addins

This is the easiest way to do the job. In the interface below, you can specify the Width and Height of the figure.

Note that Target file path will be automatically created and target to the static folder. That says the inserted images will be automatically copied to the static folder, regardless of the original image path.

After you click done, the figure will be inserted by the code below. You can see that the image is placed to the automatically created folder static/post/2020-09-29-start-your-first-post-with-blogdown-website.en_files that is associated with the post.

![](/post/2020-09-29-start-your-first-post-with-blogdown-website.en_files/IMG_20190313_120505.jpg)

The images will show up on your website. (see the armadillo below).

Insert images with Knitr::include_graphic

In some cases, you may want to insert images with Knitr::include_graphic which is a function rooted in R markdown and more straightforward.

The trick here is to correctly specify the image path. As I mentioned in the preceding section, the default path for static content is the static folder. That means R will search for the image in the default static folder. So in order to successfully insert the external image, you should place the image in the static folder.

As Knitr does not automatically create new folder under the static folder, it’s recommended that you create new folders manually and store static contents (i.e. images) separately for each post. See the code chunk below.

Please remember to set the error = FALSE in the include_graphics, otherwise you will end up with errors.

knitr::include_graphics("/post/2020-09-29-start-your-first-post-with-blogdown-website.en_files/plot3.png", 
                        error = False)

Next you can customize the code chunk options to add figure caption, adjust figure alignment, output width, etc. See the example below.

This is a figure with smaller size

Figure 1: This is a figure with smaller size

Yabin Da
Yabin Da
PhD Candidate in Agricultural Economics

Research interests include Environmental Economics, Applied Econometrics, and Causal Inference.