[TOC]

このサイトの作り方(GitBookを用いて公開用の簡易的なサイトを作成)

概要

このサイトを作る具体的な手順を説明する

GitBookを用いた共有サイト作成の概要と注意点はココをクリック

作成詳細

  1. Node.jsをインストール

    GitBookを使うのに必要なNode.jsをインストールします.手順は上記サイトを参考にしてください

  2. GitBookでホームページ(HTML)を作成するサンプル

    (必要ないかも) 上記を参考にしてこのサイトより簡単なページを自分で作成してみて下さい

  3. このサイトを作成するための元ファイルを始めから書くのは面倒なので,以下のコマンドで持ってくる(25MB) $git clone https://github.com/akirat1993/ToyGitBook.git

    ディレクトリ構造は以下になっているはず

    ToyGitBook/
        src/
            README.md
            SUMMARY.md
            book.json
            md/
                sample1.md
                toygitbook.md
        docs/
    
  4. Gitの管理下から外す+作成済みのホームページ(docs/以下)を削除する

    $cd ToygitBook

    $rm -rf .git

    $rm -rf docs

  5. 目次をsrc/SUMMARY.mdで作成する.(git cloneをしている場合は作成済み)

    # Summary
    
    * [このサイトの作り方](./README.md)
    * サンプル
        * [サンプル1](./md/sample1.md)
        * [サンプル2](./md/sample2.md)
    

    ※ファイルパスはSUMMARY.mdから見た相対パスを表示

    * [ホームページ上での表示](ファイルパス)という風に階層的に記述

  6. src/SUMMARY.mdに記入したマークダウンファイルを作成

    git cloneした場合は既にsrc/README.md,src/md/sample1.md,src/md/toygitbook.mdファイルが作成済みのはず.

  7. 必要なパッケージをsrc/book.jsonに記載(git cloneした場合は既に下記のように記載されているはず)

    {
      "plugins": [
        "mathjax-commonhtml"
      ],
      "pluginsConfig": {
        "mathjax":{
            "forceSVG": true
        }
      }
    }
    

    mathjaxは数式を扱うためのプラグイン

  8. パッケージをインストール

    1. book.jsonがあるディレクトリに移動

      $cd ToyGitBook/src

    2. パッケージをインストール

      $gitbook install

      →同じディレクトリ内にパッケージを含んでいるnode_modulesが作成される

  9. ローカルにホームページ(.htmlファイル)を作成+確認

    1. $cd ToyGitBook

    2. ホームページを作成+確認

      $gitbook serve src docs

      コマンドはgitbook serve [SUMMARY.mdがあるディレクトリ] [ホームページの出力先]

      Serving book on http://localhost:4000と表示される

      →ブラウザ(Safariなど)を開いてURLにhttp://localhost:4000と打ち込むとホームページが表示される.(表示中にsrc以下のファイルをいじると表示がおかしくなる)

      →終了する場合はControl+Cなどで中断すれば良い.終了ごとにdocsというディレクトリが作成されていることを確認

  10. GitHubで共有

    1. GitHubで新規でpublicリポジトリを作成しToyGitBookをその管理下におく.
    2. Setting>GitHub Pages>SourceのところをNoneからmaster branch/docs folderに設定

results matching ""

    No results matching ""