三分鐘搭建我的博客（Hexo + Next + github）詳細教程

每一個程序員必不可少的就是博客網站了，一開始咱們並不知道能夠搭建屬於本身的我的博客網站，一般會在CSDN、博客園等別人搭建的博客網站寫博客，當你寫久了之後會感受很 low, 一些文章須要審覈經過才能發佈。索性咱們還不如本身搭建一個我的博客，我的博客的設計美化和內容都按照本身喜歡的要求來，而後在阿里雲買一個高大上的域名，豈不是很裝逼？儘管你沒有學過網頁 web 開發，可是經過這篇小鹿詳細教程能夠親自搭建起屬於本身的我的博客。

小鹿的博客網址：小鹿的博客

建站前的準備

建站以前咱們先要作好準備工做，將相關的工具準備好。

安裝 Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

安裝網址：https://nodejs.org/zh-cn/
驗證是否安裝成功：打開 cmd 命令行(win+r 輸入 cmd 回車)執行 ：

node -v
npm -v

安裝成功以後顯示版本號：

安裝 Git

一般使用 github 的對 git 並不陌生，Git(讀音爲/gɪt/。)是一個開源的分佈式版本控制系統，能夠有效、高速的處理從很小到很是大的項目版本管理。 [1]  Git 是 Linus Torvalds 爲了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。

安裝網址：https://www.git-scm.com/download/win
驗證是否安裝成功：打開cmd命令行(win+r 輸入cmd回車)執行 ：

git --version

安裝成功以後顯示版本號：

安裝 Hexo

Hexo 是一個快速、簡潔且高效的博客框架。

瞭解更多關於 Hexo 請查看官方網站：Hexo

安裝 hexo 框架

下面一塊兒來看看怎麼安裝 Hexo 框架？
首先選擇一個文件夾，這個文件夾主要存放關於你博客的配置文件以及之後要寫的的文章，在該文件夾的根目錄運行以前下好的 git-bash.exe 。

輸入命令開始安裝：

$ npm install -g hexo-cli

這裏安裝的是 Hexo 最新版本，若是想安裝之前的的版本請運行命令 $ npm install -g hexo
以上步驟不出問題的話就已經在本地機器上搭建起了 Hexo 環境。
下面介紹 Hexo 的具體使用方法。

初始化Hexo

建立hexo工程

$ hexo init blog

建立一個文件夾blog（blog 爲文件夾的名字，可改爲本身想要的名字），使用 Hexo 命令初始化 blog 爲 hexo 工程目錄。

新建POST

$ cd blog
$ hexo new 「HelloWorld」

進入初始化後的 blog 文件夾，建立名爲HelloWorld的文件，此時會在 /blog/sources/_post/ 目錄下生成 HelloWorld.md 文件。

生成靜態文件

$ hexo generate

使用 Hexo 引擎將 Markdown 格式的文件解析成可使用瀏覽器查看的 HTML 文件，HTML 文件存儲在 blog/public 目錄下。

運行hexo服務器

$ hexo server

打開命令行提示的地址，通常是 http://localhost:4000/，既能夠看到咱們的 Hexo 網站。
此時 Helloworld 文章中沒有任何內容。打開 /blog/sources/_post/ 目錄，使用編輯器打開其中的 HelloWorld.md並在其中添加 markdown 格式的內容保存，而後從新運行如下命令：

$ hexo generate
$ hexo server

命令的含義：hexo generate 生成靜態文件， hexo server 啓動服務器。默認狀況下，訪問網址爲： http://localhost:4000/。 若是從新改變端口號請詳細查看官網文檔，這裏很少介紹。
注意：若是在 HelloWorld.md文件中有中文，在網頁進行瀏覽可能出現亂碼，解決方式經過編輯器打開 HelloWorld.md 文件把編碼方式改爲 utf-8 就能夠了。

安裝主題

Hexo 提供了默認主題 landscape，主題的位置在 blog ->themes 文件夾下。主題根據本身喜愛能夠在網上找到，經過 Git 進行相應的下載。下面小鹿貼出幾個主題能夠進行相應的下載，喜歡哪個能夠進行配置到本身的我的博客了。

• 主題一：hexo-theme-next（小鹿用的主題是這一個，後期是本身改進美化的）
• 主題二：Casper
• 主題三：daleanthony
• 主題四：hexo-theme-yilia
• 主題五：jacman
• 主題六：hexo-theme-apollo

小鹿給你們找了一個主題連接能夠選擇本身喜歡的主題：更多主題

配置主題

打開 git-bash 切換到 blog -> themes 目錄下，若是在目錄 blog ->themes 右鍵選擇啓動 git-bash 就不用切換了。若是在桌面直接啓動 git-bash ,可經過下邊命令切換到 blog ->themes 目錄下。

$ cd /blog/themes

選好一個主題，複製主題的 github 地址，經過 git 命令進行下載。（例：https://github.com/iissnan/hexo-theme-next 爲一個主題的 github 地址）

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

下載完以後我將文件夾改爲 next了（也能夠不改，我爲了名字簡潔點）。

而後在修改 /blog/config.yml 文件，將其中的 theme 改爲 next。（這個是改變主題的地方，若是你用的是其餘的主題，將這個 next 改爲你下載下來的主題的文件夾的名稱）

從新運行如下命令，查看更換主題後的效果 ：

$ hexo generate
$ hexo server

申請 Github 免費靜態內容空間

註冊 Github 帳號

咱們去 Github 的官網進行帳號註冊 ，註冊完成以後咱們根據官方文檔進行配置 ，而後咱們使用本身的帳戶建立一個 Repository （倉庫）。
點擊網站右上角的 + 號，選擇 New Repository( 注意：建立倉庫的名字要你的註冊的用戶名一致。其餘默認，肯定建立)。

以後你的靜態內容空間就已經建立好了，在瀏覽器輸入你的 your username（用戶名）.github.io 就能夠訪問了。

將 Hexo 上傳 Github 上。

步驟一：安裝 deployer-git （安裝部署工具，方便之後更新）

$ npm install hexo-deployer-git --save

步驟二：在 /blog/_config.yml 中修改 deploy 屬性(注意「：」以後有空格 ) 不然配置失敗。

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

將上方的 Repository 換成你申請的 Git 倉庫地址

使用 https 的方式部署每次提交到 Github 都要輸入用戶名和密碼，若是嫌麻煩請使用 SSH 的方式，百度/谷歌自行搜索。
步驟三：初始化本地倉庫。

git init

步驟四：鏈接遠程倉庫 ( 若是是第一次使用 git，在使用 git 的時候會提示輸入用戶名和密碼，用戶名是本身的註冊郵箱。)

git remote add origin https://github.com/luxiangqiang/luxiangqiang.github.io.git

步驟五：發佈 hexo 到 github page

//等於一次性執行了，清空、刷新、部署三個命令
hexo clean && hexo g && hexo d

步驟六：推送到遠程倉庫（github）

git push origin

這裏建議建立一個新的分支 hexo，用於管理 hexo 文件。提交的的時候只提交 hexo 網站 html、css 等源文件。
建立並切換到新建分支：

git checkout -b hexo

將分支推送到遠程倉庫：

git push origin hexo

記得提交之後去 github 上把 hexo 分支設置默認，之後寫文章等都要部署。 文章在 hexo 目錄下的 source _posts 文件夾中，是 md 格式，也就是 Markdown 格式。