mac上hexo博客的搭建

Mac上hexo博客的搭建

​ 第一篇hexo博客，介紹了在mac上搭建hexo博客的全過程。包括：準備工作、本地站點的建立、啓動和部署站點、創建新文章、發佈到github、更換主題 和 綁定域名。
在介紹之前先秀一波我搭的成果: 夏天的風的博客

準備工作

1. github
2. homebrew
3. node.js 和 npm
4. hexo

github

1、github賬號

​ 這部分略過，沒有的話自己註冊一個。然後將mac上的公鑰添加到github上去。

2、建立倉庫

​ 嚴格按照 git用戶名.github.io 來命名。我這裏就叫：xiaqunfeng.github.io 。

homebrew

homebrew 是MAC OSX 上面用來安裝 或者 卸載軟件用的非常方面的一個軟件。在終端上執行如下命令即可安裝，參考官網。

sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

node.js

不推薦使用 brew 安裝node， 直接從官網下載，然後雙擊安裝。我這裏選擇的版本是：v6.9.3 LTS。node.js 集成帶有npm。

$ node -v
v6.9.3

$ npm -v
3.10.10

hexo

$ sudo npm install hexo-cli -g

安裝完後

$ hexo -v
hexo: 3.2.2
hexo-cli: 1.0.2
os: Darwin 16.1.0 darwin x64
http_parser: 2.7.0
node: 6.9.3
v8: 5.1.281.89
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2j

hexo命令行使用

常用命令：
hexo help                   #查看幫助
hexo init                   #初始化一個目錄
hexo new "postName"         #新建文章
hexo new page "pageName"    #新建頁面
hexo generate               #生成網頁，可以在 public 目錄查看整個網站的文件
hexo server                 #本地預覽，'Ctrl+C'關閉
hexo deploy                 #部署.deploy目錄
hexo clean                  #清除緩存，強烈建議每次執行命令前先清理緩存，每次部署前先刪除 .deploy 文件夾

簡寫：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

建立本地站點

執行下列命令，Hexo 將會在指定文件夾中新建所需要的文件。（文件夾不需要提前建好，會自行創建）

$ hexo init <folder>
$ cd <folder>
$ npm install

新建文件夾目錄如下：

.
├── .deploy         #需要部署的文件
├── node_modules    #Hexo插件
├── public      #生成的靜態網頁文件
├── scaffolds   #模板
├── source      #博客正文和其他源文件
| ├── _drafts   #草稿(剛開始沒有)
| └── _posts        #文章
├── themes      #主題
├── _config.yml     #全局配置文件
└── package.json

啓動站點

執行 hexo server 啓動站點

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在瀏覽器中輸入：http://localhost:4000 就可以看到站點了。

部署站點

編輯文件 _config.yml ，修改如下：

deploy:
   type: git
   repository: https://github.com/xiaqunfeng/xiaqunfeng.github.io.git
   branch: master

注意：冒號後面要留 空格！！

創建新文章

方法1、hexo n創建新文章

$ hexo n "我的第一篇hexo博客"
INFO  Created: ~/hexo-blog/source/_posts/我的第一篇hexo博客.md

然後用編輯器打開編輯即可。

方法2、直接在 source/_posts 中新建一個md文件，進行編輯

在hexo-blog文件夾下執行：

hexo g
hexo s

然後在瀏覽器中輸入http://localhost:4000就可以看到新加的文章了。

發佈

執行 hexo d ，發現如下問題

$ hexo d
ERROR Deployer not found: git

解決方法

$ npm install hexo-deployer-git --save
hexo-site@0.0.0 /Users/xiaqunfeng/hexo-blog
└── hexo-deployer-git@0.2.0 

再執行 hexo d

$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
On branch master
nothing to commit, working tree clean
Username for 'https://github.com': xiaqunfeng
Password for 'https://[email protected]': 
To https://github.com/xiaqunfeng/xiaqunfeng.github.io.git
 * [new branch]      HEAD -> master
Branch master set up to track remote branch master from https://github.com/xiaqunfeng/xiaqunfeng.github.io.git.
INFO  Deploy done: git

輸入github的用戶名和密碼即可。此時，博客已經完全搭建起來了。

在瀏覽器中輸入：https://xiaqunfeng.github.io/ 即可訪問。

預覽如下：

更換主題

自己google一下hexo主題，選一個自己喜歡的，然後git clone下來。比如 Next 主題

$ git clone https://github.com/iissnan/hexo-theme-next.git

然後打開_config.yml文件，替換其中的 theme 屬性，默認爲 landscape。

theme: next

本地調試

$ hexo g #生成靜態頁面，生成的內容在public文件夾下
$ hexo s #啓動本地服務，進行文章預覽調試。hexo s --debug 命令可以用來調試

發佈到github

1、清理之前生成的內容，即public文件。

注意：這一步必須要，不然有時因爲緩存問題，服務器更新不了主題

$ hexo clean 

2、生成靜態文件並部署到github

$ hexo g #生成靜態文件
$ hexo d #部署到github

上面兩個命令可以合併爲一個：

$ hexo d -g #在部署前先生成

綁定域名

我暫時還沒購買和綁定域名，就暫時先簡單介紹一下，後續再來補充完善。

1、購買域名

某乎這裏有各種推薦，自己可以參考的看看。

godaddy地址: https://www.godaddy.com

阿里雲域名地址: http://wanwang.aliyun.com

2、到自己的gitHubPages的ip地址

ping http://xiaqunfeng.github.io
PING github.map.fastly.net (151.101.192.133): 56 data bytes
64 bytes from 151.101.192.133: icmp_seq=0 ttl=49 time=62.670 ms
64 bytes from 151.101.192.133: icmp_seq=1 ttl=49 time=65.062 ms
...

這裏IP地址爲：151.101.192.133

3、域名綁定IP地址

登錄自己購買域名的地方，找到域名相關選項

添加域名

添加記錄：一個主機記錄 @， 一個爲www，記錄值都是博客主頁對應的ip。

等待生效，最遲72小時生效，然後就可通過域名瀏覽你的博客主頁了。