「3分でつくれる！」「表示も速い！」「サーバー代かからない！」
「独自ドメイン使える！」「広告無し！」「セキュリティ強い！」
「し・か・も無料！」・・・という夢のようなブログ！！
それが静的サイトジェネレーター！HEXO（読み方わからない）！！
と聞きかじったのでGithub Pagesを使ってhexoブログを作ってみました！
…が！Gitすらあいまいで「コマンドってあの黒い画面？叩くって動詞使うの？」くらいのデザイナーには正直ハードルが高すぎた…
3分どころか丸二日以上かけてやっと公開にこぎつけました。
ざっくり言うと、Githubというgitサービスでオプション的に静的サイトを無料で作れる（github pages）ので、そこに静的サイトジェネレーターというツールで作った予めブログ状態になったファイル群をアップしてブログ作る、って感じ。
アクセスされるタイミングでページを生成するワードプレスなど動的サイトと違って、ページはすでにあるので表示が早い、ということらしい。
ちなみに静的サイトジェネレーターは使われてる言語でいろんな種類があってHEXOはJavaScript製です。
導入にあたって参考にした記事はこちら↓
所要時間3分!? Github PagesとHEXOで爆速ブログ構築してみよう！
Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.1
node.jsの開発環境を用意しよう。Hexoブログに必要なツールを揃える
HexoブログをGitHub Pagesで最速公開する
基本的に上記の記事の通りにやればできるのですが、超初心者の私はハマりどころ以前のところでハマりまくったので、過去の可哀想な自分に伝えたいことをまとめました。
そもそもconfig.ymlを見つけ出せない
HEXOインストールして、一番最初の設定いじろうって時に早々にハマったポイント。
config.ymlをどう書き換えるかとか解説記事にあるからわかるけど、そもそもどこ探してもconfig.yml自体が見あたらない…え？なんで？私いつの間にやらかした？？
解決方法 隠しファイルを表示しよう！
Windows 10で隠しファイルやシステムファイルを表示する方法
もうこれパソコン教室レベルですがコントロールパネルから隠しファイルを表示するように設定すると、ちゃんと見えるようになります。こんなとこでハマるのは私ぐらいな気もしますが…（笑）
githubに拒否られる
ローカルサーバーで表示できた！次はGithub pagesで公開するぞ～！って時にハマったポイント。
githubに接続しようとすると
1 | fatal: Could not read from remote repository. |
とか表示されて、アクセスできてないっぽい…
正しいアクセス権？？リポジトリがあるか確認しろ？？
わからないことが多すぎて何で怒られてるのかさっぱり見当がつかない…
解決方法 SSH接続の鍵登録をしよう！
gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~
githubに接続するには、公開鍵・秘密鍵を生成して、公開鍵の方をgithubに登録する必要があります。普段github使ってる人にとっては当たり前すぎる工程なので解説でも省かれがち。github素人は要注意かも知れません。
なぜパスが通っていないのか
無事初デプロイしてGithub pagesで公開できた…けど…やけにこざっぱりしてるー！って時にハマってたポイント。
サイトは構築されてるもののCSSが何もあたってない…てか初期設定でパスがちゃんと通ってないという状況に陥ってました…
解決方法 リポジトリ名はちゃんと付けよう！
[Html] GitHubページと相対パス ※HexoでなくてJekyllの記事ですが
Github pagesに使うリポジトリの名前は必ず(owner名).github.ioとしましょう…！
Github pagesはhttps://(owner名).github.ioってURLになります。
私みたいに何も考えずリポジトリ名をblog.github.ioとかしちゃうと、構築はされてもCSSも画像も全部のURLがおかしくなるのでパスが通らない悲しい状態に…
テーマ変えたらレイアウトが崩壊
github pagesでちゃんとHEXOも動いたことだしデフォルトじゃなくてかっこいいテーマを使ってみよう！テーマ変えてローカルサーバーでチェック！よし、バッチリ☆けどデプロイしてサイト見ると…完全に崩壊しとるー…
デフォルトのテーマと混じったようなカオスな状態に…
Hexoのテーマを変更したら、元に戻せなくなった
↑を参考に hexo clean で一度更地にしてもっかいデプロイして再構築…
え…それでもダメ…？
解決方法 時間
chromeのキャッシュめっちゃ強いってのもあったのですが、やっぱりほんとの静的サイトよりは反映に時間がかかるっぽいです。速攻であちこちいじって混乱してたのですが、あきらめて放置してたらなんかちゃんと構築されてたという…
終わりに
まとめると全ての段階で躓いてたのがよーくわかって、よく形になったな…と…（笑）HTMLとCSSとちょこっとJavaScriptぐらいは触ったことあるかな～くらいのノンプログラマーの方に参考にしていただければ！