Skip to content

Latest commit

 

History

History
279 lines (183 loc) · 10.3 KB

README-ja.adoc

File metadata and controls

279 lines (183 loc) · 10.3 KB
Raw

HubPress

HubPress とはなにか？

editor

HubPress は無料でブログを作るためのオープンソースツールです。

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

Note
 HubPress はまだ作成途中です。バグを発見した場合は是非教えてください。

HubPressの更新が勢いに乗れば、それだけドキュメントも更新されます。 定期的にHubPressの更新を確認し、新しい機能・使い方を確認して下さい。

Getting Started

インストール

リポジトリのフォーク

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

github.io ドメインの使用

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

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

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

  2. hubpress/config.json の設定

    Edit config

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

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

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

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

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

    Install complete

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

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

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

    Settings gh-pages

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

    Install complete

  3. hubpress/config.json の設定

    Edit config

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

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

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

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

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

    Install complete

管理画面

HubPressの管理画面は /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/ を見てください。

Site

Title と Description

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

Logo や Cover Image フィールドには

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

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

が設定可能です。

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

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

Google Analytics

Google Analytics フィールドの設定により ブログサイトで Google Analytics を利用可能です。

Disqus Shortname

The Disqus shortname field takes your Disqus URL/shortname that is specified when you register a new site for Disqus. Only the shortname is required, not a link to your profile page.

Social Network

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

投稿の管理

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

HubPressで記事を書く

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

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

AsciiDoc Blog の基本知識

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

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

  • 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を利用する

You can use a single issue as an image container for a blog post containing many issues by uploading multiple images as comments. Alternatively, you can use multiple issues to store individual images. Whatever works best for you, and your organization style. Watch this five minute video for a demonstration about how to use GitHub Issues and Cloud Hosting services as embed targets, and some bonus tips on using the image AsciiDoc syntax 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するだけでアップデートできます。

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

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