ホクソエム公式ブログは次の方法で構築されました。備忘録として記録しておきます。またRMarkdownを使った更新方法についてもまとめます。

システム

  • GitHub Pages (ホスティング)
  • blogdown (RMarkdown + Hugo)

blogdownのインストールと設定

devtools::install_github("rstudio/blogdown")

GitHubからblogdownパッケージをインストール。ローカルにhugoシステムが構築されている必要があるため、hugoをインストールしていない場合は次のコマンドを実行のこと。

blogdown::install_hugo()

テーマはいくつか選べるが、ページ構成がblogdownパッケージと相性が悪いテーマもあるため注意が必要。今回はghostwriterテーマを採用した。

blogdown::new_site()のtheme引数に該当のテーマリポジトリを入力して実行すると、ブログに必要なファイルや構築される。

library(blogdown)
new_site(sample = FALSE, 
         theme  = "jbub/ghostwriter")

RStudioを利用している場合、blogdown::new_site()を実行した段階でViewerパネルにブログページが表示される。これはブログをプレビューするserve_site()の実行結果となっている。

ディレクトリ構成

簡単に説明。

blog/
  |- archetypes/
  |- config.toml
  |- config.yaml
  |- content/
      |- page/
      |- post/
          |- hello-world.Rmd
          |- hello-world.html
      |- project/
  |- data/
  |- docs/
  |- layouts/
  |- public/
  |- static
      |- img/
  |- themes/
      |- ghostwriter/

config.toml, config.yaml

ブログの大まかな設定。SNS連携や独立ページなどの管理。linkedinなども紐付けられるが、今はしていない。

大事そうなこととして、個別ページのURLは/:year/:month/:day/:filename/という形式になっている。

contentフォルダ

ここに書いた記事やファイルの内容がserve_site()実行時に反映される。重要

dataおよびstaticフォルダ

staticフォルダはブログ全体で利用する画像やcssなどの静的なファイルを保存するのに向く。dataフォルダはRで使うデータを置いておくと良いのかも(公開されることに留意)。

publicおよびdocsフォルダ

serve_site()を実行すると、configやthemeの設定に従い、contentフォルダの内容がpublicフォルダに反映される。このフォルダの内容をdocsフォルダに移動することでページが公開される

themes

テーマファイルが置かれている。ブログ全体のレイアウトやデザインを変更する場合にはこの中のファイルをいじくることになる。

記事の追加・更新

RMarkdownで書く。

---
title: "ホクソエムブログの作り方"
author: "Shinya Uryu"
date: 2017-03-29T19:40:14-09:00
tags: ["sample"]
---

というyamlフロントマターをテンプレートとして用いる。tagsの部分は["hoge", "fuga", "piyo"]のようにクオテーションで囲み、カンマ区切りで記述することで、tags/hogeページに記事がまとめられる。

print("teramonagi")
## [1] "teramonagi"
# plotはそのまま貼り付けられる
library("yeah")
teramonagi()

記事が完成したらserve_site()を実行。表示を確認し、publicフォルダを丸ごとdocsフォルダとしてコピー、GitHubにプッシュすることで公開となる。

Enjoy!