前言
每當(dāng)看到別人精美的個(gè)人博客時(shí)亮瓷，不知你是否有一點(diǎn)點(diǎn)的羨慕衔沼。別急，現(xiàn)在我就來(lái)手把手教你搭建自己的個(gè)人博客卿啡。
在技術(shù)日趨成熟的今天吟吝，有著很多種快速生成博客的框架:Hexo,Jekyll,Wordpress等等。今天我們就用Hexo來(lái)帶著大家完成自己的博客
什么是Hexo?
Hexo官網(wǎng)中說(shuō)是這么描述的：A fast, simple & powerful blog framework,即:一個(gè)快速牵囤、簡(jiǎn)單且強(qiáng)大的博客快速生產(chǎn)工具爸黄。它的簡(jiǎn)單體現(xiàn)在你完全有可能在30分鐘內(nèi)就生成屬于你的個(gè)人博客滞伟。而它的強(qiáng)大體現(xiàn)在你對(duì)細(xì)節(jié)的調(diào)整上完全有可能花上一天的時(shí)間。
一炕贵、巧婦難為無(wú)米之炊:準(zhǔn)備搭建環(huán)境
1.安裝node.js
Node.js 的實(shí)質(zhì)是一個(gè)JavaScript運(yùn)行環(huán)境,這里我們主要使用它來(lái)生成我們博客的靜態(tài)頁(yè)面梆奈。從官網(wǎng)下載最新的安裝包進(jìn)行默認(rèn)安裝就好。安裝過(guò)程略称开。
2.安裝git環(huán)境
git是最流行的分布式版本控制系統(tǒng)亩钟，我們使用它主要是與github進(jìn)行交互。安裝git使用默認(rèn)選項(xiàng)安裝即可鳖轰，安裝過(guò)程略清酥。如果你還對(duì)git不是特別熟悉，推薦一個(gè)學(xué)習(xí)git的教程:傳送門
3.注冊(cè)github
github就不用說(shuō)了吧焰轻，它是一個(gè)面向開源及私有軟件項(xiàng)目的托管平臺(tái)。幾乎所有的程序員都聽說(shuō)過(guò)它的大名狞膘。就正常注冊(cè)一個(gè)賬號(hào)就好了揩懒。
注冊(cè)號(hào)以后首先給我們的賬號(hào)添加本機(jī)的SSH，具體方法及原因在這篇文章已經(jīng)有了詳細(xì)說(shuō)明挽封，并且方法也很簡(jiǎn)單
二已球、上正菜：開始搭建博客
環(huán)境都準(zhǔn)備好后，我們就可以開始安裝博客了:
1.創(chuàng)建文件夾
在本地新建一個(gè)文件夾用于存放我們的博客辅愿，并且右鍵菜單選擇Git Bash Here,然后在Git Bash里輸入：
npm install hexo
然后回車智亮，如圖：
我在執(zhí)行這個(gè)的時(shí)候出現(xiàn)了下圖的警告,但是并不影響我們的安裝鸽素，不用理會(huì)它。
如果沒有輸出err之類的錯(cuò)誤并且目錄下多了一個(gè)node_modules文件夾亦鳞，那這步就算成功了
2.執(zhí)行hexo命令
依次執(zhí)行以下3個(gè)命令:
hexo init --初始化hexo環(huán)境,這時(shí)會(huì)在目錄下自動(dòng)生成hexo的文件
npm install --安裝npm依賴包
hexo generate --生成靜態(tài)頁(yè)面
hexo server --生成本地服務(wù)
好了馍忽，這時(shí)候我們打開瀏覽器輸入http://localhost:4000看看可不可以訪問(wèn)。如果默認(rèn)的hexo博客出現(xiàn)徒探，那么恭喜你瓦呼，你已經(jīng)搭建好了自己的博客，接下來(lái)我們就要將它發(fā)布到網(wǎng)上测暗。
3.可能遇到的報(bào)錯(cuò):
- 日志報(bào)錯(cuò)
這個(gè)報(bào)錯(cuò)一般是由于在命令執(zhí)行中用戶使用Ctrl+C強(qiáng)制中斷了命令的執(zhí)行央串，導(dǎo)致log中記錄已經(jīng)執(zhí)行磨澡，但實(shí)際沒有執(zhí)行完成。解決辦法:刪除圖中路徑下的.log文件
- 在非空文件夾下執(zhí)行
hexo init命令
hexo init這個(gè)命令是自動(dòng)生成hexo目錄時(shí)使用的命令质和，使用他有一個(gè)前提是必須是空文件夾稳摄，如果出現(xiàn)了這個(gè)錯(cuò)誤，把所有文件刪除就行饲宿。如果還是報(bào)錯(cuò)厦酬，別著急，看看是不是有隱藏文件沒有刪除瘫想。
- hexo命令未找到
有的同學(xué)可能會(huì)出現(xiàn)在執(zhí)行hexo命令時(shí)出現(xiàn)conmand not found的提示仗阅，這是由于hexo沒有配到環(huán)境變量中，只需要手動(dòng)配置一下就好了国夜，這里演示一下win7的配置方式减噪，其他系統(tǒng)也差不多，自行百度就好:
1.找到并進(jìn)入根目錄下node_modules文件夾,這時(shí)我們發(fā)現(xiàn)里面有很多文件夾车吹，找到hexo文件夾,這里我們可以看到一個(gè)bin文件夾旋廷，進(jìn)到bin目錄下，復(fù)制當(dāng)前路徑:
2.右鍵我的電腦-->高級(jí)系統(tǒng)設(shè)置-->高級(jí)-->環(huán)境變量礼搁。在系統(tǒng)變量那欄找到Path并雙擊這行,在彈出的編輯系統(tǒng)變量這欄的變量值的最后先輸入一個(gè)分號(hào)；表示與前一個(gè)變量隔開,然后再把剛才復(fù)制的hexo路徑添加到分號(hào)后面目尖。
三、萬(wàn)事具備，只欠東風(fēng)：將本地博客發(fā)布到網(wǎng)絡(luò)上
這時(shí)候就要用到了我們的github：
1.創(chuàng)建遠(yuǎn)程倉(cāng)庫(kù)
新建一個(gè)跟自己賬號(hào)名字一樣的空倉(cāng)庫(kù)户魏，如圖：
2.連接本地與遠(yuǎn)程github倉(cāng)庫(kù)
打開本地博客的文件夾闲孤，打開_config.yml進(jìn)行編輯
翻到文件最下方，將deploy的選項(xiàng)改成以下的形式洞拨，并將yournmae修改為你自己的名稱：
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master
然后在GitBash中執(zhí)行
npm install hexo-deployer-git --save
這時(shí)候扯罐，我們?cè)僮詈髨?zhí)行一句
hexo deploy
就可以在瀏覽器中訪問(wèn)http://yourname.github.io/來(lái)進(jìn)入你的博客啦
大功告成！烦衣！
四歹河、一鼓作氣：詳細(xì)了解Hexo
博客已經(jīng)可以訪問(wèn)了，但我相信大家對(duì)Hexo還是一頭霧水花吟，現(xiàn)在我們來(lái)深入學(xué)習(xí)一下Hexo:
1.Hexo的基本命令
hexo generate --生成個(gè)人博客所需的靜態(tài)頁(yè)面
hexo server --本地預(yù)覽
hexo deploy --部署我們的個(gè)人博客
hexo clean --清除緩存
這幾個(gè)命令都能用首字母縮寫完成
hexo g --generate
hexo s --server
hexo d --deploy
2.寫文章的需要用到下面的命令
hexo new "postName" --新建文章
hexo new page "pageName" --新建頁(yè)面
編輯我們的博客的時(shí)候可以使用
hexo s --debug
然后訪問(wèn)http://localhost:4000/來(lái)進(jìn)入調(diào)試模式秸歧，更改了配置或文章后隨時(shí)刷新頁(yè)面來(lái)查看效果。
Hexo的文章支持的是MarkDown語(yǔ)法衅澈。網(wǎng)上有很多資料键菱，這里提供一個(gè)傳送門。
3.我們每次部署的步驟是
hexo clean
hexo generate
hexo deploy
后兩步可以簡(jiǎn)寫為hexo g -d今布，另外我們也可以使用hexo help來(lái)查看hexo命令幫助
4.目錄結(jié)構(gòu)說(shuō)明
hexo init 出來(lái)的文件各自的作用如下:
`-----------
| +-- .deploy #hexo deploy生成的文件
| +-- node_modules #npm組件
| +-- public #生成的靜態(tài)網(wǎng)頁(yè)文件
| +--scaffolds #模板
| +-- source #博客正文和其他源文件
| | +-- _posts #我們自己寫的文章以md結(jié)尾
| +-- themes #主題
| +-- _config.yml #全局配置文件
| `-- package.json #定義了hexo所需要的各種模塊
5.配置文件
搭建好博客后经备，我們的各種細(xì)節(jié)配置基本都是在配置文件中完成的拭抬，Hexo中的配置文件一共分2中，在文件夾跟目錄下的_config.yml叫做站點(diǎn)配置文件,同樣的文件名我們可以在theme文件夾下的主題文件夾里面也找的侵蒙。而主題文件夾下的_config.yml叫做主題配置文件造虎。這里說(shuō)明一下站點(diǎn)配置文件：
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站點(diǎn)信息
title: #標(biāo)題
subtitle: #副標(biāo)題
description: #站點(diǎn)描述，給搜索引擎看的
author: #作者
email: #電子郵箱
language: zh-CN #語(yǔ)言
# URL #鏈接格式
url: #網(wǎng)址
root: / #根目錄
permalink: :year/:month/:day/:title/ #文章的鏈接格式
tag_dir: tags #標(biāo)簽?zāi)夸?
archive_dir: archives #存檔目錄
category_dir: categories #分類目錄
code_dir: downloads/code
permalink_defaults:
# Directory #目錄
source_dir: source #源文件目錄
public_dir: public #生成的網(wǎng)頁(yè)文件目錄
# Writing #寫作
new_post_name: :title.md #新文章標(biāo)題
default_layout: post #默認(rèn)的模板蘑志，包括 post累奈、page、photo急但、draft（文章澎媒、頁(yè)面、照片波桩、草稿）
titlecase: false #標(biāo)題轉(zhuǎn)換成大寫
external_link: true #在新選項(xiàng)卡中打開連接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #語(yǔ)法高亮
enable: true #是否啟用
line_number: true #顯示行號(hào)
tab_replace:
# Category & Tag #分類和標(biāo)簽
default_category: uncategorized #默認(rèn)分類
category_map:
tag_map:
# Archives
2: 開啟分頁(yè)
1: 禁用分頁(yè)
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服務(wù)器
port: 4000 #端口號(hào)
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期時(shí)間格式
date_format: YYYY-MM-DD #參考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分頁(yè)
per_page: 10 #每頁(yè)文章數(shù)戒努，設(shè)置成 0 禁用分頁(yè)
pagination_dir: page
# Disqus #Disqus評(píng)論，替換為多說(shuō)
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主題
exclude_generator:
plugins: #插件镐躲，例如生成 RSS 和站點(diǎn)地圖的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署储玫，將 lmintlcx 改成用戶名
deploy:
type: git
repo: github創(chuàng)庫(kù)地址.git
branch: master
有時(shí)候我們部署了以后自己博客的鏈接打不開,查看生成的靜態(tài)文件也沒有index.html,或者是各種奇怪的報(bào)錯(cuò)。這時(shí)候有可能是我們的站點(diǎn)配置文件_config.yml格式出現(xiàn)了問(wèn)題萤皂。這時(shí)候不妨去一些YAML格式檢測(cè)網(wǎng)站去檢測(cè)一下格式是否正確:傳送門撒穷。
五、結(jié)語(yǔ)
完成上面的操作,你就已經(jīng)一只腳踏進(jìn)了hexo的大門,這時(shí)的你肯定還有很多疑問(wèn),比如博客的頭像怎么更換裆熙，博客的主題怎么配置等等等等端礼。這里先留下一個(gè)懸念,有興趣的同學(xué)可以先行查詢一些資料_
本文作者： catalinaLi
本文鏈接： http://catalinali.top/2017/firstBuildHexo/
版權(quán)聲明： 原創(chuàng)文章，有問(wèn)題請(qǐng)?jiān)u論中留言入录。非商業(yè)轉(zhuǎn)載請(qǐng)注明作者及出處蛤奥。
