読書とプログラミングを中心とした覚書ブログ

読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。

GitHubへのWEBサイト作成用Markdown原稿をプレビューする環境をセットアップ

 公開日     更新日  2016/01/24

     

steelwork-1031611-2

ソースリポジトリ管理サービスで一番有名であるGitHubにアカウントを取得後、GitHub上にWEBサイトを作ろうとしました。
ちなみにGitHubでは、Markdown形式の書式で書かれたWEBサイト用の原稿ファイルをアップロードすると、自動でHTMLに変換して公開する機能が提供されています。
GitHubでは、この変換にはJekyllというHTML自動生成ツールが使用されていると表記されています。

GitHubサイトにはGitHub用にカスタマイズされた公式のJekyllセットアップ手順が公開されてますが、私はJekyllについての知識がなかったため、公式の手順だけで進めた場合に盛大にハマってしまったので、やるべきことを整理しました。

このドキュメントは、このときのWindows上でJekyllを使えるようにする手順になります。

GitHubの公式手順を使ってJekyllをセットアップ

GitHubの公式ページにてまとめられているJekyllインストール手順のページと、Ruby DEVELOPMENT KITインストール手順のページに詳細に載ってはいます。

順にこなしていけばよいはずですが、Jekyllインストール手順の1番目にある関連ツールのインストールで失敗してしまってたため、後続する手順がまるで先に進めませんでした。
原因は手順に書かれていない余計な削除操作をやったためではあるのですが、書かれていなくとも普段から体に染み付いた動作であったので、説明がない点がちょっと不親切だと感じましたので、以降ではすこし補足を加えた、今回やったことを順に書いておきます。

Ruby関連ツールの対象バージョンと配布サイト

ツールのインストール手順

  1. Rubyのインストール
    配布サイトにあるRubyInstallersのセットアップEXEをダウンロード。
    ダブルクリックしてガイドに従って進める。
    途中にある環境変数PATHへrubyコマンドへのパスを追加するチェックボックスをオンにする。
    なお試してませんが、このチェックボックスをオンにしなくても、スタートメニューに追加されるRubyコマンドプロンプトを実行しておけばよさそうです。
    私は任意のコマンドプロンプトで作業したいためオンにしました。
  2. Ruby DEVELOPMENT KITのインストール
    Jekyllインストール手順に直接かかれてませんが、これを飛ばして進めると、Jekyllのインストール時に次のようなエラーが出るので必須だった模様です。

    同じく配布サイトにあるDEVELOPMENT KITのセットアップEXEをダウンロード。
    こちらは実行したディレクトリにフォルダがたくさんできるのでダウンロードしたディレクトリで実行するとびっくりします。
    また超重要ですが、展開したディレクトリは削除してはいけません。
    そのため、Rubyインストールディレクトリの中にRubyDevKitなどのディレクトリを作って展開。
    展開したら次のコマンドを実行

    この直後に、RubyDevKitディレクトリを削除してしまったのがはまったポイントです。削除せずに進めましょう・・・。
  3. Bundlerのインストール
    配布サイトにあるとおりにコマンドを実行。
  4. Gemfileファイルの作成
    メモ帳等のテキストエディタで次の内容のファイルを作成。3行目のwdmはJekyll実行時に設定するように指示がありました。
  5. Jekyllのインストール
    上記Gemfileを使ったインストールを実行。

Jekyllサイトのセットアップ

  1. Gitリポジトリのクローン
    あらかじめGitHubへユーザ登録を済ましておき、次のようにチェックアウトします。
  2. Jekyllのサイトディレクトリを作成
    特に気にせず指示通りに以下を実行。Jekyllは新しいディレクトリでないと新規作成できないようです。

以上でJekyllのインストールとセットアップは完了です。
MarkDownで原稿作成、Jekyll serveでの動作確認など今のところ支障なく動作するようになりました。

レスポンシブ広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

  関連記事

WindowsへGitとSmartGit/Hgのインストール&セットアップ

SourceTreeは綺麗で使いやすかったのですが、Git-Flow機能がどうし …

SourceTreeのGit-Flow機能は納得の行かない動作をする

以前、こちらの記事(WindowsへGitとSourceTreeのインストール& …

Android Studioをインストール

せっかくタブレットをゲットしたので、勉強も兼ねてAndroidアプリ開発をはじめ …

PS1スクリプトを動かすための設定

PowerShellは最近のWindowsで追加されたスクリプト言語で、今のWi …

Visual Studio CodeでPHPファイルのフォーマッタを使う

突然ですが、最近Visual Studio Codeを使ってPHPアプリの開発に …

スマホやタブレットからパソコンを起動する

我が家のパソコンはリビングから離れた部屋にあるので、ちょっとした作業をするために …

WindowsへGitとSourceTreeのインストール&セットアップ

STINGERテンプレートへの独自の修正が多くなってしまったので、変更箇所の目的 …

ログインページの表示を自分だけ許可することでセキュリティ確保

WordPressのログインページは、他一般的なWEBサービス同様にURLが固定 …

EclipseのGradleプロジェクトでJMockitを使う設定をする

Javaの開発で使うツールと言えば、EclipseとJUNITは絶対にはずすこと …

GitHubへのWEBサイト作成用Markdown原稿をプレビューする環境をセットアップ