ブログをhugoで作り直した

· 3分で読了

前からやろうと思ってたんだけどやっとやった…
このサイト、前はzoneletsだったけど今はhugoになっている!テーマはbear cub(色々調整をしたからzonelets時代と見た目がほぼ一緒だけど)

左のほうはzonelets(前)で右のほうはhugo(今)のサイト。あんまり変わらないだろう?

スクリーンショットが2つ並んでいる。ナビゲーションに言語切替が追加されて真ん中よりじゃなくなったこと以外ほとんど一緒に見える。

zoneletsは簡単だから好きだけど、hugoのような静的サイトジェネレーターは前から気になってた+javascriptが面倒になったという理由で変えてみた。

それに合わせて…

🎉フィードも新しくなった!🎉

neocitiesが自動に作ってくれるフィードじゃなくてhugoが作ってくれるフィードにした。あと言語ごとにフィードが違うので言語が日本語のときにフィードのボタンを押すと、日本語のフィードに飛ぶようになっている。

各言語のフィードには各言語のアップデートだけ入るようにしているから結構良い感じになっていると思う。

フィードリーダー使っているならナビゲーションにあるフィードのボタンをクリックしてみて✨

どうしてhugo?

まあ一番大きのは多言語サポートだね。前は英語のみだったけどこれで日本語でも読めるようになった。

過去の記事とかは少しずつ日本語にしていくつもり(でもめんどくさいから全部日本語にするかはまだ決まってない…)

右上にあるボタンをクリックすれば言語切替ができるよ~簡単簡単

またマークダウンで書けるのが良い。zoneletsはhtmlだったから地味にめんどくさかった。これなら書くまでのハードルが低くなったのでもっと書ける(はず)

あとhugoならショートコードとかで色々できて楽しい。絵文字とかも:text:でそのまま入力できる。

ショートコードでいうとbandcampとitch.ioようなのを入れてみた。{{< itch EMBEDCODEHERE >}}って書けばゲームをエンベッドできるようになってて便利。

(こんな感じ!)

ギャラリーのサムネイルとかもフォルダーに入れてサイトをビルドするだけで自動に作ってくれてめっちゃ楽(前はクリスタで手動でやった😓)

参考コードはこれ

js使えばもっといい感じのギャラリーが作れるけど完全静的サイトが良いのでや~めた~

作り方

最初はgithubでgithub actionsでビルド+デプロイをやろうかなと思ったんだけど(Tokyo Indiesではそうやってgithub pagesにデプロイしている)やってみたら以外とめんどくさかったので、今はローカルでビルドしてアップロードしているだけ😅

このneocitiesの記事を参考にしながら作った。.batでのテストビルドは簡単で便利!(ターミナルを毎回開くのって地味に面倒なので😆)

バンドキャンプのショートコードも読了時間の表示もさっきの記事からアイデアを取ってみた。

コメントはないまま

コメントやゲストブックなどを追加しようかなと思ったけど、このスペースはやはり自分だけのスペースにしたいのでなし。

#journal


または


« TOP »