HexoのソースをBitbucketにcommitしようとしたら、

Your branch and 'bitbucket/master' have diverged,
and have 1 and 1 different commit each, respectively.
  (use "git pull" to merge the remote branch into yours)

nothing to commit, working directory clean

と警告が出た。

かまわずpushしたら、”master -> master (non-fast-forward)”といってrejectされた。

“git pull”を使え、ということのようなのでやってみたが、次の画面でなにをすれば良いのか分からない。

なにもせず「CTRL」+「X」で終了して、もう一度addから試してみようとしたら、

このブランチは 'bitbucket/master' よりも2コミット進んでいます。
  (use "git push" to publish your local commits)

とのこと。
言われた通り”git push”したら、今度はpush出来た。
「non-fast-forward」というのも検索してみたが、読んでもなんのことだかさっぱり。

便利なんだが、Gitは本当によく分からない。

タグ一覧ページで、特定のタグをクリックしてページ内リンク先に移動すると、先頭部分がナビゲーションバーに隠れてしまっていた。

検索すると下記記事が見つかった。

bootstrap の固定ナビゲーションとページ内アンカー問題 - sonots:blog

難しそうなのでナビゲーションバーを上部に固定（navbar-fixed-top）しているのをやめようかと思ったが、リンクされていたGithub上のissueを見るとCSSを使った対処法が紹介されていた。

Navbar hides initial content when jumping to in-page anchor · Issue #1768 · twbs/bootstrap

その通りstyle.cssに追記すると、リンク先の先頭部分は表示されるようになったが、使っているナビゲーションバーの高さが狭いせいか、一つ前のタグの下の部分が少し表示されている。

navbarのmin-heightに合わせて、-75px、75pxの箇所を-50px、50pxにしたら、ちょうど良い具合になった。

*[id]:before {
  display: block;
  content: " ";
  margin-top: -50px;
  height: 50px;
  visibility: hidden;
}

ーー
（追記）
その後navbar-fixed-topはやめました。

Hexoで画像を挿入する場合、画像を表示するためのタグはOctopressと同様で、

{(半角の%) img (class名) (画像へのパス) (幅) (高さ) (タイトル) %}

例えば

{(半角の%) img /images/a0960_005150_r.jpg 480 360 コスモス %}  #class名は省略

で良いようだ。
代わりに下記のようなhtmlタグを使っても良い。

<img src="/images/a0960_005150_r.jpg" alt="コスモス" width="320" height="240">

OctopressではMarkdown式のタグだと、画像をクリックしたら原寸大で表示というのが出来なかったので、htmlタグの方が良いかと思ったが、Hexoの場合、Markdownタグで画像クリック→原寸大表示が出来るようだ。

Hexoでは_config.ymlのWritingの箇所でpost_asset_folderの値をtrueにするようを推奨している。
Writing | Hexo

説明通りpost_asset_folder: trueにして新規postを作ると、postフォルダ内に.mdファイルと同名のフォルダが作成される。
このフォルダに画像ファイルを入れよということらしい。
画像を多用する場合は整理に便利なのかもしれないが、ほとんど画像を使わない場合はかえって煩雑なので、source下にimageなどのフォルダを作ってそこへ入れた方が便利そうだ。

ーー
（追記）
テーマをFreewillにしたら画像が強制的に最大表示になってしまったので、freewill/source/css/style.cssのimgの箇所でwidth: auto;、height: auto;を削除した。

サイドバーの種類にもよるが、Gitリポジトリを使ったブログにサイドバーを付けると、新規記事をdeployする際に更新するファイルが増えてしまって良くないように思う。

先日入れたテーマFreewillはその辺を考慮してか、ページネーションのページ等どうしても更新せざるを得ないページにはサイドバーを置き、個別記事のページではサイドバー領域に投稿日やタグなどを表示するよう工夫されている。
実際、新規記事をdeployしても、過去の記事はcommitされていないようだ。

ところで、Freewillには月別アーカイブが無かったので、入れることにした。

デフォルトテーマのLandscapeのarchive.ejsをそのままfreewill/layout/_widget内にコピペすると、西暦の後ろに投稿数が隙間無しにくっついていて、見栄えが良くない。

archive.ejsを修正、

<% if (site.posts.length){ %>
    <div class="widget">
        <h4><%= __('Monthly Archives') %></h4>
        <ul class="archive-list inline list-unstyled">
        <%- list_archives() %>
        </ul>
    </div>
<% } %>

freewill/source/css/style.cssにもスタイルを加えた。

/* Monthly Archives
---------------------------- */

.archive-list ul {
  padding:0 3px;
  list-style-type: none;
  line-height: 20px;
}
.archive-list-count {
    color: #888;
}
.archive-list-count:before {
    content: " (";
}
.archive-list-count:after {
    content: ")";
}

ちゃんとした知識が無く、見よう見まねなので、あまり良い記述ではないと思うが、自分としては十分満足。

ーー
（追記）
Githubのコミット歴をよく見てみたら、同じタグを使っている過去記事も更新されるようだ。
個別記事ページのタグの箇所にそのタグを使っている記事数が表示されているせいだろう。

タグクラウドやタグ一覧ページは良いとして、個別記事ページのタグには記事数は無い方が良さそうだ。

freewill/layout/_partial/post/tag.ejsの5行目から<span>' + tag.length + '</span>を削除して、タグ名だけにした。

tags.push('<li><a href="' + config.root + tag.path + '">' + tag.name + '</a></li>');

これで様子を見てみようと思う。

HexoのテーマをFreewill変えて、Disqusウィジェット内の「Share」にはTwitterのツイートボタンはあるが、それだとhttp://disq.us/…というDisqus経由の短縮URLになる様子。
普通のツイートボタンを設置したかったので、Twitter公式のツイートボタンを入れることにした。

個別の記事への設置は、Twitterサイトで「ページのURLを使う」の設定で作成したコードを/layout/_partial/article.ejsの<%- item.content %>の下あたりに追記したら問題なく表示された。 　

だがページネーションの方はlayout/_partial/post/entry.ejsにコードを挿入しても、タイトル名と一覧ページのURLしか取得出来ない。

URLとツイート本文を自分でカスタマイズする設定でコードを作成し、excerptリンクに倣って、それぞれ<%- config.root %><%= item.path %>、<%= item.title %>で挿入したが、これだと記事タイトルのみでURLが表示されない。
<%- config.root %>でブログトップのURLを取得出来ないようだ。
「Read More」（続きを読む）の部分では、ちゃんと変換されているんだが。

ブログトップのURLをパスではなく直接記載したら上手くいった。

ーーーー
（追記）
個別記事URLへのパスは<%- item.permalink %>一つで良いようだ。
ーーーー

記事を概要表示にしている時は「Read More」。全文表示にしている時はツイートボタンを表示することにして、read_moreの箇所を下記に変更した。

<% if (item.excerpt && index) { %>
  <a type="button" href="<%- config.root %><%- item.path %>#more" class="btn btn-default more"><%= __('read_more') %></a>
<% } else { %>
<div class="tweet-button">
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="<%- item.permalink %>" data-text="<%= item.title %> | <%= config.title %>" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<% } %>

ツイートボタンに対しては、source/css/style.cssに下記を追記、

.tweet-button {
  padding: 8px 0;
}

位置を調整した。

（参照記事）
jekyllのブログで投稿一覧ページにtwitterのボタンを置く - Taught by Myself

ーー
（関連記事）
Hexoブログに「はてなブックマーク」ボタンを設置

HexoのソースはBitbucketで管理しているが、Hexoのテーマを変えたところ、commit出来なくなった。

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)
  (commit or discard the untracked or modified content in submodules)

    modified:   themes/freewill (modified content, untracked content)

no changes added to commit (use "git add" and/or "git commit -a")

と表示される。

Bitbucketのソースを見ると、新しいテーマのディレクトリthemes/freewillは追加はされているが、クリックして開くことが出来ない。
何度かやり直してみたが、うまく行かない。

ためしに適当なファイルを一つpushしたらどうかと、

$ git add themes/freewill/LICENSE
$ git commit -m '修正'
$ git push

とやったらLICENSEが追加され、freewillを開くことが出来た。
その後もう一度git add .し、commit、pushしたら、他のファイルやディレクトリも追加された。

そう言えばリポジトリに初めてcommitした時も、一度contributors.txtというファイルをpushしてからでないとうまく行かなかった。
Gitというのはいきなりディレクトリ全体を追加するのは出来ない仕様のようだ。

Hexoのテーマをデフォルトのものから、Bootstrap準拠のFreewillにした。
BootstrapのテーマBootswatchというものを採用しているようで、外観を簡単に変更出来る。

他のテーマ同様

git clone https://github.com/yieme/hexo-theme-freewill.git themes/freewill

でインストール。

Freewillの_config.ymlでbootswatch:で種々のBootswatchテーマに変更出来る。
Bootswatchのナビゲーションバーには、テーマ毎に2種類のカラーバリエーションがあり、freewill/layout/_partial/navigation.ejsの2行目でnavbar-defaultとnavbar-inverse（逆の配色）のどちらかに切り替え可能。

デフォルトの設定では画面をスクロールしたりマウスが離れると、ナビゲーションバーがフェードアウト、マウスを合わせるとフェードインする仕様になっていた。
出たり消えたりがかえって邪魔だったので、themes/freewill/source/js/main.jsの7、10、17、22行目の

$(".navbar").stop().fadeTo(333, 0.2);

$(".navbar").stop().fadeTo(333, 1);

$(".navbar").fadeTo(100, 1);

$(".navbar").fadeTo(100, 0.2);

を削除したら、フェードアウトしなくなった。

navigation.ejs2行目のnavbar-fixed-topを削除すると、スクロールとともにナビゲーションバーが上方に移動。

_config.ymlの表示不要な項目は先頭に#を付けてコメントアウト。

テーマの変更でAtomフィードが表示されなくなってしまったが、freewill/_config.ymlのrss: trueをrss: atom.xmlに変更してナビゲーションバーに追加したら表示された。
layout/_partial/head.ejsのtheme.rssの箇所のlink rel="alternative"をlink rel="alternate"に変更。アドレスバーにもアイコンが表示された。

Bootstrapのテーマらしく、すっきりしていて機能的な印象。

ただ、paginationのページ上方にでかでかと表示されているJumbotronというのをどう使えばいいか分からない。
デフォルトではブログタイトルもしくはブログの説明が表示されるようだが。

これまで、無料レンタルブログやWordPress、Octopressなどを使ったブログ含めて、ずっと右サイドバーの2コラムを好んで使って来た。

ブログを始めた頃は今のように、サイドバーの無いブログはあまり見かけなかったし、サイドバーはあるのが当たり前と思っていた。
訪問者がサイドバーを見て他の記事も読んでくれるかもしれないし。

普段使っているノートパソコンの右側にテンキーが付いていて、左に寄ってパソコンに向かうことになるので、記事が正面に来るよう、右サイドバーが都合が良かった。
両側サイドバーの3コラムは少しごちゃごちゃしている感じがして、好みではなかった。。

スマホに合わせるといっても、レスポンシブルデザインならサイドバーが下に回ってくれるし、レンタルブログサービスではスマホ用のページも用意してくれている。
サイドバーの無いブログを見ても、正直なにが良いのかよく分からなかった。
だが、静的サイトジェネレーターで作ったブログをGithub Pagesにdeployするようになって、考えが変わって来た。

サイドバーがあると、一つ記事を投稿しただけで、過去のすべての記事のサイドバーも変更される可能性がある。
「最近の記事」を表示している場合は当然そうだろうし、新たにタグやカテゴリーを追加した場合、それにカテゴリーや月別アーカイブの記事数が更新される場合も同様に違いない。
（JavaScriptを用いていたら大丈夫なのかもしれないが。）

これをdeployすると、すべての記事を更新することになってしまう。
これでは非効率だし、.deploy/.git/objectsの肥大化の原因にもなるはず。
サイドバーが下にある場合も同様だろう。

Github Pagesを使うなら、サイドバーは無い方が良さそうだ。
自分のことを思い返してみても、よほど興味のあるキーワードがある時以外は、サイドバーの項目をクリックすることはほとんど無いようだ。

Hexoでは固定ページを作る際、コマンドhexo new page （ページ名）でsource/（ページ名）下にindex.mdが作成される。
tagsやcategoriesは使えないようになっている。
コメントを禁止にするには、Front Matterにcomments: falseを加えれば良い。

固定ページでは日付けも表示したくないところだが、date:の項目を消してみるても、ファイルを更新した日付けが表示されてしまう。
themes/landscape/layout/page.ejsを見ると、post.ejsと同じ_partial/article.ejsがレイアウトとして使われていた。

_partialディレクトリ下のarticle.ejsをarticle-page.ejsという名前でコピー。
4行目の

<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>

を削除。

page.ejsの

<%- partial('_partial/article', {post: page, index: false}) %>

を

<%- partial('_partial/article-page', {post: page, index: false}) %>

に変更した。

希望通り、日付けが削除された。

Hexoでトップページを表示した時、複数の記事の全文がだらだらと表示されているのは見づらいと思い、冒頭部分を抜粋した概要表示にしてみた。
やり方は簡単で、記事ソースの適当な箇所に<!-- more -->というタグを挿入するだけ。

WordPressやMovable Typeでは、200文字など決まった文字数で自動的に抜粋してくれたりもするが、Hexoでの方法は分からないので手動で挿入した。

タグを挿入すると<!-- more -->より前の部分と続きを読むためのリンクの表示になる。
リンクの文言「Read More」はHexo作業フォルダ直下の_config.ymlではなく、themes/landscape/_config.ymlなどテーマ毎の_config.ymlで変更出来る。

Octopressの場合は_config.ymlのexcerpt_link:でリンクの文言を変えられる。
また_config.ymlのexcerpt_link:で、抜粋するためのタグ自体を<!-- more -->から別のものに変更出来るようだ。

ーー
（追記）
概要表示にはしてみたが、全文表示の方が都合の良いことがあったので、あとで全ての記事から<!-- more -->タグを削除した。
_postsフォルダで端末を開き、下記コマンドですべての.mdファイルから<!-- more -->を一括削除。

$ perl -p -i.bak -e 's/<!-- more -->//g' *.md
（すべての.mdファイルに拡張子.bakをつけてバックアップを取り、ファイル内の<!-- more -->を削除）

<!-- more -->が正常に削除されたことを確認後、.bakファイルを一括削除した。

$ find . -type f -name "*.bak" -delete
（拡張子が.bakのファイルをカレントディレクトリで一括削除）