使用hexo+github搭建免費我的博客詳細教程

Windows環境下Git安裝、配置SSH key、安裝node.js npm、安裝Hexo及配置、發佈博客

前言

使用github pages服務搭建博客的好處有：

1. 全是靜態文件，訪問速度快；
2. 免費方便，不用花一分錢就能夠搭建一個自由的我的博客，不須要服務器不須要後臺；
3. 能夠隨意綁定本身的域名，不仔細看的話根本看不出來你的網站是基於github的；
4. 數據絕對安全，基於github的版本管理，想恢復到哪一個歷史版本都行；
5. 博客內容能夠輕鬆打包、轉移、發佈到其它平臺；
   等等；

準備工做

在開始一切以前，你必須已經：

• 有一個github帳號，沒有的話去註冊一個：https://github.com
• 安裝了git for windows（或者其它git客戶端）：https://git-scm.com/downloads
• 安裝了node.js、npm，並瞭解相關基礎知識：https://nodejs.org/en/

本文所使用的環境：

Windows 10
node.js@8.11.4 x64
git@2.18.0 x64
hexo@3.2.2

搭建github博客

建立倉庫

新建一個名爲 你的用戶名.github.io 的倉庫，好比說，若是你的github用戶名是 test ，那麼你就新建 test.github.io 的倉庫（ 必須是你的用戶名 ，其它名稱無效），未來你的網站訪問地址就是 http://test.github.io 了，是否是很方便？

因而可知，每個github帳戶最多隻能建立一個這樣能夠直接使用域名訪問的倉庫。

幾個注意的地方：

1. 註冊的郵箱必定要驗證，不然不會成功；
2. 倉庫名字必須是：username.github.io ，其中username是你的用戶名；
3. 倉庫建立成功不會當即生效，須要過一段時間，大概10-30分鐘，或者更久;

建立成功後，默認會在你這個倉庫裏生成一些示例頁面，之後你的網站全部代碼都是放在這個倉庫裏啦。

具體步驟截圖以下：

新建倉庫

建立完成

過了一會後就能夠訪問本身的網站啦！

安裝Git

下載安裝

打開Git 下載地址 ，咱們點 windows

這裏我推薦使用便攜版，由於不少人不喜歡安裝軟件，況且又是一個不太常用的軟件，因此便攜版安裝卸載都很方便
若是下載的是安裝版，那麼你直接按默認值一直點下一步就能夠了。若是實在不會安裝能夠去網上找教程。

便攜版下載完只須要解壓，再配置環境變量

下載完後解壓的文件以下：

打開系統的環境變量，編輯Path環境變，新建路徑： git的存放目錄

至此，git算是安裝完成啦，咱們能夠打開控制檯測試一下

win + r 輸入 cmd ，而後 輸入 git --version

配置SSH key

爲何要配置這個呢？由於你提交代碼確定要擁有你的github權限才能夠，可是直接使用用戶名和密碼太不安全了，因此咱們使用ssh key來解決本地和服務器的鏈接問題。

一、運行命令： ssh-keygen -t rsa -C "郵件地址" 。郵件地址能夠登陸你的github - Setting - Emails 查看

二、而後連續3次回車，最終會生成一個文件在用戶目錄下

三、打開用戶目錄，找到 .ssh\id_rsa.pub 文件，記事本打開並複製裏面的內容

四、打開你的github主頁，進入 我的設置 - SSH and GPG keys - New SSH key

將剛複製的內容粘貼到key那裏，title隨便填，保存。

五、測試鏈接

運行命令： ssh -T git@github.com 。注意這條命令不用修改，直接運行

六、全局配置

git config --global user.name "selier"    // 你的github用戶名，非暱稱
git config --global user.email  "郵箱@qq.com"    // 填寫你的github註冊郵箱

至此，你的Git就配置好了

安裝 node.js

下載安裝 nodeJs ，隨便選一個便可，下載後安裝時一路默認next (安裝路徑能夠自選)。

安裝完成後，測試是否安裝成功

在 控制檯中 輸入 node -v ，npm -v

此處說明下：新版的Node.js已自帶npm，安裝Node.js時會一塊兒安裝，npm的做用就是對Node.js依賴的包進行管理，也能夠理解爲用來安裝/卸載Node.js須要裝的東西

使用hexo寫博客

一、簡介

Hexo 是一個簡單、快速、強大的基於 Github Pages 的博客發佈工具，支持Markdown格式，有衆多優秀插件和主題。

二、原理

因爲github pages存放的都是靜態文件，博客存放的不僅是文章內容，還有文章列表、分類、標籤、翻頁等動態內容，假如每次寫完一篇文章都要手動更新博文目錄和相關連接信息，相信誰都會瘋掉，因此hexo所作的就是將這些md文件都放在本地，每次寫完文章後調用寫好的命令來批量完成相關頁面的生成，而後再將有改動的頁面提交到github。

三、注意事項

安裝以前先來講幾個注意事項：

1. 不少命令既能夠用Windows的 cmd 來完成，也可使用 git bash / git cmd來完成，可是這裏由於我用的是便攜版 git ，因此我用的是git目錄下的 git-cmd
2. git安裝版會集成鼠標右鍵菜單 git-bash ，因此下面不少步驟中須要經過git跳轉到某個目錄的，你能夠直接打開這個目錄，在空白處右鍵 - git-bash
3. hexo不一樣版本差異比較大，網上不少文章的配置信息都是基於2.x的，因此注意不要被誤導；
4. hexo有2種 _config.yml 文件，一個是根目錄下的全局的 _config.yml ，一個是各個 theme 下的；

四、安裝

一、打開 git-cmd ，輸入 npm install hexo-cli -g 進行安裝。若是顯示報錯「 沒有這個指令 」，請點擊 這個網站 看第五點，配置nodeJs全局環境。

可能你的網絡沒法訪問網站並安裝，那麼你能夠經過 淘寶NPM鏡像 來安裝： npm install -g cnpm --registry=https://registry.npm.taobao.org ，以後下面的全部用到 npm 的命令，可使用 cnpm 代替 ，如 npm install hexo-cli -g 改爲 cnpm install hexo-cli -g

二、 再輸入 npm install hexo --save ，等待安裝完成。

三、初始化

3.一、在電腦的某個地方新建一個文件夾（名字能夠隨便取），好比個人是 D:\個人文檔\selierlin.github.io ，因爲這個文件夾未來就做爲你存放代碼的地方，因此最好不要隨便放。

3.二、打開 git-cmd ，跳轉到剛剛建立的文件夾位置，運行命令 hexo init

而後會在你的文件夾中搭建好了環境

五、配置 __config.yml

一、修改一些你的博客名字、描述、做者等。同時你們能夠修改本身的主題，更多主題 點擊這裏 。修改主題就修改 _config.yml 裏面的 theme 。更多關於其餘配置信息修改請點擊這裏訪問hexo官方文檔 。

在 _config.yml 文檔修改全部信息都要注意， 冒號後面必定要有一個空格

二、hexo與github關聯配置

• type改爲git
• repo的格式就是：git@github.com:你的用戶名/你的用戶名.github.io.git
• branch爲master

六、啓動本地服務

一、使用 git-cmd 跳轉到你的博客目錄，依次輸入如下命令

hexo g  # 生成
hexo s  # 啓動服務

二、而後能夠經過瀏覽器訪問：http://127.0.0.1:4000 你就看到你的博客樣子啦。中止你的本地服務器，你能夠在Git命令頁面按住 Ctrl+C 來中止。

若是瀏覽器一直轉圈圈，加載不出來，通常狀況下是由於端口占用的緣故，解決方法

七、上傳到Github

在上傳代碼到github以前，必定要記得先把你之前全部代碼下載下來（雖然github有版本管理，但備份一下老是好的），由於從hexo提交代碼時會把你之前的全部代碼都刪掉。

一、確認你的 _config.yml 文件已經配置了Deployment

二、git-cmd 跳轉到博客目錄，安裝Hexo部署的插件 ： npm install hexo-deployer-git --save

三、使用 git-bash 跳轉到博客目錄 ，運行命令 hexo d

同時，在你的github上已經上傳了文件

若是出現 Deployer not found: git 說明Hexo部署的插件沒有安裝好

四、發佈完成，如今能夠經過 你的用戶名.github.io 訪問本身的網站啦

其它

一、保留CNAME、README.md等文件

提交以後網頁上一看，發現之前其它代碼都沒了，此時不要慌，一些非md文件能夠把他們放到source文件夾下，這裏的全部文件都會原樣複製（除了md文件）到public目錄的

因爲hexo默認會把全部md文件都轉換成html，包括README.md，全部須要每次生成以後、上傳以前，手動將README.md複製到public目錄，並刪除README.html。

二、經常使用hexo命令

常見命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

縮寫：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

組合命令：

hexo s -g #生成並本地預覽
hexo d -g #生成並上傳

三、_config.yml

這裏面都是一些全局配置，每一個參數的意思都比較簡單明瞭，因此就不做詳細介紹了。更多關於其餘配置信息修改請點擊這裏訪問hexo官方文檔

須要特別注意的地方是，冒號後面必須有 一個空格 ，不然可能會出問題。

四、寫博客

寫博客並上傳的過程以下：

• 在hexo根目錄使用 hexo new '標題' 建立文章
• 編寫文章後，使用 hexo g 生成靜態文件到public
• 使用 hexo d 發佈到github

也可使用組合命令 hexo d -g 生成並上傳

---

定位到咱們的hexo根目錄，執行命令： hexo new 'my-first-blog'

hexo會幫咱們在_posts下生成相關md文件

咱們只須要打開這個文件就能夠開始寫博客了，默認生成以下內容

固然你也能夠直接本身新建md文件，用這個命令的好處是幫咱們自動生成了時間。

通常完整格式以下：

---
title: postName #文章頁面上的顯示名稱，通常是中文
date: 2013-12-02 15:30:16 #文章生成時間，通常不改，固然也能夠任意修改
categories: 默認分類 #分類
tags: [tag1,tag2,tag3] #文章標籤，可空，多標籤請用格式，注意:後面有個空格
description: 附加一段文章摘要，字數最好在140字之內，會出如今meta的description裏面
---

如下是正文

那麼 hexo new page 'postName' 命令和 hexo new 'postName' 有什麼區別呢？

hexo new page "my-second-blog" 生成以下：

最終部署時生成：博客目錄\public\my-second-blog\index.html ，可是它不會做爲文章出如今博文目錄。

五、修改主題

既然默認主題很醜，那咱們首先來替換一個好看點的主題。這是 官方主題

這裏我推薦幾款不錯的主題：

倉庫地址	演示地址
NexT	https://notes.iissnan.com/
NexT6.0	https://theme-next.org/
yilia	http://litten.me/
yelee	http://moxfive.xyz/
material	https://blog.nfz.moe/
indigo	https://imys.net/
maupassant	https://www.haomwei.com

安裝步驟：

• 打開 git-cmd ，跳轉到你的博客目錄
• 使用 git 拉取主題 git clone 倉庫主題地址.git themes/主題名稱 ，意思是下載主題並將其保存到themes目錄下

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

• 修改 主目錄下 _config.yml 中的 theme: landscape 改成 theme: next ，而後從新執行 hexo g 來從新生成。

若是出現一些莫名其妙的問題，能夠先執行 hexo clean 來清理一下public的內容，而後再來從新生成和發佈 hexo d -g

• 安裝完主題後，建議開啓標籤頁、分類頁

因爲某些主題須要用到標籤、分類，可是它的安裝方法中又沒有描述清楚。基於個人我的經驗，建議都開啓

一、開啓標籤頁命令 ：hexo new page tags ，在 博客目錄/source/tags/index.md 添加元數據：

layout: tags
comments: false

二、開啓分類頁命令 ：hexo new page categories ，在 博客目錄/source/categories/index.md 添加元數據：

layout: categories
comments: false

六、如何讓博文列表不顯示所有內容

默認狀況下，生成的博文目錄會顯示所有的文章內容，如何設置文章摘要的長度呢？

答案是在合適的位置加上 <!--more--> 便可，例如：

# 前言

使用github pages服務搭建博客的好處有：

1. 全是靜態文件，訪問速度快；
2. 免費方便，不用花一分錢就能夠搭建一個自由的我的博客，不須要服務器不須要後臺；
3. 能夠隨意綁定本身的域名，不仔細看的話根本看不出來你的網站是基於github的；

<!--more-->

4. 數據絕對安全，基於github的版本管理，想恢復到哪一個歷史版本都行；
5. 博客內容能夠輕鬆打包、轉移、發佈到其它平臺；
6. 等等；

最終效果：