搭建Hexo博客
修改记录:
- 2016-08-09 发布
- 2016-10-3 添加常用命令
前段时间看到唐巧大大将博客从Octopress迁移到了Hexo,当时顿觉新奇,在本地搭建了下hexo。发现搭建起来确实简单方便,而且npm的安装方式也特别顺手,当然这是因为开发react-native
久了就有这么个感觉。不过,当时只是在本地搭建了,并没有什么其他想法。但是,不久之后,硬盘被锁,无力回天,只能施展重装系统大法才解决。但是,此法有一后遗症,那就是电脑上的软件都没有了,博客系统也没有了。
至此之后,耽搁了一段时间没有写博客,最近想捡回来,重装了Octopress之后发现评论、百度SEO不见了,不想折腾Octopress,随之换了个Hexo试试,下面是一篇简单总结。
一、安装Hexo
Hexo的安装主要参考Hexo的官方文档https://hexo.io/zh-cn,这里只列出简单的安装方式。
在安装Hexo
之前,你需要首先安装Node.js
,这我们可以不翻墙到http://nodejs.cn/下载。
安装完node.js
之后,使用下面命令全局安装Hexo
|
|
到此,我们安装好了Hexo
,之后我们开始搭建博客。
|
|
安装完这一切之后,我们就可以查看Hexo
效果了
|
|
在浏览器里面输入localhost:4000
,我们就看到了效果。这样,Hexo就安装好了,是不是很简单?
二、配置
Hexo安装之后,我们当然要做一些配置,这一步特别简单,只需要在myblog
目录下编辑_config.yml
文件,修改下相关配置就行了。这里,我只列出修改的选项:
|
|
三、修改主题
1、安装主题
如果你觉得默认的主题不符合胃口,可以到https://hexo.io/themes/找一个你喜欢的。主题找来找去,我最后选择了maupassant这个主题,感觉它非常的简洁美观。
按照maupassant
作者的一篇博客大道至简——Hexo简洁主题推荐进行了安装,步骤如下:
|
|
需要注意的是,安装上面的内容是在myblog
目录下进行的。
在npm install hexo-renderer-sass --save
安装时,我失败了,然后使用cnpm
进行了安装就没有了问题。
安装好之后,在themes
目录下多了个maupassant
,然后我们编辑Hexo的配置文件_config.yml
,将theme
的值改为maupassant
。
|
|
注:Hexo的配置文件和主题的配置文件名字都是_config.yml,我们需要区别开来。下面我称主题的配置文件为maupassant的_config.yml
。
安装好这一切之后,我们使用hexo server
开启服务器,刷新本地的页面,我们就看到了简洁的博客页面出现我们眼前。
2、修改主题配置
整个主题,有些东西我觉得它还不够简洁,于是我在maupassant的_config.yml文件中注释了一些东西,去掉了菜单的about
和rss
。
|
|
关闭友情链接
和tag
|
|
加上多说评论和百度统计
|
|
之后,主题就看起来简洁多了。
三、将Octopress迁移到Hexo
迁移这个非常简单,将以前Octopress博客中source/_posts
目录下的所有markdown文件复制到Hexo目录下的source/_posts
就行了。
不过,在迁移中就说说碰到的一些问题:
- 在有一篇博客中英文太长导致不换行,然后出现了排列不是特别好看,这里我的解决的办法是修改maupassant主题下的css/style.scss文件中
.post-content
样式的text-align
样式,将justify
改成left
就行了 - 对html写的table适配的不是特别好,会出现一大片空白,问题见https://github.com/hexojs/hexo/issues/1388。暂时没有什么解决的办法,最后是将表格截了一张图放在上面显示。
#
后面没有空格,导致标示标题的#
出现文中,最后将整个博客调了一遍,改成## + 空格 + 标题
的方式。- 三个反引号里面放一段代码时,由于结尾的反引号后面有空格,导致代码和正文排版混乱。最后删除了空格,就没什么问题了。
四、发布博客
|
|
然后修改Hexo中的配置,
|
|
最后,我们将博客上传到github上
|
|
注:如果我们是使用github page
服务,注意在public文件中加上对应的CNAME
文件。
常用命令
|
|