Hexo Building

Author Avatar
Chang Zhan 10月 04, 2016
  • 在其它设备中阅读本文章

In class

fail:

刚开始时,使用的Node.js是最新版的,然后配置了系统环境,执行命令:npm install hexo -g 时,加载了很长时间,然后并没有进行到下一步。

improve:

换用Node.js的familiar版,成功解决了上述问题。
接着在任意文件夹中新建一个目录,cd命令到相应的文件夹,之后就开始启用命令行大法了。首先初始化,之后接着启动hexo server,如果在浏览器中访问localhost:4000(这个地址是可以调控的,如果电脑中安装了福昕阅读器,则这个端口会被堵塞)成功,则说明此时hexo配置成功。然后通过修改配置文件_config.的deploy属性来将本地hexo和远程Github关联。

在修改配置文件的时候,一定要注意空格(type、repository、branch前要加空格,冒号后面也要加一个空格)
接着安装hexo-deployer-git:npm install hexo-deployer-git -S
课上就做到了这一步,下面请允许我盗一波图

版权所有@姜建林学长,感谢大力支持


After class

主题

一开始接触hexo的GUI是landscape主题,除了丑之外一无是处,然后我就毅然决然的踏上了寻找好看主题的不归路。
首先是在知乎上搜索的,看到了一系列的比较好的主题

前十名的主题我都下载下来放在theme文件夹里面然后一个个的试,最后有三个入了法眼,一个非next莫属;另一个是Haojen 的一个主题,以简洁和规则而凸显,特别是体现在首页;还有一个是Litten的博客,独有的特点是可以自主添加相册,其中标签的处理和页面利用做的比较好,还可以增加友链。
一开始我是采用Haojen的那个主题,然后出现了一些比较头疼的问题:

  1. 一开始根目录的_config.文件要求与theme下的对应主题的_config.文件保持一致,然后更改的时候需要更改两个,操作的复杂度增加了
  2. 刷新起来特别麻烦,每次在sublime text3中修改完后,都必须ctrl+C取消后,然后再hexo s运行一遍才能看到更新之后的效果
  3. 当时添加图片方面做的还不是很好,放在本地的图片并不能很好的嵌入其中
  4. 在网上更新的各种插件并不是很多,然后论坛中谈论的频率并不是很大, 所以我觉得这对之后维护以及更新不是很有利,可塑性很小

基于以上的四点原因,我决定放弃这个主题,虽然已经搭建了一天半的时间,但还是狠狠心给丢了。
同时我承认第二次是有用Litten的念头的,然后我在群邮件里面翻了一下,发现有蛮多的人用,觉得没有新意。所以转了一圈,又回归到了我强大的next主题,回归到了经典的Scheme–Muse(主要是紧凑型的Mist太多人用,而Pisces文章的可读性宽度太小,慵懒的我也不愿意去找对应的CSS样式进行更改)话虽如此,但是Muse的大片留白还是很充满想象空间的,有种中国水墨画的味道,而且可以降低阅读疲劳,其中的sidebar也很cute,所以最终就确定了为next主题

图片

最开始的时候,我是将图片统一存在主题下的images文件夹下,然后,我就琢磨,将文件夹上传至github的时候图片占了很大的空间,然后如果别人要参考下载的话也需要消耗下载图片的时间(命令行下载或上传的速度我就不过多描述了,用过的孩子都懂其中的痛)
就在我快要放弃,使用360云的时候,万能的知乎给了我答案,那就是七牛云,注册后就有1个G的免费空间,可以产生外链,将外链代替原本的本地地址可以有效地解决这个问题。(其中在设置七牛云的时候,不要调成Private,这样产生不了外链)
有一段时间,我沉迷于把单色调的background换成图片形式,但一直没有成功。今天翻看别人的博客的时候,发现了徐运放同学的博客已经换了背景图片,然后私下里交流了一下,发现用的方法是一样的,就是下图:

解决方法,将其中的本地链接换成了网络外链,完美解决,然后高兴地太早了,出现了这种情况:

背景图片随着页面滚动,不是固定的状态,然后找了一下CSS样式里面的background-position,调成fixed的状态,然后期待奇迹发生的我并没有看到什么改观。。 希望知道如何调节的小伙伴在下方的讨论区给我留言,thanks a lot

评论框

关于评论框,我是选择了多说这个神奇的平台,推荐还没有设立评论区的同学可以去尝试一下,只需要简单的几步就可以达到目的

音乐栏


三板斧可以搞定:

Tips

To the future

  • 添加搜索框功能
  • 添加打赏功能以及附带的一些操作
  • 通透理解next主题,在接下来的网页知识后,自己修改CSS样式以及排版
  • 将背景图片自然而不突兀的添加上去,并实现固定
  • 将剩余的几个页面很好的搭建起来,并及时维护,添加一些好玩的插件

我是华丽的分割线
  • time:170501
    今天碰到一些问题,想写一些博客,然后就把hexo重新扒出来了,然后发现有些东西已然忘记,经过一个下午的search行动,终于弄得差不多了,在最后,hexo deploy这一步,本应该无波无澜的,结果被自己坑到了,在重新更改配置文件的时候,把deploy属性的最后后缀改成了github,导致尝试用万金油方法终不得成效。
    万金油方法如下:
    npm install hexo-deployer-git -save然后再进行hexo deploy