GitHub+Hexo 個人主頁教程
前言
一步步對照著教程來配置個人主頁實屬不易,所以第一篇文章就來整理一下筆者配置個人主頁的整個流程,供各位參考。
準備工作
技術(shù)選型
一般提到搭建個人博客大家通常會想到WordPress。WordPress可以說是全球最流行的網(wǎng)站建設(shè)平臺了。上至大型網(wǎng)站,下至動態(tài)博客,世界上約 30% 的網(wǎng)站都是基于WordPress搭建的。但是,WordPress有一項致命的缺點,那就是貴。
那么,有什么平臺可以代替WorldPress呢?答案就是?Hexo+GitHub。
Hexo+GitHub 與 WorldPress 的優(yōu)缺點
成本
WordPress必須要配置一個云服務(wù)器或者虛擬主機,其動輒每年兩百多元的租費,對于筆者這種學生而言實在是無法承擔。而在GitHub上托管靜態(tài)網(wǎng)站是免費的。除了服務(wù)器租費以外,筆者也買不起域名,而在GitHub上托管會”送”一個類似于xxx.github.io的二級域名。這樣也就擁有了互聯(lián)網(wǎng)世界的門牌號。
維護
WordPress建立的個人主頁屬于動態(tài)站點,當用戶訪問量增多時,服務(wù)器的負載也會增大,訪問速度也會明顯下降,用于優(yōu)化的維護成本較高。Hexo建立的主頁屬于靜態(tài)站點,通過git命令即可實現(xiàn)文章的發(fā)布,維護成本和操作難度較低。
因此,筆者最終決定使用Hexo + GitHub進行個人主頁開發(fā)。
Git 與 GitHub
使用Hexo+GitHub個人主頁開發(fā)的第一步是準備Git與GitHub。那么為什么第一步要準備Git與GitHub呢?因為需要使用Git向GitHub傳輸文件,GitHub是托管網(wǎng)站的服務(wù)器,Git則是連接服務(wù)器的工具。
首先我們需要注冊一個GitHub賬號。訪問GitHub官網(wǎng)并注冊一個賬號。然后我們需要在自己的計算機中安裝Git,訪問Git-下載以獲取Git。如果覺得官網(wǎng)的下載速度太慢也可以從筆者自己建的資源分享站小卡佩的垃圾場獲取安裝包。
完成上述步驟后,已經(jīng)擁有了Git和GitHub賬號了,接下來就要借助SSH協(xié)議讓Git和GitHub連接上。SSH協(xié)議全稱Secure Shell,即?“安全外殼協(xié)議”。該協(xié)議通過數(shù)據(jù)加密和認證機制實現(xiàn)了設(shè)備互聯(lián)的安全保障,相較于FTP、SFTP等明文傳輸協(xié)議更具有安全性。
SSH的加密機制是非對稱加密,也就是說它會在本地生成兩把”鑰匙”:一把是公鑰,需要傳到GitHub上;一把是私鑰,留在自己的電腦上。Git安裝后會默認附帶SSH,所以可以省去安裝SSH的步驟。
綁定 Git 與 GitHub
隨便找個文件夾,右鍵打開Open Git Bash here
,鍵入偽指令:
該偽指令的作用就是生成這兩把鑰匙,加密算法采用RSA,之后一路敲空格默認即可。這時就可以在用戶文件夾下的.ssh
目錄中找到這兩把密鑰:公鑰id_rsa.pub
和私鑰id_rsa
。
接下來需要將公鑰部署在GitHub上,然后用SSH密鑰登錄的方式進行連接。
第一步?單擊頭像,在打開的列表中選擇Settings
;

第二步?在左側(cè)列表中打開SSH and GPG Keys
,并在右側(cè)頁面中單擊New SSH key
按鈕;

第三步?在打開的頁面中隨便輸入一個標題,并且把id_rsa.pub
中的公鑰復(fù)制到上面;

第四步?單擊Add SSH key
,完成。
建庫
到現(xiàn)在這一步,我們已經(jīng)成功綁定了自己電腦的Git和你的GitHub帳號了。GitHub倉庫就是托管你的個人主頁的容器,所以首先要把這個容器準備好。
第一步?打開GitHub主頁,單擊頭像,在打開的列表中選擇Your repositories
;

第二步?單擊New
新建一個倉庫;

第三步?輸入倉庫名后點擊Create repository
按鈕(請忽略圖中報錯,因為筆者已經(jīng)建了一個同名庫了),完成。

安裝 Hexo
這一部分需要用到npm,它是node的包管理工具,因此首先要準備好node環(huán)境,訪問下載 | Node.js以獲取node,也同樣可以訪問作者的小卡佩的垃圾場獲取安裝包。
首先在本地新建一個文件夾。這個文件夾以后就是個人網(wǎng)站的項目文件夾,所以一定要自定義好路徑。進入該文件夾,右鍵選擇Git Bash here
,鍵入以下偽指令安裝cnpm:
再用以下偽指令安裝Hexo:
安裝完成后,鍵入命令初始化Hexo項目:

然后鍵入以下偽指令生成靜態(tài)網(wǎng)頁,在項目根目錄中會生成一個/public
目錄,/public
目錄中就是個人網(wǎng)站文件:

最后我們在本地服務(wù)器測試一下網(wǎng)站,鍵入以下命令開啟本地服務(wù)器:

將上圖下方的鏈接復(fù)制到瀏覽器,就可以看到初始站點,如下圖所示:

看完以后就可以用Ctrl + C
關(guān)閉本地服務(wù)器。
NexT主題
Hexo自帶的Landscape主題有點丑,需要挑選一款漂亮的主題,筆者推薦使用NexT主題。一方面是因為NexT黑白簡約的風格便于讀者閱讀,另一方面是因為NexT社區(qū)的活躍人數(shù)較多,遇到問題比較方便解決,現(xiàn)在的v7.8.0版本擁有許多第三方插件,可以很方便地進行用戶交互、頁面美化、站點統(tǒng)計、百度推送功能。幾乎涵蓋了所有動態(tài)站點的功能。
打開個人主頁項目根目錄,右鍵打開git bash
窗口,鍵入以下命令將NexT下載到本地/themes
目錄內(nèi):
修改根目錄下的站點配置文件_config.yml
的Site
部分和theme
字段:
NexT主題還包含了四種子主題,分別為Muse、Mist、Pisces、Gemini,進入路徑/theme/next
,修改主題配置配置文件_config.yml
。
將想選擇的子主題前的注釋去掉,就可以了,可以將每一個都試一試看看效果,挑一個喜歡的就可以了。
設(shè)置完成后在根目錄下打開git bash
,依次鍵入:
便可以在本地服務(wù)器中啟動個人主頁,在瀏覽器中輸入網(wǎng)址:https://localhost:4000,檢查一下網(wǎng)頁。
寫作
網(wǎng)站設(shè)施已經(jīng)準備完畢了,但是網(wǎng)頁上只顯示了Hello world
這篇文章,進入/source/_posts
文件夾,可以看到hello-world.md
,這個路徑就是主頁文章的保存路徑。
如果想要寫文章,先進入/scaffolds
目錄,打開post.md
,將其替換為:
這個post.md
文件就是文章母版,如果想要做什么統(tǒng)一的配置,都可以在母版進行編輯。
在git bash
鍵入:
這條命令就是用來初始化一篇文章的。這樣就可以在/sources/_post
目錄中找到標題.md
了。寫完后,用hexo cl && hexo g && hexo s
命令重新生成網(wǎng)頁文件,再打開https://localhost:4000,就可以看到自己的文章了。
部署到GitHub
現(xiàn)在需要把本地生成的網(wǎng)頁文件部署到遠程倉庫上,這樣其他人就可以訪問個人主頁了。
首先,鍵入以下命令安裝部署插件:
安裝完成后,我們進入站點配置文件/_config.yml
,修改deploy
字段:
配置好后在終端輸入:
即可一鍵部署至GitHub。如果在此步驟報錯,應(yīng)該是沒設(shè)置git config --global user.email | user.name
,在終端中鍵入以下命令,重新hexo d
一下就可以啦:
稍等片刻,在瀏覽器輸入https://用戶名.github.io
即可訪問個人網(wǎng)頁啦。
此時,個人網(wǎng)頁已經(jīng)被部署到GitHub上,在別的設(shè)備上輸入這個網(wǎng)址也可以訪問到這個網(wǎng)站。
結(jié)語
如果這篇文章對您有幫助,就請關(guān)注收藏一下筆者的個人主頁吧~
筆者的資源網(wǎng)站小卡佩的垃圾場也歡迎各位下載、使用上面的資源哦~
筆者郵箱:2703998852@qq.com
如果有什么建議或者疑問,就請給筆者寫電子郵件哦~
