Hexoで静的サイトをつくる

はじめに

このサイトはHexoを使用して作られています。

• 個人サイトつくりたい！
  • SNSではログが流れて埋もれてしまう…
• けどHTML勉強する時間でもっと作品つくりたい！
  • 昔は手打ちで作ってたけど作法が変わっちゃって分からない
• デザインにも凝りたい！
  • スマホ対応のレスポンシブにしたい
  • 機能・表示速度などがレンタルブログ等では微妙に物足りない

みたいなひとにおすすめのソフトです。私だ。
HTMLよくわかんないけどサイトつくりたい人とかサイトつくりたいけど作品制作とかに時間を割きたい人にHexoをおすすめする記事です。まあ結局テンプレいじり始めると時間吸われるよね…。今日日ぶっちゃけ個人サイトって人が来ないんでは？という気がするのですけど、そのへんはまあTwitterで更新告知するとか…

Hexoってなんだ

Hexoは静的サイトジェネレータ(SSG:Static Site Generator)のひとつです。
サーバ側ではなく自分のパソコンの中でメモ帳とかでテキストを書いてコマンドを実行するとhtmlとcssだけで出来たブログサイトのデータが書き出される不思議なやつです。

便利な点としては

• CGIPHPが無くてもブログができる
  • ので、無料～安価なレンタルサーバで使える
• 表示が速い
• セキュリティがイイ感じらしい
• HTMLが1ミリも分からなくても何とかなる
  • まあ他に覚えることは多少あるんですけど…
• レンタルブログやSNSに比べると引越しが簡単
  • なんじゃないかなあ…他のサーバにファイル移せばいいし…

ちょっと面倒なポイントとしては

• 基本的にパソコンへのインストールが必要
  • スマホだけで更新したいならサーバ上で動くCMSがいいのかも。創作系で自前ブログだったらFreoが良い感じです。
• コメント欄・アクセス解析・検索機能が無い
  • 外部サービスやプラグインで対応可能
• コマンドライン操作で取っ付きにくい
  • かもしれない。コピペでも動くし一回操作すれば後は履歴から再実行するだけです

という感じです。レンタルブログよりはデザイン変更が簡単でタグ手打ちよりは維持管理が簡単だとおもう

静的サイトジェネレータの仲間にはほかにJekyllとかHugoとかがあります。StaticGenではライセンスや開発言語などで絞りこんだり、公式Twitterのフォロワー数の多い順番等でソートして探すことができます。
全文検索プラグインあるらしいのでHexoにしたんですが、更新頻度低い個人サイトならタグ検索あれば十分な気がします。タグ検索はだいたい対応してるとおもうので好みのテンプレート(theme)が有るやつを選ぶといいとおもいます。HexoのテーマはだいたいHTMLに「もし記事内に見出しが有れば目次を表示する」ぐらいのプログラムっぽいものが加わった感じのものなのでHTMLが分かればテーマ改変もなんとなくできる　はずです

インストールからブログ作成まで

くわしい使い方は「Hexo インストール 使い方」で検索して…という感じなのですけど、自分でも忘れそうなのでちょこっと書きます。Windows(64bit)前提で書いてます。Linux使い始めるまでコマンドプロンプトとかターミナルとか多分一回も起動したことなかったのでフワフワした説明です。ぐぐれ。

• Node.js
  Hexoを動かす土台みたいなやつです。npmっていうアプリストアみたいなやつがついてくる。exeインストーラ実行でインストール可能。
• Cmder
  コマンドプロンプトの代わりです。無くてもまあ大丈夫なんですけど、使いやすくて半透明でカワイイです。配布されてるテーマを使うときgit使うと楽なので付属してるFull版推奨です。インストールはzipを適当な…C:\Cmder\ぐらいの浅いとこに解凍するだけですが詳しくはぐぐって
• Mery
  テキストエディタ。無くてもメモ帳が有ればなんとか…ですが、強調表示とかタブとか有って多機能且つそこそこシンプルなものが有るとうれしいですね。ダークテーマあるやつが好きです。秀丸でもNotepad++でもお好みで。

Cmderにnpm install -g hexo-cliを入力してEnterでHexoのインストールは完了です。適当な浅い場所にHexo用のフォルダつくって、Cmderでcd C:\hexoみたいな感じでフォルダに移動して(※ドライブ間を移動するときは先ずd:とかc:、Tabをコチコチするとコマンドやフォルダ名などを補完できる)(※あるいはエクスプローラの右クリックメニューのCmderHereをつかうと該当フォルダ内でCmderを起動可能、でも設定が必要だったかもしれない)
hexo init myblog　(hexo用のmyblogフォルダを作る)
cd myblog　(hexo用のmyblogフォルダに移動する)
npm install　(hexoが用意したフォルダ内のリストに従ってインストール)
で、サイトのもとみたいなやつができるので、
hexo s　(プレビュー用のサーバが起動する)
して、http://localhost:4000/ にブラウザからアクセスすると、もうブログサイトが出来てる！
割と手間かかるゥ…いやCGIとか設置するより簡単だって…　

記事を書く

記事書くときはhexo new 記事名でsource/_posts内に記事名ファイル(記事名.md)ができるのでテキストエディタで編集します。Tumblr等でも使われているMarkdown記法で書けるのでらくちんです。下書きの場合はhexo new draft 記事名、固定ページはhexo new page ページ名。下書きはhexo sのプレビューに反映されないので、下書きを含めたプレビューを行う場合はhexo s --draftで行う。下書きを公開状態にするときはhexo publish 記事名。 その他にデフォルトのテーマから変更して改変したり、TwitterでURLをつぶやくとサムネイル画像と記事詳細が表示されるようにOpenGraphを設定したりしました。諸々の設定はググって…

記事を保存したり画像を用意したらhexo generateでpublicフォルダ内にサイトが出力されるので、あとはFTPで上げるなりzeitみたいなとこ使うなりで公開できるはずです。

ぬぬぬ…

だいたいHTMLとCSSだし、いにしえの創作系サイトで使ってたサーバでも行けるのでは？とおもってFTPでアップロードしたらエラーになりました。
日本語のファイル名が弾かれてるので_config.ymlの#URLのあたりのpermalink欄を編集して記事名を含めないようにpermalink: :year:month:day/にしました。これだと1日1回しか書けないんですけど、もともとそんな書かないのでいいか…。あとファイルサイズ制限でテーマ内の高解像度画像がアレしたりしてたっぽいですね…時代ですね…
これでも時々ちょっとおかしいな…なにもしてないのにこわれた…みたいな感じだったので時代を感じてzeitにしました。これもCmderとかから操作することになりますが一回操作すれば履歴から再実行するだけでPublicフォルダ内を丸ごとアップロードしてくれるので簡単なやつです。Neocitiesとかも猫がカワイイのでよいですね。Neocitiesは登録されてる全サイトのリンク集とか有っていにしえの雰囲気を感じられます。

あとはテーマ改変でちょっとつまづきまくりだったのですけど選んだテーマほぼ素のまま使うなら何もないとおもいます。インストールしてから1ヶ月ぐらいほったらかしててテーマ選んでちょっと改変して3日+ホスティングサービス探しで2日ぐらいで何とかなったのでそんなヤベー作業でもないです。お試しを！