– 前言
這是一篇有關如何使用 Github Pages 和 Hexo 搭建屬于自己獨立博客的詳盡教程,本人是軟件工程專業本科生,目前只學習了C和C++編程語言,對網站開發的有關知識幾乎為零,這也是我搭建好自己的博客之后寫的第一篇博客,剛開始搭建博客的時候自己也是網上各種百度,由于自己屬于小白那種,歷經了千辛萬苦才弄好,所以借這個機會寫一篇小白真正能看懂的博客搭建教程,教你一步一步走向成功的彼岸!
– 入門
Github Pages
Github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。使用Github Pages可以為你提供一個免費的服務器,免去了自己搭建服務器和寫數據庫的麻煩。此外還可以綁定自己的域名。
Hexo
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
– 安裝 Node.js
點擊此處訪問官網,按需下載相應版本,默認安裝可以了
注:本人在安裝過程中出現了Warning 1909,無法創建快捷方式,這種情況很少出現,如果在安裝過程中也有這種情況請參考百度文庫(win10系統實測可行):《Win7安裝程序警告1909無法創建快捷方式》
– 安裝 Git
點擊此處訪問官網,按需下載相應版本,默認安裝即可
參考資料:《如何在windows下安裝GIT》 (By 俊雨廷休)
– 檢驗軟件是否安裝成功
同時按下 Win 鍵和 R 鍵打開運行窗口,輸入 cmd ,然后輸入以下命令,有相應版本信息顯示則安裝成功,若不正確可以卸載軟件重新安裝,此外若安裝成功,在桌面右鍵鼠標,可以看到菜單里多了 Git GUI Here 和 Git Bash Here兩個選項,第一個是圖形界面的Git操作,另一個是命令行
123 | 復制 |
---|
– Hexo 安裝
選擇一個磁盤,新建一個文件夾,自己重命名文件夾(如:我的文件夾為:E\TRHX_Blog),博客相關文件將儲存在此文件夾下,在該文件夾下右鍵鼠標,點擊 Git Bash Here,輸入以下 npm 命令即可安裝,第一個命令表示安裝 hexo,第二個命令表示安裝 hexo 部署到 git page 的 deployer,如圖所示即為安裝成功
12 | 復制 |
---|
– Hexo 初始化配置
在剛才新建的文件夾里面再次新建一個 Hexo 文件夾(如:我的文件夾為:E\TRHX_Blog\Hexo),進入該 Hexo 文件夾右鍵鼠標,點擊 Git Bash Here,輸入以下命令,如圖所示則安裝成功
1 | 復制$ hexo init |
---|
Hexo 安裝完成后,將會在指定文件夾中新建所需要的文件,Hexo 文件夾下的目錄如下:
– 本地查看效果
執行以下命令,執行完即可登錄 http://localhost:4000/ 查看效果
12 | 復制 |
---|
顯示以下信息說明操作成功:
1 | 復制INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. |
---|
登錄 http://localhost:4000/ 查看效果:
– 將博客部署到 Github Pages 上
到目前為止,我們的本地博客就成功搭建了,但是現在我們只能通過本地連接查看博客,我們要做的是讓其他人也能夠訪問我們的博客,這就需要我們將博客部署到Github Pages上
一、注冊 Github 賬戶:點擊此處訪問 Github 官網,點擊 Sign Up 注冊賬戶
二、創建項目代碼庫:點擊 New repository 開始創建,步驟及注意事項見圖:
三、配置 SSH 密鑰:只有配置好 SSH 密鑰后,我們才可以通過 git 操作實現本地代碼庫與 Github 代碼庫同步,在你第一次新建的文件夾里面(如:我的文件夾為:E\TRHX_Blog) Git Bash Here 輸入以下命令:
12 | 復制$ ssh-keygen -t rsa -C "your email@example.com"http://引號里面填寫你的郵箱地址,比如我的是tanrenhou@126.com |
---|
之后會出現:
123 | 復制Generating public/private rsa key pair.Enter file in which to save the key (/c/Users/you/.ssh/id_rsa)://到這里可以直接回車將密鑰按默認文件進行存儲 |
---|
然后會出現:
123 | 復制Enter passphrase (empty for no passphrase)://這里是要你輸入密碼,其實不需要輸什么密碼,直接回車就行Enter same passphrase again: |
---|
接下來屏幕會顯示:
123456 | 復制Your identification has been saved in /c/Users/you/.ssh/id_rsa.Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.The key fingerprint is:這里是各種字母數字組成的字符串,結尾是你的郵箱The key's randomart image is:這里也是各種字母數字符號組成的字符串 |
---|
運行以下命令,將公鑰的內容復制到系統粘貼板上
1 | 復制$ clip < ~/.ssh/id_rsa.pub |
---|
四、在 GitHub 賬戶中添加你的公鑰
1.登陸 GitHub,進入 Settings:
2.點擊 SSH and GPG Keys:
3.選擇 New SSH key:
4.粘貼密鑰:
五、測試
輸入以下命令:注意:git@github.com不要做任何更改!
1 | 復制$ ssh -T git@github.com |
---|
之后會顯示:
輸入 yes 后會顯示:
此時表示設置正確
六、配置 Git 個人信息
Git 會根據用戶的名字和郵箱來記錄提交,GitHub 也是用這些信息來做權限的處理,輸入以下命令進行個人信息的設置,把名稱和郵箱替換成你自己的,名字可以不是 GitHub 的昵稱,但為了方便記憶,建議與 GitHub 一致
12 | 復制 |
---|
到此為止 SSH Key 配置成功,本機已成功連接到 Github
– 將本地的 Hexo 文件更新到 Github 的庫中
一、登錄 Github 打開自己的項目 yourname.github.io
二、鼠標移到 Clone or download 按鈕,選擇 Use SSH
三、一鍵復制地址
四、打開你創建的 Hexo 文件夾(如:E:\TRHX_Blog\Hexo),右鍵用記事本(或者Notepad++、Vs Code等)打開該文件夾下的 _config.yml 文件
五、按下圖修改 _config.yml 文件并保存
六、在 Hexo 文件夾下分別執行以下命令
12 | 復制 |
---|
或者直接執行
1 | 復制$ hexo g -d |
---|
執行完之后會讓你輸入你的 Github 的賬號和密碼,如果此時報以下錯誤,說明你的 deployer 沒有安裝成功
1 | 復制ERROR Deployer not found: git |
---|
需要執行以下命令再安裝一次:
1 | 復制npm install hexo-deployer-git --save |
---|
再執行 hexo g -d
,你的博客就會部署到 Github 上了
七、訪問博客
你的博客地址:[[https://你的用戶名.github.io,比如我的是:[***********](https://trhx.github.io/](https://%E4%BD%A0%E7%9A%84%E7%94%A8%E6%88%B7%E5%90%8D.github.io%EF%BC%8C%E6%AF%94%E5%A6%82%E6%88%91%E7%9A%84%E6%98%AF%EF%BC%9A%5B%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C*%5D(https://trhx.github.io/](https://%E4%BD%A0%E7%9A%84%E7%94%A8%E6%88%B7%E5%90%8D.github.io%EF%BC%8C%E6%AF%94%E5%A6%82%E6%88%91%E7%9A%84%E6%98%AF%EF%BC%9A%5B%5C%5C%5C%5C%5C%5C%5C%5C%5C%5C%5C%5D(https://trhx.github.io/%5D(https://%25E4%25BD%25A0%25E7%259A%2584%25E7%2594%25A8%25E6%2588%25B7%25E5%2590%258D.github.io%25EF%25BC%258C%25E6%25AF%2594%25E5%25A6%2582%25E6%2588%2591%25E7%259A%2584%25E6%2598%25AF%25EF%25BC%259A%255B%255C%255C%255C%255C%255C%255C%255C%255C%255C%255C%255C%255D(https://trhx.github.io/)) ,現在每個人都可以通過此鏈接訪問你的博客了
– 如何在博客上發表文章
博客已經成功搭建了,但是我們該怎么寫博客呢?
一、新建一個空文章,輸入以下命令,會在項目 \Hexo\source\_posts 中生成 文章標題.md 文件,文章標題根據需要命名
1 | 復制$ hexo n "文章標題" |
---|
也可以直接在 \Hexo\source\_posts 目錄下右鍵鼠標新建文本文檔,改后綴為 .md 即可,這種方法比較方便
二、用編輯器編寫文章
md全稱 Markdown, Markdown 是 2004 年由 John Gruberis 設計和開發的純文本格式的語法,非常的簡單實用,常用的標記符號屈指可數,幾分鐘即可學會,.md文件可以使用支持 Markdown 語法的編輯器編輯,然后將寫好的文章(.md文件)保存到\Hexo\source\_posts文件夾下即可
當我們用編輯器寫好文章后,可以使用以下命令將其推送到服務器上
12 | 復制 |
---|
或者將兩個命令合二為一輸入以下命令:
1 | 復制$ hexo d -g |
---|
現在訪問你的博客就可以看見寫好的文章啦!
參考資料:《10款流行的Markdown編輯器》(By xiaoxiao_engineer)
《獻給寫作者的 Markdown 新手指南》(By 簡書)
《認識與入門 Markdown》(By Te_Lee)
《markdown簡明語法》(By 不如)
《markdown基本語法》(By 高鴻祥)
《Markdown 公式指導手冊》(By Harries)
– 如何為博客更換自己喜歡的主題
博客也搭建好了,文章也會寫了,但是!!!默認的主題并不喜歡怎么辦?現在,我們就來為自己的博客更換自己喜歡的主題
點擊此處進入 Hexo 官網的主題專欄,我們可以看見有許多的主題供我們選擇
我們要做的就是把主題克隆過來,在此我們以主題 Aero-Dual 為例,點進去我們就可以看見該主題作者的博客,鼠標滑到底,我們可以看見 Theme By Levblanc 的字樣(其他主題類似),點擊作者 Levblanc ,頁面就會跳轉到該主題所有的相關文件在 Github 上的地址,復制該地址
再打開 Hexo 文件夾下的 themes 目錄(如:E:\TRHX_Blog\Hexo\themes),右鍵 Git Bash Here,輸入以下命令:
1 | 復制$ git clone 此處填寫你剛才復制的主題地址 |
---|
比如要安裝 Aero-Dual 主題,則輸入命令:
1 | 復制$ git clone https://github.com/levblanc/hexo-theme-aero-dual |
---|
等待下載完成后即可在 themes 目錄下生成 hexo-theme-aero-dual 文件夾,然后打開 Hexo 文件夾下的配置文件 _config.yml ,找到關鍵字 theme,修改參數為:theme:hexo-theme-aero-dual (其他主題修改成相應名稱即可),再次注意冒號后面有一個空格!
返回 Hexo 目錄,右鍵 Git Bash Here ,輸入以下命令開始部署主題:
12 | 復制 |
---|
此時打開瀏覽器,訪問 http://localhost:4000/ 就可看見我們的主題已經更換了,如果感覺效果滿意,我們就可以把它部署到Github上了
打開 Hexo 文件夾,右鍵 Git Bash Here ,輸入以下命令:
123 | 復制 |
---|
此時訪問自己的博客即可看見更換后的主題,但我們仍然需要對主題的相關配置進行修改,比如網站標題,圖標等等,Hexo 中有兩份主要的配置文件,名稱都是 _config.yml ,它們均是用于站點配置使用的。其中,一份位于站點根目錄下(比如我的:E:\TRHX_Blog\Hexo\_config.yml),主要包含 Hexo 本身整站的配置;另一份位于主題目錄下(比如我的:E:\TRHX_Blog\Hexo\themes\hexo-theme-aero-dual\_config.yml),這份配置由主題作者提供,主要用于配置主題相關的選項,一般 _config.yml 文件里都有相關注釋,按需修改即可
– 為你的 Hexo 博客配置個性域名
本人在配置域名的時候問題百出,百度的各種方法都不管用,打開網站總是 404,可能是我太笨了 o(╥﹏╥)o ,不過好在后來終于解決了這個問題
首先我們要購買域名,阿里云就可以,也不貴,一年幾十塊錢,最便宜幾塊錢也能買到,以阿里云為例,購買過程就不贅述了,選擇阿里云的解析平臺,來到阿里云的管理控制臺,點擊進入域名解析列表或者直接點擊域名后面的解析
方法一:點擊添加記錄,需要添加兩個記錄,兩個記錄類型都是 CNAME ,第一個主機記錄為 @ ,第二個主機記錄為 www,記錄值都是填你自己的博客地址,保存之后域名解析就完成了!
方法二:兩個記錄類型為 A ,第一個主機記錄為 @ ,第二個主機記錄為 www,記錄值都為博客的 IP 地址,IP 地址可以 cmd 中輸入 ping 你的博客地址 獲得(比如我的:ping trhx.github.io),保存之后域名解析就完成了!
有關解析記錄類型的區別可以參考《域名解析中A記錄、CNAME、MX記錄、NS記錄的區別和聯系》
為了使 GitHub 接收我們的域名,還需要在博客的根目錄下添加一個名為 CNAME 的文件(注意不要加.txt,沒有任何后綴名!),這個文件放到 Hexo 文件夾的 source 里面,(比如我的是:E:\TRHX_Blog\Hexo\source),文件里面填寫你的域名(加不加www都行),比如要填寫我的域名,文件里面就寫:www.xxxx.com 或者 xxxx.com,經過以上操作,別人就可以通過 www.xxxx.com 、xxxx.com 、xxxx.github.io 三個當中任意一個訪問我的博客了!你的也一樣!
有關加不加www的問題有以下區別:
如果你填寫的是沒有www的,比如 xxxx.com,那么無論是訪問 https://www.xxxx.com 還是 https://xxxx.com ,都會自動跳轉到 https://xxxx.com
如果你填寫的是帶www的,比如 www.xxxx.com ,那么無論是訪問 https://www.xxxx.com 還是 https://xxxx.com ,都會自動跳轉到 http://www.xxxx.com
圖片
如果你在其他平臺購買域名,或者選擇阿里云 等其他域名解析,操作方法大同小異,遇到問題可自行百度解決!當然Hexo靜態網址也可以托管在阿里云服務器上,因為托管在Github上的
訪問速度肯定不能支撐很多人訪問的。除非你就打算做一個小站,那就無所謂了。
– 結語
一頓操作下來雖然有點兒累,但看見擁有了自己的博客還是非常有成就感的,人生就是需要折騰,那么現在就開始你的創作之旅吧!文章的不斷積累,你會從中受益很多的!另外,這是一篇小白寫的適用于小白的博客搭建教程,比較詳細,有這方面基礎的可以百度有簡略一點兒的教程。