hexo建站总结

关于建站

博客嘛,作为一个程序员总得要有一个,自己买服务器来建站,这是大神干的活,作为一个初级的菜鸡,想象不了需要花费多少时间精力,前几天从一个沙雕朋友那边知道了hexo,创建自己的博客简单方便,但在过程中还是遇到了不少问题.在此记录一下,也跟用hexo建博客的小伙伴们一起交流学习.
建站教程的话这边就不讲了,hexo的官方文档讲的很清楚的,由此访问hexo文档

关于编辑器

网上有不少人推荐typora,但我个人用的是webstorm,开发用的习惯了,也懒得装其他的(主要是电脑空间不太够),放一张图片,编辑markdown还是挺舒服的.

主题更换

选择主题

刚开始搭的时候,选择一个适(zhuang)合(bi)的主题,那肯定是必须的,主题选择,在这个网站上先选择一个心仪的主题,我个人选择的是hexo-themes-matery,下面就已hexo-themes-matery主题来举例.

下载主题

如果选择跟我一样的,那么到这个网站下载hexo-themes-matery,然后再你的博客路径下面站到themes文件夹

或者cd 到themes文件夹路径下,执行

1	git clone https://github.com/blinkfox/hexo-theme-matery.git

更换默认主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

然后执行

1	$ hexo clean && hexo g && hexo s

hexo clean : 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
hexo g : 生成静态文件。
hexo s : 启动服务器。

之后访问localhost:4000就可以看到你的博客更换过后的主题

代码高亮

博客的文章要好(zhuang)看(bi),那代码高亮必不可少,黑乎乎的一坨看下去的欲望都没有.

代码高亮在我这个主题中,作者有推荐一个插件,可能是我太笨了吧,一直不知道怎么用,有知道如何用的可以直接qq或邮箱联系我,随时接受打扰(晚上1点之后就另说了).额,说下这个插件的名字hexo-prism-plugin

因为我是一个iOS开发的码农,这个插件OC语法一直不能高亮(可能是因为我不会用),所以就另寻蹊径,有一个很多人都在用的highlight.js

访问该主页highlight.js

用法也很简单,不像网上大部分人说的需要下载放到plugins目录下面,直接在主题的ejs文件中导入使用就行

首先,在博客的配置文件中关闭默认的代码高亮

1 2	highlight: enable: false

我使用的主题是在hexo-theme-matery/layout/_partial/header.js和footer.js中的<head></head>中引入引用

<link rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/vs2015.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js">
</script>
<script>
    hljs.initHighlightingOnLoad();
</script>

可以看到,我这边使用的主题是vs2015

对了,另外跟萌新说下,在哪边选这些主题

点击这里浏览各种主题的效果

再多嘴一句,选完之后最好在浏览器中访问一下css是否存在

像这个cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/vs2015.min.css

图片上传

在网上查了有两种方式,哪种好用,则自己选择,个人是主推第二种方式

第一种方式,在第三方网站上上传图片,譬如七牛,然后在你博客中已下面格式即可插入图片,

1	![图片简介](https://图片链接)

优点:不占git空间.
缺点:图片管理的想自杀

第二种方式,在本地插入,hexo官网也有相关说明,hexo图片上传说明

设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true

执行hexo new [xxxx],生成xxxx.md和xxxx文件夹

把要引用的图片拷贝到xxxx文件夹中

来引用本地图片

如果想使用markdown语法来保持文章编辑整洁,那么可以使用hexo-asset-image插件来实现

那么配置的顺序则为:

设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true

执行 npm install hexo-asset-image –save 装插件

执行hexo new [xxxx],生成xxxx.md和xxxx文件夹

把要引用的图片拷贝到xxxx文件夹中

使用![](xxxx/example.jpg)来引用本地图片

注意:此时图片还是不能展示,插件1.0.0版本有问题,正常显示把插件版本切换到0.0.1,虽然不清楚作者为什么新的代码反而有错.

哎,1.0.0版本有问题,那就切到0.0.1版本试试

打开博客根目录下的package.json文件

把hexo-asset-image的版本号改成0.0.1,然后windows打开cmd,cd到博客根目录下执行npm install或者yarn install(你装过yarn的话),mac也是同样的操作.

装完之后,看下图片上传的效果,执行下面语句

1	hexo clean && hexo g && hexo s

刷新localhost:4000来看看图片在本地是否已经上传了

1	hexo clean && hexo g && hexo d

打开你的github博客地址,看看远程是否已经上传了本地图片

优点:图片管理清楚舒服
缺点:git空间随着图片越来越满
如果对于上面图片上传的配置的总结有什么问题请联系我,在总结之外的我应该也不太清楚了,祝你好运.