logo

鎌イルカのクラフト記

article icon

HonoxとCloudFlareでブログを作ってみた

ブログを作ってみた

初手から自分語りになるのですが、私はエンジニアとして日々研鑽を積んだり所属している会社の部活動の一環としてMineCraft内で脱出ゲームを作ったのをきっかけに「マイクラ内という制限でどこまで面白いゲームが作れるのか」という試みをしています。

そんな日々の中で会社名義のメディアやQiita、Zennのような「完成した知識」を披露する場ではなく、途中経過やより深掘りした内容をざっくばらんに人目に触れる場所に残して将来の自分のために資産化したいと思いブログを作ってみることにしました。

技術スタック

WordPressでもWixでも何でも良かったのですが、せっかくエンジニア、それもWEB系をメインにやっているエンジニアをしているので普段はやらないインフラ設定やドメイン取得のような根幹部分の作業も込みでやってみようと思い自作をする事にしました。

技術スタックとしてこだわったのはHonoXを使ってみた点です。HonoXはHonoとViteを組み合わせたメタフレームワークで、CloudFlareとの相性もありフルスタックなWEB開発の体験が非常に良いことで知られています。

バックエンドJSとしてのHonoは結構仕事でも使っていたんですが、もっぱらRemixやAstroと組み合わせた利用が多かったのでHonoXはアルファリリース時に少し触った程度で知見がないため採用しました。

これで自分の経歴上

  • React
  • Angular
  • Remix (ReactRouter)
  • Astro
  • HonoX (Hono)
  • JQuery
  • Svelte (SvelteKit)
  • Laravel
  • SpringBoot
  • Node.js

の利用経験があるWEBエンジニアになれました。

まぁSESとかでやる実務的な仕事はReact + (PHP | Java)ばかりですけど...

あとはしょうもない話ですが、使ったことないので個人的興味でアフィリエイト広告をつけてみました。初めて触ったのですがこんな感じなんですね

XServerはちょうどマイクラのサーバに利用していて、もちろん今後の記事のサンプルにも出てくるので、まぁ読んで使ってみたくなるような事があればお願いします。

コーヒーのやつはそういうチップ文化的なものがかっこよかったので入れてみました。

プロジェクトの構成

今回、実装の中身自体は先人の知恵をパク...フル活用させていただいたため、基本的には末尾にある参考記事類を参照していただければと思います。

HonoXは本当にシンプルなのでディレクトリ構成と、SSRやらアイランドアーキやらの知見がある程度あればほとんど手持ちのスキルでさらさらとフルスタックできて気持ち良いです。

個人的には「こんなに見えないスタイルに癒着して流行り終わったらどうすんねん...」って気持ちからtailwindcssアンチなのですが、便利さは間違いない故に現場で使う機会が多いため今回利用しています。先日出たv4も習熟しときたいし

それ以外はまぁBun使ったり、そのBunをMiseで管理したり...

会社で後輩のPCをOS問わず設定したりしてるのでVSCode周りやLinux周りの拡張は備忘録的にそのうちまとめたいところです。

MineCraft??

このブログの記事の多くはおそらくマイクラ関連になります。

というのもこんな感じでゲーム内ゲーム開発をある種の趣味としております。

要するにコマンドブロックやRS回路を駆使したシステムや、友人の協力で生まれた凝ったマップを作成しているわけです。

上記の脱出ゲームの他にも中断中の企画や、これから着手する企画が多くあり、生まれたアイデアや作ったシステムを自己満足で置いていく予定です。

締め

HonoXの実装内容等についてあまり触れられず申し訳ないのですが、本当にストレスがなく実装できるのでHonoは本当におすすめの一つです。

とはいえ開発者の方もおっしゃっている通り、物事には向き不向きがあるのでやはり方々一度触ってみるのは大事に思います。

今既に三つほどマイクラのゲーム企画が進行しているほか、この時期なので研修等々で改めてプログラミングなどを勉強しているので細々書いていければと思います。

あまり実のある話ではなく申し訳ないのですが、お読みいただきありがとうございました。

参考にさせていただいた記事

HonoXでブログを作り直した | sunaboxHonoXでブログを作り直したので、技術選定や移行の経緯について記載する。
favicon of https://suna.dev/articles/honox-blogsuna.dev
ogp of https://suna.dev/ogimage/honox-blog.png
HonoXについて
favicon of https://zenn.dev/yusukebe/articles/724940fa3f2450zenn.dev
ogp of https://res.cloudinary.com/zenn/image/upload/s--aJU0Pxkz--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_66:HonoX%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%2584%25E3%2581%25A6%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:yusukebe%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pIMWY1VlpnSFMwLUJwekhzZjRGYXN0R1ZYTlpfZFh1U2pwdWNMNGc9czI1MC1j%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png
HonoXのSSGで個人ブログを構築しました - mooriii's blog個人ブログを開設する機運が高まっていたのでHonoXのSSGで個人ブログを構築しました。
favicon of https://blog.mooriii.com/entry/honox-ssg-blogblog.mooriii.com
ogp of https://blog.mooriii.com/ogps/honox-ssg-blog.png
HonoXでブログを作り直した。そしてテンプレートも作った | yossy.devHonoXでブログを作り直しました。開発体験がとても良かったので、使ってみたいけど手が出せてない方向けにテンプレートリポジトリを作りました。
favicon of yossy.dev
ogp of https://yossy.dev/static/smile.png
HonoXでsatoriを使ってOGイメージもSSGするHonoXで最近実装しなおしたこのサイトにOGイメージが出せるようにしました。画像をSSGするまでにいろいろ試行錯誤があったので記録します。
favicon of blog.berlysia.net
ogp of https://blog.berlysia.net/ogimage/entry/2024-02-29-honox-og-image.png

目次