每個(gè)優(yōu)秀的程序員在成長(zhǎng)過(guò)程都有許多個(gè)人的體會(huì)與感悟宣旱，這些感悟讓他走的更遠(yuǎn)，而通常個(gè)人博客就是這樣一個(gè)記錄個(gè)人成長(zhǎng)的地方叛薯。在這里浑吟，程序員可以暢所欲言，分享自己的對(duì)技術(shù)的體會(huì)耗溜，對(duì)生活的感悟组力，在這里你可以看到一個(gè)對(duì)技術(shù)對(duì)生活充滿追求的碼農(nóng)。
擁有一個(gè)這樣的獨(dú)立而自由的空間是一件非常有趣的事情抖拴。
下面我將帶領(lǐng)大家一步步的建立起自己的個(gè)人博客啦燎字。
1.需要用到的應(yīng)用程序
node.js 下載地址 我下載的版本為v4.4.3
Git 下載地址 如果你已經(jīng)安裝xcode，那已經(jīng)默認(rèn)集成git了阿宅，不需要再繼續(xù)安裝
hexo 如果你已經(jīng)安裝好上面兩個(gè)應(yīng)用程序候衍，那么現(xiàn)在可以通過(guò)npm來(lái)安裝hexo，這個(gè)過(guò)程會(huì)需要一些時(shí)間洒放，請(qǐng)耐心等待
注意：有些教程沒(méi)有加下面的sudo蛉鹿，操作是執(zhí)行不成功的，因?yàn)樾枰芾韱T權(quán)限往湿，因此這里需要在下面的命令中加入sudo
$ sudo npm install -g hexo-cli執(zhí)行完上面的三個(gè)操作妖异，那么現(xiàn)在你的電腦已經(jīng)安裝了node.js,git和hexo了
2.在GitHub上面建立GitHub Pages
在不購(gòu)買服務(wù)器的前提下，我們的網(wǎng)站需要掛在GitHub Pages上领追，其實(shí)也可以托管在coding上他膳，但是這個(gè)就自己去試驗(yàn)，我們這里以GitHub Pages為例蔓腐。
-
首先建立一個(gè)GitHub賬號(hào)矩乐，如下圖所示
Login 然后去注冊(cè)好的郵箱里面驗(yàn)證一下
-
驗(yàn)證完成后，需要添加一個(gè)倉(cāng)庫(kù)Repositories
addRepo -
具體的配置信息參考下圖
Repositories -
現(xiàn)在我們?cè)诘刂窓谳斎耄?a target="_blank" rel="nofollow">http://bloggithub.github.io
會(huì)看到下面這樣一個(gè)界面
404 現(xiàn)在我們已經(jīng)搭建好個(gè)人博客的基礎(chǔ)了回论，下面我們要做的就是真正將窩建立起來(lái)砖瞧。
3.使用Hexo來(lái)顯示博客
- 將我們?cè)?code>github中建立的倉(cāng)庫(kù)
clone到本地- 首先建立一個(gè)文件夾用來(lái)存放
blog相關(guān)的文件露乏，例如我創(chuàng)建了一個(gè)TestBlog文件例驹，下面的命令是基于我的用戶和github兜挨，不能直接copy，需要替換成自己的葬燎。
$ cd /Users/apple/Documents/TestBlog - 首先建立一個(gè)文件夾用來(lái)存放
$ git clone https://github.com/bloggithub/bloggithub.github.io.git
- 執(zhí)行完上面的操作我們可以看到下面的文件
- 使用Hexo建站误甚，參考[地址](https://hexo.io/zh-cn/docs/setup.html)
- 執(zhí)行下列命令缚甩，Hexo將會(huì)在指定文件夾中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
例如在我的電腦上執(zhí)行如下命令窑邦，第一個(gè)命令基于`TestBlog`文件夾擅威，第三個(gè)命令基于`bloggithub.github.io`文件夾
$ hexo init bloggithub.github.io
$ cd bloggithub.github.io
$ npm install
在執(zhí)行命令的過(guò)程中看到如下代碼，表示Hexo初始化成功
├── cheerio@0.20.0 (entities@1.1.1, dom-serializer@0.1.0, css-select@1.2.0, htmlparser2@3.8.3, jsdom@7.2.2)
├── warehouse@2.2.0 (graceful-fs@4.1.3, is-plain-object@2.0.1, JSONStream@1.1.1, cuid@1.3.8)
├── lodash@4.11.2
├── hexo-log@0.1.2 (bunyan@1.8.1)
├── hexo-util@0.5.3 (striptags@2.1.1, html-entities@1.2.0, camel-case@1.2.2, cross-spawn@2.2.3, highlight.js@9.3.0)
├── hexo-fs@0.1.5 (escape-string-regexp@1.0.5, graceful-fs@4.1.3, chokidar@1.4.3)
└── nunjucks@2.4.2 (asap@2.0.3, yargs@3.32.0, chokidar@1.4.3)
INFO Start blogging with Hexo!
- 顯示Hexo的Blog
- 執(zhí)行以下命令就可以在本地看到我們的`blog`原型了冈钦，以下命令都是基于`bloggithub.github.io`文件夾
```
$ hexo s
```
- 命令行中顯示
```
INFO Start processing
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
```
- 現(xiàn)在我們打開(kāi)瀏覽器輸入http://0.0.0.0:4000/
將會(huì)看到如下的界面
- 是不是很有成就感郊丛，不要高興的太早啦，這里我們僅僅是在本地生成了預(yù)覽瞧筛，打開(kāi)http://bloggithub.github.io 仍然是404的界面厉熟。
- 將blog部署到github上，執(zhí)行下面的操作
先Ctrl+C退出本地預(yù)覽, 進(jìn)入`bloggithub.github.io`文件夾较幌，修改站點(diǎn)配置文件(打開(kāi)_config.yml文件)揍瑟，將下面的repo地址修改為你的地址
**這里需要注意的是每個(gè)冒號(hào)和后面之間有一個(gè)空格，一定要加上空格乍炉，否則會(huì)部署失敗**
```
deploy:
type: git
repo: https://github.com/bloggithub/bloggithub.github.io.git
branch: master
```
- 執(zhí)行完上面的操作后绢片，現(xiàn)在我們輸入部署命令
```
$ hexo clean
$ hexo g
$ hexo d
```
在部署的過(guò)程中如果出現(xiàn)以下的提示
```
ERROR Deployer not found: git
```
那么執(zhí)行下面的代碼后，重新部署一遍
```
$ npm install hexo-deployer-git --save
```
在這個(gè)過(guò)程中會(huì)讓你輸入你的github賬號(hào)及密碼恩急，部署成功后會(huì)出現(xiàn)下面的提示
```
https://github.com/bloggithub/bloggithub.github.io.git.
INFO Deploy done: git
```
現(xiàn)在我們?cè)俅蜷_(kāi)http://bloggithub.github.io 看看吧
####到現(xiàn)在為止杉畜，我們已經(jīng)將我們的個(gè)人blog部署到github上面了纪蜒，現(xiàn)在無(wú)論你在哪里衷恭，都可以訪問(wèn)到這個(gè)網(wǎng)址啦。
###4.Hexo 常用的指令
- 這里只說(shuō)四個(gè)指令纯续，說(shuō)太多容易混亂随珠，請(qǐng)務(wù)必牢記下面四個(gè)指令
- `hexo s`等同于`hexo serve`生成本地預(yù)覽
- `hexo clean`清除本地生成的文件
- `hexo g`等同于`hexo generate` 生成最終的靜態(tài)html文件
- `hexo d`等同于`hexo deploy`部署到github
- `generate`和`deploy，generate`會(huì)把我們的配置猬错、文章和主題結(jié)合起來(lái)生成一堆酷炫的html靜態(tài)文件放在`public`里面窗看。但此時(shí)用戶還看不到本地`public`文件里的頁(yè)面，我們必須用后一個(gè)指令`deploy`才能把靜態(tài)文件部署到`GitHub Pages`上倦炒。
#### 每次我們修改了站點(diǎn)配置和主題配置文件后显沈，我們先hexo clean->hexo s->Ctrl+C->hexo g->hexo d，請(qǐng)記住這幾個(gè)命令的調(diào)用順序逢唤。
###5.關(guān)于Hexo的一些設(shè)置(不是很重要拉讯，可以跳過(guò))
- 官方文檔[地址](https://hexo.io/zh-cn/docs/configuration.html)
- _config.yml是整體的配置文件，很多基礎(chǔ)配置鳖藕、插件配置等都需要在里面進(jìn)行魔慷。要注意的是，該文件格式要求極為嚴(yán)格著恩，缺少一個(gè)空格都會(huì)導(dǎo)致運(yùn)行錯(cuò)誤院尔。
```
title: walle #站點(diǎn)名蜻展，站點(diǎn)左上角
subtitle: 我走的很慢，但我從不后退邀摆。 #副標(biāo)題纵顾，站點(diǎn)左上角
description: walle #給搜索引擎看的，對(duì)站點(diǎn)的描述栋盹，可以自定義
author: aiwalle #默認(rèn)在站點(diǎn)左下角可以看到
email: 12345678@qq.com #郵箱
language: zh-CN #語(yǔ)言包設(shè)置片挂。
```
```
# URL 訪問(wèn)地址等信息設(shè)置，可根據(jù)需要自己修改
url: http://bloggithub.github.io #訪問(wèn)域名
root: /
permalink: :year/:month/:day/:title/ #具體內(nèi)容頁(yè)的存儲(chǔ)路徑結(jié)構(gòu)
tag_dir: tags #標(biāo)簽?zāi)夸浢?archive_dir: archives #歸檔目錄名
category_dir: categories #分類目錄名
```
```
#Directory 默認(rèn)文章和生成目錄設(shè)置
source_dir: source
public_dir: public
```
```
# Writing 文章布局贞盯、寫作格式的定義
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:
```
```
# Category & Tag 分類和標(biāo)簽設(shè)置
default_category: uncategorized
category_map:
tag_map:
```
```
# Archives 默認(rèn)值為2音念，如果這里都修改為1，相應(yīng)頁(yè)面就只會(huì)列出標(biāo)題躏敢，而非全文(2: Enable pagination,1: Disable pagination,Fully Disable)
archive: 1
category: 1
tag: 1
```
```
# Server 本地預(yù)覽服務(wù)信息闷愤，默認(rèn)端口是4000，有需要的話可以自己修改
port: 4000
logger: false
logger_format:
```
```
# Date / Time format 日期格式
date_format: MMM D YYYY
time_format: H:mm:ss
```
```
# Pagination 每頁(yè)顯示文章數(shù)件余，可以自定義
per_page: 5
pagination_dir: page
```
```
# Extensions 這里配置站點(diǎn)所用主題和插件
theme: landscape
exclude_generator:
```
```
# Deployment 站點(diǎn)部署到github要配置
deploy:
type: github
repo: https://github.com/bloggithub/bloggithub.github.io.git
branch: master
```
###6.使用其他主題
- 配置主題
Hexo主題非常多讥脐，可以參考[Hexo主題](https://hexo.io/themes/)
- 在這里我們使用的主題為Next，大家可以看一下效果http://aiwalle.com/ 啼器，從我的個(gè)人博客上可以看到旬渠，這個(gè)主題還是比較酷炫的。
- 首先放上Next主題的[官方地址](http://theme-next.iissnan.com/getting-started.html)
- 在終端窗口下端壳，定位到 Hexo 站點(diǎn)目錄下告丢。使用` Git clone` 代碼，`your-hexo-site `在這里就是`bloggithub.github.io`這個(gè)文件夾
```
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
```
clone的過(guò)程也許會(huì)需要一點(diǎn)時(shí)間损谦，請(qǐng)耐心等待岖免。在我們clone完成后，會(huì)在theme文件夾里看到一個(gè)next文件夾照捡。這時(shí)颅湘，進(jìn)入站點(diǎn)配置文件_config.yml，找到 theme 字段栗精，并將其值更改為 next
```
theme: next
```
- 配置好以后闯参，我們重新生成`hexo s`本地預(yù)覽看一下效果吧，是不是一個(gè)酷炫的頁(yè)面就出來(lái)啦悲立，如果要部署的話記得上面的命令順序哦---[next官網(wǎng)](http://theme-next.iissnan.com/getting-started.html)鹿寨。
###7.使用個(gè)人域名
- 有時(shí)候我們想將blog的地址關(guān)聯(lián)我們的個(gè)人域名，看上去也高大上不是级历！
- 注冊(cè)個(gè)人域名释移，我的域名實(shí)在萬(wàn)網(wǎng)注冊(cè)的 `aiwalle.com `
當(dāng)我們?cè)谌f(wàn)網(wǎng)買了一個(gè)域名后，進(jìn)入域名解析界面會(huì)發(fā)現(xiàn)已經(jīng)有了一些域名寥殖，這些都是阿里默認(rèn)做的操作玩讳，我們可以統(tǒng)統(tǒng)刪除涩蜘。
- 上面的github page是我為了截圖，專門注冊(cè)的賬號(hào)熏纯，因此會(huì)與下面的賬號(hào)信息有所不同
修改添加域名解析如下圖
####但是同诫，此時(shí)并不能成功訪問(wèn)，因?yàn)镚ithub Pages是有限制的樟澜，它不允許任意域名都跳轉(zhuǎn)過(guò)來(lái)误窖，而是只限制一個(gè)域名，而且這個(gè)域名必須聲明在CNAME文件中秩贰。
- 創(chuàng)建CNAME文件霹俺，創(chuàng)建地址為`source`文件夾下，**這里添加的路徑一定要正確毒费，否則很容易跳轉(zhuǎn)域名失敗**丙唧。
```
$ touch CNAME
```
創(chuàng)建成功以后將CNAME的內(nèi)容改為你的網(wǎng)站名稱，例如我的改為aiwalle.com
- 重新部署hexo觅玻，部署完成后在github界面點(diǎn)擊Setting想际。
向下拉可以看到`Your site is published at http://aiwalle.com.`
- 現(xiàn)在我們直接輸入網(wǎng)址很可能是無(wú)法顯示的，不要著急溪厘，等待一段時(shí)間看看胡本，畢竟解析生效也需要時(shí)間。
###8.添加多說(shuō)評(píng)論
- 多說(shuō)已經(jīng)關(guān)閉
###9.使用百度統(tǒng)計(jì)
- 首先進(jìn)入[百度統(tǒng)計(jì)網(wǎng)站](http://#baidu.com/web/welcome/login)畸悬，選擇站長(zhǎng)賬號(hào)登錄
- 登錄完成后如下圖侧甫，復(fù)制 `hm.js?` 后面那串統(tǒng)計(jì)腳本 id，如：
- 編輯 站點(diǎn)配置文件傻昙， 新增字段 `baidu_analytics` 字段闺骚，值設(shè)置成你的百度統(tǒng)計(jì)腳本 id(這里的步驟和上面添加多說(shuō)評(píng)論配置相同)彩扔，只是對(duì)應(yīng)的值改變妆档。
- 站點(diǎn)配置完成后，我們需要將baidu提供的代碼放到我們的代碼中去虫碉，我放的位置為`/TestBlog/bloggithub.github.io/themes/next/layout/_partials/footer.swig`中贾惦，將上面的代碼直接粘貼到`footer.swig`的末尾即可，然后重新部署敦捧。
- 如果操作順利须板，我們重新部署過(guò)后，可以在代碼安裝檢查中看到如下所示
- 至此兢卵，我們添加統(tǒng)計(jì)的功能完全搞好了习瑰，看看效果
###10.為NexT主題添加文章閱讀量統(tǒng)計(jì)功能
- 請(qǐng)查看 [為NexT主題添加文章閱讀量統(tǒng)計(jì)功能](https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud)，這篇blog寫的非常詳細(xì)秽荤，我這里就不再?gòu)?fù)數(shù)了
- 添加成功后的效果如下圖
- ####注意：這里有一個(gè)巨大的坑疤鹧佟Ｄ帷！课兄！
- 在我的個(gè)人博客我完全按照以上地址進(jìn)行修改牍氛，`leanclound`添加`Classes`與作者寫的略有不同我也沒(méi)放在心上，但是發(fā)現(xiàn)第一次的時(shí)候可以顯示有閱讀次數(shù)為1烟阐，但是第二次就不可以了搬俊，一直不顯示閱讀次數(shù)，通過(guò)`chrome`的開(kāi)發(fā)者工具查看網(wǎng)頁(yè)蜒茄，發(fā)現(xiàn)如下圖所示
- 根據(jù)上面的博客所寫的
完全不管用啊唉擂，我完全沒(méi)有填寫安全域名，為什么會(huì)出現(xiàn)這種問(wèn)題檀葛，真的欲哭無(wú)淚/(ㄒoㄒ)/~~
- 最后經(jīng)過(guò)我的查找才發(fā)現(xiàn)楔敌，在Counter數(shù)據(jù)的ACL里面，默認(rèn)寫入功能被設(shè)置為false驻谆，因此無(wú)論我怎么搞都不行卵凑，因此創(chuàng)建Counter的時(shí)候，我們不應(yīng)該使用默認(rèn)權(quán)限胜臊，而是應(yīng)該如下所示來(lái)創(chuàng)建勺卢。
- 現(xiàn)在再看，是不是好啦O(∩_∩)O
###11.搜索
- 當(dāng)我們的blog建立好以后象对，是希望別人在搜索相關(guān)資源的時(shí)候能搜索到我們的黑忱，一來(lái)提高人氣，二來(lái)有人關(guān)注我們的作品也更能激發(fā)我們創(chuàng)作的決心勒魔。
- 我的網(wǎng)站SEO做的不好甫煞，google可以搜到，但是baidu搜不到冠绢，也不知道是什么原因+_+
- 因此也給不了大家太多的建議抚吠，大家可以參看這個(gè)blog來(lái)試試，當(dāng)然有更好的方法也歡迎給我留言
- 博客地址-----[動(dòng)動(dòng)手指弟胀，不限于NexT主題的Hexo優(yōu)化（SEO篇）](http://www.arao.me/2015/hexo-next-theme-optimize-seo/)
###12.使用七牛來(lái)存儲(chǔ)圖片
- 在使用Hexo的過(guò)程中我發(fā)現(xiàn)要使用到圖片的地方還是很多的楷力，而這些圖片雖然占用空間并不大，可是積少成多孵户，當(dāng)達(dá)到一定數(shù)量以后萧朝，對(duì)于電腦的空間還是很浪費(fèi)的，尤其是對(duì)于我128G的Pro來(lái)說(shuō)夏哭。
- 因此我將我的所有圖片信息都放到七牛上面检柬，上傳非常方便，直接通過(guò)外鏈來(lái)訪問(wèn)圖片竖配。
- 注冊(cè)七牛賬號(hào)何址，具體的過(guò)程我就不寫了酱固，比較簡(jiǎn)單都。
- 當(dāng)我們的賬號(hào)設(shè)置好以后头朱，可以添加資源
- 上傳圖片文件
- 復(fù)制外鏈來(lái)使用圖片
- 當(dāng)上面的操作都做完了以后运悲，我們用`markdown`寫文章的時(shí)候，插入圖片只需要直接復(fù)制外鏈就好啦项钮，是不是很方便呢班眯！
###13.寫文章
- 寫文章的具體操作參考官方的指導(dǎo)，[地址](https://hexo.io/zh-cn/docs/writing.html)
- 我說(shuō)一下我寫文章的方式吧烁巫。
- 首先通過(guò)下面的命令署隘，其中`my new post`為文章標(biāo)題，執(zhí)行命令后亚隙，會(huì)在項(xiàng)目`\source\ _posts`中生成`my new post.md`文件磁餐，用編輯器打開(kāi)編寫即可。
```
$ hexo new "My New Post"
```
- `markdown`的語(yǔ)法還是非常簡(jiǎn)單且易用的阿弃，推薦大家去學(xué)一下诊霹，這個(gè)網(wǎng)站我覺(jué)得非常不錯(cuò)，簡(jiǎn)單易懂渣淳，大家可以參考去使用`markdown`----[我是網(wǎng)站脾还，點(diǎn)我](https://www.zybuluo.com/mdeditor?url=https%3A%2F%2Fwww.zybuluo.com%2Fstatic%2Feditor%2Fmd-help.markdown)
- 寫完文章以后，通過(guò)`hexo g`和`hexo d`來(lái)進(jìn)行部署入愧。
###14.總結(jié)
- 最后還是希望大家記住部署的命令**hexo clean->hexo s->Ctrl+C->hexo g->hexo d**鄙漏，來(lái)來(lái)回回就這幾個(gè)命令，相信大家也已經(jīng)記住了棺蛛。
- 寫了這么多怔蚌，相信大家也可以順利的搭建好自己的blog了吧，有了網(wǎng)站不要緊旁赊，常寫博客才是正道桦踊，希望大家能收獲到自己創(chuàng)作的喜悅！
###參考資料
- [如何在一天之內(nèi)搭建以你自己名字為域名且具備cool屬性的個(gè)人博客](http://www.reibang.com/p/99665608d295)
- [如何搭建一個(gè)獨(dú)立博客](http://www.reibang.com/p/05289a4bc8b2)
- [動(dòng)動(dòng)手指彤恶，不限于NexT主題的Hexo優(yōu)化（SEO篇）](http://www.arao.me/2015/hexo-next-theme-optimize-seo/)
- [hexo.io](https://hexo.io/)
- [theme-next](http://theme-next.iissnan.com/theme-settings.html)