<建站系列-一> GitHub+Hexo建站

時(shí)間：2023-08-02 19:30:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-02 19:30:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

<建站系列-一> GitHub+Hexo建站：本文章首發(fā)于筆者博客，歡迎關(guān)注~

前言：
GitHub本身自帶的Jekyll可以直接構(gòu)建最簡(jiǎn)單的個(gè)人網(wǎng)站，但定制性較差，而Hexo提供更豐富的個(gè)性化定制。GitHub+Hexo is all you need !

步驟

一、GitHub建倉(cāng)庫(kù)

在GitHub創(chuàng)建一個(gè)倉(cāng)庫(kù)："你的GitHub賬號(hào)名".http://github.io。注意：一定要嚴(yán)格對(duì)應(yīng)。

若是嫌Hexo麻煩，可直接在剛創(chuàng)建的倉(cāng)庫(kù)，點(diǎn)選Setting -> Pages -> Choose a theme -> select theme，選擇Jekyll提供的幾款內(nèi)嵌主題之一完成建站。

---

二、Git關(guān)聯(lián)GitHub賬號(hào)

安裝Git并通過(guò)密鑰關(guān)聯(lián)GitHub賬號(hào)，對(duì)于常用GitHub的人應(yīng)該很熟悉，并且已經(jīng)提前關(guān)聯(lián)，此步可忽略。若尚未，參見(jiàn)博文Git教程 SSH keys配置。關(guān)聯(lián)賬號(hào)是為了后面將Hexo搭建的網(wǎng)站部署到GitHub倉(cāng)庫(kù)。

---

三、搭建環(huán)境并安裝Hexo

安裝Node.js

Hexo基于Node.js，需要先下載安裝Node.js，注意：安裝程序時(shí)需要選擇dependecies，否則會(huì)安裝VS和Python等。安裝完后，在命令行輸入node -v ，若輸出版本號(hào)則安裝正常。Node.js會(huì)自帶npm的安裝，在命令行輸入npm -v ，若輸出版本號(hào)則安裝正常。

安裝Hexo

搭建好環(huán)境后就可以安裝Hexo了。Hexo本質(zhì)是一個(gè)搭建個(gè)人博客網(wǎng)站的框架，基于這個(gè)框架，先把網(wǎng)站在本地搭建好，然后部署到遠(yuǎn)端。在本地新建一個(gè)文件夾，比如MyBlog ,用來(lái)存放Hexo搭建的網(wǎng)頁(yè)文件。

在新建的MyBlog文件夾下，鼠標(biāo)右鍵，選Git Bash Here，或者直接打開(kāi)Git然后轉(zhuǎn)移路徑到MyBlog。輸入以下命令，安裝Hexo：

npm install -g hexo-cli安裝完Hexo后，初始化本地博客，輸入：

hexo init blog初始化完成后，會(huì)在MyBlog路徑下自動(dòng)創(chuàng)建一個(gè)文件夾MyBlog/blog，這個(gè)文件夾就是Hexo的本地網(wǎng)站路徑，以后Hexo的操作都發(fā)生在這個(gè)文件夾下。

將Git Bash窗口的路徑轉(zhuǎn)移到MyBlog/blog，進(jìn)行后續(xù)操作。（可直接輸入MyBlog/blog絕對(duì)路徑，也可以在MyBlog/blog下右鍵選Git Bash Here。）

為檢測(cè)本地網(wǎng)站雛形初始化正確，可輸入（命令含義見(jiàn)注釋?zhuān)?br>
hexo n test_init_site # 新建(new)一篇名為test_init_site的博客(post)hexo g # 生成(generate) 網(wǎng)站hexo s # 打開(kāi)本地服務(wù)器(server)然后在瀏覽器打開(kāi)本地端口地址：localhost:4000。若能加載成功說(shuō)明初始化正確。初始化網(wǎng)站如下圖：

---

四、推送網(wǎng)站到GitHub倉(cāng)庫(kù)

本地搭建完網(wǎng)站后推送到GitHub即可被所有人訪問(wèn)。在推送網(wǎng)站前，需要配置站點(diǎn)信息，即修改MyBlog/blog/_config.yml文件。

用寫(xiě)字板或其它工具打開(kāi)_config.yml文件，滑動(dòng)至文件底端，關(guān)聯(lián)部署倉(cāng)庫(kù)為第一步創(chuàng)建的GitHub倉(cāng)庫(kù)，將# Deployment項(xiàng)配置為：

deploy: type: git repo: https://github.com/你的賬號(hào)名/你的賬號(hào)名.github.io.git branch: master完成部署配置后，再安裝Git部署插件，輸入：

npm install hexo-deployer-git --save然后就可以輸入以下命令推送到GitHub倉(cāng)庫(kù)了：

hexo clean # 清除緩存，以免網(wǎng)站信息沖突hexo ghexo d # 部署(deploy)由于國(guó)內(nèi)訪問(wèn)GitHub不穩(wěn)定，推送可能也不穩(wěn)定。推送完成后，等待GitHub同步更新，大概30s。最后，在瀏覽器輸入以倉(cāng)庫(kù)名為url的網(wǎng)頁(yè)，即 https://xxx.github.io，即可訪問(wèn)你的上線博客主頁(yè)！

---

后話：
是不是很amazing，很easy！愛(ài)了有沒(méi)有！Hexo幫我們自動(dòng)完成網(wǎng)站的搭建和渲染，無(wú)需理解背后javascript實(shí)現(xiàn)，只要我們完成配置即可，使得我們可以把關(guān)注重點(diǎn)放到博客內(nèi)容上。妙啊！

Hexo的使用和個(gè)性化配置見(jiàn)下一篇博客文章。

---

Reference: 本站文章：GitHub+Hexo搭建個(gè)人網(wǎng)站詳細(xì)教程