使用HEXO+Github,搭建屬於自己的免費部落格

Hhl發表於2017-12-13

經過了昨天踩的大坑小坑,終於搭建好了hexo,域名原來用的是github的,現在換成了.com。我的部落格地址

本文主要記錄配置過程中所參考的文章以及遇到的問題和最後的解決方案,方便日後查詢整理。

基礎準備

下載Node.js用來生成靜態頁面

Node.js官網下載,有一個推薦用於大多數使用者使用和一個包含最新功能的版本,我下載的是推薦用於大多數使用者的v6.9.5版本。按照流程安裝。

安裝Git

安裝Xcode就自帶Git了,或者去這裡下載,安裝完成後,開啟終端,輸入git –version,能檢視到版本號就說明安裝成功了

$ git --version

git version 2.10.1 (Apple Git-78)

建立reposity

在GitHub上建立reposity(沒有Github的去註冊一個),注意,Repository name 必須是your_name.github.io,比如我的是HouHangLei.github.io

使用HEXO+Github,搭建屬於自己的免費部落格

安裝Hexo

上面的安裝完以後,開始安裝Hexo。

終端輸入npm install -g hexo 執行

$ npm install -g hexo

如果安裝失敗,終端重新輸入sudo npm install -g hexo 執行

$ sudo npm install -g hexo

安裝成功後,初始化Hexo

首先建立一個資料夾,如my_hexo.然後使用終端命令cd進入my_hexo資料夾

然後執行init命令初始化hexo

$ hexo init

至此,全部安裝工作已經完成!blog就是你的部落格根目錄,所有的操作都在裡面進行。

生成靜態頁面

hexo generate(hexo g也可以)

本地啟動

啟動本地服務,進行文章預覽除錯,命令:

hexo server

瀏覽器輸入http://localhost:4000,沒有問題的話就可以看到效果了

使用HEXO+Github,搭建屬於自己的免費部落格

同步部落格到github

hexo的配置檔案是主目錄裡的_config.yml檔案。

修改_config.yml檔案需要使用Sublime Text2之類的程式開啟修改。

使用HEXO+Github,搭建屬於自己的免費部落格
使用HEXO+Github,搭建屬於自己的免費部落格

然後執行如下命令

$ npm install hexo-deployer-git --save

再執行

$ hexo deploy

然後在瀏覽器中輸入HouHangLei.github.io就行了,我的github的賬戶叫HouHangLei,把這個改成你github的賬戶名就可以了。

常用命令

常用命令有四個,全部的指令可以去Hexo官網檢視

1.generate 生成靜態檔案

$ hexo g

2.server 啟動伺服器(成功後可以檢視本地的更改後的效果http://localhost:4000/

$ hexo s

3.deploy 部署網站。部署網站前,需要預先生成靜態檔案(hexo g)

$ hexo d

4.clean 清除快取檔案(db.josn)和已生成的靜態檔案(publick)。(如果部署後沒有發生改變,可以下面命令清除快取後,就可以看到效果了)

$ hexo clean

Hexo主題

使用其他Hexo主題

使用Hexo更換主題還算方便,先使用克隆命令安裝好主題,然後更改部落格的配置檔案_config.yml裡的theme:對應你的主題名就好了。主題的選擇你可以到Hexo官方主題頁面選擇自己喜歡的主題。還有wiki裡面的主題也可以。

你也可以到github下載頁下載下來後,將檔案放到themes資料夾內。不過記得把檔名改成你選擇的主題名,因為下載下來的檔名和主題名會有不一樣。

寫文章

使用hexo new “檔名”指令新建一篇文章(官網寫作指令連結

$ hexonew“檔名”

執行完成後會在source -> _posts資料夾下多一個 檔名.md的檔案。文字編輯器可以使用xcode或者MacDown都可以。MacDown語法說明

使用HEXO+Github,搭建屬於自己的免費部落格

想要在文章中插入圖片的話,可以按照Markdown語法來插入,格式為 ! [圖片名稱] (圖片地址)。

圖片的存放有兩種方式:在本地my_hexo\source目錄下新建一個存放圖片的資料夾,比如images,然後把想要插入的圖片放在裡面,插入圖片的路徑;第二種方法是把圖片上傳到網路,然後插入圖片路徑。

第一種方式我的圖片沒有載入出來,可能是我寫的路徑有問題。我現在用的是第二種方式,將圖片上傳到七牛雲上。這樣也可以避免本地圖片不小心刪除等問題。

Hexo基本的使用就這些了,當然還有很多細節可能沒有提到,在以後的時間裡我會不斷完善。

相關文章