我的Hexo部落格建站日誌
前言
我是一枚安卓猿,js css以及基於Nodejs的Hexo對我來說完全是個新領域.由於之前查資料查到看到一個人的部落格很不錯MOxFIVE,於是就決定模仿人家的部落格進行搭建自己的Hexo部落格.程式設計師就是愛折騰.於是查了很多資料,最終實現了自己的Hexo部落格.下面我就把一個完全不懂nodejs以及之前根本沒聽說過Hexo的人建站的歷程給大家分享下.
我是在Mac環境下搭建的,Win環境跟Mac的差不多,如果大家是win環境,我建議大家參看粉絲日誌
Hexo 介紹
Hexo 是一個簡單的,輕量級,基於Nodejs的一個靜態的部落格框架.我們可以很方便的使用Hexo搭建個人部落格.
對一個外行來說,在一開始使用Hexo的時候心理難免有很多疑問.那我來說,我剛接觸Hexo的時候我一直在想:Hexo到底是什麼?他是如何把網站部署到github或者conding上的?Hexo怎麼進行部落格內容的編輯啊?於是經過幾番折騰,我對Hexo有了初步的瞭解.希望我的理解對大家剛剛搭建有所幫助吧.
- 首先,Hexo是一個基於Nodejs的框架,我們通過Hexo裡面的命令在Vim上進行hexo初始化,hexo生成index.html靜態頁面,然後再通過命令釋出到github或者conding
- Hexo裡面整合有git的外掛,所以你釋出到你的 yourname.github.io的時候只需要把_config.yml中的配置配置好.然後使用
$ hexo g
$ hexo d就可以將通過Hexo編譯好的檔案推送到git專案中
- hexo裡面的內容怎麼編輯?hexo裡面的檔案是以md結尾的.是markdown語法.所以大家編輯的時候可以先看看markdown語法.我這邊是使用的mac的Mou一款免費的markdown軟體.大家也可以使用phpStorm,裡面在plugins中可以下載markdown的外掛.建議大家下載個PHPStorm IDE,因為將來涉及到圖片更換,主題更換,目錄結構的檢視等等,都會比較直觀.
配置環境
安裝Node (必須) 作用是用來生成靜態頁面.到Node.js官網上下載相應平臺的最新版本,一路安裝即可,沒有難度…此處略過!但是一定要裝啊.
安裝Git (必須) 作用是把本地hexo內容提交到git上去,安裝xcode就自帶Git了,就不多說了~
配置github SSH keys(可以不配置,不配置的話就的每次提交的時候手動輸入賬號密碼了,如果配置了就不需要了,就會很方便)GitHub-Help-SSH配置
Hexo的安裝
系統環境
Mac OS
Hexo安裝,要用全域性安裝,加引數-g
$ sudo npm install-g hexo
檢視Hexo的版本
$ hexo version
hexo-cli: 1.0.1
os: Darwin 14.5.0 darwin x64
http_parser: 2.5.2
node: 4.4.3
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g
或者
$ hexo v
hexo-cli: 1.0.1
os: Darwin 14.5.0 darwin x64
http_parser: 2.5.2
node: 4.4.3
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g
這個時候可能會出現
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
解決方法
$ npm install hexo --no-optional
安裝好以後我們就可以使用Hexo建立專案了
$ hexo init nodejs-blog
然後我們開啟Finder發現,剛剛的路徑下多了一個資料夾,並且資料夾有Hexo相應的初始化模組.
初始化完成後進入剛剛建立的資料夾,並啟動伺服器,看看效果
進入剛剛建立的資料夾
$ cd nodejs-blog/
$ ls -a
. .gitignore _config.yml package.json source
.. .npmignore node_modules scaffolds themes
啟動hexo伺服器檢視效果
$ hexo s
INFO Start processing
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
然後通過瀏覽器訪問 http://0.0.0.0:4000/檢視效果
Hexo 目錄結構及用法
4.1目錄結構
scaffolds 腳手架，也就是一個工具模板
source 存放部落格正文內容 比如說我們新建一個page 那麼改page就會出現在這個檔案中,我們如果想對原先的部落格進行修改的話,就開啟這個資料夾下相應的檔案進行編輯.如果是想刪除的話,那就直接刪除該資料夾下相應的檔案
themes 存放面板的目錄 使用者可以根據自己的喜好更換_config.yml中的themes
_config.yml全域性的配置檔案
db.json 靜態常量
4.2全域性變數_config.yml的配置
- 站點資訊: 定義標題，作者，語言
- URL: URL訪問路徑
- 檔案目錄: 正文的儲存目錄
- 寫部落格配置：文章標題，文章型別，外部連結等
- 目錄和標籤：預設分類，分類圖，標籤圖
- 歸檔設定：歸檔的型別
- 伺服器設定：IP，訪問埠，日誌輸出
- 時間和日期格式： 時間顯示格式，日期顯示格式
- 分頁設定：每頁顯示數量
- 評論：外掛的Disqus評論系統
- 外掛和面板：換面板，安裝外掛
- Markdown語言：markdown的標準
- CSS的stylus格式：是否允許壓縮
- 部署配置：github釋出
編輯_config.yml檔案
$ vim _config.yml
4.3建立新的文章
$ hexo new 我的第一篇Hexo部落格
啟動伺服器
4.4文章語法
例項:
title: 新的開始
date: 2014-05-07 18:44:12
permalink: abc
tags:
- 開始
- 我
- 日記
categories:
- 日誌
- 第一天
---
這是**新的開始**，我用hexo建立了第一篇文章。
通過下面的命令，就可以建立新文章
```{bash}
$ hexo new 我的第一篇Hexo部落格
```
感覺非常好。
釋出到Github上
5.1生成靜態的index.thml檔案
$ hexo g
5.2建立githb pages
在Github上建立一個專案 username.github.io 比如我的使用者名稱是pvphero 那麼我建立的專案的名字就是pvphero.github.io pvphero’s GitHub
然後可能有人覺得訪問github過慢,有什麼好的解決方法麼?
github訪問慢的原因是因為CDN: github.global.ssl.fastly.net,被牆了
解決方法
- 我這邊的的解決方法是更改github的hosts快速更改MacHosts
- 然後訪問IPAddress.com根據域名找到本來的IP
- 更改Mac的hosts
5.3釋出到github上
編輯全域性配置檔案_config.yml，找到deploy的部分，設定github的專案地址
deploy:
type: git
repo:
github:[email protected]:pvpheropvphero.github.io.git,master
接下來使用hexo命令部署
$ hexo d
如果出現
bash
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
這樣的錯誤
輸入命令列
$ npm install hexo --no-optional
這樣自己的部落格就部署到github上了.可以通過 username.github.io檢視最後的效果
更換主題
6.1找一個面板
比如我用的面板是spfk,下載下來後直接複製到/nodejs-blog/themes/裡面
6.2_config.yml中設定面板
編輯檔案_config.yml，找到theme一行，改成 theme: pacman
整個Hexo搭建個人部落格就結束了.當然大家還可以個性化設定自己的部落格主題,以及載入更多的Hexo外掛.下一篇將會講如何將部落格同時部署到github上跟coding上.敬請期待~