GitHub+Hexo+NexT 搭建博客

前言:本文基于GitHub搭建Hexo個人博客,使用的是NexT主題,由于我在博客搭建過程中踩了不少坑,用了快兩天時間才搞定,所以我將整合現有的教程和我的經驗教訓盡量詳細的分享博客搭建的過程。


1.環境配置

環境配置主要包括:創建GitHub倉庫、安裝git、安裝node.js

創建GitHub倉庫,建立GitHub Pages

關于Github:
GitHub是一個遠程倉庫,一個開源協作社區,更重要的是:它是免費的!

  • 首先需要創建一個GitHub賬戶,我們假設你的賬戶名稱為 david ,易于后面的演示。GitHub 郵箱也要通過驗證才行。
  • 然后再創建一個GitHub倉庫:點擊GitHub界面右上角的+,然后點擊New repository 創建倉庫,** 切記 **Repository name一定得是“GitHub賬號.github.io ”的形式,在這里為david.github.io,因為GitHub規定這樣命名形式才能作為網絡站點的托管倉庫。
  • 到這里,博客網站就有自己溫馨的港灣啦。

安裝Git

關于Git:
Git是一個開源的分布式版本控制系統,可以有效、高速的處理各種類型的項目版本管理。它還支持離線工作,適合多人分布式開發。

  • 至于如何下載、安裝、使用Git,廖雪峰老師在他的Git教程里面已經講述的很詳細了,我也是在此學習的,另外也推薦Pro Git的電子版。
  • 到這里,就已經默認你已經安裝好配置好Git了~

安裝Node.js

關于Node.js:
Node.js是一個基于Chrome JavaScript運行時建立的平臺, 用于方便地搭建響應速度快、易于擴展的網絡應用。

  • Node.js官網下載
  • 安裝保持默認并一路 next 即可

到這里,環境配置過程已經完成了。


2.安裝Hexo,并部署網站

關于Hexo:

  • A fast, simple & powerful blog framework, powered by Node.js
    • Blazing fast generating
    • Support for GitHub Flavored Markdown and most Octopress plugins
    • One-command deploy to GitHub Pages, Heroku, etc.
    • Powerful plugin system

Hexo博客框架初始化

  • 安裝Hexo
    得益于我們之前的準備工作,Git和Node.js均已經配置好,可以直接下載Hexo.
    在 Git Bash 中輸入如下代碼
    $ npm install -g hexo-cli
  • 初始化
    選擇一個盤(如 C:)建立你的博客本機存儲文件夾(如 blog:),在此文件夾空白處右擊選擇 Git Bash Here(或者$ cd C:\blog)進入blog文件夾進行git操作,接下來:
    $ hexo init
    $ npm install
  • 配置站點
    即建立本地文件與GitHub的Repository之間的聯系,使用 Notepad++ 打開C:\blog\_config.yml文件,拉到文件最下方的deploy進行如下配置:
    deploy:
    type: git
    repository: https://github.com/david/david.github.io.git
    branch: master
    其中,需要注意兩點:第一, repository:branch:均須自行添加;第二,Hexo的所有配置文件中的:后面均需要添加一個空格才可以書寫,否則會出現ERROR Deployer not found : git的錯誤!
  • 寫第一篇博文
    博文名稱為《My First Blog》,代碼:
    $ hexo new "My First Blog"
    此時會發現在C:\blog\source\_post里面出現了My First Blog.md文件,這個_post就是存儲博文的文件夾。
  • 這里寫作博文建議使用Markdown ,寫作工具可以用簡書(強烈建議:支持在線預覽模式)或者Sublime Text 2,Markdown是一種輕量級的標記語言,語法十分簡單,可以參考Markdown——入門指南進行學習,只需五分鐘奧~
  • 生成靜態頁面
    $ hexo generate (或簡寫為 $ hexo g)
    此時My First Blog.md已經在C:\blog\source\public文件夾里生成了博客網站的靜態文件。
  • 啟動本地服務器
    $ hexo server (或簡寫為 $ hexo s)
    用瀏覽器訪問 http://localhost:4000/,此時,你將會看到一個主題是landscape的博客(簡直不忍直視......),下面我們將介紹另外一個優美簡約的主題:NexT

部署本地網站到GitHub

  $ hexo deploy  (或簡寫為 $ hexo d)

此時會先后出現兩個界面,輸入注冊GitHub賬號和密碼。

  • 訪問網站
    上面的所有流程完成后,博客就已經搭建并發布到GitHub上了,在瀏覽器輸入david.github.io并訪問,就可以看到你的博客了。

小結:

在環境配置好以后,我們每次發表博文的過程如下:

  • 用簡書編輯好Markdown博文放到C:\blog\source\_post文件夾
  • $ hexo g 生成靜態頁面
  • $ hexo s 啟動本地服務器,在http://localhost:4000/預覽
  • $ hexo d 部署網站到Github
  • 訪問網站

3.更換NexT主題

關于NexT:
NexT是一個流行的Hexo主題,開發者賦予其主旨在于簡潔優雅且易于使用,所以首先要盡量確保 NexT 的簡潔易用性。

需要注意的是,配置文件_config.yml其實有兩個,分別位于C:\blogC:\blog\source\themes目錄下,前者為站點配置文件,后者為主題配置文件
  • 下載NexT
    Hexo的默認主題是landscape.其實Hexo提供了豐富色彩的主題供我們下載使用。這里我使用的是NexT,下載穩定版本可以按照如下操作:
  • 前往Hexo版本發布頁面
  • 選擇你所需要的版本,下載 Download 區域下的 Source Code (zip) 到本地。例如,下載 v0.4.0 版本
  • 然后copy并解壓到C:\blog\source\themes中。建議將文件夾改為next,方便操作。
  • 啟用NexT
    打開站點配置文件,找到theme字段,將其值由默認的landscape改為next,注意“:”后的空格!
  • 驗證NexT
    $ hexo s
    然后在瀏覽器訪問 http://localhost:4000
    ,檢查站點是否正確運行。
  • 個性化NexT
    對于主題的個性化設定是通過編輯主題配置文件完成的。
    至于具體的配置方法,在NexT官網已經介紹的非常詳細,不再贅述。

OK~ 至此,我們的博客算是基本搭建完成啦,以后可以邊用邊學習,一些高級的個性化和第三方服務可以在這個過程中慢慢優化。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容