使用Hexo建立自己的博客框架

背景

刷朋友圈期间,偶然看到一位码农同行,在鼓捣hexo,自己心血来潮google了一把,这是个什么东东?后续一发不可收…..有兴趣的同学可移驾到hexo官网,如果你是个英语盲也没关系,送上hexo中文文档,官网上对hexo的介绍已经很详细了,我就不在过多描述。仅仅列出自己使用到的一些特性、极其功能。

hexo特性

  • 博客框架、快速、简单
  • 使用markdown编写博文
  • hexo根据markdown博文,几秒钟内可生成静态文件网站
  • 丰富的主题,切换主题方便,目前我使用的是MIHO的主题
  • 丰富的插件-》这个目前还用到
  • 命令行简单、易用

我使用hexo搭建博客过程

一、环境依赖

  • git ->网上教程一大堆
  • node.js ->网上教程也是烂大街了
  • hexo
npm install -g hexo-cli

二、建站流程,配合github

1.本地初始化

 

hexo init [folder]

 

2.进入到初始化目录

可以看到如下目录结构,理清目录作用,对后续使用hexo还是挺有帮助的

.
├── _config.yml--->主要的配置文件,这里可以修改大部分的配置相关信息
├── package.json--->对于非前端开发来说,可以不必关心
├── scaffolds-----> 模版文件夹,新家blog文章时,以这里定义的模版填充
├── source
|   ├── _drafts--->草稿
|   └── _posts---> 新建的文章的markdown源文件
└── themes--->主题

 

3.新建markdown文档

hexo new "The common hello world"

4.生成静态文件

hexo generate 
或者简写为 hexo g

 

5.查看站点效果

hexo server
或者简写为 hexo s

启动成功后,打开http://localhost:4000 即可预览生成的静态站点

6.部署到github

1.登录到github,新建repository,注意项目名称必须为:${github的用户名}.github.io
2.修改_config.xml,修改以下git信息

deploy:
  type: git
  repo: git@github.com:XXX----》填写第一步repo的ssh地址
  branch: master----->master分支

7.发布到站点

hexo deploy
或者简写为 hexo d

8.查看效果

https://${你github的用户名}.github.io8.查看线上静态博客站点信息

更换主题

1.如果你觉得hexo默认的主题不大喜欢,你可以来主题浏览你想用的主题,然后每个主题都会有自己的接入方式,按流程切换就好了。
2.如果你是前端高手,那当我没说,你自己实现把,对于后端开发的我,专门用来写博客已经足够用了
3.我本人选用的主题为MIHO,看着比较清爽,该有的功能都有

ps 遇到的坑点

1.hexo的配置方式默认使用yaml格式,key后的空格一定要有,而且要区分半角,刚开始的时候,修改_config.xml里的配置,每次hexo s命令都会报YAMLException: incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line at line 1, column 33:
2.github 建repo的名称一定要是 ${你的github用户名}.github.io;;;不然hexo deploy后是没有效果的,你也不知道该在浏览器中输入什么地址来访问。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页