はだだだだ

定食にサラダは不要だと思う。

MENU

ホームページをレンタルサーバーからGitHub Pagesに移してみた

勉強

これまでXFREEのレンタルサーバーにホームページを作り、そこにRの勉強で作った資料などをあげていました。無料で広告も入らないため不満はなかったのですが、3ヶ月に1度更新処理（ログインして更新ボタンを押す）が必要なことと、更新するたびにローカルでhtmlファイル作成→FTPソフトでファイルのアップロードを行う必要があるため、少し面倒だなと思っておりました。

そこで、GitHub Pagesにホームページを移動することにしました。
また、ホームページの内容をＲで管理できるようにR Markdownでホームページを書くことにしました。

移動前のホームページ

http://hadadada00.html.xdomain.jp/
（2019/11/30以降は期限切れで見られなくなると思います。）

見た目はこんな感じです。
f:id:hadadada00:20190901174517p:plain

XFREEサーバーの中身はこんな感じです。
f:id:hadadada00:20190901174620p:plain

index.htmlはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>hadadada00</title>
 </head> 
 <body>
  <h1>hadadada00</h1>
  <h3>blog</h3>
  <a href="https://hadadada00.hatenablog.com/">はだだだだ</a><br>
  <h3>report</h3>
  <a href="http://hadadada00.html.xdomain.jp/gsw_2016_2017.nb.html">Data analaysis on Golden State Worriors in 2016-2017 season.</a><br>
  <a href="http://hadadada00.html.xdomain.jp/NBA_players_height.html">NBA playears' height.</a><br>
  <a href="http://hadadada00.html.xdomain.jp/homestates.html">NBA playears' home states.</a><br>
  <h3>data</h3>
  <a href="http://hadadada00.html.xdomain.jp/gdp.csv">gdp.csv</a><br>
  <h3>web application</h3>
  <a href="https://hadadada00.shinyapps.io/google_trends/">Google Trends downloader</a><br>
  <br>
  <br>
  <br>
  <footer>(c) 2019 hadadada00</footer>
 </body> 
</html>

レポジトリの作成

githubにログインしてレポジトリの新規作成を行います。

f:id:hadadada00:20190901173117p:plain

ディレクトリ名を[username].github.ioにします。

f:id:hadadada00:20190901173400p:plain
注意：ブログ用に後からスクショを撮ったためエラーになってます。

ホームページ用のR Projectの作成

次に、GitHub Pagesの内容をＲで管理できるように、R Projectを作成します。

R Studio > New Project > Version Cotrol > Git と進み、先ほど作成したリポジトリのURLを入力します。
f:id:hadadada00:20190901174043p:plain

これでR studioからホームページを更新できるようになりました。

ホームページをR Markdownで作成する。

R Markdownファイルを格納するためのRmdフォルダを作成します。

f:id:hadadada00:20190901175354p:plain

Rmdフォルダ内に、index.Rmdという名前でファイルを作り、このスクリプトからホームページのトップページになるindex.htmlを作成します。
index.Rmd

---
title: "hadadada00"
author: "hadadada00"
date: "2019年9月1日"
output: html_document
knit: (function(inputFile, encoding) {
  rmarkdown::render(inputFile, encoding = encoding, output_dir = "../") })
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## blog

- [はだだだだ](https://hadadada00.hatenablog.com)

## report

- [Data analaysis on Golden State Worriors in 2016-2017 season](https://hadadada00.github.io/html/gsw_2016_2017.nb.html)
- [NBA playears' height](https://hadadada00.github.io/html/NBA_players_height.html)
- [NBA playears' home states](https://hadadada00.github.io/html/homestates.html)

## data

- [gdp.csv](https://hadadada00.github.io/csv/gdp.csv)

## package

- [nbastats](https://github.com/hadadada00/nbastats)

## web application

- [Google Trends Downloader](https://hadadada00.shinyapps.io/google_trends/)

ポイントはyamlヘッダに以下を追加していることです。

knit: (function(inputFile, encoding) {
  rmarkdown::render(inputFile, encoding = encoding, output_dir = "../") })

参考：
r - Rmarkdown directing output file into a directory - Stack Overflow

これをすることでR Markdownファイルは/hadadada00.github.io/Rmdフォルダの中に格納しておき、生成されるindex.htmlは1つ上の/hadadada00.github.ioフォルダに作成されます。

後は以前XFREEサーバーにアップしていたhtmlファイルやcsvファイルをそれぞれhtmlフォルダとcsvフォルダの中にコピーしてRStudioからgithubにcommit > pushをすれば完了です。

ローカルのR Projectのフォルダ構成は以下です。
f:id:hadadada00:20190901180026p:plain

実際に作成したホームページが以下です。
https://hadadada00.github.io/

以上