博客 / 詳情

返回

如何使用Github Pages發佈自己的個人網頁?

基礎流程

創建倉庫

創建一個倉庫名為賬户名.github.io
比如我的賬户名為refanbanzhangwork,那麼我的倉庫名就填寫:refanbanzhangwork.github.io
image.png
其他位置保持默認就好了,然後點擊Create repository按鈕。

創建index.html

上一步點擊創建倉庫按鈕之後,會來到倉庫頁面,在這裏,我們點擊creating a new file按鈕,創建一個index.html文件。
image.png

內容隨便寫的點什麼,也可以參照下面的模板,這裏的內容一會兒將顯示在我們的個人網頁。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Github Pages</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

然後點擊右邊的Commit changes...按鈕,保存index.html

配置Github Pages

我們來到Settings-Pages頁面。
image.png

然後對branch字段進行修改。
None修改為main,然點擊Save

修改前:
image.png
修改後:
image.png

驗證結果

最後,我們使用賬户名.github.io這個地址訪問你的個人網頁。
以我的賬户為例,地址就是:https://refanbanzhangwork.github.io

不出意外的話,就能看到我們在index.html中寫入的內容了。

image.png

注意事項

-

user avatar jyeontu 頭像 ning_643b67be37ac3 頭像 populus 頭像 zhouzhenchao 頭像
4 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.