ウェブサイトの作成には多大な投資が必要です。ウェブサイトを構築するすべてのステップに対して料金を支払う必要があります。
個人的または職業上の成長のために無料のウェブサイトを作成したいですか?ここでは、カスタム ドメイン名、永久無料ホスティング、完全無料の SSL 暗号化を使用して次の Web サイトをデザインする方法を紹介します。ふぅ!他に何をお願いできますか?
ウェブサイトを持つことで成長率が大幅に高まるのは当然のことであり、今日ではそれは贅沢というよりは投資のようなものです。これは企業だけでなく、個人も個人の Web サイトを通じて大きな利益を得ることができます。
ドメイン名の登録、Web サイトのコンテンツのホスティング、Web サイトの構築、SSL 暗号化の有効化など、ポケットを空にする準備ができている必要があります。痛みに加えて、これらの出費の一部は繰り返し発生し、永久に続きます。
ウェブサイト構築における上記の重要な手順をすべて無料で実行しながら、無料のウェブサイトを作成できると言ったらどうなるでしょうか?この世のものとは思えないかもしれませんが、学生であればこれらすべてを無料で行うことができます。
GitHub に詳しい方は、GitHub Pages についてもご存知かもしれません。すべての GitHub アカウントに付属するサービスを無料で使用できます。 GitHub Pages を使用すると、すべてのユーザーが無料の Web サイトを作成してホストできますが、大きな注意点があります。これらの無料 Web サイトのドメイン名は基本的に github.io で終わるため、Web サイトの専門性が台無しになります。
GitHub Student Developer Pack とは何ですか?
Web サイトを真剣に受け止めるユーザーは少なく、不必要に長いドメイン名を持つことは決して良い考えではありません。でもね!ここでは、GitHub Pages の特典や注意点について話すつもりはありません。カスタム ドメイン名を使用して無料の Web サイトを作成できる方法を約束しました。その方法を次に示します。
GitHub は、GitHub Student Developer Pack として知られる、学位コースまたはディプロマ コースに登録しているすべての学生に、便利なオンライン ツールが詰まった素晴らしいキットを利用する機会を提供します。このパックには、プロ サブスクリプションと、Canva、Namecheap、Microsoft Azure、Discord、Name.com、StreamYard などの人気ツールの驚くべき割引が含まれています。
この記事では、Namecheap を使用して無料のカスタム ドメインを登録し、GitHub ページを使用して Web サイトをホストします。次に、HTML、CSS、JavaScript ファイルをデザインして GitHub ページにアップロードする方法を見ていきます。最終的には、Web サイトの SSL 暗号化も有効にする予定ですが、何よりもまず Student Developer Pack に登録する必要があります。
GitHub Student Developer Pack に申し込むにはどうすればよいですか?
Student Developer Pack に登録するプロセスは、結局のところ、大学から付与された学生メール アドレスを取得することになります。学生の電子メール アドレスは通常、大学のドメイン名で終わります (例: imastudent@mywvm.wvm.edu)。パックに登録する他の方法もありますが、学生の電子メールを使用するよりもはるかに長いレビュー時間が必要です。学生のメール アドレスを用意している場合は、次の方法でパックに登録できます。
ステップ 1: GitHub educationに移動し、「サインイン」オプションをクリックします。
すでにパックをお持ちの場合は、資格情報を使用してログインできます。それ以外の場合は、以下の手順に従ってください。
「サインイン」ウィンドウで「アカウントの作成」オプションをクリックします。
ステップ 2:次に、学生のメールアドレスを使用して登録し、アカウントを作成します。
ステップ 3: 「あなたの学業状況を最もよく表すものはどれですか?」というプロンプトが表示されたら、必ず「学生」を選択してください。
ステップ 4:次に、学校の名前と GitHub の使用目的に関する詳細を必要なボックスに入力します。
ステップ 5 :最後に、「情報を送信する」オプションを使用してアプリケーションを送信します。
アプリケーションが GitHub によって承認されると、開発者パックに関する確認メールが届きます。このプロセスには通常数日かかりますが、ピーク時には時間が大幅に異なる場合があります。
学生のメールアドレスを使用せずに GitHub Student Developer Pack に申請するにはどうすればよいですか?
GitHub では、有効な学生 ID カードまたはその他の学業上のステータスを証明するものを使用してパックを申請するオプションも提供します。唯一の注意点は、待ち時間が長いことと拒否率が高いことです。とにかく、この方法で学生パックに申し込む方法は次のとおりです。
ステップ 1:上記の手順に従って、個人メールでアカウントを作成します。
ステップ 2:次に、カメラ オプションを使用して学歴の証明書をアップロードするか、[アップロード] ボタンを使用して写真を GitHub に直接アップロードします。
ステップ 3:次に、学校の名前や GitHub の使用目的など、必要な詳細をすべて入力します。
ステップ 4:申請書を送信します。
Namecheap を使用してカスタム ドメインを登録するにはどうすればよいですか?
GitHub Education アカウントを立ち上げて実行していると思います。次の手順では、Namecheap を使用して無料のカスタム ドメインを登録し、GitHub Pages を通じてホストします。次の手順に従って、希望のドメイン名を登録します。
ステップ 1: GitHub Education アカウントにログインし、「特典」セクションに移動します。
Web 開発キットと仮想イベント キットが表示されるはずです。
ステップ 2: Virtual Event Kit に移動し、下にスクロールして Namecheap を見つけます。
GitHub では、.me TLD で 1 年間のドメイン名登録を提供しています。これには、[アクセスを取得] オプションをクリックしてアクセスできます。
ステップ 3:次のウィンドウでは、Namecheap から GitHub アカウントへの接続リクエストを承認するように求められます。 Namecheap を認証し、次のステップに進みます。
認証が成功すると、「GitHub を使用して学生パックを正常に検証しました」というプロンプトが表示されます。
ステップ 4:検索バーから希望のドメインを見つけて、「検索」をクリックします。
次の画面に、利用可能なドメイン名が表示されるはずです。ドメイン名が利用可能な場合は、無料で購入に進むことができます。
ステップ 5: GitHub Education の電子メール アドレスを使用してチェックアウトし、続行中にホスティング方法として GitHub Pages を選択します。
カスタム ドメイン名を正常に登録し、ホスティングとして GitHub Pages を選択すると、Namecheap は GitHub アカウントにリポジトリを自動的に作成します。このリポジトリは完全に空で、README.md ファイルのみが含まれています。
このリポジトリにアクセスするには、GitHub アカウントにログインし、「Your Repositories」セクションをクリックします。 GitHub Pages は、Web サイト用のビジュアル ツールや事前構築されたテーマを提供しません。 Web サイト全体を手動でコーディングし、関連ファイルを新しく作成した GitHub リポジトリにアップロードする必要があります。
無料の Web サイトを作成して GitHub Pages でホストするにはどうすればよいですか?
上で述べたように、Web サイトに関連するすべての HTML、CSS、および JavaScript ファイルを作成する必要があります。 Web 開発に興味があり、コードの作成方法を知っている場合は、GitHub リポジトリにファイルをアップロードして Web サイトを実行できます。この記事の、GitHub Pages への Web サイト コードのアップロードに関するセクションまでスクロールできます。
ただし、Web 開発に関する情報がほとんどまたはまったくない人でも、私たちがカバーします。以下に示す手順に従い、基本的な HTML を使用して独自の Web サイトをデザインできます。
ステップ 1: HTML5 UPに移動し、好みの Web サイトのデザインまでスクロールします。任意のプラットフォームから他の事前構築済みテーマを選択できます。ここでは HTML5 UP の「Massively」を選択しましたが、お好みの Web サイトのデザインを自由にダウンロードしてカスタマイズすることができます。
ステップ 2:ダウンロードしたお気に入りの Web サイトデザインの zip ファイルを解凍します。
抽出されたフォルダー内に、index.html および generic.html という名前のファイルと、アセットや画像などのフォルダーが表示されるはずです。
ステップ 3: Visual Studio Code を使用して抽出されたファイルを開き、index.html ファイルを選択します。
ステップ 4: 「Live Server」拡張機能をまだダウンロードしていない場合は、Visual Studio Code にインストールします。
ステップ 5: index.html ファイルを選択し、マウスの右ボタンをクリックして、「ライブサーバーで開く」オプションを選択します。このオプションを使用すると、HTML ファイルの変更をブラウザーでリアルタイムに視覚化できます。
ウェブサイトのデザインをカスタマイズするにはどうすればよいですか?
ここから先のプロセスを、Web サイトをカスタマイズするための「ステップ」とは呼びません。 HTML ファイルのカスタマイズは完全にお好み次第ですが、HTML5 UP の「Massively」デザインをカスタマイズしてポートフォリオに変換する方法を以下に示します。ここからインスピレーションを受けることも、Web サイトを完全に自分でカスタマイズすることもできます。選択はあなた次第です!
タイトルタグと段落タグを変更する
カスタマイズプロセスを開始して、タイトルタグを「Massively」に変更しました。 HTML ファイルのタイトルタグは、ブラウザタブで開かれるときの名前を決定します。 Massively のデフォルトのタイトルは「Massively by HTML5 UP」である必要があります。Web サイトに似たタイトルに変更することをお勧めします。
タイトルタグを「サムヤク・ゴスワミ | サムヤク・ゴスワミ」に変更しました。 Tech Content Writer」が私のポートフォリオに最適だったためです。次に、Web サイトの「これは Massively」(H1 タグに含まれる) というイントロ セクションを変更し、明らかな理由から「Samyak のポートフォリオ」にしました。その後、段落タグ内の以下のテキストを「私のプロジェクトと私の能力のショーケース」に変更しました。
インデックス ファイルのナビゲーション (Nav) セクションに移動し、List タグに含まれる 3 つのナビゲーション ボタンのうち 2 つを省略しました。すべての詳細を 1 つのページにまとめた単一ページの Web サイトを作成したいと考えていましたが、ナビゲーション ボタンの数は好みに応じて自由に変更できます。
その後、ナビゲーション ボタンの「This is Massively」というテキストを「My Articles」に変更しました。
ソーシャルメディアのリンクとアイコンの変更
Twitter、Facebook、Instagram、GitHub など、ライブ サーバー上のさまざまなソーシャル メディア アイコンも確認する必要があります。私のユースケースでは、Twitter と Facebook を省略し、Instagram と LinkedIn を保持することにしました。
ソーシャル メディア アイコンとそのリンクを変更するには、ナビゲーション (Nav) セクションに移動し、Twitter、Instagram などが記述されたタグのリストまでスクロールします。
href タグが空白のままであるため、これらのソーシャル メディア アイコンにリンクが添付されていないことに注目してください。 「#」を任意のリンクに置き換えることで、href タグにリンクを追加できます。
ホームページのコンテンツの変更
まず、H2 タグを変更して「私の名前は Samyak Goswami」に変更し、続いて段落タグを「私は技術愛好家です…」に変更しました。 H2タグをホームページの内容とそれを説明する段落タグに合わせたものに変更することをお勧めします。
私たちは現在、このカスタマイズの最も重要な部分を考え出しています。記事タイルのコンテンツを変更する。
これを行うには、インデックス ファイルの Posts セクションに移動すると、Article タグに含まれる複数のコード スニペットが表示されるはずです。ソーシャル メディア アイコンにリンクを追加したときと同じように、href セクションを変更することで、ストーリーにリンクを追加できます。
後で、H2 タグ内の内容を変更することで、記事の名前を変更できます。段落タグを使用して記事に説明を追加することもできます。
すべての記事にリンクを追加し、名前を変更し、説明を追加するという手順を記事ごとに繰り返します。
Web サイトに画像を追加する
プレビューが HTML5 UP Web サイトにある画像とはかなり異なって見えることに気付いたはずです。これは、カスタマイズ可能なファイル内の飛行機と当たり障りのない写真が原因です。カスタム画像を追加して、Web サイトにスパイスを加えてみましょう。
これを行うには、以前に「Massively」zip ファイルを解凍したフォルダーに移動します。抽出したフォルダーを開き、Images フォルダーに移動します。 bg、pic01、pic02 などの名前の異なる画像が表示されるはずです。これらは、Article タグで記事にリンクされている画像です。
カスタム イメージを追加して、これらのイメージの名前を使用してインデックス ファイルを変更することも、イメージを追加してデフォルト イメージと同様の名前を付けることもできます。画像に同じ名前を付けると、コードを変更する必要がなくなり、その後の時間を大幅に節約できます。
ウェブサイトの重要ではない他のセクションを校正して変更することをお勧めします。
最終的に Web サイトのコーディングとデザインが完了したら、Web サイトを GitHub Pages にアップロードして、インターネット上で公開します。
Web サイトを GitHub Pages にアップロードする方法は次のとおりです。
ステップ 1: GitHub アカウントにログインし、「マイ リポジトリ」セクションに移動します。
ステップ 2: your_username.github.io という名前のリポジトリが表示されるはずです。このリポジトリに移動します。
ステップ 3:独自のファイルを作成するか、ファイルを GitHub リポジトリにアップロードするオプションが表示されます。
ステップ 4: 5 つのファイルとフォルダーをすべて選択します。アセット、イメージ、要素、ジェネリック、インデックスを作成し、リポジトリにドラッグ アンド ドロップします。
ファイルがアップロードされたら、コードをコミットし、GitHub がファイルを処理するまで待ちます。
ステップ 5: [設定] > [GitHub ページ] に移動して、Web サイトのステータスを確認します。 「あなたの Web サイトは your_custom_domain で公開されています。」というプロンプトが表示されます。
Web アドレスにアクセスして、自分で Web サイトを確認できるようになりました。 Web サイトが最初に公開されるまでには時間がかかる場合があることに注意してください。
GitHub Pages で SSL 暗号化を有効にするにはどうすればよいですか?
HTTP は、Web サイト上のユーザーリクエストを管理する安全ではない方法です。悪意があり、確かな技術知識を持つ人であれば誰でも、ユーザーと Web サイト間のやり取りを傍受できます。一方、HTTPS はすべての訪問者に、より安全なブラウジング セッションを提供します。 GitHub Pages は無料の HTTPS 暗号化を提供しており、それを利用する方法は次のとおりです。
リポジトリの「ページ」セクションまでスクロールします。
ウィンドウの最後に「HTTPS を強制する」オプションが表示されます。 [HTTPS を強制する] チェックボックスをオンにすると、すぐに SSL 暗号化が有効になります。
ドメインで [HTTPS を強制する] オプションが利用できない場合は、以下の手順を使用して SSL 暗号化を有効にすることができます。
ステップ 1 : Namecheap アカウントにログインし、「ドメイン リスト」セクションに移動します。
ステップ 2: [ドメインの管理] に移動し、続いて [詳細 DNS] セクションに移動します。
既存の CNAME レコードと A レコードがいくつか表示されるはずです。
ホストを「@」、IP アドレスを「185.199.108.153」として、次の A レコードを追加します。次はホスト名「@」、IP アドレス「185.199.109.153」です。
IP アドレス「185.199.111.153」までの A レコードが 4 つになるまで傾向に従います。
以前の A レコードをすべて削除します。
ステップ 3:次に、ホストを「www」、値を GitHub ユーザー名 (ドット) github (ドット) io として CNAME レコードを追加します。
以前の CNAME レコードを削除します。最終的に、DNS 設定には 4 つの A レコードと 1 つの CNAME レコードが必要になります。
ステップ 4:次に、「設定」セクションの GitHub ページに移動します。これで、ドメインで [HTTPS を強制する] オプションが利用できるようになります。
まとめ 👈
GitHub は、すべての学生に無料の Web サイトを作成して管理する素晴らしい機会を提供します。 GitHub Pages を大量のトラフィック負荷のホストには使用できませんが、小規模な静的 Web サイトのすべてのチェックボックスにチェックを入れます。無料のカスタム ドメイン名、ホスティング、SSL 暗号化を利用すると、さらに便利になります。
ここで、「新しい Web サイトの Web ホストを選択する方法」をお読みください。
Web サイトがダウンしたときに通知するページ速度監視ツールをいくつか紹介します。