前言:本文基于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是一個開源的分布式版本控制系統,可以有效、高速的處理各種類型的項目版本管理。它還支持離線工作,適合多人分布式開發。
安裝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:\blog
和C:\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~ 至此,我們的博客算是基本搭建完成啦,以后可以邊用邊學習,一些高級的個性化和第三方服務可以在這個過程中慢慢優化。