第一步:Hexo
使用了Hexo腳手架。
首先找一個放置腳手架的目錄,輸入以下命令完成安裝:
npm install hexo-cli -g
hexo init blog
cd blog
npm install
文件目錄大致如下:
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
-config.yml中是博客參數配置
scaffoles中是模板文件,可以修改文章的模板
source中是博客中的靜態資源,這篇文章就是通過source/_posts目錄下的md文檔寫的
themes中是主題樣式,是編寫博客樣式的地方,可以自己編,也可以用現成的
然後就可以在配置文件-config.yml
中綁定自己的域名。我用的是github.io,可以參考搭建免費個人博客詳細教程進行配置。
綁定域名後就可以上傳博客頁面了。
下面是一些常用hexo命令:
hexo g //生成項目
hexo s --debug //本地調試(熱更新)
hexo clean //清除生成項目
hexo d //部署項目
如果直接生成並部署項目,打開網頁會看到Hexo提供的默認主題。主題存放於themes文件夾下,默認的主題名爲landscape,文件夾名即爲主題名,可在配置文件-config.yml
的theme
項中更改。但前提是themes目錄下有其他的主題。
第二步:主題
說實話,Hexo默認的主題landscape就不錯,簡潔大氣,但直接用默認主題就沒意思了。GitHub上頁有一些不錯的主題模板,比如Next,星星是最高的,但感覺頁面效果也沒那麼好,而且想用Next也有不少配置要學,索性自己從零開始搭建。
我的主題主要是仿照默認主題的結構編寫。landscape主題目錄下有languages、layout、scripts和source四個文件夾,languages存放語言配置文件,layout存放頁面模板文件,scripts存放Hexo腳本,source存放頁面樣式、圖片、字體等資源文件。
由於主題文件的編寫是採用ejs模板引擎,所以如果沒接觸過ejs可能不好上手。可以參考從零開始製作Hexo主題進行編寫。