Hexoでの初めてのブログ構築

目次

• Hexoのダウンロードと初期起動
• テーマ変更
  • 注意点
• アーカイブの書式変更
• その他自分用まとめ
  • favicon
  • シンタックスハイライト
  • 新規ページ作成
  • Google Analyticsの導入
• 参考

Hexoのダウンロードと初期起動

npm install -g hexo
hexo init test_dir
hexo server

まずnpm install -g hexoでhexoをグローバルインストール。
hexo init test-dirで新規にhexoプロジェクトの作成。
hexo serverでサーバー立ち上げと表示。

テーマ変更

今回使うテーマはsimple-japanese
基本的にはここのREADMEにあるように進める。

1. git clone https://github.com/mitsuruog/hexo-theme-simple-japanese.git themes/simple-japaneseでダウンロード。
   このときgit管理したい場合はzipでダウンロードしたりgitのsubmodule使ったり(よくわかってない)する。
2. _config.ymlを書きかえ

_config.yml

# Site
author: YOUR_NAME
author_title: YOUR_DESCRIPTION
avatar: YOUR_AVATAR_URL

# URL
url: YOUR_BLOG_URL

theme: simple-japanese

# Sidebar
widgets:
  - search
  - profile
  - recent_posts
  - tagcloud
  - archive

# Contact
contact:
  url: YOUR_CONTACT_URL
  icon: github # font-awesome icon. e.x) fa-github

# Google tag manager
google_analytics: GTM-XXXXXX

# Custom assets
simple_japanese:
  custom_assets:
    css: css/custom.css
    js: js/custom.js

注意点

hexo serverによるプレビューの際、_configファイルを変更したあとは再起動が必要。

アーカイブの書式変更

デフォルトだとこのテーマのアーカイブは二月 2019のようになっていて、漢数字がすごくダサイ。
hexoにはヘルパーというejsで使える関数がいろいろ用意されているみたいなのでそれを利用する。

themes\simple-japanese\layout\_widget\archive.ejsの中は以下のような記述になっている。

archive.ejs

<% if (site.posts.length){ %>
<div class="widget-wrap">
  <h3 class="widget-title"><%= __('widget.archives') %></h3>
  <div class="widget">
    <%- list_archives() %>
  </div>
</div>
<% } %>

この中のlist_posts()を例えばlist_archives({format:'YYYY/MM'})のように書きかえると、2019/02のように表示されるようになる。
その他のオプションは公式ドキュメント参照

その他自分用まとめ

• configのwidgetにwidgetの中にあるejsファイルを指定すると出してくれる
• <%= __('index.category') %>といった感じにすると、ja.ymlにあるものが表示される
• source/cssにあるstylファイルでレイアウトをいじくれる。importを忘れずに
• layput/category.ejsを作成し、layout/_patial/archive.ejsを修正するとカテゴリページをカスタマイズできた
• fontawsomeの導入 _patial.head.ejsにCDNで読み込み
• ここが割と便利。ejsで使える変数などがまとまってる
• 画像はconfigいじったら、投稿ごとのフォルダにまとめれるらしい
• hexo-browsersyncプラグインでオートリロード
• hexo cleanでキャッシュやpublicフォルダの削除
• hexo-tocプラグインで目次を記事の途中に挿入可能。参考→HEXOで目次を自動で作成してくれるhexo-toc

favicon

_config.ymlにfavicon: /favicon.icoと追加し、/source直下にfavicon設置でOK

シンタックスハイライト

ここ参照

{% codeblock lang:sh %}
cd Homestead
{% endcodeblock %}

こんな感じにするとハイライトされた

新規ページ作成

新しい投稿を作るとき

hexo new titleName

固定ページを作るとき(aboutページやプライバシーポリシーページなど)

hexo new page titleName

Google Analyticsの導入

結論から言うと、そこそこハマった。
Google Analyticsの設定はそこらじゅうで解説されているので省略。
そして、_config.ymlにIDを書く。

_config.yml

google_analytics: UA-xxxx

のだが、コンソールに404エラーが出て動かない。
調べてみると、Google Tag Managerを登録しないといけないようだったので登録。

Googleタグマネージャとは？初心者でも分かる利用方法と導入手順

が、それでも動かない。

結局、どうしたかというと、_config.ymlにAnalyticsのIDではなく、Tag ManagerのIDを書いた。

_config.yml

google_analytics: GTM-xxxx

腑に落ちないが、これで動いたのでよしとする。

参考

• Hexoでローカルに静的なブログを作ってみて基本構成を把握する