nasust dev blogの最初のブログ記事

こんにちはnasustです。
nasust.comというドメインに自分のブログサイトを作りました。

元々はてなブログで記事を書いていましたが、今度から技術系の内容の ものは、このサイトで書くことにします。技術以外の記事は今まで通りに はてなブログで書くことにします。

まあ、はてなブログは一年近く放置しているですが・・・

何故、このサイトを作成したのか

まあ、余り深く考えていないです。

最近のマイブームがFlutter Webです。これで何かサービスを作りたいなーと 思いましてGitHubページで適当に公開するかなと思っていたですが、 そこに置けるのは静的なものだけなので、何となく物足りないと感じたですよ。

それでドメインを割り当てられていないVPSサーバーが在ったので、そこで独自ドメイン取得して 公開しようという感じでふわっとやりました。

そして独自ドメインも取得した事だし、ブログサイト作るかっていうノリで、 このサイトを作成しました。

このサイトを作成して良かった点

プライベートで久しぶりにフルスクラッチでWebページを作成した事が楽しかったですね。

好きな技術を利用して作成できたのでストレスフリーで作業できました。

その中で新しく採用したのはHugoという、オープンソースの静的サイトジェネレーターです。

HTMLのテンプレートとMarkdownでサイトを生成できます。

Hugoを採用した理由

せっかくサイトを公開するからには、爆速で表示されるモノにしたい。 それとメンテが楽であるからです。

WordPressも検討しましたが、セキュリティアップデートやバージョンアップによるプラグインの互換性など面倒くさく感じました。 できる限り長く運営する予定なので、ちょっとメンテの負荷がありそうなので止めました。

Hugoであれば静的なHTMLだけなので、根本的に問題が発生しません。

Hugoのメリット

HugoはウェブサイトのテンプレートやMarkdownの作成、変更を瞬時に表示する ローカルのHttpサーバーの機能があります。その為、サクサク作成することが出来ます。

テンプレートは、ブログなどの出来るほどの機能が豊富に提供されています。

一番のメリットは、静的なので表示が早い事です。この記事の時点で、特にチューニングしていないのですが、 PageSpeed Insightsで測定しましたら、モバイル 97点、PC 100点でした。

Hugoのデメリット

テンプレートの機能が豊富に提供されていますが、足りない場合が出てきます。 私の場合はブログカードを作成する機能が足りなかったです。

これを解決する為には、外部のサーバーからJSONを取得するテンプレートの機能を利用しました。

外部ページのOGPタグの内容を取得して、その内容JSONレスポンスを返すWeb APIをGoで開発しました。

そしてサイトジェネレーション時に、開発したAPIからJSONを取得するようにテンプレートを書いて、ブログカードを作成するようにしました。

今後の運営予定

技術系サイトという事で、はてなブログのGo関係の記事と同じ内容のページを、 とりあえず作成しました。

今後は、HugoとFlutter関係の記事を書いていこうと思います。

チューニング関係は、webpの対応など行う予定です。

newer