手把手教你用Hexo搭建個人技術部落格

Harry_Chen發表於2018-03-30

前言

其實大四實習那會就有搭建個人技術部落格的想法了,然後還是懶,擱置了很久。前陣子在掘金髮了幾篇之前寫過的文章,收穫了不少贊和閱讀量,有點小小的成就感,所以這點動力驅使自己動手了~有些人會覺得搭建個人部落格需要購買域名,需要花錢,其實不是的,Github就可以幫助我們免費生成靜態網址,這一點後面會提到的。

什麼是Hexo

Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。此處附上Hexo中文官網。下面我們詳細介紹搭建步驟。

安裝Git Bash

Git Bash是Windows系統下git的命令列工具。

  • 下載地址
  • 安裝步驟:雙擊下載好的exe檔案,一路next就可以
  • 確認成功:執行git version,控制檯列印出對應git版本就說明安裝成功了。

手把手教你用Hexo搭建個人技術部落格

安裝Node

Hexo是基於Node環境的靜態部落格,npm工具是必不可少的。

  • 下載地址
  • 安裝步驟:基本操作,這裡就不贅述了。
  • 確認成功:執行node -v,控制檯列印出對應Node版本就說明安裝成功了。

手把手教你用Hexo搭建個人技術部落格

安裝Hexo

  • 先建立本地存放blog的資料夾,然後cd到對應目錄下。
  • 安裝命令:npm i -g hexo(建議用cnpm安裝,會相對快一些)
  • 確認成功:hexo -v

手把手教你用Hexo搭建個人技術部落格

  • 初始化:hexo init,之後開啟的資料夾如下圖:

手把手教你用Hexo搭建個人技術部落格

  • 簡單解釋下資料夾的作用

node_modules:依賴包

scaffolds:命令生成文章等的模板

source:用命令建立的各種文章

themes:主題

_config.yml:整個部落格的配置

package.json:專案所需模組專案的配置資訊

搭橋到Github

  • 沒賬號的建立賬號(程式猿不應該吧~),有賬號的看下面步驟:

手把手教你用Hexo搭建個人技術部落格

  • 回到gitbash,配置github賬號資訊(YourName和YourEail都替換成你自己的)

手把手教你用Hexo搭建個人技術部落格

  • 建立SSH,在gitbash輸入:ssh-keygen -t rsa -C "youremail@example.com,生成ssh,然後按照下圖找到id_rsa.pub

手把手教你用Hexo搭建個人技術部落格

  • 將獲取的ssh放到github中:

手把手教你用Hexo搭建個人技術部落格

手把手教你用Hexo搭建個人技術部落格

臨門一腳

  • 用編輯器開啟blog專案,修改_config.yml檔案的一些配置(記得冒號後必須有空格,不然配置不生效,這是Hexo的一個坑!
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master
複製程式碼
  • 進入blog專案,分別執行以下命令:
hexo clean
hexo generate
hexo server
複製程式碼
  • 開啟瀏覽器輸入:http://localhost:4000,見證奇蹟的時刻到了~

手把手教你用Hexo搭建個人技術部落格

上傳到Github

  • 需要先安裝Hexo上傳倉庫的工具,執行npm install hexo-deployer-git --save,這樣你寫好的文章才能部署到github伺服器。
  • 執行命令(建議每次都這樣做,先清除、再編譯上傳)
hexo clean
hexo generate
hexo deploy
複製程式碼
  • 在瀏覽器輸入http://yourgithubname.github.io,這樣你就可以看到自己的線上部落格了~

手把手教你用Hexo搭建個人技術部落格

優化部落格

有些童鞋一開始看到這部落格,哇,好醜~大家都有經驗的,預設的主題都是不好看的,這裡有Hexo主題網址,目前有195個主題任你選,每週換一個都可以換三年~(當然你能這麼折騰我也服了~)具體怎麼安裝主題,點進去對應的地址都有詳細說明,這裡就不贅述了。這裡秀一波我的個人部落格地址,有空過來刷刷PV也是很ok的~

手把手教你用Hexo搭建個人技術部落格

手把手教你用Hexo搭建個人技術部落格

寫部落格

最後的最後,怎麼寫部落格?

  • 新建文章:hexo new '文章名',然後在blog的source資料夾就可以看到了。
  • 寫內容:支援markdown語法,所以我自己現在是用掘金自帶的markdown編輯器寫完後把文章複製過來的,完美相容~
  • 本地看過沒問題就上傳到github,步驟前面也說了,一般上傳後github伺服器會有點延遲,十分鐘後重新整理應該就有最新的blog了。

結尾

embers的個人部落格(會經常更新)

相關文章