Hexo Editorの導入方法、注意点

2019/10/11

今回はHexoを基としたオンライン上で記事を作成できるプラグイン、Hexo Editorの導入のやりかた、注意点、また、Node.jsのプラグインを使用する際の注意点を書きます。

Hexo Editorの使い方

まずは、Hexo Editorの使い方を見ていきましょう。

といっても、非常に簡単です。

のレポジトリをサーバーで

1	git clone http://github.com/tajpure/hexo-editor

でクローン(GitHubにあるものをサーバーに持ってくる)します。

で、あとはREADMEに書かれてる通り、

1
2
3

cd hexo-editor
npm install --production
npm start

cd(change directory)でhexo-editor/に移動します。

npm install –productionで、Node.jsのモジュールをインストールします。

npm startで、Hexo Editorを起動します。

そして

> [email protected] start cloneを実行したディレクトリ\hexo-editor
> node server.js

Hexo Editor is listening at port:2048.
(node:2224) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
Hexo init success.

と出たら成功です。

現時点(2019/10/11)では、hexo-cliでなんかエラーありますよ～って言われますが、問題ないそうです。

で、ブラウザから2048番ポートにアクセスするとこんな画面が出てきます。

Hexo-editor-login

ので、_config.ymlに書いてある通り、

User Nameにhexo

passwordにimyouradminを入れましょう。

そうすると編集画面に出れます。

ターミナルでCtrl + Cを押すとHexo-Editorを停止できます。

停止したくないけどターミナルから離れたい場合は、Ctrl + AからCtrl + Dをしましょう。

これをデタッチといいます。

これを停止するためには、ターミナルから

1	$ screen -x

して、Ctrl + Cをしてください。

いくつか注意しなければならないこと、仕様について書きます

Hexo Editorを使用する際の注意

まずは

_config.ymlで、username、passwordを編集しておきましょう

おそらく、サブドメインなんかを利用して一般の人からは隠すと思いますが

保護のため編集しておきましょう。

また

記事のファイル名は最初に入力したタイトルで決まります

一回PublishもしくはSave to draftをすればタイトルが固定されます。

これ、何を注意しなきゃいけないかというと

最初のタイトルに”/“などの文字を使うとおかしくなる

という点です。例えば2019/10/11っていう名前にすると

“2019”ディレクトリの”10”ディレクトリ内の”11”.md

が完成します。そして、

“2019/10/11”.mdも残り続けます。

これは、Hexo newコマンドを使用する時のエスケープ処理か何かが関係していそうです(詳しいことはよくわかりません)

これが一点目です。

次に

長時間または長い文章を書いて、Publishすると、記事が吹っ飛ぶことがあります。

原因不明です。Ctrl + Zでの復帰も出来ません。

原因がわかり次第記事を書いたり、修正版を出そうと思います。

こわいので、文章をPublish、Saveするときは必ずクリップボードにコピーしておきましょう。

あとは

MarkdownのFront-matterの追加は容易ではありません。

これは、Hexo-Editorのファイルをいじらなければいけません。

一応自分のは3つパラメータを追加してあります。

また、次に述べる問題にも対応しています。

下をクリックで飛べます。

修正、追加版Hexo Editor

そして

スマホ用レイアウトではFront-Matterの設定や、文章の編集ができません

悲しいことに一部スマホは、PC版サイトを表示しても出来ません。

私のほう(上記)では直してあります。

CSSのメディアクエリの変更、ヘッダのはみ出た部分を消去、不要なショートカットの消去、スクロールを可能にすることで対応しました。

あと、Node.jsモジュールを使う時の注意点を書きます。

Hexoでプラグインを使う際の注意点

おそらく、Hexo-editorのディレクトリと、Hexoのディレクトリを分けている方もいらっしゃると思います。

そういった方は

Hexoのディレクトリに新しくモジュールを入れたら、hexo-editorディレクトリにもnpm installを実行しなければなりません。

長くなってしまいました。

Hexoのほうで、お！このプラグインいいね！って言って、(例えばhexo-prism-plus)

ブログディレクトリ(ここではyourblog)で

1	~/yourblog$ npm i hexo-prism-plus

をしたとします。

そのディレクトリで

1	~/yourblog$ hexo g

を行えば、正常にプラグインが機能してくれますが、Hexo EditorからGenerateすると適応されません。

この問題を解決するために、hexo-editoディレクトリでもパッケージのインストールを行いましょう。

1	~/hexo-editor$ npm i hexo-prism-plus

そして、Hexo Editorを再起動します。

すると、Hexo EditorからGenerateしても、モジュールが適応されるようになります！

これがHexo Editorでモジュールが適応できない際の対処法です。

これさえわかれば、後は何とかなるでしょう！

私もプログラミング・パソコン初心者ですが何とかなっています。

皆さんもHexoとHexo Editorを使って楽にブログを作りましょう！

今回はそんな感じで、ありがとうございましたm(__)m

←戻る