第一步: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主题进行编写。