一、前言
之前一直都是使用Jekyll+GitHub搭建個人博客,但由于Jekyll是基于Ruby實現,搭建本地服務比較麻煩,我個人又對Ruby不熟悉,因此就轉用Hexo搭建博客了。Hexo是基于NodeJS實現的,相對于Jekyll,實現Hexo的調試?環境就簡單許多。
二、配置環境和創建項目
注:使用Hexo搭建博客前,電腦必須搭建好Git和NodeJS的環境;關于Git和NodeJS的安裝方法,本文章不做介紹
1.安裝Hexo
$ sudo npm install -g hexo
安裝完后就可以初始化一個?項目
?2.初始化項目
$ sudo hexo init projectname
目錄結構:
.
├── node_modules // 依賴
├── scaffolds // 腳手架、骨架
├── source // 資源文件夾
│ └── _posts // 新建的文章保存在這里
├── themes // 主題文件夾
│ └── landscape // 默認主題
├── _config.yml // 全局配置文件
├── package.json // 項目的參數和所依賴插件
_config.yml
全局配置文件;網站的名稱、副標題、描述、作者、語言、主題、時間格式、URL、端口、代碼高亮、部署等等參數
3.生成HTML靜態頁
$ hexo generate
或者
$ hexo g
4.啟動服務預覽
$ hexo server
或者
$ hexo s
啟動服務后,在瀏覽器輸入 http://localhost:4000/
即可訪問。默認情況下,Hexo?服務啟動的端口為4000,若端口被占用或想使用其他端口啟動,則?運行命令:
$ hexo server -p 端口
如果不想每次啟動時都輸入端口,可以全局配置文件 _config.yml
中配置默認端口
修改
_config.yml
配置文件時,冒號:
和右邊的直之間要有一個空格
server:
port: 8800 # 配置默認端口
上圖為瀏覽結果,我個人覺得默認主題不好看;因此,我找了另一個主題。
三、修改主題
我的個人博客使用了 maupassant
主題,因此,我們也做這個主題做案例吧。
主題地址:https://github.com/tufu9441/maupassant-hexo
使用命令行進入 themes
文件夾,把主題克隆到?該目錄下,執行命令:
$ git clone https://github.com/tufu9441/maupassant-hexo
接下來?就需要安裝渲染器(強烈建議使用cnpm或其他國內鏡像安裝)
$ npm install hexo-renderer-jade@0.3.0 --save
$ npm install hexo-renderer-sass --save
然后我們打開項目根目錄下的 _config.yml
全局配置文件,找到 theme
配置項,把 theme: landscape
設置為 theme: maupassant
克隆下來的主題文件夾為
maupassant-hexo
我已將它重命名maupassant
theme: maupassant
修改完主題配置,需要執行 hexo g
命令重新生成靜態HTML,然后再執行 hexo s
啟動服務
666666
這個主題好看多了
四、修改配置
修改語言
?細心的同學會發現,頁面顯示是英文;但我們需要的是中文。
首先,我們來看看主題 maupassant
目錄下的 languages
都?有哪些語言
我們看到 zh-CN.yml
文件,所以該主題是支持簡體中文的
我們再打開項目根目錄下的 _config.yml
全局配置文件,找到 language
配置項,把 language:
設置為 language: zh-CN
language: zh-CN
接著,再?編譯啟動服務。
666666,居然變成了中文
修改分類、標簽的訪問鏈接
當我們給?文章添加一個分類或標簽時,我們訪問這個分類下的所有文章,會發現訪問的URL是 http://domain/categories/分類名/
(如下圖???),有時候我們可能不太想在URL里看到有中文字符,我們需要的路徑為 http://domain/categories/classname/
,此時,我們需要給 分類名
設置一個別名。
在全局配置文件,找到 category_map
和 tag_map
配置項:
category_map:
分類一: class1
分類二: class2
tag_map:
標簽一: tag1
標簽二: tag2
修改HTML目標文件夾
我們執行 hexo g
命令?后,生成的HTML文件默認情況下是保存在 public
目錄下的;如果我們想修改HTML文件保存的目錄,?我們可修改全局位置文件下的:
public_dir: dir-name
關于修改配置,我們就說到這里;如果大家想設置網站標題、簡介、開啟評論等功能,可以看一下全局配置文件和主題目錄下的配置文件。配置文件都有很詳細的注釋說明。
五、創建代碼倉
?首先,我們需要有一個GitHub賬戶;然后創建一個名為 yourname.github.io
的?代碼倉;yourname
為你的GitHub賬號名。把 hexo g
命令后,把 public
文件夾的所有文件上傳到該倉庫中。
進入代碼倉的 Settings
頁面,開啟 GitHub Pages
?配置好 GitHub Pages
后
yourname.github.io
為GitHub分配給您的域名(yourname
為你的賬號);?此時,訪問該域名即可訪問你的博客了。
六、設置自定義域名
注冊一個自己喜歡的域名,然后將域名解析到 yourname.github.io
解析完后,再回到 GitHub Pages
?設置域名
到此,我們已經成功使用Hexo+GitHub+個人域名搭建個人博客了。