使用Node.js+Hexo+Github搭建我的博客
1、爲何要花時間去搭建我的博客？javascript
首先說說爲何我想要嘗試着去搭建屬於本身的Blog，古人云：「好記性不如爛筆頭」。一開始我把筆記作在本子上、電腦上，發現要用的時候特別地不方便，並且越記越多、越多越雜。因而將其整理到有道雲筆記、百度網盤上，還有手機App能夠隨時記筆記、搜索查看，挺好。後來慢慢發現本身記的筆記其餘人又看不到，不能更好地分享與交流，無心間看到《爲何你應該寫博客》一文非常激勵着我。因此，我註冊了CSDN、cnBlogs、Github，但願有本身的我的博客網站而且多向大牛們交流學習。廢話很少說，我們轉入正題~html
說明：該文章的內容介紹僅限 Windows 用戶，Mac 及 Unix/Linux 用戶請參考其餘資料如：Hexo 文檔java
我的博客示例： Mauger`s Blognode
更新於：2017/12/19 23:21git
2、準備工做程序員
1. Git 下載（Git for windows 國內下載）、安裝（安裝時請勾選Add to PATH選項）、配置、生成SSH公鑰github
2. Github 帳號申請、配置SSH Keysnpm
3. Node.js 下載安裝json
4. Markdown 下載安裝windows
說明：本想着講一下詳細的下載、安裝和配置工做，卻發現仍是官方文檔說明更好，已附上相關連接。
3、HEXO 簡介及安裝使用
1. Hexo 簡介
Hexo 是一個快速、簡潔且高效的Node.js靜態博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。
2. Hexo 安裝
個人 Hexo 安裝版本爲：vs_3.4.3；Node.js 版本爲：vs_8.9.3。安裝 Hexo 以前請先確保 Git 及 Node.js 安裝成功，接下來只須要使用 NPM 便可完成 Hexo 的安裝。在計算機的某個盤符下（其餘盤符/文件夾下亦可）新建文件夾 blog，進入到文件夾 blog 中使用 Git Bash （在任意位置單擊右鍵，選擇 「Git Bash Here」 便可）進行操做以下：
$ npm install -g hexo-cli
Hexo 更新至最新版本，命令以下：
$ npm update hexo -g
3. Hexo 初始化
安裝 Hexo 完成後，請執行下列命令，Hexo 將會在指定文件夾中新建所須要的文件。
$ hexo init blog $ cd blog $ npm install
輸入如下命令生成靜態頁面：
$ hexo generate
新建完成後，指定文件夾的目錄以下：
|
1
2
3
4
5
6
7
8
|
.
├── _config.yml 網站的配置信息，您能夠在此配置大部分的參數
├──
package
.json 應用程序的信息
├── scaffolds 模板文件夾
├── source 資源文件夾，存放用戶資源
| ├── _drafts
| └── _posts
└── themes 網站主題文件夾
|
接着輸入命令啓動服務：
$ hexo server
打印信息以下表示服務啓動成功：
|
1
2
3
|
$ hexo server
INFO Start processing
INFO Hexo is running at http:
//localhost:4000/. Press Ctrl+C to stop.
|
而後在谷歌瀏覽器中訪問：http://localhost:4000/，注意這裏不能直接使用快捷鍵 Ctrl+C 去複製連接，須要單擊鼠標右鍵選擇複製或手動輸入。注意看打印信息 Press Ctrl+C to stop. 因此你若是隨手 Ctrl+C，服務就停了，也就沒法訪問了。若是操做無誤且正確啓動服務後仍沒法訪問，那麼請您繼續往下看：（4、常見問題及解決方法）
或者（防止80端口被佔用，更改端口號）
|
1
2
3
|
$ hexo s --p 8081
INFO Start processing
INFO Hexo is running at http:
//localhost:8081/. Press Ctrl+C to stop.
|
而後在谷歌瀏覽器中訪問：http://localhost:8081/
4. Hexo 配置（_config.yml 文件）
title 網站標題 subtitle 網站副標題 description 網站描述 author 您的名字 language 網站使用的語言 timezone 網站時區。Hexo 默認使用您電腦的時區。時區列表。好比說：America/New_York, Japan, 和 UTC 。 其中，description主要用於SEO，告訴搜索引擎一個關於您站點的簡單描述，一般建議在其中包含您網站的關鍵詞。author參數用於主題顯示文章的做者。
其餘相關詳細配置信息請參考：Hexo 配置
5. Hexo 部署至 Github
首先須要在 Github 中新建倉庫 new repository 爲：【您的 Github 名稱.github.io】，如：MaugerWu.github.io。而後修改 _config.yml 配置文件 ，打開文件後找到 deploy: 修改以下：（注意冒號後面有一個空格： ）
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: https://github.com/MaugerWu/MaugerWu.github.io.git branch: master message:
編輯完成後進行保存，接着安裝 hexo-deployer-git，命令以下：
$ npm install hexo-deployer-git --save
等待安裝完成之後，執行以下配置命令：
|
1
|
$ hexo deploy
|
從新部署一下，命令以下：
$ hexo clean $ hexo generate $ hexo deploy
在正常部署完成的狀況下，打開瀏覽器輸入：【https://您的 Github 名稱/github.io】進行訪問，例如：https://MaugerWu.github.io。此時你會發現沒有網站主題，只有文字沒樣式並很差看，因而乎，選擇一個本身喜歡的 Hexo主題：
- AnimaStars - Add amazing star rotation animation to the official Landscape theme along with some changes on font and colors. - Demo
- Coney - A theme based on Pacman,especially for Chinese! change the display style, add baidu share module, baidu search module, baidu analytics module, up to top button and so on. - Demo
- Landscape-x - A fresh looking and responsive theme for Hexo, Modification of Landscape plus theme - Demo
- Winterland - A minimalistic theme based on Light with living background - Demo
6. 關於主題更新
博主本次選擇主題爲： Yilia ，配置更新請參考：Jacman Theme
當你每次修改完文件夾 ../themes/yilia 下的配置文件 _config.yml 後，請進入到主題 yilia 下執行如下命令：
$ git pull
四、常見問題及解決方法
1. http://localhost:4000/ 沒法訪問？
出現該問題的可能緣由是端口號4000被佔用，將 index.js 文件（若找不到該index.js文件，請參考個人另外一篇博客：Everything 工具使用）中的端口號修改成：4001或者其餘，重啓服務後再次訪問便可。
|
1
2
3
4
5
6
7
|
hexo.config.server = assign({
port: 4001,
log:
false
,
ip:
'0.0.0.0'
,
compress:
false
,
header:
true
}, hexo.config.server);
|
2. 博客出現中文亂碼問題？
若出現該問題請使用編輯器 Notepad++ 或 Sublime Text2/3 編輯 _config.yml 文件，設置編輯器的編碼爲 UTF-8 後進行保存便可。
|
1
2
3
4
5
6
7
8
9
10
11
|
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo 網站主標題
subtitle: 網站二級標題/副標題
description: 網站描述
author: 網站做者
language: 網站使用語言
timezone: 網站時區，Hexo 默認使用您電腦的時區
|
3. 博客訪問中出現404錯誤？
若出現該問題，多是在你修改 _config.yml 文件中 Hexo 主題後致使，好比將 theme: landscape 換成 theme: Next。
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape
4. 修改我的博客根目錄下的配置文件或主題下的配製文件 _config.yml，刷新頁面後修改的地方沒有生效？
首先進入到主題文件夾的目錄下（如：../blog/themes/yilia/），執行命令：
$ git pull
而後返回到文件夾 ../blog 下，從新部署項目執行命令以下：
$ hexo clean $ hexo g $ hexo d
5、名詞術語解釋
1. NPM：NPM（node package manager），一般稱爲node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發佈等。參考
2. NVM：Node Version Manager（Node版本管理器），用它能夠方便的在機器上安裝並維護多個Node的版本。參考
3. Markdown：一種輕量級的可使用普通文本編輯器編寫的標記語言。MaHua在線編輯器、或者 MarkdownPad2 工具。參考
6、感謝
本博客內容參考瞭如下幾位大牛寫的文章，在此表示由衷地感謝各位，分別以下：
· cnfeat 的《如何搭建一個獨立博客——簡明Github與Hexo教程》
· leopardpan 的《HEXO搭建我的博客》
暱稱：
退出 訂閱評論
[Ctrl+Enter快捷鍵提交]
· 程序員爲何要開博客
· 菜鳥程序員怎麼才能提升本身的技術--(獻給本身共勉)
· 開篇記（好記性不如爛筆頭）
· 學習的方法
· 說好的博客
· 我TM用了50個加速包，也沒有搶到一張票
· 年輕人社交：一個冬天的童話，含蓄走腎遊戲走心
· 北京消協：蘇寧易購、噹噹網等4平臺違反電商法規定
· 馬雲謝世煌爲什麼出清淘寶股權 緣由是減小關鍵人風險
· 小米試水首家抖音快閃店：從此抖音買手機或成新潮流
» 更多新聞...