«

Github PagesでJekyllをCloud9から動かす

今まではPHPとか他の言語で開発をした経験はあるけど、 Rubyの勉強をはじめたい、勉強の記録を残すためにブログを合わせてはじめたい
最近はGithub Pagesを使ったブログが増えてきてるらしいし、やってみようかな?

・・・ああ、異次元の言葉が並びすぎてて全然理解出来ない そもそも、どんな開発環境で手を付けたら良いのかすらイマイチわかんない・・・

そんな人(自分)向けの参考記事が露ほども見つからなかったので いつか同じことで困った人向けに実際に更新・運用できるまでのステップメモ


求められる知識レベル

やること

  1. Githubに登録しリポジトリを作成
  2. Cloud9に登録する
  3. JekyllをCloud9上にインストールする
  4. Jekyllテーマを導入する
  5. ブログを見てみる
  6. 実際に更新を続けるにあたって

1. Githubに登録しリポジトリを作成

レンタルサーバにお金を払い、ダサいサブドメインで運用する時代は終わった

兎にも角にもGithubに登録してリポジトリを作る
リポジトリ名は下記のGithub Pagesのページを参考に

| Github Pages |
https://pages.github.com/

上記URLの公式ドキュメントは英語だけど、簡潔明瞭に書いてあるので多分わかる

日本語が良い人は、星の数ほど参考記事があるので 「Github Pages ブログ」とかで検索
どのページも画像付きで懇切丁寧に書いてくれてる。みんな優しい


2. Cloud9に登録する

| Cloud9 | 最強のブラウザベースIDE
https://c9.io/
ブラウザで利用できるIDE。環境構築も自在でターミナルも全部使える。

ローカルマシンに開発環境を導入しようとすると、ライブラリレベルならまだしも 言語自体のバージョンの管理とか非常に大変ですよね
特に、勉強段階だと試行錯誤の仮定でインストールを繰り返し、ふと冷静になった時にWindowsのコントロールパネル開いて発狂
…そんなJavaや.netの悪夢を繰り返す必要はもうありません

勉強中の段階なら尚更。とりあえずコレ登録して使えるようにしておく

プログラミングの開発環境に便利!Cloud9の使い方 https://techacademy.jp/magazine/6168

workspaceは必要最小限の構成で良いので Blank を選択


3. JekyllをCloud9上にインストールする

Github Pagesで利用するライブラリを纏めてインストールしてくれる gem が用意されているのでCloud9のターミナルで下記コマンドを実行

$ gem install github-pages

Rubyライブラリについて
https://www.ruby-lang.org/ja/libraries/

github-pagesのgemをインストールしたら必要なものは全て揃ったので、さっそくCloud9のworkspaceでjekyllのプロジェクトを生成する

$ jekyll new .

bundler については今回は割愛
参考になる記事を貼っておきます

Bundler概要 - Qiita
https://qiita.com/hisonl/items/162f70e612e8e96dba50


4. Jekyllテーマを導入する

テーマをカスタマイズしない人は _config.ymltheme: を変更するだけ
※ 下記のテーマ変更に必要な gem は github-pages でインストールされる

| Jekyll Github-Pages Theme | Github-Pages公式対応のJekyllテーマ https://pages.github.com/themes/ 実際の設定方法はそれぞれのリポジトリの README.md に書いてある

自作のテーマを反映させたい人は _config.ymltheme: の指定をしないで、直接レイアウトのファイルをCloud9のworkspaceにぶち込めばいける


5. ブログを見てみる

ターミナルからJekyll serverを起動してどんな感じに表示されるかチェックする

$ jekyll serve --host $IP --port $PORT

URLは https://WORKSPACE-USERNAME.c9users.io/ になる

Cloud9とGithubのSSH認証をする

Cloud9からGitHubへpush - バンコク開発日誌
http://tanahiro.hatenablog.com/entry/2016/02/19/184142

問題なさそうだったら、Githubにpushする

git init
git remote add origin git@github.com:USERNAME/USERNAME.github.io.git
git add -A
git commit -m 'コミットメッセージ'
git push origin master

6. 実際に更新を続けるにあたって

記事を書くのに、いちいちファイルを生成するのが面倒くさいので、Rakefileを書いて簡単にファイル生成できるようにした

別の記事で書くだけ書いたのでリンク貼っておく

Github Pages + Jekyll でブログ投稿するためのRakefile
https:/masaqu.id/2017/12/19/rakefile_for_jekyll/