使用Hexo＋ github快速搭建自己的部落格網站(一)

tankboo發表於2017-11-30
HexoGithub網站

Hexo簡介

Hexo 是一個簡單地、輕量地、基於Node.js的一個靜態部落格框架。通過Hexo我們可以快速建立自己的部落格，僅需要幾條命令就可以完成。

Hexo特性： 

 - Hexo基於Node.js，支援多程式，幾百篇文章也可以秒生成。 
 - 支援GitHub Flavored Markdown和所有Octopress的外掛。 
 - Hexo支援EJS、Swig和Stylus。通過外掛支援Haml、Jade和Less複製程式碼

詳細簡介請檢視 Hexo官方網站

搭建部落格之前的準備

  • 安裝Node環境
  • 安裝Git
  • 申請GitHub

上面提到的node和git的安裝以及github賬號的申請此處不再寫出操作步驟，如安裝或申請時遇到困難，請google或者百度

安裝Hexo

  1. 安裝hexo腳手架工具
    npm install hexo-cli -g複製程式碼
  2. 安裝並初始化blog專案，此處如果不寫blog則表示安裝在當前目錄
     hexo init blog複製程式碼
  3. 切換到blog目錄,如果安裝到當前目錄則無需切換
     cd blog複製程式碼
  4. 安裝依賴
     npm install複製程式碼
  5. 啟動本地服務
     hexo server複製程式碼
    服務啟動成功之後會出現如下提示

    然後在瀏覽器中輸入 localhost:4000 ,接著出現如下內容的頁面

此時一個屬於我們自己的部落格系統也就搭建成功了

等一等...
現在只能在本地可以訪問，其他人訪問不了，那我拿這個部落格系統來幹嘛，還不如用自己的記事本
.....

將Hexo與github關聯起來

關聯之前需要做的準備

  1. 配置個人的git資訊，將生成的ssh key新增到自己的github上
  2. 在github上建立一個repository
    注意：新建立的repository的名字必須為如下格式：
     yourname.github.io複製程式碼
    或者
     yourname.github.com複製程式碼
    yourname為你自己的github賬號，比如我的github賬號為：github.com/tankboo ， 則此時的yourname就是 tankboo

  3. 啟用github pages 的服務

    首先進入專案目錄，然後點選右上角的setting，如下圖所示


    在setting頁面，往下滾動，找到GitHub Pages，然後點選選擇主題按鈕（Choose a theme ）如下圖所示

    接著進入主題選擇頁面,此時可以隨便選擇一個主題然後儲存。儲存之後，在瀏覽器輸入 yourname.github.io （yourname換成你自己的github的名字, 即可看到如下內容
    此時根據選擇的主題的不同，可能看到的內容有所區別。

正式關聯

開啟專案錄下的_config.yml檔案，然後找到Deployment 部分，進行如下修改

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:tankboo/tankboo.github.io.git
      branch: master複製程式碼

其中的repo的值換成自己在github上的專案的路徑
修改完成之後我們還需要引入hexo-deployer-git ,不然會出現以下錯誤

ERROR Deployer not found: git

使用如下命令實現對hexo-deployer-git的安裝

    npm install hexo-deployer-git --save複製程式碼

安裝完成後使用如下命令即可將自己的blog部署到github上

    hexo clean
    hexo generate
    hexo deploy複製程式碼

接著在瀏覽器輸入yourname.github.io ,我的是tankboo.github.io，然後就可以看到自己的blog了

現在看到的樣式是hexo的預設主題，在官網上還有很多其他的不錯的主題，可以根據自己的喜好選擇

下一節將介紹hexo主題的設定，介紹的主題為next

相關文章