投稿記事

2021年 11月の記事 (1)

nizyuiti 2021/11/28 23:42

【雑記】Hexoでサイトつくったよ

さてさて。
タイトルのまんまですが、以前ちらーっと言っていた、作品置き場サイトをつくりましたとです。
lit.linkのほうはこっそり彼方に葬り去りましたので、以降はこちらをご確認ください。

https://nizyuiti.netlify.app/
(´-`).。oO(公開日がえでぃばでぃポキィなんだぜ)

記録を見るからに、11月6日くらいから試行錯誤して、11月11日になんとか公開にこぎつけたようです。
使用ツールはタイトルにもある「Hexo」という静的サイトジェネレータ。
これ変換で性的って出てくるのだけがひどく悲しい。

なんでそのツールを選んだかって理由はいろいろありますが、最終的な結論としましてはドストライクなテンプレートがあったからです。
で、公開したのは無料でもわりかしガンドコ使えちゃうホスティングサービス「Netlify」。
ホスティングサービス≒サーバなはずなので、すごーーーく意訳すると無料のサーバで公開したよという。
ひどい意訳だ。


モンティ語(蛇)はちょっとわかるのですが、当方はプログラミングつよつよマンではなかったので変なとこで苦労しました。
ということは! プログラミングわからない人でも無料でさくっと公開できちゃうかもですよ~という建前を前面に出しながら自分が躓いたところをまとめます。
既にお察しの通り、ここから先はゲーム関係ない話です!
あと専門家じゃないので意訳多めです。
イラっとしたら去ってください。




静的サイトというのは、HTMLタグをぽちぽちした手打ちのhtmlファイル郡が代表例です。
で、ジェネレータということは、文章打っておけば、その文章を組み込んだ静的サイトを作ってくれるというわけなので、我々人間がやるのはブログを書くように文字だけ打っておけばよいということになります!
もちろん自分のパソコン上のフォルダ上で。オフラインで。
そのかわり、ファイルはここのフォルダに置かなきゃいけないよとかいうルールはありますが、それはそんなに苦じゃありません。よね!?

以前は「HUGO」という静的サイトジェネレータを使っていたのですが、冒頭に書いたように、好みのテンプレートが見つかったので今回は「Hexo」に決め申した。
読みはヘクソ? ヘキサ? アルファベットで書きます!

使ったツールと役割

①Hexo………サイト作る本体。これが手打ち風(?)のHTML作ってくれる
②GitHub……サイトをアップロードするところ。ぶっちゃけなくてもOK
③Netlify……サイトを公開するところ。要アカウント登録

サイト=HTMLのタグぽちったものをネットに公開したもの(意訳)です。
なので、最悪ネットに公開できる場所(③)があればそれ以外(①②)のツールはなくてもよいのですが、自分は楽をしたかったので①と②のツールを使いました。

③がサイト公開する(サーバ)なら、②はなんぞやって思うかもですが、②は③が公開してくれるものを管理してるポジションにあたります。
忍者とかFC2でサイト作ったことある人向けに言えば、FTPで送信する先が②になるというイメージ。
なのでまあ、②の人いなくても何とかなります。
②の人もアカウント登録必要ですし。
でも自分は楽をしたかったので略。

ちなみにNetlifyはサイトのみならず、アップロードしたものをWEBで公開できちゃいます。
つまりブラウザ向けゲームを簡単に公開できるのだ!
当方はティラノのブラウザの挙動調べるためにぽいっとやったりしてました。
たぶんツクールとかでもできるはず。index.htmlあるなら。試したことないけど。
まあ、なんというか、オススメです!

参考サイトとか

手順は有識者のサイトを見てもらうのが早いので、気になる方は下記サイトをどうぞご覧ください! 
ひどい丸投げだ!

Hexo + GitHub + Netlify でブログ構築

①必要なツールをダウンロード
②Hexoでぽちぽち
③GitHubにアップロード(コミット+プッシュ)
というのが手順の概略です。

コマンドは使いまずが、そこまで難解じゃないというか、魔法の呪文みたいで楽しいと思うので敬遠せずにさあさあさあ!

しかしながら自分、GitHubという存在といまだに仲良くなれてはいません。
なので、一応メモなのですが、リポジトリというのはつまりGitHub側で持っているフォルダみたいなものです。
(自分のPCのフォルダはローカルリポジトリ、GitHub側のフォルダはリモートリポジトリと呼ぶ)
そのリポジトリに向かってコミット(これからこれ入れるよという予約)して、プッシュ(予約してたやつをほんとにアップロード)するのがアップロードの仕組み。

なんですぐアップロード(プッシュ)しないでいったん予約(コミット)するの? って疑問に関しては、クラウドサービスつかって複数人で原稿作業しているときに、うっかりAさんとBさんが同じページの作業したらあっ……ってなるのを回避するためというか。
急に同人誌の話をするな!
まあ上の案件はクリスタなら回避できるんですけどネ。
つまり、コミットはそういう競合回避の仕組みが大きいと思うので、1人で使うときはそういうものだと思ったほうがいいかと。

テーマ変更

最初にテンプレートと言ってしまいましたが、CSSとか見た目的なもののセットはHexoではテーマと言うらしいです。
なんとHexoくん、テーマを所定の場所にダウンロードして、使用するテーマを指定するだけで簡単に見た目が変わります。
ステキステキ。まあHUGOもそうだったけど。

テーマ変更方法

ちなみにテーマは→ここにたくさんあります
これは公式サイトに載ってるテーマなので、たぶん野良のテーマも探せばあるはず。

自分が使ったのはminimaというテーマです。
デザインもさることながら、ちゃんと更新されているのもいいなと思ってこちらに決定。
他のテーマは割と2015年以降更新されていなかったりで、レスポンシブ対応してほしいマンとしてはレイアウトが心もとなかったりしたのでした。

躓いたところ

まあ、有識者のサイト通りにやってもつまるところはつまります。
本質的なところと、レイアウト的なところが混ざっていますがそこは大目に見ていただきたく。

つまづきポイント一覧
①なぜかフォルダの下のフォルダがプッシュされない
②サイトのトップページを自分で作ったものに指定出来ない
③画像クリックすると青くなるのをやめさせたい


①なぜかフォルダの下のフォルダがプッシュされない
→テーマフォルダに下にあるファイル郡がアップロードされなくてめちゃ悩みました。
 調べたところ、なぜかテーマフォルダがサブモジュールとかいうのになっていたらしいので、それを解除することで解決。

Submodule地獄からの脱出

 これで2日悩んでしまった。悲しい。


②サイトのトップページを自分で作ったものに指定出来ない
→デフォルトのトップページではないページをトップにしたかった時に激突。
 デフォルト=自動生成らしかったので、自動でページ作らないようにしたところ解決。

カスタムホームページの作り方

 ちなみにトップページ=ホームページなので、サイトのことホームページって言ってる人を見るともにょらなくもないマンです。


③画像クリックすると青くなるのをやめさせたい
→ページ遷移が嫌いだったので、文章折り畳みで詳細を見れるようにしたときに判明。
 PCだとF12でも確認できなかったけど、スマホだとばりばり青くなりました。
 範囲選択みたいなものだったのかなんなのか不明。

クリックやタップしたときの青い枠や四角を消すCSS

 CSSいじるときは自前のCSS用意してオーバーライドさせました。



おわり!
思ったよりサイトの列挙で終わりましたね。
でもまあ、Netlifyは無料で出来ること多いのでオススメ~!
アカウント作成こそ必須ですが、ドラッグアンドドロップでサイト作れてしまうのはよきよきかと。

とまあ、こんなサイト話以外にも一応ゲ制はしてましたよ!
でもどっちかというとドットの方をぽちぽちしてました。
こちら証拠画像になります。


ディテール模索の品なので頭身がバランバラン。
なんか9月のもまざってたけどまあいいか!

面白いこと言うと今作ろうとしているウデフェスゲーの登場人物はここにいません。
いや、いると言えばいるけどいないです。
自創作の異世界ものにはスターシステム要員がいるので、その人たちは出てきます。
右の2人です。覚えてもいいことはありません。

あおいかがみにはいなかったじゃん! あれはまあ、あの、はい。
続編()には出てくるはずです。頑張ってほしい。


そして先月あたりにぼやいてたDTMやるぞー話。
全く触っていません。
そろそろやる気が! というのもフラグかもしれないので変に宣言するのはやめることにします。
やりたい気持ちとやろうという気力が同時に来ないことには動けない、怠惰の塊です。

来月は会話システム以上の進捗が出せればいいなーと思う所存。
フェスは2月ですが、この調子だと間に合わない気がしてくるので、多分無理だなってなったら素知らぬ顔でなかったことにして、そのうち別日に出すと思います。
そうはならないようにがんばりたいところ!

ではでは。

月別アーカイブ

記事のタグから探す

限定特典から探す

記事を検索