这是第一篇博客文章,主要写一下搭建博客的过程。

第一步:Hexo

使用了Hexo脚手架。
首先找一个放置脚手架的目录,输入以下命令完成安装:

1
2
3
4
npm install hexo-cli -g
hexo init blog
cd blog
npm install

文件目录大致如下:

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

-config.yml 中是博客参数配置
scaffoles 中是模板文件,可以修改文章的模板
source 中是博客中的静态资源,这篇文章就是通过 source/_posts 目录下的 md 文档写的
themes 中是主题样式,是编写博客样式的地方,可以自己编,也可以用现成的

然后就可以在配置文件-config.yml中绑定自己的域名。我用的是 github.io,可以参考搭建免费个人博客详细教程进行配置。
绑定域名后就可以上传博客页面了。

下面是一些常用 hexo 命令:

1
2
3
4
hexo g          //生成项目
hexo s --debug //本地调试(热更新)
hexo clean //清除生成项目
hexo d //部署项目

如果直接生成并部署项目,打开网页会看到 Hexo 提供的默认主题。主题存放于 themes 文件夹下,默认的主题名为 landscape,文件夹名即为主题名,可在配置文件config.ymltheme项中更改。但前提是 themes 目录下有其他的主题。

第二步:主题

说实话,Hexo 默认的主题 landscape 就不错,简洁大气,但直接用默认主题就没意思了。GitHub 上页有一些不错的主题模板,比如 Next,星星是最高的,但感觉页面效果也没那么好,而且想用 Next 也有不少配置要学,索性自己从零开始搭建。

我的主题主要是仿照默认主题的结构编写。landscape 主题目录下有 languages、layout、scripts 和 source 四个文件夹,languages 存放语言配置文件,layout 存放页面模板文件,scripts 存放 Hexo 脚本,source 存放页面样式、图片、字体等资源文件。

由于主题文件的编写是采用ejs模板引擎,所以如果没接触过 ejs 可能不好上手。可以参考从零开始制作 Hexo 主题进行编写。