Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブgithub-pages

2018年5月7日 By KD コメントを書く

GitBookでドキュメントを作ってGithub Pagesで公開する方法

GitBookでドキュメントを作ってGithub Pagesで公開する方法

GitBookはMarkdownで簡単にドキュメントを作るのには便利です。作成したドキュメントはPDFやePub、静的サイトとして出力できます。今回は、GitBookで作成した静的サイトを無料のGithub Pagesを使って公開する方法を紹介します。

はじめに

GitBookはMarkdownでPDF、ePub、静的サイトなどのドキュメントを作成するためのツールです。Markdownで全て書くことができるので、ドキュメント作成がとても簡単になります。

Github Pagesは静的サイトを無料で公開できるGithubのサービスです。

今回は、GitBookで作ったドキュメントをGithub Pagesで公開しましょう。

GitBookでドキュメントを作る

まずは、GitBookでドキュメントを作りましょう。前提として、NodeJSがすでにインストールされている必要があります。

GitBookのインストール

GitBookをNPMでインストールします。

$ npm install -g gitbook-cli
$ gitbook --version
CLI version: 2.3.2
Installing GitBook 3.2.3
...
GitBook version: 3.2.3
$ gitbook --version
CLI version: 2.3.2
GitBook version: 3.2.3

GitBookを初期化する

ドキュメント用のプロジェクトを作り、初期化します。

$ mkdir project
$ cd project
$ gitbook init
warn: no summary file in this book
info: create SUMMARY.md
info: initialization is finished
$ ls
README.md   SUMMARY.md

GitBookをローカルで起動する

「gitbook serve」コマンドでMarkdownが自動的にビルドされて起動します。

$ gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 7 plugins are installed
info: loading plugin "livereload"... OK
info: loading plugin "highlight"... OK
info: loading plugin "search"... OK
info: loading plugin "lunr"... OK
info: loading plugin "sharing"... OK
info: loading plugin "fontsettings"... OK
info: loading plugin "theme-default"... OK
info: found 1 pages
info: found 1 asset files
info: >> generation finished with success in 0.7s !

Starting server ...
Serving book on http://localhost:4000

「http://localhost:4000」にアクセスすると、ローカルでドキュメントが確認できます。

Gitbook 1

後はMarkdownのドキュメントを好きなように編集しましょう。GitBookの書き方のサンプルはGitBookのGithubにあるので参考にして下さい。

Github Pagesで公開する

作ったドキュメントを公開しましょう。

GitBookをビルドする

「gitbook build」でMarkdownのドキュメントをビルドして、静的サイトのファイルを出力します。

$ gitbook build
info: 7 plugins are installed
info: 6 explicitly listed
info: loading plugin "highlight"... OK
info: loading plugin "search"... OK
info: loading plugin "lunr"... OK
info: loading plugin "sharing"... OK
info: loading plugin "fontsettings"... OK
info: loading plugin "theme-default"... OK
info: found 1 pages
info: found 1 asset files
info: >> generation finished with success in 0.7s !

GithubにプロジェクトをPushする

Github上でプロジェクトを新規作成した後、通常のgitコマンドで作ったプロジェクトをGithubにPushします。

$ git init
[master]$ ls
README.md     SUMMARY.md    _book/
[master]$ git add .
[master]$ git commit -m 'Add GitBook.'
[master]$ git remote add origin https://github.com/{YOUR-GITHUB-ACCOUNT}/{YOUR-GITHUB-PROJECT}.git
[master]$ git push -u origin master

これでGithubにPushできました。

Github PagesにGitBookをPushする

最後に、gitコマンドでgh-pagesブランチを作り、pushします。

[master]$ git checkout --orphan gh-pages
M   .gitignore
M   README.md
Switched to a new branch 'gh-pages'
[gh-pages]$ ls
README.md     SUMMARY.md    _book/
[gh-pages]$ git checkout master
M   .gitignore
M   README.md
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
[master]$ git subtree push --prefix _book origin gh-pages

後はGithub Pagesのルール通り、「https://{YOUR-GITHUB-ACCOUNT}.github.io/{YOUR-GITHUB-PROJECT}/」にアクセスすれば表示されます。

これで公開ができました。

おまけ(独自ドメインに対応する)

独自ドメインを購入してDNS設定をしたら、GitHubの独自ドメインの設定もしてみましょう。

GitHubの対象リポジトリの「Settings」から「Custom domain」を選択し、「Save」します。

Github1

独自ドメインが有効になると緑色で「Your site is published at http://yourdomain.com」のように表示されます。

SSL対応をしたい場合は、その後で、「Enforce HTTPS」にチェックをいれれば、「Your site is published at https://yourdomain.com」となり、SSLにも無料で対応できます。

最後に

いかがでしたか?これでGitBookで作成したドキュメントを無料のGithub Pagesで公開できるようになったと思います。何かドキュメントを作る機会があれば試してみて下さい。では。

カテゴリ : 技術 Tips & Tutorials タグ : gitbook, github, github-pages

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法
    AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Google Adsense(アドセンス広告)で収益を受け取るまでの手順
    Google Adsense(アドセンス広告)で収益を受け取るまでの手順
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Heroku上にNginxでリバースプロキシを構築する方法
    Heroku上にNginxでリバースプロキシを構築する方法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes