そにゃのブログ

ブログページを移行しました。現在はこちらから最新版を閲覧できます。

HexoっていうSSGが気になったので試してみた。

えっ？なんで学生が深夜にこんなことしてるかって？ おっと、それ以上はいけない

• Hexoってなんだよ
  • テーマ
  • プラグイン
  • 構築
  • テーマを変える
  • 記事を書くときに覚えておくといいこと
  • カスタマイズ
  • 生成

Hexoってなんだよ

Node.js製の強力なブログフレームワークらしいです。

プラグインで拡張できたり、もちろんテーマも使えます。

テーマ

公式サイトだったりGitHubのトピックだったりで探すのがおすすめ。

おすすめなのは、Icarusです。日本でも使っている方がたまにいるのでトラブルが起きてもどうにかなりそうなので…

プラグイン

sitemap.xmlを自動生成してくれるhexo-generator-sitemapとかは入れたほうがいいと思います。 hexo-generator-sitemapだとGoogleに登録できませんでした…ちゃんと動くhexo-generator-seo-friendly-sitemapがいいと思います。

構築

※Node.jsがインストールされている前提で進みます。

まず、npm install hexo-cli -gでHexoのCLIをインストールします。

インストールしたら、ブログ用のファイルを生成したいディレクトリに移動して、hexo init .を実行します。

以下のようなファイル構成になると思います。

├─.github
├─node_modules
│  └─...
├─scaffolds
├─source
│  └─_posts
├─package.json
└─themes

一応この状態でも_posts直下に.mdを作成してyarn serverすれば起動できます。

でもせっかくなので、テーマを変えてみます。

テーマを変える

今回は、Icarusを利用します。
npm install hexo-theme-icarusしてhexo config theme icarusします。
でも、テーマによっては中華フォント(Microsoft YaHeiなど)になっている場合があります。

icarusならnode_modules\hexo-theme-icarus\include\style\base.stylに行き、Microsoft Yaheiと書いてある部分をすべてsans-serifなどに変更します。そうすれば治ります。

記事を書くときに覚えておくといいこと

タグやカテゴリーは以下のように書く。

title: Hexo
date: 0000-00-00 00:00
categories:
  - tech
tags: 
  - hexo

カスタマイズ

テーマは_config.{テーマ名}.ymlである程度カスタマイズできるようです。

方法は自分で調べてください(丸投げ)

生成

htmlを出力するにはhexo generateを入力してください。入力すると、publicフォルダにhtmlが生成されます。

めっちゃ書くのつかれた...