README-ja.adoc

HubPress

HubPress とはなにか？

HubPress は無料でブログを作るためのオープンソースツールです。AsciiDocで書けるすばらしいブログをGitHub Pagesを使って公開できます。

Anthonny Quérouil (twitter @anthonny_q) により作成・メンテナンスされています。

Note	HubPress はまだ作成途中です。バグを発見した場合は是非教えてください。開発チームができる限りはやく対応します。

HubPressの更新が勢いに乗れば、それだけドキュメントも更新されます。 定期的にHubPressの更新を確認し、新しい機能・使い方を確認して下さい。 バグ報告はいつでも歓迎です。もちろんプルリクエストは*いつでも*大歓迎です。

対応ブラウザについて

HubPressは、デスクトップ版Chrome、デスクトップ版FireFox、そしてAndroid版Chromeで動作することを確認しています。

Getting Started

インストール

リポジトリのフォーク

Fork アイコンをクリックして、自分の GitHub アカウントにリポジトリのコピーを作成してください。

github.io ドメインの使用

もしあなたがGitHub Pagesを利用したことがなければ、ここに記載の方法で 簡単に HubPress をセットアップできます。 ほんの数ステップで HubPress がデプロイされ利用可能になります。

Important

「username.github.io ドメインを他プロジェクトで利用済みである」あるいは「独自ドメインで HubPress を利用したい」場合, 下記のステップは読み飛ばしてください。

1. リポジトリ名を <username>.github.io に変更

2. hubpress/config.json の設定

   

   なお、以下のパラメータは必須です。

   • username: GitHub のユーザー名です。

   • repositoryName: フォーク後のリポジトリの名前。 <username>.github.io

3. 変更をコミットし, https://<username>.github.io/ ドメインで GitHub Page を公開。

4. 以下のような画面が出れば、HubPressは正しくセットアップされています。

   

「username.github.io ドメインを他プロジェクトで利用済みである」あるいは「独自ドメインで HubPress を利用したい」場合

やや多めに設定が必要です。

1. リポジトリの設定からデフォルトのブランチを gh-pages に設定

   

2. gh-pages ブランチに移動。

   

3. hubpress/config.json の設定

   

   なお、以下のパラメータは必須です。

   • username: GitHub のユーザー名です。

   • repositoryName: フォーク後のリポジトリの名前。特に変更していないなら hubpress.io

4. 変更をコミットし, https://<username>.github.io/<repositoryName>/ で GitHub Page を公開。

5. 以下のような画面が出れば、HubPressは正しくセットアップされています。

   

管理画面

HubPressの管理画面は /hubpress からアクセスできます。つまり

• https://<username>.github.io/hubpress/ (github.ioドメインを利用している場合 )

• https://<username>.github.io/<repositoryName>/hubpress/ (Project Pageを利用している場合)

• http://<yourdomain>/hubpress/ (独自ドメインを使用している場合)

です。

管理画面へのログイン

GitHub のログイン情報でログインできます。

一旦ログインすると、HubPress から GiHub API へコールするためのトークンが発行されます。

このトークンは HubPress の全セッション間で共有されます。 そのためPCで管理画面を開いた後、タブレット端末でも開いた場合は トークンはPC,タブレット両端末で使われます。

ページの設定

CNAMEやページングといった、基本的なブログの設定が可能です。 またあなたのソーシャルアカウントとブログを紐付けすることもできます。

Meta

この節は /hubpress/config.json ファイルで変更可能な基本情報についての説明を含みます。

Git CNAME を設定可能して独自ドメインの利用が可能です。 詳しくは https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/ を見てください。

Live Preview Render Delayの項目について

ミリ秒単位で、ライブプレビューが描画を始める時間を設定できます。 タイピングが早い人には、2000 (2秒) 以上の数値を入れることをオススメします。そうすると何度も頻繁にライブプレビューの描画をさせずに済むので、ブログの執筆がスムーズになるでしょう。2000(2秒)より少ない値を設定する場合は、ライブプレビューがはじまるのが早くなりますが、タイピングのカーソルに遅れなどが生じる可能性があります。

Site

Title と Description

Title や Description フィールドにより ブログタイトルや, その説明を設定することができます。

Logo や Cover Image フィールドには

• ホスティングサービス上の画像へのHTML リンク。 例. gravatar

• /images ディレクトリ内の画像へのリンク

が設定可能です。

Note	ブログへの画像の投稿については /images/README.adoc を参照してください。

Theme

/themes ディレクトリの中にあるテーマ名を指定することで、ブログテーマを選択可能です。

Google Analytics

Google Analytics フィールドの設定により ブログサイトで Google Analytics を利用可能です。(例 : UA-1234567-1)

Disqus Shortname

*Disqus shortname*の項目はあたらしく用意したDisqus URL/shortname を入れることができます。shortnameだけでよいです。プロフィールページへのリンクは入れないでください。

Social Network

Social Network グループ内のフィールドには 公開プロフィールページヘの URL を入力してください。 ブログ上での表示方法はテーマの設定次第です。

投稿の管理

はじめて HubPress を利用する際には Posts はまだありません。 ブログに投稿をすると、左側に記事のリスト、右側にプレビューの形で表示されます。

HubPressで記事を書く

Note	もし AsciiDocに馴染みがなければ AsciiDoctor Writer’s Guide で勉強して下さい。

HupPress エディタは左側に AsciiDoc のコード、右側にプレビューを表示します。

Blog のタイトルとヘッダー

記事のタイトルは常に AsciiDoc 投稿における Level 1 となります。 つまり = Blog Title により 記事のタイトルを Blog Title に設定できます。

記事の保存には = Blog Title が１つ必要です。

もし 1st-level のヘッダーを使いたければ代わりに == First Level Heading を使ってください。 ネストしたヘッダも同様です。

HubPress パラメーター

HubPress allows you to alter characteristics of each blog post using attributes.

カバー画像

記事にカバー画像を追加したい場合 hp-image 属性を追加する必要があります。

例:

= Blog Title
:hp-image: https://github.com/<username>/<repositoryName>/images/a-cover-image.jpg

Note	HubPressは`/images`ディレクトリをすべての画像のルートとしているので、あなたがすればよいのは画像のファイル名を記述することだけです。これを踏まえると、あなたは`/covers`というカバー画像を一括で置いておくためのディレクトリをリポジトリに作成するとよいかもしれません。 一貫性のあるカバー画像の名前付けのおかげで、投稿にカバー画像を掲載するのも簡単にできます。テーマ画像を設定すれば、読者にブログの内容を視覚的に訴えることができます。

現在以下のテーマが投稿のカバー画像をサポートしています:

• Saga

公開日

公開日はデフォルトで記事を作成した日になります。 published_at 属性を設定することにより、公開日を指定することができます。

例:

= Blog Title
:published_at: 2015-01-31

タグとカテゴリ

Note	カテゴリはサポートしていません。

hp-tags 属性により、タグを複数追加できます。

例:

= Blog Title
:hp-tags: tag1,tag2,tag3

代替タイトル指定のための :hp-alt-title:

hp-alt-title 属性を利用して記事に別名タイトルを指定することが出来ます。

これはHubPressが生成するHTMLのファイル名になります。

Note	特に日本語のタイトルはそのままではファイル名がおかしくなるので絶対に指定してください。

例:

= 日本語のタイトル
:hp-alt-title: My English Title

画像の追加

GitHubリポジトリにpushする

GitのコマンドラインやGitアプリを使ってブログ投稿に画像を追加できます。

1. 画像を`images`にコミットする

2. ブログ投稿内にAsciiDoc文法に従って:

image::<ファイル名>[]

1. See http://asciidoctor.org/docs/asciidoc-writers-guide/ for complex examples of Image syntax.

もし他所にホストした画像(例えばinstagram, 他のGitHubリポジトリ,あるいはその他の画像ホストサイトなど)を埋め込むには、`<ファイル名>`に画像への完全なURLを指定してください。

Hosted Image Embed

image::http://<full path to image>[]

画像のホスト先としてGitHub issueを利用する

ひとつのissueにコメントで残していくような方法でブログ用の画像を用意したり、反対にたくさんのissueを作って画像を個別に管理することもできます。あなたにとって、あるいはあなたの組織にそってベストなやり方が選べます。 5分間のデモビデオを用意してあります。GitHub Issuesなどのクラウドホスティングサービスで画像を埋め込む方法とAsciiDocで画像を取り扱う方法がわかります。 https://www.youtube.com/watch?v=KoaGU91qJv8

動画の埋め込み

HubPressでは、ブログ記事内で簡単な記述で動画を埋め込むことが出来ます。動画への完全なURLは必要ありません。必要なのは動画固有のIDだけです。

video::[unique_youtube_video_id][youtube | vimeo]

YouTube動画の埋め込み

video::KCylB780zSM[youtube]

Vimeo動画の埋め込み

video::67480300[vimeo]

HubPressのアップデート

HubPressはGitHubにホストされているので、HubPressのmasterリポジトリから最新の変更をpullするだけでアップデートできます。

初めてですか？次の動画で(コマンドライン操作を必要としない)簡単で正しい方法を学びましょう。(もちろんコマンドラインからでも問題ありません。)

https://www.youtube.com/watch?v=KCylB780zSM

Troubleshooting

何かうまくいかないことがあったら、以下のTipsをご参照ください。

Resetting Blog Database on Android

ときどきHubPressのLocalのデータベースが公開済みのブログのデータと同期されないことがあります。これはPCからブログを書いて、作業をタブレットに引き継ごうとしたときに発生します。

HubPressはブラウザに結びついたデータベース上で動作しています。デバイスを変更すると、ブラウザも変更されるため、同期がされなくなるということです。

この問題を解消するためには、設定→(詳細設定)プライバシー→閲覧履歴データを消去するのボタンからキャッシュを選び削除してください。

Credits

Thanks to Jared Morgan for initially tidying up the README you see here, and continuing to be the "docs guy" for HubPress.

日本語訳: takkyuuplayer, hinaloe