Skip to content

Instantly share code, notes, and snippets.

@narutaro

narutaro/gist-as-a-blog-platform.md

Last active November 8, 2024 00:37
Show Gist options
  • Save narutaro/ddcf6a91c863f9561124d8d64320c01b to your computer and use it in GitHub Desktop.
Save narutaro/ddcf6a91c863f9561124d8d64320c01b to your computer and use it in GitHub Desktop.
Download ZIP
Gist as a blog platform
Raw
gist-as-a-blog-platform.md

Gistをブログプラットフォームとして使う

いろいろ試した結果、Web上になんか書く時には，とりあえずGistに書いておいて，それをGitHub pagesで束ねるだけでこんな風にそれなりにブログっぽくなっていいんじゃないかと思うにいたったので，そのことについて書こうかと思う．ソースはこちら．

やったこと

GitHub pagesを設定する

GitHub Pagesにコンテンツをホストする方法はいろんなところに書かれているので省略．今回はHTMLにビルドしてからpushするのではなくて，.mdファイルのままpushして，GitHub pagesのJekyllにビルドを任せるやり方．

テーマまわり

  1. GitHub pagesのデフォルトテーマの一つをとってきて，ちょっといじる．デフォルトデーマはレスポンシブでiPhoneで見るときもいい感じ．
  2. サイトの記事部分は埋め込みGistを使うので，埋め込みGistのCSSをいじって（上書きして）サイトのテーマになじませる
  3. テーマはJekyllのお作法に合わせ_layoutにおく

記事を書くとき

  1. 書きたいことをGistにマークダウンで書いておく
  2. 書いたことを束ねるインデックスページindex.mdをつくる
  3. index.mdから書いておいたGistへリンクする．各記事は埋め込みGistとして表示される．つまり，各記事のxxx.mdファイルは単にGistへのリンクになるので中身はたとえば以下のようになる
---
author: narutaro
---
<script src="https://gist.github.com/narutaro/ddcf6a91c863f9561124d8d64320c01b.js"></script>

Gistでイメージを使うとき

finnブログなので，イメージを貼り付けたいことがある．GitHubではリポジトリのIssuesにイメージのコピー&ペーストができる．しかも，イメージをペーストした時のIssuesのソースを見るとイメージへのURLがマークダウンな書式で見える．つまり，イメージのホストおよびURL管理もGitHub上で一元的にできる．これ結構いい．FlickrとかS3とかDropboxとか別の場所にイメージを置いてそこへリンクするといった，めんどくさいことをしなくてもよい

なにがいいのか？

  1. GitHubのマークダウンだとテーブルとかいろいと書ける．GistはWebUI上でもgit cloneしてからローカルでも作成・編集できる
  2. GitHub Pagesを使うと，ビルドの部分はpushした時にGitHub側のjekyllがやってくれるので，基本的にマークダウンファイルだけを管理すればよい（静的サイトジェネレータでローカルでビルドしたHTMLをどこかにホストするとかしなくてよい）
  3. 各記事は埋め込みGistとして扱うので，WebUIでGist書き換えたらブログ側にも即反映．さらにコードハイライトとか，いろいろ便利なもんがついてくる
  4. 管理系の機能たとえばコメントや過去記事検索もついてくる．コメント書きたい人は，オリジナルのGistに行けばコメント機能があるので，コメント機能を別途用意しなくても良い．自分の過去記事の検索したいときは，Gist側で検索できる
  5. テンプレートとか設定をいじりたければ_layoutsとか_config.ymlとかJekyllの設定をいじればよい
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment