カスタムドメイン名、ホスティング、SSL暗号化を使用して無料のWebサイトを作成するにはどうすればよいですか？
公開: 2022-01-07ウェブサイトの作成は深刻な投資です。 あなたはウェブサイトを構築するすべてのステップにお金を払わなければなりません。
あなたは個人的または専門的な成長のために無料のウェブサイトを作りたいですか？ カスタムドメイン名、生涯無料ホスティング、SSL暗号化を完全に無料で使用して次のWebサイトを設計する方法は次のとおりです。 ふぅ！ 他に何を求めることができますか？
ウェブサイトを持つことはあなたの成長の数字を大幅に押し上げることは簡単です、そして今日それは贅沢よりも投資です。 これは企業だけでなく、個人のWebサイトを通じて個人にも大きなメリットをもたらすことができます。
ドメイン名の登録、Webサイトのコンテンツのホスティング、Webサイトの構築、SSL暗号化の有効化など、ポケットを空にする準備ができている必要があります。 痛みに加えて、これらの費用の一部は繰り返し発生し、永遠に続きます。
ウェブサイトの構築において上記の重要なステップをすべて無料で実行しながら、無料のウェブサイトを作成できると言ったらどうでしょうか。 世俗的ではないように聞こえるかもしれませんが、学生であれば、これらすべてを無料で行うことができます。
GitHubをご存知の場合は、GitHubPagesについてご存知かもしれません。 すべてのGitHubアカウントに付属しているサービスを無料で使用できます。 GitHub Pagesを使用すると、すべてのユーザーが無料のWebサイトを作成してホストできますが、大きな注意点があります。 これらの無料のウェブサイトのドメイン名は基本的にgithub.ioで終わり、ウェブサイトのプロ意識を台無しにします。
GitHub Student Developer Packとは何ですか？
あなたのウェブサイトを真剣に受け止めるユーザーは少なくなり、不必要に長いドメイン名を持つことは決して良い考えではありません。 でもねえ！ GitHubPagesの特典や注意点について話すためにここにいるわけではありません。 カスタムドメイン名で無料のウェブサイトを作成できるようにする方法を約束しました。その方法は次のとおりです。
GitHubは、GitHub Student Developer Packと呼ばれる、学位または卒業証書のコースに登録しているすべての学生に、便利なオンラインツールが満載の素晴らしいキットを利用する機会を提供します。 このパックには、Canva、Namecheap、Microsoft Azure、Discord、Name.com、StreamYardなどの人気のあるツールのプロサブスクリプションと驚異的な割引が含まれています。
この記事では、Namecheapを使用して無料のカスタムドメインを登録し、GitHubページを使用してWebサイトをホストします。 次に、HTML、CSS、JavaScriptファイルをデザインしてGitHubページにアップロードする方法を見ていきます。 最終的には、WebサイトのSSL暗号化も有効にしますが、何よりもまず、StudentDeveloperPackに登録する必要があります。
GitHub Student Developer Packを申請するにはどうすればよいですか？
Student Developer Packに登録するプロセスは、大学から付与された学生の電子メールアドレスを持つことになります。 学生の電子メールアドレスは通常、大学のドメイン名で終わります。たとえば、[電子メールで保護]パックに登録する方法は他にもありますが、学生の電子メールを使用するよりもはるかに長いレビュー時間が必要です。 学生のメールアドレスを用意している場合、パックに登録する方法は次のとおりです。
ステップ1： GitHub教育に移動し、[サインイン]オプションをクリックします。
すでにパックをお持ちの場合は、クレデンシャルを使用してログインできます。 それ以外の場合は、以下の手順に従うことができます。
[サインイン]ウィンドウで[アカウントの作成]オプションをクリックします。
ステップ2：次に、学生の電子メールを使用して登録し、アカウントを作成します。 
ステップ3： 「あなたの学歴を最もよく表しているのはどれですか？」というプロンプトが表示されたら、必ず[学生]を選択してください。 
ステップ4：必要なボックスに、学校の名前とGitHubの使用目的に関する詳細を入力します。
ステップ5 ：最後に、[情報を送信]オプションを使用してアプリケーションを送信します。 
アプリケーションがGitHubによって承認されると、開発者パックに関する確認メールが届きます。 通常、このプロセスには数日かかりますが、ピーク時には時間が大幅に異なる場合があります。
学生のメールなしでGitHubStudentDeveloper Packを申請するにはどうすればよいですか？
GitHubには、有効な学生IDカードまたはその他の学業成績の証明を使用してパックを申請するオプションもあります。 唯一の注意点は、待機時間が長く、拒否率が高いことです。 とにかく、この方法で学生パックを申請する方法は次のとおりです。
ステップ1：上記のステップに従って、個人の電子メールでアカウントを作成します。
ステップ2：カメラオプションを使用して学業ステータスの証明をアップロードするか、[アップロード]ボタンを使用して写真をGitHubに直接アップロードします。 
ステップ3：次に、学校の名前やGitHubの使用目的など、必要なすべての詳細を入力します。 
ステップ4：アプリケーションを送信します。
Namecheapを使用してカスタムドメインを登録するにはどうすればよいですか？
GitHubEducationアカウントが稼働していると思います。 次の手順では、Namecheapを使用して無料のカスタムドメインを登録し、GitHubPagesを介してホストします。 次の手順に従って、優先ドメイン名を登録します。
ステップ1： GitHub Educationアカウントにログインし、[メリット]セクションに移動します。 
Web開発キットと仮想イベントキットが表示されます。 
ステップ2：バーチャルイベントキットに移動し、下にスクロールしてNamecheapを見つけます。 
GitHubは、.me TLDで1年間のドメイン名登録を提供します。これには、[アクセスの取得]オプションをクリックしてアクセスできます。
ステップ3：次のウィンドウで、NamecheapからGitHubアカウントへの接続要求を承認するように求められます。 Namecheapを承認し、次のステップに進みます。
承認が成功すると、「GitHubで学生パックを正常に確認しました」というプロンプトが表示されます。 
ステップ4：検索バーからご希望のドメインを検索し、[検索]をクリックします。 
次の画面にドメイン名の可用性が表示されます。 ドメイン名が利用できる場合は、無料で購入できます。 
ステップ5： GitHub Educationのメールアドレスを使用してチェックアウトし、続行する際にホスティング方法としてGitHubPagesを選択します。
カスタムドメイン名を正常に登録し、ホスティングとしてGitHub Pagesを選択すると、NamecheapはGitHubアカウントにリポジトリを自動的に作成する必要があります。 このリポジトリは完全に空であり、README.mdファイルのみが含まれています。
このリポジトリにアクセスするには、GitHubアカウントにログインし、[リポジトリ]セクションをクリックします。 GitHub Pagesは、Webサイト用のビジュアルツールや事前に作成されたテーマを提供していません。 Webサイト全体を手動でコーディングし、関連ファイルを新しく作成したGitHubリポジトリにアップロードする必要があります。
無料のウェブサイトを作成してGitHubPagesでホストする方法は？
上記のように、Webサイトに関連するすべてのHTML、CSS、およびJavaScriptファイルを作成する必要があります。 Web Devに興味があり、コーディング方法を知っている場合は、GitHubリポジトリにファイルをアップロードして、Webサイトを実行することをお勧めします。 この記事のGitHubPagesへのウェブサイトコードのアップロードを扱っているセクションまでスクロールできます。
しかし、あなたがWeb Devについてほとんど、あるいはまったく情報を持っていない人なら、私たちはあなたをカバーしてくれます。 以下の手順を使用して、基本的なHTMLを使用して独自のWebサイトを設計できます。
ステップ1： HTML5 UPに移動し、好きなWebサイトのデザインまでスクロールします。 任意のプラットフォームから他のビルド済みテーマを選択できます。 ここでは、HTML5 UPから「大規模」を選択しましたが、任意のWebサイトデザインを自由にダウンロードしてカスタマイズできます。 
ステップ2：お気に入りのウェブサイトデザインのダウンロードしたzipファイルを抽出します。
抽出されたフォルダーには、index.htmlおよびgeneric.htmlという名前のファイルと、アセットや画像などのフォルダーが表示されます。 
ステップ3： Visual Studio Codeを使用して抽出されたファイルを開き、index.htmlファイルを選択します。 
ステップ4： 「LiveServer」拡張機能をまだダウンロードしていない場合は、VisualStudioCodeにダウンロードしてインストールします。 
ステップ5： index.htmlファイルを選択し、マウスの右ボタンをクリックして、[LiveServerで開く]オプションを選択します。 このオプションを使用すると、ブラウザでHTMLファイルの変更をリアルタイムで視覚化できます。 
あなたのウェブサイトのデザインをカスタマイズする方法は？
この時点以降のプロセスを、Webサイトをカスタマイズするための「ステップ」とは呼びません。 HTMLファイルのカスタマイズは完全にあなたの好み次第ですが、これが私がHTML5 UPから「大規模に」デザインをカスタマイズし、それをポートフォリオに変換した方法です。 これからインスピレーションを得るか、自分でWebサイトを完全にカスタマイズするかを選択できます。 選択はあなた次第です！
タイトルタグと段落タグの変更
カスタマイズプロセスを開始して、タイトルタグを「大幅に」変更しました。 HTMLファイルのタイトルタグは、ブラウザタブで開いているときにその名前を決定します。 Massivelyのデフォルトのタイトルは「MassivelybyHTML5UP」である必要があり、Webサイトに似たものに変更することをお勧めします。 
タイトルタグを「SamyakGoswami| Tech Content Writer」は、私のポートフォリオに最適でした。 次に、ウェブサイトのイントロセクションを変更しました。「これは大規模です」（H1タグに含まれています）と、明らかな理由で「Samyakのポートフォリオ」にしました。 その後、段落タグの下のテキストを「私のプロジェクトと私の能力のショーケース」に変更しました。 
インデックスファイルのNavigation（Nav）セクションに移動し、Listタグに含まれる3つのナビゲーションボタンのうち2つを省略しました。 1ページにすべての詳細を含む1ページのWebサイトを作成したかったのですが、選択に応じてナビゲーションボタンの数を自由に変更できます。
後で、ナビゲーションボタンの「ThisisMassively」のテキストを「MyArticles」に変更しました。 
ソーシャルメディアのリンクとアイコンの変更
また、Twitter、Facebook、Instagram、GitHubなどのライブサーバー上のさまざまなソーシャルメディアアイコンも表示する必要があります。 TwitterとFacebookを省略し、ユースケースとしてInstagramとLinkedInを使用することにしました。
ソーシャルメディアアイコンとそのリンクを変更するには、[ナビゲーション（Nav）]セクションに移動し、[Twitter]、[Instagram]などが記述された[リスト]タグまでスクロールします。
hrefタグが空白のままになっているため、これらのソーシャルメディアアイコンにリンクが付いていないことに注意してください。 「＃」を優先リンクに置き換えることで、hrefタグにリンクを追加できます。 
ホームページの内容を変更する
最初に、H2タグを変更して「私の名前はSamyak Goswami」にし、その後、Paragraphタグを「私は技術愛好家です…。」に変更しました。 H2タグを、ホームページの内容とそれを説明する段落タグに一致するものに変更することをお勧めします。 
現在、このカスタマイズの最も重要な部分を考えています。 記事タイルの内容を変更します。
これを行うには、インデックスファイルの[投稿]セクションに移動すると、Articleタグに含まれる複数のコードスニペットが表示されます。 ソーシャルメディアアイコンへのリンクを追加するときに行ったように、hrefセクションを変更することで、ストーリーへのリンクを追加できます。
後で、H2タグ内のコンテンツを変更することにより、記事の名前を変更できます。 段落タグを使用して、記事に説明を追加することもできます。
リンクを追加し、名前を変更し、すべての記事に説明を追加して、記事ごとにこのプロセスを繰り返します。
あなたのウェブサイトに画像を追加する
プレビューがHTML5UPWebサイトに表示される画像とは大きく異なることに気付いたはずです。 これは、カスタマイズ可能なファイルの平面写真と当たり障りのない写真によるものです。 カスタム画像を追加して、ウェブサイトにスパイスを加えましょう。
元の画像
これを行うには、以前に「Massively」zipファイルを解凍したフォルダーに移動します。 解凍したフォルダを開き、Imagesフォルダに移動します。 bg、pic01、pic02などの名前の異なる画像が表示されます。 これらは、Articleタグ内の記事にリンクされている画像です。
カスタム画像を追加してこれらの画像の名前でインデックスファイルを変更するか、画像を追加してデフォルトの画像と同じように名前を付けることができます。 画像に同じ名前を付けることで、コードを変更する手間を省き、その後多くの時間を節約できます。
変更された画像
重要ではないウェブサイトの他のセクションを校正して変更することをお勧めします。 上記の手順を使用して作成したポートフォリオは次のとおりです：samyakgoswami.me。
ウェブサイトのコードをGitHubPagesにアップロードするにはどうすればよいですか？
最終的にWebサイトをコーディングおよび設計したら、それをGitHub Pagesにアップロードして、インターネット上で公開します。
WebサイトをGitHubPagesにアップロードする方法は次のとおりです。
ステップ1： GitHubアカウントにログインし、[マイリポジトリ]セクションに移動します。 
ステップ2： your_username.github.ioという名前のリポジトリが表示されます。 このリポジトリに移動します。 
ステップ3：独自のファイルを作成するか、GitHubリポジトリにファイルをアップロードするオプションが表示されます。 
ステップ4： 5つのファイルとフォルダーをすべて選択します。 アセット、画像、要素、ジェネリック、インデックス、およびそれらをリポジトリにドラッグアンドドロップします。 
ファイルがアップロードされたら、コードをコミットし、GitHubがファイルを処理するまで待ちます。
手順5： [設定]> [GitHub Pages]に移動して、ウェブサイトのステータスを確認します。 「あなたのウェブサイトはyour_custom_domainで公開されています」というプロンプトが表示されます。 
これで、自分のWebアドレスにアクセスして、自分でWebサイトを確認できます。 ウェブサイトが最初に公開されるまでに時間がかかる場合があることを忘れないでください。
GitHub PagesでSSL暗号化を有効にする方法は？
HTTPは、Webサイトでのユーザー要求を管理するための安全でない方法です。 悪意と確かな技術的知識を持っている人は誰でも、ユーザーとWebサイト間の相互作用を傍受する可能性があります。 一方、HTTPSは、すべての訪問者にはるかに安全なブラウジングセッションを提供します。 GitHub Pagesは無料のHTTPS暗号化を提供しており、これを利用する方法は次のとおりです。
リポジトリの[ページ]セクションまでスクロールします。
ウィンドウの最後に「EnforceHTTPS」オプションが表示されます。 [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」までの4つのAレコードが得られるまで、この傾向に従います。
以前のAレコードをすべて削除します。
ステップ3：次に、ホストを「www」、値をGitHubユーザー名（ドット）github（ドット）ioとしてCNAMEレコードを追加します。
以前のCNAMEレコードを削除します。 最終的に、DNS設定には4つのAレコードと1つのCNAMEレコードが必要です。 
ステップ4： [設定]セクションのGitHubページに移動します。 これで、ドメインで[HTTPSの適用]オプションが使用できるようになります。
まとめ
GitHubは、すべての学生に無料のWebサイトを作成して管理する素晴らしい機会を提供します。 大量のトラフィック負荷をホストするためにGitHubPagesを使用することはできませんが、小規模な静的Webサイトのすべてのチェックボックスをオンにします。 無料のカスタムドメイン名、ホスティング、SSL暗号化により、さらにすばらしいものになります。
これで、「新しいWebサイトのWebホストを選択する方法」を読むことができます。
ここにあなたのウェブサイトがダウンしたときにあなたに通知するためのいくつかのページ速度監視ツールがあります。