新瓶裝舊酒:全程無命令 GitHub Pages 創建您的博客站點


使用 GitHub Pages 創建博客站點的文章很多,也有很長的歷史了。但是,許多已經與當前的 GitHub 不一致了,如果你按圖索驥,會發現驢唇對不上馬嘴。

更為麻煩的是,你會發現或者需要你輸入許多莫名其妙的命令,或者就是要您熟悉 Git。

你喜歡古怪的命令嗎?反正我不喜歡。

這里可以讓您不需要一個命令,在純 Web 頁面下,完成整個站點的創建和維護。

1. 申請 GitHub 賬號

這一步就不介紹了,自己來吧。

2. 為您的博客站點創建一個專用倉庫

在您的 GitHub 頁面右上角,點擊新建 + 按鈕,在彈出的菜單中選擇第一個 New repository

 

確定后,會進入創建倉儲詳情的頁面。這里需要注意兩個地方:

  1.  Repository name,這個名字在您的賬號下必須是唯一的。
  2.  一定要選中 Initialize this repository with README

點擊 Create repository 之后,稍等片刻,您的倉儲已經成功創建,您會回到項目的首頁。

 

 

 

3. 啟用 Pages

點擊 Setting 以便進入倉儲的設置頁面。見上圖。

設置的內容很多,我們只需要關心 GitHub Pages 一個部分。我們往下找到 GitHub Pages 這一個配置節。

在這里,您需要啟用 GitHub Pages。注釋很清楚,當前 GitHub Pages 是禁用的,您需要選擇一個分支來啟用它。

要做的很簡單,點擊 None 這個下拉按鈕,選擇我們已經擁有的 master 分支,然后點擊保存。

 

 

你會在 GitHub Pages 配置節中,出現一段提示,說您的站點已經可以訪問了。

4. 選擇您的主題

雖然理論上來說,您已經可以開始創建頁面了。但是, 美觀一點總是必要的,萬一您不太熟悉 CSS 呢。

我們選擇一個主題。

點擊 GitHub Pages 配置節中,下面的 Choose a theme 按鈕,會進入一個選擇主題的頁面,在頁面上部是一個橫向的主題列表供您挑選。

我挑了 Architect 這個主題,如果您沒有找到,可以點擊右邊的下一屏進行挑選。

點擊 Select theme 來確定您所選中的主題。

您會看到 GitHub 已經幫您重新替換了原有的 README.md。現在您並不需要編輯它,看看就好。

還記得您的站點地址嗎?就是上面列出的這個:https://haoguanjun.github.io/myblog/,重新打開這個地址,您應該就可以看到默認生成的 README.md 這個頁面了。

看起來還不錯。

5. 創建第一個博客頁面

對程序員來說,總是要創建一個 Hello, world. 的。我們創建一個 helloworld 頁面作為第一個頁面。

回到您的項目首頁,找到 Create new file 這個按鈕。

點擊之后,進入創建新文件,就是我們自己的第一個頁面的處理頁面。

我們需要將這個頁面保存到 _posts 文件夾中,名為 2017-08-25-hello.md。文件名的格式是規定好的,必須是:四位年份-二位月份-二位日期-名稱.擴展名 的格式,否則不會被處理。

.md 表示您准備使用 markdown 語法。

您不能直接創建這個 _posts 文件夾,需要在創建文件的過程中附帶創建。

現在輸入框中輸入文件夾的名字 _posts, 然后再輸入分隔符 / , 您會看到文件夾已經有了,可以輸入文件名了。

繼續輸入 2017-08-25-hello.md, 輸入之后如下所示,就可以輸入文件內容了。

在下面的文件內容輸入區中,輸入如下內容。

需要注意的是,三個連字符必須在第一行。

然后,到頁面底部,提交這個頁面。

您已經創建完成了!

您應該看到這樣一個頁面,在 _posts 文件夾中,已經保存了我們的第一個文件。

6. 瀏覽第一個博客頁面

 現在,您還需要在地址欄中,自己輸入這個頁面的地址,然后,就可以看到您的第一個頁面。地址為:https://haoguanjun.github.io/myblog/2017/08/25/hello.html

您一定注意到了,這個地址並不是我們創建的文件路徑。年,月,日和 hello 都被拆開了,並且文件的擴展名也從 .md 換成了 .html.

 

祝賀您,已經成功創建了您的博客站點,並創建了第一個頁面。

7. 首頁加鏈接

我們不能每次還要輸入這個頁面的鏈接。

在倉儲的首頁,找到自動生成的 README.md 這個文件,點擊進入這個文件的頁面,它也是使用 markdown 編寫的。

在網頁上,點擊文件右上角的編輯按鈕,進入編輯模式。

在標題之下,添加一行作為超級鏈接,中括號中,為提示文本,后面圓括號中為超級鏈接。

## Welcome to GitHub Pages

[Your first blog](https://haoguanjun.github.io/myblog/2017/08/25/hello.html)

 

提交修改,然后重新訪問首頁。你會看到你的文章已經出現在首頁了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM