如何用hexo+github搭建我的博客

搭建環境

一、安裝 Node.js: https://nodejs.org/en/

windows下點擊連接，下載安裝便可;Linux下更加簡單，在終端下輸入sudo apt-get install nodejs便可。

二、安裝 Git: https://github.com/waylau/git-for-win

windows下點擊上述連接安裝便可；Linux在終端輸入sudo apt-get install git便可。

詳細教程可參考廖雪峯老師的Git教程： https://github.com/waylau/git-for-win。
有人也寫了個Git的簡易入門教程，連接：Git入門使用指南。

本篇教程中不涉及太多Git的操做，所以無須觀看Git相關教程也可輕鬆完成搭建。

三、安裝完成後，在開始菜單裏找到「Git」->「Git Bash」，按下圖設置，名稱和郵箱是Github上的。

注意，發現出現警告

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

緣由：這些語句不用管它，由於 fsevent是mac osx系統的，在win或者Linux下使用了 因此會有警告，忽略便可。

四、安裝Hexo。全部必備的應用程序安裝完成後，便可使用 npm安裝Hexo。

$ npm install -g hexo-cli

至此，本地環境已經搭建完成。接着咱們配置一下GitHub，主要操做爲建立博客倉庫。

配置Github

首先註冊、登陸 https://github.com/ ，其中本身的Username很重要（以後的建立倉庫以及博客github.io域名會用到）。

而後右上角選擇 Create a new repository： https://github.com/new

其中倉庫名稱Repository name一項填寫格式爲：yourname.github.io (yourname與你的註冊用戶名一致,好比個人就是hitergelei.github.io,這個就是我是博客的域名了)

倉庫建立完成後，開始生成添加祕鑰。
在終端(Windows:cmd/Linux:Terminal)下輸入：

ssh-keygen -t rsa -C "Github的註冊郵箱地址"

一路Enter過來就好，待祕鑰生成完畢，會獲得兩個文件id_rsa和id_rsa.pub，用任意文本編輯器打開id_rsa.pub，Ctrl + a複製裏面的全部內容，

而後進入
https://github.com/settings/ssh

點擊New SSH key

將複製的內容粘貼到Key的輸入框，Title的內容能夠隨意（好比Administrator-Windows10），點擊Add SSH key按鈕便可。

本地環境安裝了，遠程的GitHub倉庫也有了，此時咱們能夠專心在本地搭建博客啦。

初始化博客

在電腦e盤（本身隨意）目錄下新建文件夾Myblog(從我運行Git的終端其實能夠看出我早已經建好了一個，不過不要緊)，進入Myblog，按住Shift鍵點擊鼠標右鍵，點擊「在此處打開命令窗口（個人是powershell窗口）」：

輸入：

hexo init blog

根據下載速度，須要必定時間完成。

成功提示：

INFO Start blogging with Hexo!

由於你初始化hexo以後source—>_posts目錄下自帶一篇hello world文章,

因此直接執行以下命令:  

    $ hexo generate
    # 啓動本地服務器
    $ hexo server
    # 在瀏覽器輸入 http://localhost:4000/就能夠看見網頁和模板了
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在瀏覽器中輸入localhost:4000，即可以看到網站初步的模樣。

不要激動，咱們還要把網頁發佈到Github上去。

經過上面的初始化博客的步驟後，咱們在本地已經具備博客的雛形了。此時，只須要再稍加配置就能夠部署至遠程的GitHub了呢。

---

配置博客

在Myblog—>blog目錄下，用sublime/notepad++等文本編輯器打開_config.yml文件，修改參數信息。

特別提醒，在每一個參數的:後都須要有一個空格

修改網站相關信息:

language和timezone都是有輸入規範的，詳細可參考 語言規範和時區規範。

配置部署

代碼中的hitergelei，修改爲本身的。

其中repo項是以前Github上建立好的倉庫的地址，能夠經過以下圖所示的方式獲得：

branch是項目的分支，咱們默認用主分支master。

此外，可將_config.yml中的repo修改成以下標準格式：

repo: https://用戶名:密碼@github.com/用戶名/用戶名.github.io.git

這樣作的好處就是每次hexo deploy提交時不須要輸入帳號密碼。

配置統一資源定位符
若是有我的域名的話能夠設置，不然跳過便可。若是是github.io的網址，也是能夠填上的。
url: https://hitergelei.github.io

對於root（根目錄）、permalink（永久連接）、permalink_defaults（默認永久連接）等其餘信息保持默認。

上述配置博客中的配置部署部分，將本地博客與遠程的倉庫地址牢牢聯繫在了一塊兒。固然，以前配置GitHub時的SSH也是一樣的做用，兩者缺一不可。讓咱們再回顧一下發表文章的流程吧。

發表文章

1.新建一篇博文，在CMD(或者Git Bash)中輸入:

$ hexo new "用Hexo+GitHub搭建我的博客"
INFO  Created: E:\Myblog\blog\source\_posts\用Hexo-GitHub搭建我的博客.md

2.根據上述提示路徑找到該文章，打開，使用Markdown語法編輯文章。

在文章的一開始處，能夠按以下格式添加文章標題，日期，分類、標籤以及描述等:

---
    title: 用Hexo+GitHub搭建我的博客    #文章標題
    date: 2018-04-02 21:19    #文章生成時間
    categories: "Hexo教程"     #文章分類目錄 能夠省略
    tags: [標籤1,標籤2,標籤3]  #文章標籤根據本身狀況可加可不加
    description:    使用Hexo在GitHub上搭建我的博客    #你對本頁的描述 能夠省略
---

3.接着在blog目錄下，輸入以下的一系列(三個)命令：

$ hexo clean
$ hexo generate
$ hexo server

對應以下圖：

打開http://localhost:4000/，能夠在本地預覽網站的初步樣子。

最後一步，發佈到遠程，執行hexo deploy：

$ hexo deploy
ERROR Deployer not found: git

發現本身出錯了，解決方案：
npm install hexo-deployer-git --save

好了，接下來我從新運行下$ hexo deploy命令：

正常狀況下，會跳出Github登陸，直接登陸；若是沒有問題，在瀏覽器輸入本身的博客地址：如： hitergelei.github.io

而後刷新一下本身的github.io頁面，就能夠看到已經有內容了。（有可能稍有延遲）

而後刷新一下本身的github.io頁面，就能夠看到已經有內容了。（有可能稍有延遲）

其中的hexo deploy是新命令哦，它與hexo server的區別在於：hexo server能夠在本地實時預覽，hexo deploy是將本地的改動同步到GitHub遠程倉庫。

最後再來簡單地總結一下吧。

總結

發佈文章的步驟：
一、hexo new 建立文章(固然也能夠經過其餘方式手動建立Markdown文件)
二、Markdown語法編輯文章
三、部署（全部打開CMD都是在blog目錄下）

hexo clean     #清除緩存 網頁正常狀況下能夠忽略此條命令
hexo generate    #生成
hexo server    #啓動服務預覽，非必要，可本地瀏覽網頁
hexo deploy   #部署發佈

其中的部分命令能夠簡寫：

hexo n 「新建的XX博客文章」 == hexo new 「新建的XX博客文章」 #新建文章
hexo g == hexo generate # 生成
hexo s == hexo server # 啓動服務預覽
hexo d == hexo deploy # 部署

[注]：本文主要參照了[https://zhuanlan.zhihu.com/p/33565651]

到此爲止，相信你已經對博客的總體流程有了必定的把握，想要對博客進一步優化嗎？

更多參考見：http://wangwlj.com/2017/09/09/blog-opti/