How to setup personal blog by blogdown and githup pages

Have you ever thought about making your own website using R and Rstudio? This tutorial would teach you how to create your personal blog via blogdown and github. What’s more, automatically eploying your website is also necessary by using github actions.

Prerequisites

Before running the tutorial, you need have this software in your PC

Registering github account

Please go to github to obtain your own account. Then create a new repository named [your_github_names].github.io which is applied to render your github pages.

Creating repository for blog

Creating another private repository (named MyBlog) to save your files which are used to setup blog. Here, suggesting users create two repositories to deploy personal website according to the protection of personal privacy.

  • [your_github_names].github.io for saving blog html files

  • MyBlog for saving blog source files

Creating blogdown project

Firstly, installing blogdown R package.

install.packages("blogdown")

Then, opening Rstudio to create blogdown project (File -> New Project -> Website using blogdown -> New Prject Wizard -> Create Project). YOu could see the following files and directories.

  • config.yaml: Hugo and theme configuration file.
  • .Rprofile: File to set up your blogdown options.
  • netlify.toml: File to set up your Netlify options.
  • content/: Website source files to edit and add, such as blog posts.
  • themes/: Hugo theme.

For example, here is file tree of my blog

MyBlog
├── LICENSE
├── LICENSE.md
├── MyBlog.Rproj
├── README.md
├── assets
├── build_blogdown.sh
├── config
├── content
├── data
├── deploy.sh
├── go.mod
├── go.sum
├── index.Rmd
├── layouts
├── netlify.toml
├── public
├── resources
├── static
└── theme.toml

Uploading blogdown project to MyBlog Repository

Moving the files of blogdown into MyBlog directory and then using git to push all the files to the remote repository.

Creating Github Actions

Opening MyBlog Repository (Actions -> New workflow) to create deploy.yml.

name: deploy_blog

on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
  release:
    types: [published]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: checkout
        uses: actions/checkout@v3
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2.5.0
        with:
          hugo-version: '0.101.0'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3.8.0
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: HuaZou/HuaZou.github.io
          publish_branch: master
          publish_dir: ./public
          allow_empty_commit: true

Deployment

We need to connect the Github Pages repository ([your_github_names].github.io) and blog repository (MyBlog) through ssh key. Go to ~/.ssh/.

ssh-keygen -t rsa -C "zouhua1@outlook.com"
  • private key is for MyBlog (settings -> Secrets)

  • public key is for [your_github_names].github.io (Deploy keys)

When you upload your files to MyBlog and github will automatically compile the files and then deploy html files to [your_github_names].github.io to render your website.

Hua Zou
Hua Zou
Senior Bioinformatic Analyst

My research interests include host-microbiota intersection, machine learning and multi-omics data integration.