hexo自建博客框架

背景

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

hexo特性

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

我使用hexo搭建博客过程

一、环境依赖

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

二、建站流程,配合github

1.本地初始化

1
hexo init [folder]

2.进入到初始化目录

1
cd [folder]

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

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

3.新建markdown文档

1
hexo new "The common hello world"

4.生成静态文件

1
2
hexo generate 
或者简写为 hexo g

5.查看站点效果

1
2
hexo server
或者简写为 hexo s

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

6.部署到github

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

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

7.发布到github

1
2
hexo deploy
或者简写为 hexo d

8.查看线上静态博客站点信息

https://${你github的用户名}.github.io

更换主题

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后是没有效果的,你也不知道该在浏览器中输入什么地址来访问。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值