1. 程式人生 > >利用github+hexo搭建自己的部落格

利用github+hexo搭建自己的部落格

一. 配置Node.js環境

  1. 除了安裝目錄其他按預設安裝即可。
     這裡寫圖片描述
     
     這裡寫圖片描述
     
  2. 檢查元件是否已安裝好:開啟命令視窗,並輸入:
     
     node -v
     npm -v
     

     這裡寫圖片描述

配置git環境

git --version

這裡寫圖片描述

三. github賬號的註冊與配置

  1. 註冊github賬號,並確認註冊郵件
  2. 建立程式碼庫
    登陸之後,點選頁面右上角的加號,選擇New repository:
    這裡寫圖片描述

進入程式碼庫建立頁面:

在Repository name下填寫yourname.github.io,Description (optional)下填寫一些簡單的描述(不寫也沒有關係),如圖所示:
這裡寫圖片描述

  1. 開啟settings,有一個Github Pages 的設定,點選 source 中的本來的 None ,使其變成 master 分支,也就是作為部署github pages 的分支,然後點選 save。頁面重新整理之後,再看 github pages 設定框處,多了一行網址,就是你的 github pages 的網址了。如果你的配置沒有問題,那麼大約15分鐘之後,yourname.github.io這個網址就可以正常訪問了~ 如果yourname.github.io已經可以正常訪問了,那麼Github一側的配置已經全部結束了。
    這裡寫圖片描述

原理:
  在github上搭建部落格,部落格分為兩部分東西:本地的hexo和github上倉庫。工作模式是這樣的:
- 在本地通過hexo new來生成md檔案(所有文章的md檔案都在source/_post/下)
- 然後編輯md檔案
- 然後hexo g渲染出html檔案
- 最後hexo d來部署文章到github倉庫
- 這樣就會有個問題,如果哪天換電腦了,本地的hexo檔案就沒有了,所有文章的md檔案也沒有了。解決這個問題最笨的方法就是時刻備份本地的hexo的一堆檔案,換電腦了,就把這堆檔案拷到新電腦上,然後就可以繼續寫文章,釋出文章了。但是這個方法極不方便,另外一個很高明的方法就是把本地這一堆hexo檔案也放在github上。

  在github上建倉庫yourname.github.io,為youname.github.io建立一個分支hexo用來存放hexo的檔案,master分支用來存放釋出的文章,並設hexo為預設分支,好像空倉庫沒法建立分支,可以先隨便寫入一個檔案(reaxdme.md),然後就可以建立分支,設立預設分支了。

三. 安裝hexo

  1. 將倉庫克隆到本地。
  2. git clone yourname.github.io倉庫到本地,當前在hexo分支。
  3. 檢視當前分支
git branch

這裡寫圖片描述

4.執行

npm install hexo-cli
hexo init (注意,不要輕易執行)
npm install 
npm install hexo-deployer
-git npm install hexo-deployer-git --save

等命令安裝hexo(注意:hexo init會清空當前目錄,所以本地的.git目錄就被刪除了,所以要提前備份.git目錄,但.git目錄可能是一個隱藏檔案,所有要在本地克隆下來的倉庫中顯示並先將.git資料夾複製出來,hexo init後再把.git目錄恢復到yourname.github.io)
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

四. 配置hexo,安裝配置主題等

1、Hexo的配置檔案是位於vickyleexy.github.io資料夾下的_config.yml檔案。
修改配置檔案請使用Notepad++或者Sublime Text 2之類的程式,不要使用Windows自帶的記事本。修改如下:

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

2、配置使用者資訊:

$ git config --global user.name "vickyleexy"
$ git config --global user.email vickyleexy@163.com

這裡寫圖片描述

3、 執行

hexo g         #generate 生成靜態檔案
hexo d         #deploy 部署網站.部署網站前,需要預先生成靜態檔案
hexo s         #server 啟動伺服器

這裡寫圖片描述

這裡寫圖片描述

五. 提交檔案

git add .
git commit
git push origin hexo

提交該分支的檔案到github上yourname.github.io倉庫的hexo分支。.gitignore檔案一般會由hexo自動生成,如果沒有這個檔案,可以手動新增,內容如下:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/

但在window下無法通過 右鍵=>新建 命令來建立以點開頭的檔案和資料夾 比如.gitignore,會提示必須輸入檔名。
所以要通過命令列建立檔案:

type NUL > .gitignore

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述
這樣就可以了,以後換電腦了,在新電腦上執行下2,3,4,5步就行了(注意:千萬不要再執行hexo init了)

六. 購買並解析域名

  1. 購買
    我是在godaddy上買的,可以到網上搜個優惠碼,先註冊一下的話郵箱裡也會收到一個折扣30%的優惠碼。
  2. 解析域名
    開啟命令列,ping一下你的github.io的網站,能看到一個ip地址;
    在godaddy網站上找到買的域名的dns管理器,將型別A中的指向改為上一步ping到的ip地址,其他保持不變即可。(注意,我的域名是×××.com,若域名為www.×××.com,則還需要將主機名稱改為www)

七. 選擇主題

八. 釋出文章

釋出文章的流程
這種方式下,每次寫完文章後,要把hexo的內容同步到github

hexo new 'topic' # 生成topic.md

編寫文章

git add .
git commit -m "更改tip"
git push origin hexo

把新寫的文章同步到倉庫,平時對hexo進行的配置也需要這樣同步一下

hexo g
hexo clean
hexo d

來發布文章
這裡寫圖片描述

這裡寫圖片描述