Re:Github-pagesでblogを立てた

Re:GitHub Pagesでブログを立てた

テスト期間中ではありますが、今年も12月になってしまいました、なぜクリスマスに縁のない人類がクリスマスまでカウントしないといけないのか、私には全くわからないわけですが、去年に引き続き今年も東京高専プロコンゼミではアドベントカレンダーをやるみたいです、ところで今年はカレンダーが2つあるので勢いで1,2,12,21日目合計四日間分抑えてしまいましたのでとにかく書かなければなりません。

さてお約束、
この記事は東京高専プロコンゼミ(SPC同好会) その1 Advent Calendar 2018 1日目の記事です

(今年はその2もあるみたいです)

動機

タイトルがRe:なので察した方は察したと思いますが実は去年のアドベントカレンダーでも、GitHubPagesを使ってblogを作ることを記事(魚拓)にしていたのですが、見てもらえればわかりますがそれから一年間投稿なし、何故か? 

ディスアド

  • 不便 => 投稿するのにマークダウン作成するだけでなく、色々いじる必要があった
  • ダサい => デザインセンスがないのでお察し
  • パフォーマンスが悪い => ajaxでマークダウンを取得して”フロントで”htmlに変換->表示みたいなことをやっていた、表示するのに時間がかかった

    => 完全に”四角い車輪の再発明”だった

    GitHubPagesなどの静的ホストでブログを運用するためのプロジェクトはすでにある、OSSのありがたみを感受すべきだった

というわけでA fast, simple & powerful blog frameworkであるHexoを使ってブログを立てたというお話

Hexo

普通は(というかPagesのデフォルト)でメジャーなjekyllというのがあるのですが、なんとなく癪なのでHexoを使うことにしました
docs GitHub

トップページを要約すると、
速い
マークダウンサポート
簡単にデプロイできる
プラグインが豊富

やるべきこと

1
2
3
4
5
6
7
8
9
10
11
sudo pacman -S yarn 
yarn global add hexo-cli
hexo init blog
cd blog
yarn install

#開発用サーバー
hexo server

#静的ファイル生成
hexo generate

これだけ!簡単!!

実際はこの他にymlの設定フィアルをいじっています,まあ直感的なのであまりつまることは少ないと思います。

投稿方法

1
hexo new hoge-title

sources/_post/hoge-title.mdが生成されます
そのファイルを普通のマークダウンと同じように編集すればよいだけ

テーマの導入

はじめは見た目で選んでmaterial-flowにしようとしたのですがドキュメントが中国語なのと完成度か低い部分があったのでGitHubスターでソートして最終的にnextにしました満足

導入方法はドキュメントに書いてあるとおりとても簡単、OSS素晴らしい

GitHub Pagesに乗っける

GitHub Pages、GitHubが静的サイトのホスティングをやってくれるやつ.
今回は静的ファイル生成先を/docsにしてそこをGitHubPagesに乗っけてもらってます

ファイルはすべてGitHub tyuto/blogに上がってます

無料ドメイン

GitHub students + namecheapでもらえる.meドメインを使っています,ただ1年間しか無料でないのでその後は20$くらい払う必要があります、まあしょうがない

終わりに

なんかしょぼい記事になってしまった気がするのですが、勘弁してください明日はちゃんと書くので勘弁してください。
あとはじめにも書きましたが、東京高専プロコンゼミアドベントカレンダー、今年は2つあるのですぜひ合わせてそちらもご覧ください。
今日(12/1)

明日 (12/2)