Hexoでブログ構築 まとめ

先日Hexoを使って、Github pagesでブログを公開しました。
公開まで簡単に出来る！とよく紹介されているのですが、なんだかんだで引っかかったところが多々あったのでまとめてみました。

• Hexo設定関係のつまづき
  • configが複数あるんだけども
  • RSSの設置
• SEOに関する設定のつまづき
  • meta descriptionの設定
  • sitemapを作る
  • google-analyticsの設定
  • robots.txtの設置
• ページ作成に関するつまづき
  • 新規でページを増やしたい
  • 404ページ
• 記事作成に関するつまづき
  • 記事の途中に目次を入れたい
  • パーマリンクの設定
• テーマに関するつまづき
  • テーマを探す
  • scssのコンパイル
  • ページ毎にヘッダーを出しわけたい

Hexo設定関係のつまづき

configが複数あるんだけども

Hexoではブログ本体に関する設定_config.ymlと、テーマに関する_config.ymlが存在します。

使い分けですが、絶対に必要な設定(デプロイなどの設定)を前者に、
なくても問題ない設定（google_analyticsなど）を後者に記述するようにしています。

RSSの設置

RSSの設置は、hexo-generator-feedというプラグインで対応しました。

sitemap導入時と同じようにnpm installし、必要に応じてconfig.ymlでオプションを変更してください。
デフォルト値では、http://localhost:4000/atom.xmlで生成されます。

SEOに関する設定のつまづき

meta descriptionの設定

デフォルト値をconfig.ymlに記述しておき、記事ページではdescriptionが重複しないよう毎回設定しています。
記事の文字を抜き出して自動で設定することも可能ですが、より効果のある文章にするために意図的に手動にしています。

// head.ejsに下記を記述

<% if (page.description) { %>
  <meta name="description" content="<%= page.description %>">
<% } else if(config.description) { %>
  <meta name="description" content="<%= config.description %>">
<% } %>

# 記事.mdの設定

---
(略)
description: 'descriptionに設定したい文章をここに'
(略)
---

sitemapを作る

公式のプラグインが用意されているので、そちらを使用しました。
hexo-generator-sitemap

npm installし、必要に応じて_config.ymlでオプションを変更してください。
デフォルト値では、http://localhost:4000/sitemap.xmlで生成されます。

google-analyticsの設定

トラッキングIDをthemes/themeName/_config.ymlに設定し、ejsで出力するようにしました。

<% if (theme.google_analytics){ %>
  <script async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '<%= theme.google_analytics %>');
  </script>
<% } %>

robots.txtの設置

hexo-generator-robotstxtというプラグインが有名そうだったのですが、1ファイル置けばいいだけなので手動で設置しました。
配置先はproject/source/です。

中身は下記の通り。

User-Agent:*
Disallow:
Sitemap:https://makura3.github.io/sitemap.xml

Google Search Consoleのrobots.txt テスターで正しく記述されているか確認しておくと良いです。

ページ作成に関するつまづき

新規でページを増やしたい

Hexoでページを増やす場合は少々面倒です。

$ hexo new page testPage

実行すると/source/testPage/index.mdが作成されます。

index.mdの中身は、

---
layout: testPage①
---

とします。

次に、/themes/themeName/layoutの配下にtestPage.ejs②を作成すると、
/testPageでアクセスできるようになります。

作成する際、①と②は同じ名前を指定するようにしてください。


プラグインを入れるともう少し簡単にページが作れるようですが、
更新が止まっている＆必須ではなかったので導入は見送りました。

404ページ

404ページは自分で作成する必要があります。
$ hexo new page 404とし、index.mdに

---
permalink: /404.html
---

と記載してください。
/404.htmlでアクセスが可能になります。

通常ページと同じく、layoutの設定も可能なのでオリジナルの404ページが作れます。

記事作成に関するつまづき

記事の途中に目次を入れたい

目次生成のヘルパーが公式で用意されていますが、記事の途中に挿入することはできません。
目次の前にまえがきを設置しておきたかったので、hexo-tocというプラグインを導入しました。
設定方法はgithubをご覧ください。

パーマリンクの設定

SEOの観点から、非常に大切な部分です。 project/_config.ymlに設定を記述します。 散々迷った結果、

permalink: :category/:id/

とし、カテゴリー+記事ID(スラッグ)の形としました。
記事投稿後にカテゴリーを変える可能性がある場合は、categoryがはいっているとURLが変わってしまうため記事IDのみでいいのではないでしょうか。

記事ごとに記事IDを設定する場合は、.mdの上部で設定をする必要があります。

---
id: idname
---

テーマに関するつまづき

テーマを探す

公式やGithubから好みのテーマを探すことができます。
themes/にテーマフォルダを配置し、project/_config.ymlの中のtheme: themeNameの部分を変更します。

ちなみにこのブログで現在使用しているテーマは自作したものなので、ある程度形になってきたらそのうち配布する予定です。

scssのコンパイル

Hexoには、node-sassがくっついています。
hexo-renderer-scssをnpm installし、_config.ymlに下記を記載しました。

# style settings
node_sass:
  debug: false
  outputStyle: compressed
  precision: 5
  sourceComments: false
  includePaths: ['./node_modules/normalize-scss/sass/','./node_modules/reset-css/']

個人的にnormalize.cssとreset.cssを追加でimportできるようにしています。(npm install必須)

ページ毎にヘッダーを出しわけたい

公式の変数一覧の中にpage.layoutという変数があるので、ページ毎にejs内で分岐することが可能です。



その他にもcircleCIで自動デプロイまで行なってみたりしているので
そのうち紹介できたらいいなと思ってます。