最詳細的搭建我的博客教程

---

前言

你是否也想擁有屬於本身的博客？是否也想擁有跟我同樣的博客空間？若是心動了，就趕忙往下看吧！

教程炒雞簡單，炒雞詳細，並且博客搭建徹底是Free of Charge!

原理

Github Pages

Github不只可讓咱們把代碼託管在平臺上，並且容許咱們利用Github的服務器部署自定義網頁對咱們的項目做簡介。這個網頁就被稱爲**

Github Pages**。這是咱們能夠利用Github搭建免費博客的基礎啦~

Hexo

Hexo是一款輕量但高逼格的搭建博客快速工具，它是基於Node.js開發的。而Node.js...好了，扯遠了...有興趣的童鞋能夠出門左轉本身百度...

準備

知道了大體的原理，咱們首先須要準備搭建博客的材料。以下：

1. 一臺windows系統的電腦
2. 一個Github帳號
3. 安裝Node.js
4. 安裝Git
5. 安裝Hexo

開始

申請Github帳號，創建一個倉庫，併爲此建立一個說明網頁(Github Pages)

假設咱們都有了Github帳號，這是首先在右上角點擊「+」號，選擇New repository

注意 倉庫名必定是"你的Github用戶名"+github.io !!!

以後爲咱們的項目添加一個說明Pages！

建好的項目頂部最右邊有個Setting按鈕，點擊進入配置界面，下滑界面，直到看到Github Pages，這時你發現居然自動生成了一個說明網頁！

由於Github說明網頁的默認地址就是「你的Github用戶名」+github.io，其它說明網頁都是基於該地址的。

Ok! 到此爲止，Gihub Pages的部分就結束了。

搭建Hexo，把Github Pages修改成本身的博客界面！

安裝Git以及Node.js！

由於咱們須要經過Git把咱們的Hexo生成的網頁提交到Github pages上，而Node.js是咱們Hexo插件運行的基礎！

1. 下載安裝Windows版Git
2. 下載安裝Node.js

驗證：
"Win"+R打開運行界面，輸入"cmd"打開命令行窗口。
是否安裝Git:輸入git version出現版本信息：

git version 2.19.1.windows.1

是否安裝Node.js:輸入node -v出現版本信息：

v8.12.0

安裝及部署Hexo

首先建立一個文件夾，用來放置咱們的Hexo。

而後進入咱們的文件夾，例如咱們文件夾路徑爲D:\blog

則在終端依次輸入並執行D: 、 cd blog 進入文件夾

打開命令終端，利用Node.js的包管理器npm安裝Hexo:
npm install hexo-cli -g
輸入hexo -v驗證是否安裝成功
輸入hexo init初始化該文件夾
輸入npm install安裝須要的組件
輸入npm g生成靜態文件
輸入npm s啓動服務器，如今在瀏覽器輸入http://localhost:4000/打開咱們的博客界面！

是否是有點雞凍！別急，咱們還須要把頁面推送到Github Pages上，步驟以下：

1. 設置Git的user name和email

在咱們建立博客文件夾裏右擊，選擇 Git Base Here，而後在窗口中依次輸入
git config --global user.name "yourname"
git config --global user.email "youremail"

2. SSH 受權
打開git bash，輸入ssh-keygen -t rsa, 接着回車三下。

最後獲得了兩個文件：id_rsa和id_rsa.pub（默認存儲路徑是：C:\Users\Administrator.ssh）

登陸Github，點擊頭像下的settings，添加ssh。新建一個new ssh key，將id_rsa.pub文件裏的內容複製上去

3. 上傳項目

首先用IDE(我用的是WebStorm)打開咱們的Hexo文件夾，發現它的文檔目錄是這樣的：

|-- _config.yml
|-- package.json
|-- scaffolds
|-- source
   |-- _posts
|-- public
|-- themes
|-- .gitignore

>_config.yml：網站的全局配置文件，設置包括網站標題、副標題、做者、關鍵字和描述信息等。

>package.json：框架的基本參數信息和它所依賴的插件，在 npm 安裝時使用 --save 保存進去。

>scaffolds：本意是 「腳手架」 的意思，這裏引伸爲模板文件夾。當你 hexo new <layout(佈局)> <title> 的時候，Hexo 會根據該文件夾下的對應文件進行初始化構建。

>source：正如其名，source 文件夾存儲一些直接來自用戶的文件，它很重要，若是不出意外你的文章就是保存在這個文件夾下(_posts)。_posts 目錄下的md文件，會被編譯成 html 文件，放到 public 文件下。

>public：參考 source 文件夾，在初始化後是沒有 public 文件夾的，除非 hexo g 編譯生成靜態文件後，public 文件夾會自動生成。使用 
>hexo clean 清除 db.json 和 public 文件夾下的全部文件。

>themes：主題文件夾，存儲主題。相關的主題能夠在 Github 上免費採購。

>.gitignore：.gitignore 文件做用是聲明不被 git 記錄的文件，hexo init <folder> 也會產生一個 .gitignore 文件，能夠先刪除或者直接編輯，對hexo不會有影響。

打開配置文檔_config.yml，修改deploy值（在末尾）:

deploy:
  type: git
  repo: git@github.com:SUNYunZeng/SUNYunZeng.github.io.git
  branch: master

安裝在git上部署文章的擴展npm install hexo-deployer-git --save

打開終端並進入到Hexo文件系統中，建立一篇新博客hexo new post "博客名"

這時文件夾source/_posts文件夾裏會出現博客名.md的博客文章源文件

文件是markdown格式，書寫方法有一套規範，下篇博客會講到。PS:很是簡單啦~

編輯好博客內容後，一頓滾鍵盤，依次執行如下命令：
hexo g 生成靜態文件
hexo d 部署到Github Pages

就這樣，你的第一篇博客就上傳啦！

更換Hexo主題

因爲默認的博客主題可能不能知足你們的需求，因此再提一下更換主題的方法。

首先到Hexo官網中選擇一款喜歡的主題

這裏我以我博客採用的主題爲例，我採用的pure主題

首先在Hexo系統文件夾中打開終端，而後輸入git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

以後在系統目錄theme文件夾下你會發現多出了pure命名的一個文件夾，這就是咱們主題保存的位置,其中pure文件夾下的config.yml文件就是我
們博客的配置文件，在裏面能夠本身對博客界面進行個性化配置，詳情請參看網址

在咱們的Hexo系統配置文件config.yml中，修改theme爲咱們的pure主題

theme: pure

而後進入文件夾 cd themes/pure

把主題提交git pull

從新生成博客靜態文件，而後部署到Github Pages
hexo g
hexo d

噹噹~咱們的個性化博客就搭建完畢啦！