如何使用自定義域名、託管和 SSL 加密創建免費網站？

創建網站是一項重大投資； 您必須為構建網站的每一步付費。

您想為個人或職業發展創建一個免費網站嗎？ 這是一種使用自定義域名、終身免費託管和完全免費的 SSL 加密來設計您的下一個網站的方法。 哇！ 你還能要求什麼？

擁有一個網站可以顯著提高您的增長數據是不言而喻的，而今天它更像是一種投資而不是奢侈品。 這不僅適用於企業，個人也可以通過個人網站受益匪淺。

無論是註冊域名、託管網站內容、構建網站還是啟用 SSL 加密，您都應該準備好掏空自己的口袋。 雪上加霜的是，其中一些費用會反復出現並永遠持續下去。

如果我告訴你你可以創建一個免費的網站，同時在網站建設中完成上述所有關鍵步驟，那也是免費的？ 聽起來可能很超凡脫俗，但如果您是學生，您可以免費完成所有這些工作。

如果您了解 GitHub，您可能知道 GitHub Pages。 可以免費使用每個 GitHub 帳戶附帶的服務。 GitHub Pages 允許每個用戶創建一個免費網站並託管它，但有一個很大的警告。 這些免費網站的域名本質上都是以github.io結尾的，這破壞了你網站的專業性。

什麼是 GitHub 學生開發包？

很少有用戶會認真對待您的網站，並且擁有不必要的長域名絕不是一個好主意。 但是，嘿！ 我們不是在這裡談論 GitHub Pages 的好處或註意事項。 我承諾了一種讓您使用自定義域名創建免費網站的方法，這是您可以做到的方法。

GitHub 為每個註冊學位或文憑課程的學生提供了一個使用包含方便在線工具的奇妙工具包的機會，稱為 GitHub 學生開發包。 該包包括專業訂閱和 Canva、Namecheap、Microsoft Azure、Discord、Name.com 和 StreamYard 等眾多流行工具的驚人折扣。

在本文中，我們將使用 Namecheap 註冊一個免費的自定義域，並使用 GitHub 頁面來託管我們的網站。 然後，我們將研究設計 HTML、CSS 和 JavaScript 文件並將其上傳到 GitHub 頁面的方法。 最終，我們還將為網站啟用 SSL 加密，但首先，我們需要註冊 Student Developer Pack。

如何申請 GitHub 學生開發者包？

註冊學生開發包的過程歸結為擁有一個大學授予的學生電子郵件地址。 學生電子郵件地址通常以您所在大學的域名結尾，例如 [email protected] 還有其他註冊包的方法，但它們需要比使用學生電子郵件更長的審核時間。 如果您準備好學生電子郵件地址，請按以下步驟註冊該包：

第 1 步：轉到 GitHub 教育並單擊登錄選項。

如果您已經擁有該包，則可以使用您的憑據登錄。 否則，您可以按照以下步驟操作。

單擊登錄窗口中的創建帳戶選項。

第 2 步：接下來，使用您的學生電子郵件註冊並創建一個帳戶。

第 3 步：當提示“哪個最能描述您的學術狀況？”時，請確保選擇學生。

第 4 步：現在在必要的方框中填寫有關學校名稱和使用 GitHub 的目的的詳細信息。

第 5 步：最後，使用“提交您的信息”選項提交您的申請。

如果您的應用程序獲得 GitHub 的批准，您應該會收到一封關於開發人員包的確認電子郵件。 該過程通常需要幾天時間，但在高峰時段時間可能會有很大差異。

如何在沒有學生郵箱的情況下申請 GitHub Student Developer Pack？

GitHub 還允許您選擇使用有效的學生證或任何其他學術身份證明來申請該包。 唯一需要注意的是漫長的等待時間和更高的拒絕率。 無論如何，以下是通過此方法申請學生包的方法：

第 1 步：按照上述步驟通過您的個人電子郵件創建一個帳戶。

第 2 步：現在使用相機選項上傳您的學術身份證明，或使用上傳按鈕將照片直接上傳到 GitHub。

第 3 步：接下來，填寫所有必要的詳細信息，例如學校名稱和使用 GitHub 的目的。

第 4 步：提交您的申請。

如何使用 Namecheap 註冊您的自定義域？

我假設您已經啟動並運行了您的 GitHub 教育帳戶。 以下步驟涉及使用 Namecheap 註冊您的免費自定義域並通過 GitHub Pages 託管它。 請按照以下步驟註冊您的首選域名：

第 1 步：登錄您的 GitHub Education 帳戶並轉到“福利”部分。

您應該會看到一個 Web Dev Kit 和一個 Virtual Event Kit。

第 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 帳戶並單擊“您的存儲庫”部分來訪問此存儲庫。 GitHub Pages 不為您的網站提供可視化工具和預建主題； 您需要手動編碼整個網站並將相關文件上傳到您新創建的 GitHub 存儲庫。

如何創建一個免費網站並將其託管在 GitHub Pages 上？

如上所述，您必須創建與您的網站相關的所有 HTML、CSS 和 JavaScript 文件。 如果您從事 Web 開發並知道如何編寫代碼，那麼您最好將文件上傳到您的 GitHub 存儲庫並讓您的網站運行。 您可以滾動到本文處理將網站代碼上傳到 GitHub Pages 的部分。

但是，如果您是一個對 Web 開發幾乎沒有信息的人，我們已經為您提供了保障。 您可以使用下面給出的步驟並使用一些基本的 HTML 設計您自己的網站：

第 1 步：轉到 HTML5 UP 並滾動到您喜歡的網站設計。 您可以從任何平台選擇任何其他預建主題。 在這裡，我從 HTML5 UP 中選擇了“Massively”，但您可以自由下載和自定義您選擇的任何網站設計。

第 2 步：解壓縮下載的您喜歡的網站設計的 zip 文件。

您應該會在提取的文件夾中看到名為 index.html 和 generic.html 的文件以及資產和圖像等文件夾。

第 3 步：現在使用 Visual Studio Code 打開提取的文件並選擇 index.html 文件。

第 4 步：如果您還沒有，請在 Visual Studio Code 中下載並安裝“Live Server”擴展。

步驟 5：選擇 index.html 文件，單擊鼠標右鍵，然後選擇“在 Live Server 中打開”選項。 此選項可讓您在瀏覽器中實時可視化 HTML 文件中的更改。

如何定制您的網站設計？

我不會將超出這一點的過程稱為自定義網站的“步驟”。 自定義 HTML 文件完全取決於您的喜好，但這裡是我如何從 HTML5 UP 自定義“大規模”設計並將其轉換為組合。 您可以選擇從中汲取靈感或完全自己定制您的網站。 這是你的選擇！

修改標題和段落標籤

開始我的定製過程，我改變了標題標籤“大規模”。 HTML 文件的標題標籤將在瀏覽器選項卡中打開時決定其名稱。 Massively 的默認標題應該是“Massively by HTML5 UP”，我建議將其更改為您網站的類似名稱。

我將標題標籤更改為“Samyak Goswami | 技術內容作家”，因為它非常適合我的投資組合。 接下來，我更改了網站的 Intro 部分，上面寫著：“This is Massively”（包含在 H1 標籤中）並將其設為“Samyak 的投資組合”，原因很明顯。 隨後，我將以下段落標籤中的文本更改為“展示我的項目和我的能力”。

轉到索引文件中的導航 (Nav) 部分，我省略了 List 標記中包含的三個導航按鈕中的兩個。 我想創建一個單頁網站，在一個頁面上包含所有詳細信息，但您可以根據自己的選擇隨意修改導航按鈕的數量。

後來我將導航按鈕上的“This is Massively”文本更改為“我的文章”。

修改社交媒體鏈接和圖標

您還必須在 Twitter、Facebook、Instagram 和 GitHub 等實時服務器上看到各種社交媒體圖標。 我決定省略 Twitter 和 Facebook，並保留 Instagram 和 LinkedIn 作為我的用例。

您可以通過轉到導航 (Nav) 部分並滾動到列出帶有 Twitter、Instagram 等內容的標籤來修改社交媒體圖標及其鏈接。

請注意，由於 href 標記留空，這些社交媒體圖標上沒有附加鏈接。 您可以通過將“#”替換為您的首選鏈接來添加指向 href 標記的鏈接。

修改首頁內容

首先，我更改了 H2 標籤並將其設為“我的名字是 Samyak Goswami”，然後將段落標籤更改為“我是技術愛好者……”。 我建議您將 H2 標記更改為與您的主頁內容和解釋它的段落標記相匹配的內容。

我們現在提出了這種定制中最關鍵的部分； 修改文章圖塊的內容。

為此，請轉到索引文件中的帖子部分，您應該會看到文章標籤中包含多個代碼片段。 您可以像我們在添加指向社交媒體圖標的鏈接時所做的那樣，通過修改 href 部分來添加指向您的故事的鏈接。

稍後您可以通過修改 H2 標籤中的內容來更改文章的名稱。 您還可以使用段落標籤為您的文章添加描述。

通過添加鏈接、更改名稱和為所有文章添加描述來對每篇文章重複該過程。

將圖像添加到您的網站

您一定已經註意到，預覽看起來與 HTML5 UP 網站上顯示的圖像非常不同。 這是由於可自定義文件中的平面和平淡的照片。 讓我們通過添加自定義圖像來為我們的網站增添趣味。

為此，請導航到您之前解壓縮“Massively”zip 文件的文件夾。 打開提取的文件夾並轉到圖像文件夾。 您應該會看到名為 bg、pic01、pic02 等的不同圖像。 這些是與我們在文章標籤中的文章鏈接的圖像。

您可以添加自定義圖像並使用這些圖像的名稱修改索引文件，或者添加圖像並將它們命名為類似於默認圖像。 為圖像提供相同的名稱可以使我們免於修改代碼和隨後的大量時間。

我建議您校對和修改網站中不重要的其他部分。 這是我使用上面提到的步驟創建的投資組合：samyakgoswami.me。

如何將您的網站代碼上傳到 GitHub Pages？

在最終對您的網站進行編碼和設計之後，是時候將其上傳到 GitHub Pages 並使其在 Internet 上上線了。

以下是將您的網站上傳到 GitHub Pages 的方法：

第 1 步：登錄到您的 GitHub 帳戶並轉到“我的存儲庫”部分。

第 2 步：您應該會看到一個名為 your_username.github.io 的存儲庫。 進入這個存儲庫。

第 3 步：您應該會看到創建自己的文件或將文件上傳到 GitHub 存儲庫的選項。

第 4 步：選擇所有五個文件和文件夾； 資產、圖像、元素、通用、索引，並將它們拖放到存儲庫中。

文件上傳後，提交代碼並等待 GitHub 處理您的文件。

第 5 步：導航到 Settings>GitHub Pages 以查看您網站的狀態。 您應該會看到提示“您的網站已在 your_custom_domain 上發布”。

您現在可以訪問您的網址並自行檢查該網站。 請記住，該網站最初上線之前可能需要一些時間。

如何在 GitHub Pages 中啟用 SSL 加密？

HTTP 是一種管理您網站上的用戶請求的不安全方式。 任何懷有惡意並具有良好技術知識的人都可以攔截用戶與您的網站之間的交互。 另一方面，HTTPS 為您的所有訪問者提供了更安全的瀏覽會話。 GitHub Pages 提供免費的 HTTPS 加密，您可以通過以下方式使用它：

滾動到存儲庫中的頁面部分。

您應該在窗口末尾看到“Enforce HTTPS”選項。 勾選 Enforce HTTPS 複選框後，SSL 加密應該立即生效。

如果您發現“強制 HTTPS”選項對您的域不可用，您可以使用以下步驟啟用 SSL 加密：

第 1 步：登錄您的 Namecheap 帳戶並轉到“域列表”部分。

第 2 步：現在導航到管理域，然後導航到“高級 DNS”部分。

您應該會看到一些現有的 CNAME 和 A 記錄。

添加以下A記錄，主機為“@”，IP地址為“185.199.108.153”。 下一個主機名為“@”，IP 地址為“185.199.109.153”。

順勢而為，直到您有 4 個 A 記錄，直到 IP 地址“185.199.111.153”。

刪除所有以前的 A 記錄。

第 3 步：接下來，添加一個 CNAME 記錄，其中 Host 為“www”，Value 為您的 GitHub 用戶名 (dot) github (dot) io。

刪除以前的 CNAME 記錄。 最後，您的 DNS 設置應該有 4 個 A 記錄和 1 個 CNAME 記錄。

第 4 步：現在轉到“設置”部分的 GitHub 頁面。 Enforce HTTPS 選項現在應該可用於您的域。

加起來

GitHub 為每個學生提供了創建和管理免費網站的絕佳機會。 儘管您不能使用 GitHub Pages 來託管大量流量負載，但它會為小型靜態網站勾選每個複選框。 免費的自定義域名、託管和 SSL 加密使其更加美妙。

現在您可以閱讀“如何為您的新網站選擇虛擬主機”。

以下是一些頁面速度監控工具，可在您的網站出現故障時通知您。