IT►Software

Hexoでブログ記事を書く

HexoではMarkdown形式でブログを書きます。通常のMarkdown記法に加えてHexo独自のタグを使用できます。

また、Tag Pluginsをインストールすることで拡張することができます。

目次#

基本#

記事を書く手順とHexoの基本コマンド#

記事を書く手順#

下書きしてから書く場合の手順。

  1. hexo new draft
  2. hexo server –draft –watch
  3. ブラウザでプレビュー表示を確認
  4. hexo publish

<title>の部分は記事のタイトルにする文字列を指定する。指定した文字列から空白をハイフンに変換し、小文字化した文字列がファイル名になる（_config.ymlのnew_post_nameなどのパラメータで制御される）。

hexo serverでプレビュー表示用のサーバーが起動する。
ブラウザでhttp://localhost:4000/に接続するとプレビュー表示を確認できる。

ブログエントリではなくいわゆる固定ページを作成したい場合は、hexo new page <title>。

Hexoの基本コマンド#

  • hexo clean

    生成したHTMLとキャッシュの消去。

  • hexo config

    エディタを使わずにhexo の設定を変更できる。

  • hexo deploy

    デプロイ設定に従って生成したHTMLをサーバーにデプロイする。
    NetlifyとGitリポジトリを連携している場合など、など、サーバー側でhexo generateするなら不要。

  • hexo generate

    HTMLを生成する。

  • hexo help

    ヘルプの表示。

  • hexo init

    コンテンツを格納するディレクトリ、設定ファイルの生成。

  • hexo migrate

    他のブログシステムからの移行ツール。

  • hexo list

    このコマンドはなかなか便利。現在のドラフトや作成済みの記事内のタグやカテゴリの情報を出力してくれる。

    $ hexo list tag

  • hexo new

    ポストあるいはページの雛形を生成。

  • hexo publish

    日付のタグをfront-matterに追加する。
    git でdraftを管理している場合、git mvせずにファイルを移動するため、
    履歴が失われてしまう。この問題はgit add .すれば解決する。

  • hexo render

    render系のプラグインによるファイル生成。

  • hexo server

    プレビューのサーバーを起動する。

  • hexo version

    バージョン表示。

記事の作成#

Hexo独自の記法のリストについてはプラグインの一覧ページを参照。

Tag Plugins | Hexo

リンク#

一番単純な形式：

[リンク文字列](http://example.com)

画像の挿入#

画像の配置場所に関しては次の２通りの方法がある。

  • Global Asset Folder
  • Post Asset Folder

参考：Asset Folders | Hexo

デフォルトの状態ではGlobal Asset Folder。

記述方法#

以下、Global Asset Folderの場合。画像へのパスは相対リンクでかつ、/で始まっている必要あり。

  1. Hexo記法

    {% img [class名] [画像へのパス] [widhth] [height] [title] %}

    テーマ側でfancyboxが有効になっている場合、画像をクリックすると拡大画像が表示される。

    また、Post Asset Folderが有効になっている場合、下記の初期も使用できる。

    {% asset_img example.jpg This is an example image %

  2. Markdown

    ![alt属性テキスト](画像ファイルのパス)

    リンク付きの画像は以下のようにする。この形式を使用したい場合、fancyboxを無効にしておく必要がある。

    [![alt属性](画像ファイルパス)](URL)

    fancyboxが有効になっている場合、画像自体をリンクにすることはできない。

Hexoで画像を表示 | nkmk log

目次の生成#

目次生成用のプラグインのインストール。

$ npm install hexo-toc --save

詳細： hexo-toc - npm

使い方としては、記事の冒頭付近で下記のように記述。

<!-- toc -->

「続きを読む」#

冒頭の適当な位置に\と記述。

<!-- more -->

コードブロック#

行番号の有無などの設定は_config.yml。

highlight:
  enable: true
  line_number: false
  auto_detect: true
  tab_replace:

Hexo形式の場合、個別に行番号の有無を切り替えることができる。

一般的なMarkdown形式#

インライン形式と、ブロック形式がある。

  • インライン形式: バッククォートで文字を囲む（”`test`“）

Hexo形式#

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

注意点#

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

ノウハウ関連リンク集#

カテゴリに関する補足#

HexoのFront-matterにカテゴリーとタグを上手く設定する方法 | Qookie Tech

more （続きを読む）#

Hexoでトップページに記事の概要を出す方法 | Katsunori Nippo

リンクのプレビューの埋め込み#

hexo-tag-link-previewをnpmで公開しました。 | 海月暮らし

ページによってはうまく動かないかも。

その他の参考サイト#