Hello, World!

在MacOS上使用Hexo+GitHub搭建个人博客

字数统计: 1.5k阅读时长: 5 min
2017/02/20 Share

IT行业的知识体系更新迭代非常频繁,开发者需要不停的去学习新的知识新的技术,那么往往老的知识技术会遗忘的非常快,通过记录总结可以在需要的时候快速回忆起来,其次,互联网IT的精神核心是分享、共享,总结记录下来就可以分享给需要的人。所以,我需要一个可以满足我的需求的方式,个人博客就是一个非常好的方式。
  通过Hexo + Github搭建的个人博客,就是一个非常好的选择。首先介绍一下Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

建站

具体的建站过程,在这篇博文中不是重点,因为在网络上可以搜索到非常多的教程,任意选择一个即可,我推荐官方的中文建站文档,里面的说明非常全面详细。

重点来了,我在建站过程中踩过的坑,犯过的错误,浪费的时间精力,是我非常想和大家分享的。

执行安装语句出错

1
sudo npm install -g hexo-cli

报错信息提示需要在语句末尾加上–force

1
sudo npm install -g hexo-cli --force

安装成功。

执行hexo d语句出错

1
hexo d

报错信息

1
2
3
4
You should configure deployment settings in _config.yml first!
Available deployer plugins:
git
For more help, you can check the online docs: http://hexo.io/

纳尼,我就拷贝了deploy的配置语句,追加在_config.yml文件末尾,其他啥也没干啊,怎么就不对了呢,奇怪。

1
2
3
4
5
deploy:
type: git
repo: git@github.com:onzxgway/onzxgway.github.io.git
branch: master

在网上查了一番资料才发现,是没有缩进导致的,😭,正确的格式应该是这样的

1
2
3
4
deploy:
type: git
repo: git@github.com:onzxgway/onzxgway.github.io.git
branch: master

更换主题不生效

系统默认的主题landscape被我更换为archer之后,重新生成静态文件,部署上线,但是实际不生效。
解决方法:在重新生成静态文件前,执行

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况下(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

配置文件_config.yml

您可以在 _config.yml 文件中修改大部分的配置。

在文章中插入图片

Hexo配置文件的设置

在博客根目录下,配置_config.yml文件,把post_asset_folder字段值由false改为true。
引post_asset_folder
设置post_asset_folder参数后,运行hexo n “xxxx”来生成md博文时,hexo会自动创建一个与文章同名的文件夹,您可以把相关的资源都放到此文件夹内,这样就可以更方便的管理和使用资源。

安装hexo-asset-image插件

由于hexo默认不支持文章插入本地图片,那么就需要安装hexo-asset-image图片路径转换插件来支持。切换到博客根目录下,运行如下指令安装插件。

1
npm install hexo-asset-image --save

插件安装完以后,实际上是存放在…/node_modules/hexo-asset-image目录文件夹下的,如果想要卸载这个插件的话,直接删掉这个文件夹即可。

插入图片

运行hexo n “firstblog”指令,创建一篇名为firstblog.md文章,然后查看博客的 …/source/_posts目录,会看到存在一个firstblog文件夹和firstblog.md文件,将博文所需要的资源放到firstblog文件夹下,写博客时使用![图片描述](xxx/xxx.png)直接插入该文件夹内的图片即可。

在文章中插入图片遇到的坑

1,在md文件中使用![图片描述](xxx/xxx.png)语法引用图片,图片无法成功加载。
  开始查找错误,通过浏览器调试,发现是图片的路径不对,显示为http://example.com/......,奥,瞬间明白了,是由于_config.yml文件中的url没有设置正确值,解决方式很简单就是把url的值修改为http://onzxgway.github.io。修改好了之后,运行指令hexo clean & hexo g & hexo d,结果还是不显示图片。
  接着查找问题,通过浏览器调试,发现还是图片的路径不对,显示为http://onzxgway.github.io/io//ReferenceCount.png,这就奇怪了,怎么会生成这种路径呢,通过查找资料发现是由于hexo3版本后对很多插件支持有问题,hexo-asset-image插件在处理data.permalink链接时出现路径错误,把年月去掉了,导致最后生成的路径不对。解决方法就是卸载hexo-asset-image插件,重新安装已经修改过得新插件npm install https://github.com/7ym0n/hexo-asset-image --save 安装成功之后,运行指令hexo clean & hexo g & hexo d,结果还是不显示图片。
  这就有点不爽了,哪里出问题了呢,还是用浏览器调试,发现图片的路径依然不对,而且第二步更新hexo-asset-image插件一点作用也没起,路径纹丝没动,还是http://onzxgway.github.io/io//ReferenceCount.png,漫长的调试中…,最后发现是我自己犯了一个低级错误,我在博客根目录下安装了hexo-asset-image插件,又在博客的同级目录下也安装了hexo-asset-image插件,我卸载更新的是博客的同级目录下的插件,而真正起作用的根目录下的插件并没有卸载更新,所以最终生成的页面没有任何改变,吐血,因为这个疏忽,多耗费了我两个小时的时间,下次一点要头脑清晰,思路明捷去作业。

CATALOG
  1. 1. 建站
    1. 1.1. 执行安装语句出错
    2. 1.2. 执行hexo d语句出错
    3. 1.3. 更换主题不生效
    4. 1.4. 配置文件_config.yml
  2. 2. 在文章中插入图片
    1. 2.1. Hexo配置文件的设置
    2. 2.2. 安装hexo-asset-image插件
    3. 2.3. 插入图片
  3. 3. 在文章中插入图片遇到的坑