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 | cd hexo-editor |
cd(change directory)でhexo-editor/に移動します。
npm install –productionで、Node.jsのモジュールをインストールします。
npm startで、Hexo Editorを起動します。
そして
1 | > [email protected] start cloneを実行したディレクトリ\hexo-editor |
と出たら成功です。
現時点(2019/10/11)では、hexo-cliでなんかエラーありますよ~って言われますが、問題ないそうです。
で、ブラウザから2048番ポートにアクセスするとこんな画面が出てきます。
ので、_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つパラメータを追加してあります。
また、次に述べる問題にも対応しています。
下をクリックで飛べます。
そして
スマホ用レイアウトでは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