I am writing about my experiences as a naval navel-gazer. 2022-08-02T00:00:00Z https://example.com/ EnthusiasticProgram / cooperateplz / -p-e-n- 2022-08-02T00:00:00Z https://example.com/posts/website-update/ <h2 id="" tabindex="-1"><a class="direct-link" href="https://example.com/posts/website-update/#" aria-hidden="true">#</a> はじめに</h2> <p>みなさん元気ですか！！</p> <p>私はバリバリ元気です。</p> <p>さて！！！！！みなさんもちろんわかっておられると思いますが！！！</p> <p><strong>ささっっさささああサイトをアップデートしました！！！！！</strong></p> <p>わーーーーーい！！！</p> <p>この記事では今に至るまで何をしたのかについて紹介していきたいと思います！！</p> <h2 id="-1" tabindex="-1"><a class="direct-link" href="https://example.com/posts/website-update/#-1" aria-hidden="true">#</a> なんでリニューアル？？</h2> <p>リニューアルしたのは、</p> <ul> <li>記事を投稿する手間が大変だった</li> <li>サイトのデザインがいまいちときめかなかった</li> </ul> <p>などの理由からです。</p> <p>やっぱりどうせWordPressとかのサービスを使わずに自分でサイトを作ったんだからどんどん使っていきたいじゃないですか！！</p> <p>そのためにも、記事を作りやすい環境を作っていきたいわけです。</p> <h2 id="-2" tabindex="-1"><a class="direct-link" href="https://example.com/posts/website-update/#-2" aria-hidden="true">#</a> 静的サイトジェネレーターの選択</h2> <p>難しい話です。</p> <p>静的サイトジェネレーターとは、静的サイトを生成する仕組みや処理のことです。</p> <p>ん？？静的サイト？？</p> <blockquote> <p><em>『静的サイトとは、「誰が」「いつ」「どこで」見ても同じ情報が表示されるホームページのことです。』</em>（<a href="https://www.xserver.ne.jp/bizhp/differences-between-static-and-dynamic-sites/">初心者のための会社ホームページ作り方講座</a>引用）</p> </blockquote> <p>とのことです。なんとか掴めたでしょうか。</p> <p>とにかく、静的サイトを作るプログラムが静的サイトジェネレーターということです。</p> <p>静的サイトジェネレーターにも種類があって、サイトを作る上でその中から１つ選ばないといけません。</p> <p>私が最初にアップロードしたブログ「<a href="https://enthusiasticprogram.github.io/">Enthusiastic</a>」はJekyllを使用しています。シンプルで作りやすかった覚えがあります。</p> <p>次にリニューアルした「<a href="https://enthusiasticprogram.netlify.app/">Enthusiastic</a>」（上とは別サイトです）はHugoを使用しています。テンプレートをいじった程度なのであまりわかりませんでしたが、ちょっと私には難しかったです。</p> <p>そしてこのサイト。何を使おうかすごく悩みました。</p> <p>まずはNext.jsです。静的サイトジェネレーターで検索すると割とインターネットが勧めてくるので使いやすいのかなと思い使ってみました。私がJavaScriptの基本的な記法を全く勉強していなかったせいでReactもよく分からなかったので、私の技術力では全く敵いませんでした。</p> <p>次にGatsbyを使ってみました。なんとなくです。Gatsbyもよく使われているようで、いい感じなのかなと思って使ってみましたが、やはり私の技術力ではカスタマイズは難しかったです。またも勉強不足を実感させられました。</p> <p>最終的にEleventyに落ち着きました。Javascriptはあまり使わず、Nunjucksという言語で記述していくのですが、HTMLの記法をそのまま使えて私にはとてもありがたかったです。所々で機能の物足りなさを感じましたが、それにも丁度いいプラグインが豊富にあるのでとても作りやすかったです。</p> <h2 id="-3" tabindex="-1"><a class="direct-link" href="https://example.com/posts/website-update/#-3" aria-hidden="true">#</a> 装飾</h2> <p>CSSのフレームワークはBulmaを使いました。</p> <p>BootstrapだったりTailwind CSS、Material UIなどいろいろありますが、実装が簡単そうだったのでBulmaを使いました。</p> <p>直感的に実装できて、とても簡単でした。</p> <p>何よりドキュメントが豊富でとても助かりました！！</p> <h2 id="-4" tabindex="-1"><a class="direct-link" href="https://example.com/posts/website-update/#-4" aria-hidden="true">#</a> 全体的に？？</h2> <p>Eleventy公式のテンプレート「eleventy-base-blog」を基にカスタマイズして作りました。元のclassのところを消したりリンクしているところを変えたりしました。</p> <h2 id="-5" tabindex="-1"><a class="direct-link" href="https://example.com/posts/website-update/#-5" aria-hidden="true">#</a> まとめ</h2> <p>2022年の7月中旬から始めて、ついに８月初旬に動くまでになんとか漕ぎ着けました。とにかく夏休みを潰したくないと思って死ぬ気で進めていったので、３分の１ほどで完成できてよかったです。</p> <p>このような大きなプログラミングを時々やってみると、自分の技術力不足が身にしみて分かります。</p> <p>また、このサイトでは今まで私が作ってきたいろいろなものを順次公開してい来ますので、思い出した時にでも戻ってきてください。</p> <p><strong>プログラミングは体力を使う！！</strong></p> <p><strong>邪悪な力に負けないで下さい</strong></p> <p><strong>お兄ちゃんLineやってる？？？？？？</strong></p> <p>以上です。</p>