Github+Hexo搭建個人博客

1、準備工作

1.1、git

1.1.1、github

首先注冊、登錄
uername 最好都用小寫,因為最后建立的博客地址是:http://username.github.io; 郵箱十分重要,GitHub 上很多通知都是通過郵箱的。

1.1.2、創建Repository

然后右上角選擇 Create a new repository
Repository 名字應該是http://username.github.io。 (username與你的注冊用戶名一致,這個就是你博客的域名了)
其他的可以選擇添加一些描述也可以選擇默認什么也不添加 ,點擊creat repository

1.1.3、安裝git

Windows:下載并安裝 git 。
Mac:使用 Homebrew, MacPorts :brew install git;或下載 安裝程序 安裝。
Linux (Ubuntu, Debian):sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS):sudo yum install git-core
檢驗是否安裝成功:

$ git version

安裝 Git waylau/git-for-win: Git for Windows. 國內直接從官網下載比較困難,需要翻墻。這里提供一個國內的下載站,方便網友下載
https://github.com/waylau/git-for-win
Git教程這里有廖雪峰老師的教程,非常好。
安裝完成后,在開始菜單里找到“Git”->“Git Bash”,名稱和郵箱是Github上的

1.2、安裝node.js

安裝 Node.js
去 nodejs 官網 https://nodejs.org/en/ 下載所需系統的安裝包,并根據提示安裝即可。檢驗是否安裝成功:

$ node -v

1.3、安裝hexo

上述兩個必備程序安裝成功之后,只需要通過npm便可以完成Hexo的安裝了。
$ npm install -g hexo-cli$ npm install -g hexo
至此,環境配置就完成了,可以開始搭建博客啦!

2、搭建博客

2.1、創建獨立博客項目文件夾

$ hexo init blog

稍微等待下,速度有點慢。成功提示
INFO Start blogging with Hexo!

2.2、安裝依賴包

$ npm install

2.3、本地查看

因為你初始化hexo 之后source目錄下自帶一篇hello world文章, 所以直接執行下方命令
$ hexo generate$ hexo g //每次進行相應改動都要hexo g 生成一下

$ hexo server //啟動本地服務器 或 $ hexo s //啟動服務預覽
現在已經搭建好本地的 Hexo 博客了,執行完下面的命令就可以到瀏覽器輸入 localhost:4000 查看到啦
在瀏覽器輸入 http://localhost:4000/ 就可以看見網頁和模板了
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

3、配置SSH keys

ssh keys就是用來使本地git 項目與github聯系

重新打開CMD

3.1、檢查SSH keys的設置

首先要檢查自己電腦上現有的 SSH key:

$ cd ~/. ssh

如果顯示“No such file or directory”,說明這是你第一次使用 git

3.2、生成新的 SSH Key:

$ ssh-keygen -t rsa -C "郵件地址@youremail.com" //ssh-keygen -t rsa -C "Github的注冊郵箱地址"
【提示1】這里的郵箱地址,輸入注冊 Github 的郵箱地址
【提示2】「-C」的是大寫的「C」
窗口會顯示:
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車就好>
然后系統會要你輸入密碼:
Enter passphrase (empty for no passphrase):<設置密碼>
Enter same passphrase again:<再次輸入密碼>
(在回車中會提示你輸入一個密碼,這個密碼會在你提交項目時使用,如果為空的話提交項目時則不用輸入。這個設置是防止別人往你的項目里提交內容。)

注意:輸入密碼的時候沒有輸入痕跡的,不要以為什么也沒有輸入。

一路Enter過來,得到信息:
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
看到這樣的界面,就成功設置ssh key了.

3.3、添加SSH Key到GitHub

在本地文件夾找到id_rsa.pub文件,看上面已經告訴你存在哪里了
沒找到的勾選一下文件擴展名 隱藏的項目
在.ssh文件夾里找到該文件,用記事本或文本編輯器打開這個文件
Ctrl + a復制里面的所有內容,
然后進入Sign in to GitHub:你的github主頁
點擊頭像后邊的箭頭,選Settings
進入設置界面后在左側選SSH and GPG keys
New SSH key //新建一個SSH key
Title:blog //Title最好寫,隨便寫。網上有說不寫title也有可能后期出現亂七八糟的錯誤
Key:輸入剛才復制的(Key部分就是放剛才復制的內容啦)
點擊添加Add SSH key

3.4、測試

git bash 里輸入以下代碼 不要改任何一個字 我就是自作聰明以為代表的是自己注冊時候的郵箱然后...

$ ssh -T git@github.com

如果得到以下反饋
The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)
輸入yes回車
Enter passphrase for key '/c/Users/lenovo/.ssh/id_rsa':
輸入剛才設置的密碼回車

3.5、設置用戶信息

現在已經可以通過 SSH 鏈接到 GitHub 啦!當然還需要完善一些個人信息:

$ git config --global user.name "username"http://輸入注冊時的username
$ git config --global user.email  "yourname@yourmail.com"http://填寫注冊郵箱

GitHub 也是用這些信息來做權限的處理,輸入下面的代碼進行個人信息的設置,把名稱和郵箱替換成你自己的,名字必須是你的真名,而不是GitHub的昵稱。

4、配置博客

_config.yml是配置文件,這個文件我們會經常用到,后面也會介紹具體可以配置哪些信息。
source是資源文件夾,用來存放我們的markdown文件。
themes文件夾是用來放置主題的
博客名字及作者信息:_config.yml
個人介紹頁面:about.md
代表作頁面:milestone.md

4.1、配置_config.yml

title: **My Blog** #博客名
subtitle: to be continued... #副標題
description: My blog #給搜索引擎看的,對網站的描述,可以自定義
author: **Yourname** #作者,在博客底部可以看到
email: yourname@yourmail.com #你的聯系郵箱
language: **zh-CN** #中文。如果不填則默認英文
timezone: Asia/Shanghai
# URL #這項暫不配置,綁定域名后,欲創建sitemap.xml需要配置該項
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
# Writing 文章布局、寫作格式的定義,不修改
# Archives 默認值為2,這里都修改為1,相應頁面就只會列出標題,而非全文
# Server 不修改
# Date / Time format 日期格式,可以修改成自己喜歡的格式
# Pagination 每頁顯示文章數,可以自定義,貼主設置的是10
# Disqus Disqus插件,我們會替換成“多說”,不修改

# Extensions 這里配置站點所用主題和插件,暫時默認

4.2、配置 Deploy

接下來配置 GitHub 設置,類型設置為 git ,指定好 repo 地址,branch 必須設置為master,因為 GitHub Page 只會從 mater 分支生成。(注意有坑:這里我們需要單獨設置好在 GitHub 上使用 name 和 email ,否則將會使用 global 的user.name 和 user.email ,囧~~):
# Deployment 站點部署到 github 要配置

deploy:
  type: git //type字段對應的是部署的服務器類型,我們在這邊填寫git即可
  repository: https://github.com/username/username.github.io.git 
或 repo: username/username.github.io // 創建的github倉庫的地址
或 repo: git@github.com:username/username.github.io.git
  name: username
  email: username@gmail.com
  branch: master

4.3、推送到 github

4.3.1、確保 git 部署

完成上述配置后,在終端執行

$ npm install hexo-deployer-git --save # 安裝該工具

這個操作主要是為了把我們寫好的文章部署到 github 服務器上并可以被別人瀏覽。

題外話,這里簡單說一下 hexo-deployer-git 插件的工作流程:當執行部署操作的時候,首先會自動初始化 git 倉庫(位置在 .deploy_git 中),并關聯到指定 repo 與 branch ,后續 public 文件夾中自動生成的頁面代碼將會拷貝至此目錄中進行代碼管理。若修改了 name 和 email ,需要刪掉整個 .deploy_git 再重新部署才會生效。有興趣的可以看下 hexo-deployer-git 的源碼。

4.3.2、發布

最后一步,發布到網上,執行:
$ hexo deploy$ hexo d -g // 生成和部署
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
其中會跳出Github登錄,直接登錄

4.3.2、訪問

完成以上操作后,使用瀏覽器訪問 http://username.github.io , 就可以成功訪問我們的博客。

5、發布文章

在CMD中輸入
$ hexo new "測試文章"

$ hexo new test_md

通過關鍵字來指定文章的分類、標簽及是否開啟評論等功能。

title: Hello World
date: 2018/6/7 19:45:12
categories:   // 分類
- Diary
tags:        // 標簽
- PS3
- Games
comments: false  // 評論功能,默認開啟

注意:請參閱 Hexo 的分類與標簽文檔,了解如何為文章添加標簽或者分類的詳細信息。

在新建文章時,Hexo 會根據 scaffolds 文件夾內相對應的文件 post.md 來建立文章,因此我們可以修改它建立自己的文章模板,我的模板如下:

title: {{ title }}
date: {{ date }}
tags:
  - 
categories:
  - 
comments: 
password: 

就可以新建文章
INFO Created: G:\Github\blog\source_posts\測試文章.md
此時會在source/_posts目錄下生成 test_md.md 文件
找到該文章,打開,
在 test_md.md 中輸入內容后,保存一下。
使用 Markdown 語法,該語法介紹可以查看
利用HEXO搭建的博客及Markdown語法介紹
然后執行下列步驟

$ hexo clean

INFO Deleted database.
INFO Deleted public folder.
$ hexo generate$ hexo g
INFO Start processing
INFO Files loaded in 1.48 s

省略

INFO 29 files generated in 4.27 s
$ hexo server$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
這個時候,打開http://localhost:4000/, 發現剛才的文章已經成功了
最后一步,發布到網上,執行:
$ hexo deploy$ hexo d # 將網站進行部署。
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...

省略

其中 hexo clean 是為了清除緩存,和已經生成的靜態文件( publish 文件夾);hexo g 是命令 hexo generate 的簡寫,生成靜態文件;hexo s 是命令 hexo server 的簡寫。

6、個性化定制

6.1、更換主題

6.1.1、下載主題

首先當然是下載主題了,博主用得是Hexo上比較熱門的 iissnan/hexo-theme-next 主題,簡潔大方好看嘿嘿,clone 到 themes 目錄中即可:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

hexo 官方的主題 https://hexo.io/themes/
主題介紹:
Anodyne 主題 $ git clone https://github.com/klugjo/hexo-theme-anodyne
litten/hexo-theme-yilia 主題: 一個簡潔優雅的hexo主題 A simple and elegant theme for hexo.
https://github.com/litten/hexo-theme-yilia

6.1.2、啟用主題

啟用新下載的主題,在剛打開的的 _config.yml 文件中(hexo根目錄中),找到“# Extensions”,把默認主題 landscape 修改為剛剛下載下來的主題名:
修改主目錄下的 _config.yml,指向我們剛剛 clone 的主題:

theme: next # 啟用 NexT 主題

到此,NexT 主題安裝完成。下一步我們將驗證主題是否正確啟用。在切換主題之后、驗證之前, 我們最好使用 hexo clean 來清除 Hexo 的緩存。

6.1.3、驗證主題

執行以下命令,注意觀察命令行輸出是否有任何異常信息。

hexo s --debug

輸出如下:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此時即可使用瀏覽器訪問 http://localhost:4000, 檢查博客主題是否啟用成功。
注意:NexT主題的詳細配置信息請參考NexT網站。
【提示】http://username.github.io 里有兩個 config.yml 文件,一個在根目錄,一個在 theme 下,現在修改的是在根目錄下的。

6.1.4、更新主題

git bash 里執行

$ cd themes/主題名
$ git pull

6.1.5、本地查看調試

每次修改都要 hexo g 生成一下

$ hexo g # 生成
$ hexo s # 啟動本地服務,進行文章預覽調試,退出服務用Ctrl+c

瀏覽器輸入
localhost:4000 預覽效果

6.2、主題設定(這一部分的修改都在該theme下的config.yml 文件中)

6.2.1、選擇 Scheme

Scheme 是 NexT 提供的一種特性,借助于 Scheme,NexT 為你提供多種不同的外觀。同時,幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme,他們是:
Muse - 默認 Scheme,這是 NexT 最初的版本,黑白主調,大量留白
Mist - Muse 的緊湊版本,整潔有序的單欄外觀
Pisces - 雙欄 Scheme,小家碧玉似的清新
搜索 scheme 關鍵字。 你會看到有三行 scheme 的配置,將你需用啟用的 scheme 前面注釋 # 去除即可。

6.2.2、設置 語言

language: zh-Hans

6.2.3、設置 菜單

Anodyne 修改導航欄,這次我們要修改的仍然是配置文件 _config.yml,不過不是之前修改的全局的配置文件,而是主題下的配置文件themes/anodyne/_config.yml,在主題中找到menu字段,因為這邊我們主要有兩個頁面,一個是首頁還有是一個是歸檔頁面,About和Contact沒有對應頁面,所以將About和Contact的路由都改為了首頁,即/。

NexT 使用的是 Font Awesome 提供的圖標, Font Awesome 提供了 600+ 的圖標,可以滿足絕大的多數的場景,同時無須擔心在 Retina 屏幕下 圖標模糊的問題。

1.第一是菜單項(名稱和鏈接)
設定菜單內容,對應的字段是 menu 。
若你的站點運行在子目錄中,請將鏈接前綴的 / 去掉

menu:
  home: / # 主頁
  archives: /archives # 歸檔頁
  #about: /about # 分類頁
  #categories: /categories # 標簽頁
  tags: /tags # 關于頁面
  #commonweal: /404.html # 公益 404

2.第二是菜單項的顯示文本
設置菜單項的顯示文本, 在第一步中設置的菜單的名稱并不直接用于界面上的展示。Hexo 在生成的時候將使用 這個名稱查找對應的語言翻譯,并提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml ({language} 為你所使用的語言)。
以簡體中文為例,若你需要添加一個菜單項,比如 something。那么就需要修改簡體中文對應的翻譯文件 languages/zh-Hans.yml,在 menu 字段下添加一項:

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標簽
  about: 關于
  search: 搜索
  commonweal: 公益404
  something: 有料

3.第三是菜單項對應的圖標。 設定菜單項的圖標,對應的字段是 menu_icons 。
此設定格式是 item name: icon name,其中 item name 與上一步所配置的菜單名字對應,icon nameFont Awesome 圖標的 名字。
而 enable 可用于控制是否顯示圖標,你可以設置成 false 來去掉圖標。

 menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
  • 在菜單圖標開啟的情況下,如果菜單項與菜單未匹配(沒有設置或者無效的 ==Font Awesome== 圖標名字) 的情況下,NexT 將會使用 作為圖標。
  • 請注意鍵值(如 home)的大小寫要嚴格匹配

6.2.4、設置 側欄

可以通過修改 主題配置文件 中的 sidebar 字段來控制側欄的行為。側欄的設置包括兩個部分,其一是側欄的位置, 其二是側欄顯示的時機。

1.設置側欄的位置,修改 sidebar.position 的值,支持的選項有:

left - 靠左放置
right - 靠右放置

目前僅 Pisces Scheme 支持 position 配置。影響版本5.0.0及更低版本。

sidebar:
  position: left

2.設置側欄顯示的時機,修改 sidebar.display 的值,支持的選項有:

post - 默認行為,在文章頁面(擁有目錄列表)時顯示
always - 在所有頁面中都顯示
hide - 在所有頁面中都隱藏(可以手動展開)
remove - 完全移除
sidebar:
  display: post

已知側欄在 use motion: false 的情況下不會展示。 影響版本5.0.0及更低版本。

6.2.5、設置 頭像

編輯 主題配置文件, 修改字段 ==avatar==, 值設置成頭像的鏈接地址。其中,頭像的鏈接地址可以是:

地址
完整的互聯網 URI http://example.com/avatar.png
站點內的地 將頭像放置主題目錄下的 source/uploads/ (新建 uploads 目錄若不存在) 配置為:avatar: /uploads/avatar.png 或者 放置在 source/images/ 目錄下 配置為:avatar: /images/avatar.png

avatar: http://example.com/avatar.png

6.2.6、設置 作者昵稱

編輯 站點配置文件, 設置 author 為你的昵稱。

6.2.7、站點描述

編輯 站點配置文件, 設置 description 字段為你的站點描述。站點描述可以是你喜歡的一句簽名:)

7、添加功能

7.1、更改配置

7.1.1、給文章貼標簽

首先需要確認全局的配置文件_config.yml中有tag_dir: tags,確認過之后就可以新建tags頁面啦。命令為:

$ hexo new page tags

此時會在全局的source文件下新建文件夾tags文件夾,修改tags/index.md文件

title: tags
date: 2018-06-06 12:15:14
type: "tags"

全局設置好標簽之后就可以給文章貼標簽了,在文章的.md文件中添加:

tags:
      - tag1
      - tag2

添加過之后,頭部如下:

title: test_md
date: 2018-06-06 12:18:25
tags: tag1

7.1.2、設置文章分類

給文章設置分類與上面介紹的設置標簽類似,也需要首先確認一下全局的配置文件_config.yml中有category_dir: categories,接著新建categories文件

$ hexo new page categories

此時會在全局的source文件下新建文件夾categories文件夾,修改 categories/index.md 文件

title: 文章分類
date: 2018-06-06 12:19:16
type: "categories"

設置好全局的分類之后,就可以設置文章的分類了,在文章的.md文件中添加:

categories:
      - category1
      - category2

添加過之后,頭部如下:

title: test_md
date: 2018-06-06 12:20:35
categories: cate1

7.1.3、博客內代碼高亮

hexo 默認已經實現了代碼高亮,但是它存在一些局限性,某些情況下無法高亮,而且界面也比較丑,所以最后還是選擇了 highlight.js 這個庫。這個庫的使用也很簡單,具體步驟如下:

我們上面介紹了hexo自帶高亮,所以需要先關閉自帶高亮,在全局配置文件_config.yml 中將 highlightenable 字段設置為 false
接著要引入 highlight.jscssjs ,具體的引入位置在主題模版中的<head></head>之間,我使用的 Anodyne 風格寫在了主題的 layout 文件夾中的 layout.ejs 文件內,具體代碼如下:

<link rel="stylesheet" >
<script src="http://cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>

highlight.js 官方文檔可以看到,它有很多代碼風格,我們可以根據自己的喜好來選擇,因為平時經常看 github 的代碼,所以我這邊選擇的是 github 風格。

  1. 最后,還要對 highlight 進行初始化,位置在</body>之前的<script></script>中引入
hljs.initHighlightingOnLoad();

7.1.4、添加代碼行號

處理完代碼高亮之后,很自然的想讓插入的代碼帶有行號,所以我們接下來就介紹一下怎樣添加代碼行號。這邊我們使用庫 highlightjs-line-numbers.js ,具體步驟如下:

首先是引入庫,這里有兩種方式:
第一種是,執行命令

$ npm install highlightjs-line-numbers.js

第二種是,通過script的方式引入

<script src="http://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

其實比較規范的操作應該是通過 npm install 的方式來引入,這樣作者有更新,我們可以拉到最新代碼,但是這里我為了跟 highlight 保持一致,使用了第二種方式。
在 highlight 之后對行號插件進行初始化,代碼為:

hljs.initLineNumbersOnLoad();

如果行號的樣式我們不喜歡,可以通過更改CSS的方式來改變,這邊仍然以Anodyne風格為例,我在 anodyne/source/css/partial/_highlight 文件中加入了如下代碼:

td.hljs-ln-numbers
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  text-align: center
  color: #ccc
  border-right: 1px solid #CCC
  vertical-align: top
  padding-right: 5px
  width: 20px
td.hljs-ln-code
  padding-left: 10px
.content table tr:not(:last-child) td
  border-bottom: 0px solid #eee

注意這邊要是 styl 的格式來編寫代碼,可是 .styl 貌似不支持高亮
另外,還有一個小功能,就是如何將文字縮進,這邊我常用的方法就是輸入兩個 &emsp; 或者 &ensp;

7.2、集成常用的第三方服務

7.2.1、百度統計

注意: baidu_analytics 不是你的百度 id 或者 百度統計 id

登錄 百度統計, 定位到站點的代碼獲取頁面
復制 hm.js? 后面那串統計腳本 id
編輯 主題配置文件, 修改字段 baidu_analytics 字段,值設置成你的百度統計腳本 id。

7.2.2、閱讀次數統計

為NexT主題添加文章閱讀量統計功能

7.2.3、Algolia 搜索

第三方服務 - Algolia

7.3、插件

7.3.1、安裝插件

安裝插件:npm install 插件名 –save
卸載插件:npm uninstall 插件名
更新插件和博客框架:npm update
執行以下命令安裝 RSS 插件

npm install hexo-generator-feed --save

生成站點地圖

npm install hexo-generator-sitemap --save

生成百度站點地圖

npm install hexo-generator-baidu-sitemap --save

SEO優化

npm install hexo-generator-seo-friendly-sitemap --save

HTML壓縮

npm install hexo-html-minifier --save

CSS壓縮

npm install hexo-clean-css --save

JS壓縮

npm install hexo-uglify --save

imagages壓縮

npm install hexo-imagemin --save

7.3.2、插件開啟配置

根目錄下的 _config.yml ,添加以下代碼:

# RSS
feed:
type: atom
path: atom.xml
limit: 20
# sitemap
# 提交給谷歌搜素引擎,SEO優化開啟配置是一樣的
sitemap:
    path: sitemap.xml
# 提交百度搜索引擎   
baidusitemap:
    path: baidusitemap.xml 
# HTML壓縮
html_minifier:
  exclude:     
# css壓縮
clean_css:
  exclude: 
   - '*.min.css'
# js壓縮   
uglify:
  mangle: true
  output:
  compress:
  exclude: 
    - '*.min.js'
# image壓縮    
imagemin:
  enable     : true
  interlaced : false
  multipass  : false
  optimizationLevel: 2
  pngquant   : false
  progressive: false

package.json 可以看安裝了哪些插件。
Hexo Seo 優化讓你的博客在google搜索排名第一

8、可能出現的錯誤

  • 安裝 heox 時報錯: YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 5, column 1: # Site
    YAMLException: cannot read a block mapping entry; a multi line key may
    not be an implicit key at line 13, column 1: # URL 啟動 hexo
    時包上面的錯誤時,你們都是配置文件:_config.yml 中 # Site #URL 屬性設置后面的:需要有空格再填寫內容!!!
  • 如果按照流程步驟 執行 hexo server 沒有反應,說明你少了 npm install 這部,沒有安裝 hexo server 模塊
  • 本地瀏覽沒問題,Deploy 報錯
  • Git 環境配置錯誤 問題描述:
    Windows系統出現報錯信息如下 [info] Start deploying: git [info] Setting up Git deployment... [error] Error: spawn ENOENT Error: spawn ENOENT
    at errnoException (child_process.js:1000:11)
    at Process.ChildProcess._handle.onexit (child_process.js:791:34) events.js:72
    throw er; // Unhandled 'error' event
    ^Error: spawn ENOENT
    at errnoException (child_process.js:1000:11)
    at Process.ChildProcess._handle.onexit (child_process.js:791:34) 解決方案: 檢查 Git 的相關配置,將 git 所在目錄添加到系統 path 中去。
  • Deploy 設置錯誤 問題描述: 輸入 hexo deploy 后,出現錯誤信息: 'github' does not appear to be a git repository 解決方案:
    檢查 _config.yml 中 deploy 設置。參見http://hexo.io/docs/deployment.html
    刪除 .deploy_git 文件夾并且執行 hexo clean 后,重新 hexo deploy 。
  • Deploy之后,頁面長時間404 解決方案: 檢查 Github Pages 類型 個人主頁 也就是庫的名稱為 yourname.github.io 的主頁,頁面文件應當在 master 分支下,文件結構可以參考我的主頁,也就是應當以 HTML 文件為主,是沒有 Markdown 文件的。
    項目主頁
    也就是庫名不是 yourname.github.io 的主頁,頁面文件應當在 gh-pages 分支下,文件結構與個人主頁基本一致,同樣沒有 Markdown 文件。
    檢查 Github 驗證郵件 曾經出現過所有操作都沒有問題但就是404的狀況,新創建的用戶最好都去看看是不是驗證郵件沒有通過。 注意庫的名字
    現在大多改成 .io 結尾域名了,但是不確定是不是真的跟這個有關,最好改成 .io。
  • 自有域名二級目錄無法訪問 問題描述 參見 issue820 問題分析
    問題出在 CNAME 跳轉,下面附上我的分析,如果不感興趣可以直接翻到解決方案。
    如果沒有 CNAME 跳轉,訪問 yourname.github.io/repo 會自動地去訪問 gh-pages 分支下的靜態文件。
    但是一旦進行了 CNAME 跳轉,訪問 yourname.github.io/repo 就會自動跳轉為 yoursite.com/repo,
    顯然在你的博客目錄下是沒有這個文件夾的,所以自然而然的會出現訪問404錯誤。 解決方案 增加一個新的 DNS 記錄
    修改自己域名的DNS記錄,增加一條記錄(A 記錄或者 CNAME 都可以,指向 github),內容是 repo.yoursite.com,訪問時通過 repo.yoursite.com 來訪問。
    將這個庫移動到博客目錄下
    按照上述的分析,把這個庫的 repo 移動至博客目錄下即可。注意修改 html 以免被 hexo 再次渲染,還有如果是直接復制或者 clone ,注意刪除隱藏的 .git 文件夾。
  • Hexo命令失效 解決方案: 檢查 _config.yml 中的內容,特別注意:后面需要有一個空格。 檢查 `package.json’ 中的內容,注意添加 hexo 信息用來標識這是一個 hexo 目錄:{ "hexo": {
    "version": "" } } 如果還是有問題,可以更新 hexo 之后,在新的文件夾中重新進行 hexo init。
  • Hexo所有命令報錯 問題描述: 參見 Issues832 解決方案:
    仔細檢查 _config.yml 文件中所有冒號后面的空格,格式很嚴格,必須是只有一個,半角。不管是多了還是少了都會報錯,這是 yml 解釋器所定義的語法。如果不確定的話,將輸入法調整到英文模式,刪除所有冒號后面的空格重新輸入,不要使用 Tab 。
  • 修改主題文件之后,網頁不更新 問題描述:在修改主題文件之后,頁面的文件依然沒有更新。 解決方案: hexo clean 并且刪除 .deploy_git 文件夾之后,hexo d -g 。為了強制瀏覽器更新資源文件,可以采用 ’Ctrl+F5’ 來刷新。

9、命令總結

9.1、Hexo 命令

Hexo 有很多命令,在這里總結一下一些常用命令:

hexo generate      // 簡寫:hexo g,生成靜態文件,會在當前目錄下生成一個public文件夾
hexo server       // 簡寫:hexo s,啟動本地服務,用于博客的預覽
hexo deploy       // 簡寫:hexo d,部署到遠程(如GitHub,可以在_config.yml中配置)
hexo new post-name  // 簡寫:hexo n post-name, 新建文章
hexo new page page-name   //簡寫:hexo n page page-name,新建頁面

常用的組合命令:

hexo d -g                 // 生成和部署
hexo s -g                 // 生成和預覽

注意:Hexo 的詳細信息請參考 Hexo網站

9.2、hexo 使用

9.2.1、目錄結構

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態網頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都應該放在這里
| ├── \_drafts #草稿
| └── \_posts #文章
├── themes #主題
├── \_config.yml #全局配置文件
└── package.json

9.2.2、全局配置

_config.yml

# Hexo Configuration
# Docs: Configuration
# Source: GitHub - hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js.
# Site #站點信息
title:  #標題
subtitle:  #副標題
description:  #站點描述,給搜索引擎看的
author:  #作者
email:  #電子郵箱
language: zh-CN #語言
# URL #鏈接格式
url:  #網址
root: / #根目錄
permalink: :year/:month/:day/:title/ #文章的鏈接格式
tag_dir: tags #標簽目錄
archive_dir: archives #存檔目錄
category_dir: categories #分類目錄
code_dir: downloads/code
permalink_defaults:
# Directory #目錄
source_dir: source #源文件目錄
public_dir: public #生成的網頁文件目錄
# Writing #寫作
new_post_name: :title.md #新文章標題
default_layout: post #默認的模板,包括 post、page、photo、draft(文章、頁面、照片、草稿)
titlecase: false #標題轉換成大寫
external_link: true #在新選項卡中打開連接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #語法高亮
  enable: true #是否啟用
  line_number: true #顯示行號
  tab_replace:
# Category & Tag #分類和標簽
default_category: uncategorized #默認分類
category_map:
tag_map:
# Archives
2: 開啟分頁
1: 禁用分頁
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服務器
port: 4000 #端口號
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期時間格式
date_format: YYYY-MM-DD #參考Moment.js | Docs
time_format: H:mm:ss
# Pagination #分頁
per_page: 10 #每頁文章數,設置成 0 禁用分頁
pagination_dir: page
# Disqus #Disqus評論,替換為多說
# Extensions #拓展插件
theme: landscape-plus #主題
exclude_generator:
plugins: #插件,例如生成 RSS 和站點地圖的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,將 lmintlcx 改成用戶名
deploy:
  type: git
  repo: 剛剛github創庫地址.git
  branch: master

注意
? 配置文件的冒號“:”后面有一個空格
? repo: 剛剛 github 創庫地址 .git

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 new "標題"

在 _posts 目錄下會生成文件標題.md

title: Hello World
date: 2015-07-30 07:56:29 #發表日期,一般不改動
categories: hexo #文章文類
tags: [hexo,github] #文章標簽,多于一項時用這種格式

正文,使用 Markdown 語法書寫
編輯完后保存,hexo server 預覽
hexo部署
執行下列指令即可完成部署。

hexo generate
hexo deploy

hexo deploy問題:Deployer not found: git
執行

npm install hexo-deployer-git --save

重新deploy即可
以下提示說明部署成功
[info] Deploy done: git
點擊 Github 上項目的 Settings,GitHub Pages,提示 Your site is published at (域名)

9.3、圖床

1.墻裂推薦七牛云儲存,注冊地址
2.七牛云儲存提供10G 的免費空間,以及每月10G 的流量.存放個人博客圖片最好不過了
3.七牛云儲存還有各種圖形處理功能、縮略圖、視頻存放速度也給力。
具體使用見使用七牛作為github博客的圖床

9.4、域名

將獨立域名與 GitHub Pages 的空間綁定
方法一:在站點 source 目錄下面,新建一個名為 CNAME 的文本文件,里面寫入你要綁定的域名,比如 http://wuxiaolong.me
方法二:在 Repository 的根目錄下面,新建一個名為 CNAME 的文本文件,里面寫入你要綁定的域名,比如 http://wuxiaolong.me

9.5、DNS設置

DNSpod
,快,免費,穩定。
注冊 DNSpod ,添加域名,如下圖設置。
其中 A 的兩條記錄指向的ip地址是 github Pages 的提供的ip
去 Godaddy 修改 DNS 地址
更改 godaddy 的 Nameservers 為 DNSpod 的 NameServers。

10、參考文章

技術小白搭建個人博客 github+hexo
教你免費搭建個人博客,Hexo&Github
基于Hexo搭建博客
開始使用 - NexT 使用文檔
Hexo + yilia 搭建博客可能會遇到的所有疑問
Hexo常見問題解決方案
用hexo+github搭建屬于自己的博客
Hexo搭建的GitHub博客之優化大全
教你免費搭建個人博客,Hexo&Github
使用Hexo+GitHub搭建及配置個人博客
Hexo與Github搭建個人博客
手把手教你建github技術博客by hexo
用hexo+github搭建屬于自己的博客
如何搭建一個獨立博客——簡明Github Pages與Hexo教程

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,283評論 6 530
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 97,947評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,094評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,485評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,268評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,817評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,906評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,039評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,551評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,502評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,662評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,188評論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,907評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,304評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,563評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,255評論 3 389
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,637評論 2 370

推薦閱讀更多精彩內容