個人のウェブサイトを維持する怠惰なプログラマーのためのガイド

多くの開発者は、個人の Web サイトを持っているか、それを持ちたいと思っています。

コーディングのスキルがなくても美しいウェブサイトを構築するための優れたオプションはたくさんありますが、私たちはソフトウェア開発者であるため、スキルを披露してゼロから何かを構築したいと考えています。

Web サイトのコーディングは 1 つの作業であり、1 ～ 2 日で完了する可能性があります。ただし、Web サイトが公開されたら、それが利用可能で、最新で、安全であることを確認するために維持する必要があります。

したがって、以下では、10の簡単なステップで最小限の労力で個人のWebサイトを構築および維持する方法を見ていきます.私たちはコーディングが好きかもしれませんが、コンピューターから離れた時間も好きだからです。 🌳🤸🍝

例として、最近 React で再構築した私の Web サイトを使用します。ソース コードは、私のGitHub リポジトリにあります。

以下のヒントとコツは、フロントエンド部分のみで構成される非常にシンプルで静的な Web サイトを想定しています。ただし、これらの概念をバックエンド、データベース、またはその他のインフラストラクチャを含むより複雑なプロジェクトに簡単に拡張できます。

言及されているテクノロジーの詳細については説明しませんが、テクノロジーにとらわれないように概要を説明します。

1.リポジトリを設定する

GitHub や GitLab などの開発プラットフォームを選択し、新しい空のリポジトリをセットアップします。コミュニティがあなたのコードで何ができるかを理解できるように、必ずライセンスを含め、README を追加してください。

2. JS フレームワークを選択する

Web サイトの構築に使用する JavaScript フレームワークまたはライブラリ (React、Vue、Svelte など) を選択します。または、試してみたい場合は、Vanilla HTML と JavaScript を使用してください。

どのフレームワークを選択するかを選択する際に最も重要なことは、それがあなたが楽しく作業できるものであることです。

これはあなたのウェブサイトであり、好きなツールを使用できます。すでに知っていて気に入っているものを選ぶことも、興味を持っていたまったく新しいことを試すこともできます。

Vue.js で最初の個人用ホームページを作成しました。約 1 年後、React で再構築しました。これは、より実践的な React の経験を得て、いくつかの React ライブラリを試してみたかったためです。

JS フレームワークのビルド ツールを使用してボイラープレート コードを生成し、localhost で提供される単純な Hello World スタイルの例を取得します。

3. UI コンポーネント ライブラリを選択する

このステップはオプションですが、ここでは労力を最小限に抑えることについて話しているため、Material UI や Bootstrap などの UI コンポーネント ライブラリをプロジェクトに含めることをお勧めします。ウェブサイトに Chakra UI を選びました。

これらのライブラリには、一連の UI コンポーネントと、レイアウトとスタイリングのためのユーティリティが付属しており、超高速でビルドできます。

視覚的に魅力的で、多くのコンポーネントを含み、簡単にカスタマイズできる、十分に文書化されたコンポーネント ライブラリを選択してください。 Web サイトのライブラリの外観をカスタマイズするには、フォントや配色をいじってみるのも楽しいでしょう。 🎨

4. 超シンプルなものを作る

ホームページに表示する情報について考えてから、UI コンポーネント ライブラリのコンポーネントを使用して何かを構築してください。考えすぎないでください。

現在の主な目標は、何かを迅速に実現することです。Voltaire がすでに知っていたように、完璧は善の敵です。

あなたのウェブサイトに何を表示するかについて、言いたいことがたくさんあり、多くのアイデアがあるなら、それは素晴らしいことです!先に進んで構築しますが、最初にコンテンツを整理する方法について計画を立てます。ルーティング、さまざまなビュー、セクション、レイアウト、ナビゲーションなどを考えてください。

しかし、あなたが私のような人なら、この時点で、自分のホームページに何を載せるべきか、そしてなぜホームページを作成する必要があるのか を自問するかもしれません。 😳

あなたの気持ちは完全に正当ですが、オンラインで存在感を示すために誰かの許可や派手なコンテンツは必要ありません.

非常にシンプルに保ち、訪問者 (インターネットにアクセスできる人なら誰でも構いません - 心に留めておいてください) と共有しても構わないと思う自分に関するいくつかのことを共有するだけです。

私のウェブサイトでは、私自身についての写真とキャッチフレーズ、私の技術スタックのリスト、私が好きなもの、いくつかの本の推奨事項を最小限に抑えました. 📚 LinkedIn と GitHub へのリンクも含めました。

5. 楽しいことを追加する

ステップ 4 では、非常に単純なものを作成しましたが、単純だからといって退屈ではありません。それでは、インタラクティブにしましょう。 🚀

あなたのウェブサイトへのアクセスをより楽しく興味深いものにする簡単な方法をいくつか考えてみてください。これには、アニメーション、ユーザー インタラクション、配色の変更などが含まれます。ただし、車輪を再発明しないでください。

何をすべきか考えている場合、まさにそれを行う npm パッケージが既に存在する可能性があります。

ナビゲーション バーのスクロール アニメーション、素敵なトランジションでダーク モードとライト モードを切り替えるボタン、サプライズ紙吹雪パーティーを開始するアイコン ボタンを使用しました。

反応紙吹雪.

以上で、Web サイトを作成できました。 🥳 次はデプロイとメンテナンスの方法を見てみましょう。

6.デプロイする

Netlify、Vercel、GitHub Pages など、Web サイトを完全に無料でインターネットにデプロイする方法には多くのオプションがあります。

正確な手順は、選択したプロバイダーによって異なるため、Web サイトが何らかの URL で公開されるまで、ガイドに従ってください。

私は Netlify を使用しましたが、セットアップが非常に簡単であることがわかりました。

オプションの手順として、カスタム ドメイン名を購入し、それをプロバイダーの DNS に接続して、取得した任意の URL を置き換えることを決定する場合があります。そうする必要はありませんが、カスタム ドメイン名はいい感じだと思います。

7. CI/CD のセットアップ

ウェブサイトがインターネット上に公開されたので、将来のコミットで誤ってウェブサイトを壊さないようにする必要があります。また、 mainブランチの最新バージョンを自動的にデプロイする必要もあります。

開発プラットフォームには、GitHub Actions や GitLab CI/CD などの CI/CD ツールが既に組み込まれている場合があります。

私のリポジトリは GitHub にあるので、GitHub Actions を使用しています。

継続的インテグレーションの場合、すべてのプル リクエストとmainブランチへのすべてのマージに対して自動チェックを設定できます。これには、linting&formatting や単体テストなどのチェックが含まれる場合があります。

利用可能なテンプレートも多数あります。たとえば、ビルド済みの GitHub アクションを使用して、CodeQL で脆弱性を発見します。

継続的配置の場合、すべてのチェックが完了した後、 mainへのプッシュごとに実行される独自の配置スクリプトを設定できます。ただし、手順 6 で選択したホスティング プロバイダーによっては、何もする必要がない場合があります。

たとえば、Netlify は GitHub とうまく統合されているため、 mainブランチが自動的にデプロイされます。

8. Dependabot を使用して依存関係を最新の状態に保つ

私たちはウェブサイトを構築し、それをライブに設定しました。しかし、JS エコシステムは急速に進化しており、その脆弱性も進化しています。

アプリケーションを安全に保つために依存関係が最新であることを確認したいのですが、npm の依存関係の管理は面倒な場合があり、毎日更新を確認したくはありません。

幸いなことに、Dependabot という優れた小さなツールがあり、これらすべてを処理してくれます。 🤖 Dependabot は、自動化された依存関係の更新のために GitHub によって作成されたツールです。 GitLab のバージョンも利用できるようになりました。

dependabot.ymlファイルを追加するだけで、使用するパッケージの新しいバージョンが利用可能になると、GitHub が自動的にプル リクエストを作成します。たとえば、PR の担当者やオープン PR の最大数を設定するために、YAML ファイルで Dependabot を構成できます。

ステップ 7 で PR の自動チェックを設定したので、これらはすべての Dependabot PR で実行され、新しいバージョンが Web サイトを壊すことはないと確信できます。

リポジトリのセキュリティ設定では、依存関係の脆弱性について警告するようにdependabotを構成することもできます。

9.アクセシビリティの問題を確認する

アクセシビリティは非常に奇妙なトピックです。ウェブサイトのアクセシビリティの改善に関しては、非常に多くの簡単な成果があるにもかかわらず、非常に重要ですが、しばしば無視されます.

JS フレームワークと UI コンポーネント ライブラリを使用している場合、アクセシビリティ スコアがまったくひどいものになることはありません。特にカスタムフォントや配色を含めた場合は、おそらくまだ改善される可能性があります.

Chrome Dev Tools で Lighthouse のようなツールを実行して、改善の可能性を発見できます。 Lighthouse はレポートを生成し、アクセシビリティを改善するための変更を提案します。

これらの提案は通常、フォント サイズを大きくしたり、テキストと背景のコントラストを変更したり、DOM 内の HTML 要素の順序を変更したりするなど、簡単に実装できます。

Lighthouse は、パフォーマンス、ベスト プラクティス、および SEO に関するレポートも生成できます。 🆒

10. Cron ジョブを実行して Web サイトに ping を送信する

ウェブサイトを公開した後、少なくとも 1 日に 1 回はウェブサイトがまだ残っているかどうかを確認したいという衝動に駆られました。 🕵️‍♀️

最初は、自分のウェブサイトがまだ公開されているのを見るたびにうれしかったのですが、すぐに飽きてしまいました。

Web サイトが何らかの理由でダウンした場合に自動的に通知されるようにするには、Web サイトの URL を定期的に ping するだけの cron ジョブを設定できます。

プロジェクトにバックエンドと DB が含まれている場合は、API でGETリクエストなどを実行する基本的なスモーク テストをセットアップすることもできます。

私の場合、1 日に 1 回実行され、自分のページに ping を送信する別の GitHub アクションをセットアップしました。ホームページや予想されるトラフィックの種類に合わせて、頻度を増やしてください。

結論

これで完了です。今のところ、少なくとも。

私にとって、私の Web サイトは何よりもまず、興味のあるテクノロジを試すための遊び場として機能するので、ときどき変更するのが好きです。ウェブサイトのコードを定期的に見直して、ただ楽しんでいただくことをお勧めします。 💃

このガイドで、個人のホームページを簡単に作成および維持できることを理解していただければ幸いです。おそらく 1 ～ 2 日で簡単なものを作成できます (私のようであれば、CSS レイアウトを正しくするためにさらに 2 日追加してください 🙄)。

Web サイトをデプロイし、自動化を追加してメンテナンスを簡単にする作業は、2 時間以内で完了できます。

あなたが構築するすべての素晴らしいウェブサイトを見るのを楽しみにしています! 🤩