前言
我是一枚安卓猿,js css以及基于Nodejs的Hexo對我來說完全是個(gè)新領(lǐng)域.由于之前查資料查到看到一個(gè)人的博客很不錯(cuò)MOxFIVE,于是就決定模仿人家的博客進(jìn)行搭建自己的Hexo博客.程序員就是愛折騰.于是查了很多資料,最終實(shí)現(xiàn)了自己的Hexo博客.下面我就把一個(gè)完全不懂nodejs以及之前根本沒聽說過Hexo的人建站的歷程給大家分享下.
我是在Mac環(huán)境下搭建的,Win環(huán)境跟Mac的差不多,如果大家是win環(huán)境,我建議大家參看粉絲日志
Hexo是一個(gè)簡單的,輕量級,基于Nodejs的一個(gè)靜態(tài)的博客框架.我們可以很方便的使用Hexo搭建個(gè)人博客.
對一個(gè)外行來說,在一開始使用Hexo的時(shí)候心理難免有很多疑問.那我來說,我剛接觸Hexo的時(shí)候我一直在想:Hexo到底是什么?他是如何把網(wǎng)站部署到github或者conding上的?Hexo怎么進(jìn)行博客內(nèi)容的編輯啊?于是經(jīng)過幾番折騰,我對Hexo有了初步的了解.希望我的理解對大家剛剛搭建有所幫助吧.
- 首先,Hexo是一個(gè)基于Nodejs的框架,我們通過Hexo里面的命令在Vim上進(jìn)行hexo初始化,hexo生成index.html靜態(tài)頁面,然后再通過命令發(fā)布到github或者conding
- Hexo里面集成有g(shù)it的插件,所以你發(fā)布到你的 yourname.github.io的時(shí)候只需要把_config.yml中的配置配置好.然后使用
??? $ hexo g
??? $ hexo d
安裝Node (必須) 作用是用來生成靜態(tài)頁面.到Node.js官網(wǎng)上下載相應(yīng)平臺(tái)的最新版本,一路安裝即可,沒有難度…此處略過!但是一定要裝啊.
就可以將通過Hexo編譯好的文件推送到git項(xiàng)目中
hexo里面的內(nèi)容怎么編輯?hexo里面的文件是以md結(jié)尾的.是markdown語法.所以大家編輯的時(shí)候可以先看看markdown語法.我這邊是使用的mac的Mou一款免費(fèi)的markdown軟件.大家也可以使用phpStorm,里面在plugins中可以下載markdown的插件.建議大家下載個(gè)PHPStorm IDE,因?yàn)閷砩婕暗綀D片更換,主題更換,目錄結(jié)構(gòu)的查看等等,都會(huì)比較直觀.
安裝Node (必須) 作用是用來生成靜態(tài)頁面.到Node.js官網(wǎng)上下載相應(yīng)平臺(tái)的最新版本,一路安裝即可,沒有難度…此處略過!但是一定要裝啊.
安裝Git (必須) 作用是把本地hexo內(nèi)容提交到git上去,安裝xcode就自帶Git了,就不多說了~
申請Github(想同時(shí)發(fā)布到coding上的,可以再申請個(gè)coding賬號,后面會(huì)講到)
配置github SSH keys(可以不配置,不配置的話就的每次提交的時(shí)候手動(dòng)輸入賬號密碼了,如果配置了就不需要了,就會(huì)很方便)GitHub-Help-SSH配置
系統(tǒng)環(huán)境
Mac OS
Hexo安裝,要用全局安裝,加參數(shù)-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
這個(gè)時(shí)候可能會(huì)出現(xiàn)
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
解決方法
$ npm install hexo --no-optional
安裝好以后我們就可以使用Hexo創(chuàng)建項(xiàng)目了
$ hexo init nodejs-blog
然后我們打開Finder發(fā)現(xiàn),剛剛的路徑下多了一個(gè)文件夾,并且文件夾有Hexo相應(yīng)的初始化模塊.
初始化完成后進(jìn)入剛剛創(chuàng)建的文件夾,并啟動(dòng)服務(wù)器,看看效果
進(jìn)入剛剛創(chuàng)建的文件夾
$ cd nodejs-blog/
$ ls -a
.? .gitignore? _config.yml? package.json? source
..? .npmignore? node_modules? scaffolds? ? themes
啟動(dòng)hexo服務(wù)器查看效果
$ 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/查看效果
4.1目錄結(jié)構(gòu)
scaffolds 腳手架，也就是一個(gè)工具模板
source 存放博客正文內(nèi)容 比如說我們新建一個(gè)page 那么改page就會(huì)出現(xiàn)在這個(gè)文件中,我們?nèi)绻雽υ鹊牟┛瓦M(jìn)行修改的話,就打開這個(gè)文件夾下相應(yīng)的文件進(jìn)行編輯.如果是想刪除的話,那就直接刪除該文件夾下相應(yīng)的文件
themes 存放皮膚的目錄 用戶可以根據(jù)自己的喜好更換_config.yml中的themes
_config.yml全局的配置文件
db.json 靜態(tài)常量
4.2全局變量_config.yml的配置
站點(diǎn)信息: 定義標(biāo)題诉瓦，作者渡处，語言
URL: URL訪問路徑
文件目錄: 正文的存儲(chǔ)目錄
寫博客配置：文章標(biāo)題秉撇，文章類型条篷，外部鏈接等
目錄和標(biāo)簽：默認(rèn)分類伤溉，分類圖妒茬，標(biāo)簽圖
歸檔設(shè)置：歸檔的類型
服務(wù)器設(shè)置：IP仰美，訪問端口迷殿，日志輸出
時(shí)間和日期格式： 時(shí)間顯示格式，日期顯示格式
分頁設(shè)置：每頁顯示數(shù)量
評論：外掛的Disqus評論系統(tǒng)
插件和皮膚：換皮膚咖杂，安裝插件
Markdown語言：markdown的標(biāo)準(zhǔn)
CSS的stylus格式：是否允許壓縮
部署配置：github發(fā)布
編輯_config.yml文件
$ vim _config.yml
4.3創(chuàng)建新的文章
$ hexo new 我的第一篇Hexo博客
啟動(dòng)服務(wù)器
4.4文章語法
實(shí)例:
title: 新的開始
date: 2014-05-07 18:44:12
permalink: abc
tags:
- 開始
- 我
- 日記
categories:
- 日志
- 第一天
---
這是**新的開始**，我用hexo創(chuàng)建了第一篇文章诉字。
通過下面的命令懦尝，就可以創(chuàng)建新文章
```{bash}
$ hexo new 我的第一篇Hexo博客
```
感覺非常好知纷。
5.1生成靜態(tài)的index.thml文件
$ hexo g
5.2創(chuàng)建githb pages
在Github上創(chuàng)建一個(gè)項(xiàng)目 username.github.io? 比如我的用戶名是pvphero 那么我創(chuàng)建的項(xiàng)目的名字就是pvphero.github.iopvphero’s GitHub
然后可能有人覺得訪問github過慢,有什么好的解決方法么?
github訪問慢的原因是因?yàn)镃DN: github.global.ssl.fastly.net,被墻了
解決方法
我這邊的的解決方法是更改github的hosts快速更改MacHosts
然后訪問IPAddress.com根據(jù)域名找到本來的IP
更改Mac的hosts
5.3發(fā)布到github上
編輯全局配置文件_config.yml，找到deploy的部分陵霉，設(shè)置github的項(xiàng)目地址
deploy:
type: git
repo:
github:git@github.com:pvpheropvphero.github.io.git,master
接下來使用hexo命令部署
$ hexo d
如果出現(xiàn)
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' }
這樣的錯(cuò)誤
輸入命令行
$ npm install hexo --no-optional
這樣自己的博客就部署到github上了.可以通過? username.github.io查看最后的效果
6.1找一個(gè)皮膚
比如我用的皮膚是spfk,下載下來后直接復(fù)制到/nodejs-blog/themes/里面
6.2_config.yml中設(shè)置皮膚
編輯文件_config.yml琅轧，找到theme一行，改成 theme: pacman
整個(gè)Hexo搭建個(gè)人博客就結(jié)束了.當(dāng)然大家還可以個(gè)性化設(shè)置自己的博客主題,以及加載更多的Hexo插件.下一篇將會(huì)講如何將博客同時(shí)部署到github上跟coding上.敬請期待~
