hexo建站詳解(包含jade 、swig、ejs模板使用 和 hexo favicon設置)

jekyll也搞過，最後轉到hexo上。

hexo中文詳細文檔：https://hexo.io/zh-cn/docs/index.html

最好還要看看這裏：http://theme-next.iissnan.com/faqs.html

 

前期準備

安裝Xcode

Mac用戶，Hexo的編譯可能依賴Xcode。直接從App Store上下載

安裝node.js

Hexo是基於node.js的，因此要去官網上下載下來安裝。版本能夠選擇穩定版(4.3.1)也能夠選擇最新版(5.7.0)。
須要注意的是，Hexo 3.1.1測試的最低版本爲0.12，因此安裝的版本不要太舊，以前看到網上裝的0.8.4的版本，我也這麼裝，結果有一大堆的報錯。

註冊Github帳戶

在本地搭建好Hexo後能夠將內容同步到github上，能夠在網上瀏覽。
能夠去Github官網上去註冊，註冊的過程我就不羅嗦了，具體的過程能夠去這個頁面上跳到Github的那部分去看。
其中配置SSH Keys的那部分，能夠選擇不配製，不配置的話之後每次提交的時候就須要手動輸入帳號密碼，若是配置了的話就不須要了。

正式安裝

由於安裝包中有些內容在牆外，因此能夠換淘寶源，或者用

npm install -g hexo-cli --no-optional

來安裝
而後進入你要安裝的目錄，如

cd ~/Document/hexo

而後安裝

hexo init

安裝好以後不要忘記執行

npm install

至此，就已經安裝完畢了。是否是很簡單呢？可是爲了優美的UI樣式，繼續看下去

後期部署

添加文章

hexo new "postName"

其中postName是博客名。

生成靜態頁面

hexo generate

或者也能夠執行縮寫

hexo g

本地啓動

執行好上面的命令以後就能夠在本地啓用服務來看效果了。執行下面的命令：

hexo server

或縮寫

hexo s

看到 INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 以後，就能夠在瀏覽器中打開頁面http://localhost:4000來看了。

上傳至Github

安裝git部署插件

在部署以前，首先咱們要確認在你的Github賬號的Repository中有 用戶名.github.io 的項目。
在確認以後，就能夠執行命令

npm install hexo-deployer-git --save

來安裝插件

配置 _config.yml 文件

在Hexo安裝的目錄，如 ~/Document/hexo 中找到 _config.yml 文件。打開。
翻到最後，找到 deploy 字樣，改爲以下格式：

deploy: 
  type: git 
  repo: https://github.com/用戶名/用戶名.github.io.git 
  branch: master

須要注意的是：冒號後面有一個空格；使用github能夠不用寫branch那一行。
若是要使用多個 deployer，可改爲以下樣式：

deploy:
- type: git
  repo:
- type: heroku 
  repo:

同步

輸入命令

hexo deploy

或者縮寫

hexo d

來執行。
之後每次執行就能夠依次輸入下面三行命令：

hexo clean
hexo generate
hexo deploy

或者其縮寫。

 

 

模板：

layout佈局文件夾中。用於存放主題的模板文件，決定了網站內容的呈現方式，Hexo 內建 Swig 模板引擎，您能夠另外安裝插件來得到 EJS、Haml 或 Jade 支持，Hexo 根據模板文件的擴展名來決定所使用的模板引擎。

對於下載的jade的模板，須要在安裝插件，地址： https://github.com/hexojs/hexo-renderer-jade。。終端下輸入

npm install hexo-renderer-jade --save

 

對於下載的Ejs的模板，須要在安裝插件，地址： https://github.com/hexojs/hexo-renderer-ejs。終端下輸入：

npm install hexo-renderer-ejs --save

對於下載的Haml的模板，須要在安裝插件，地址： https://github.com/hexojs/hexo-renderer-haml。終端下輸入：

$ npm install hexo-renderer-haml --save

 

1、網站圖標

看一下hexo\themes\modernist\layout\_partial\head.ejs，找到這句：

<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">

 

（注意後綴）

個人是<link rel="icon" type="image/x-icon" href="<%- theme.favicon %>"> 不修改，好像也能夠。。只是把favicon.ico放到hexo\source目錄下了。

你懂的，將你的favicon.ico放到工程根目錄下便可，也就是hexo\source目錄。能夠在線製做你的ico圖標。