hexo搭建博客全记录

发表于 | 分类于

why hexo

曾经尝试过用github pages搭博客，用的是isnowfy提供的框架，但是有几个缺点：

  • 发文章必须用它提供的框架，且需要将Github用户名和密码告诉它
  • 网站样式不好看，懒癌又不会自己调整
  • 网站自定义的维度比较小

最近看了几个用hexo搭的博客，功能基本满足我的需求，且颜值高，就果断折腾一波，我用的是Mac 。参考：

node安装慢

推荐安装nvm，然后用它装node；node国内下载超级慢，得用镜像。

1
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

将这行配置加到你的shell的配置文件如.zshrc里，然后source ~/.zshrc。

另附上npm的国内镜像：

1
2
# 编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

安装主题

比如NexT

1
2
cd username.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next

站点配置

路径：username.github.io/_config.yml，参考：

1
2
3
4
5
6
7
title: dimsky 的 9 维空间    //你博客的名字
author: dimsky  //你的名字
language: zh-Hans    //语言 中文
theme: next   //刚刚安装的主题名称
deploy:
  type: git    //使用Git 发布
  repo: https://github.com/username/username.github.io.git    // 刚创建的Github仓库

主题配置

路径：username.github.io/themes/next/_config.yml，参考：主题设定 - NexT

命令汇总：

1
2
3
4
5
6
7
8
9
10
# nvm安装
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | sh
# nvm使用
nvm ls-remote
nvm ls
nvm install stable
nvm install 7 # 会自动装7的最新版本
# nvm use
nvm use 7.9.0
nvm use system
1
2
3
4
5
# hexo安装
npm install hexo-cli -g
hexo init username.github.io
cd username.github.io
npm install
1
2
3
4
5
6
7
8
# 写文章
hexo new [layout] <title>
# 启动本地服务
hexo s
# 安装hexo-deployer-git
npm install hexo-deployer-git --save
# 清理缓存db.json和生成文件(public)，generate，deploy
hexo clean && hexo g && hexo d

进阶

主题配置

  • 添加tags，categories，about页面
  • 侧边栏社交链接
  • 设置友情链接

参考：主题配置 - NexT

站内搜索

Local Search - NexT
Hexo博客添加站内搜索 - EZLippi

1
2
# npm install hexo-generator-search --save ?
npm install hexo-generator-searchdb --save

向站点配置文件添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用本地搜索功能：

1
2
local_search:
  enable: true

注意缩进。

站点地图

1
npm install hexo-generator-seo-friendly-sitemap --save

向站点配置文件添加

1
2
sitemap:
    path: sitemap.xml

返回顶部

参考：Hexo博客优化：添加返回顶部功能 - Jark，备个份。

  1. 新建文件 username.github.io/themes/next/layout/_partials/totop.ejs，在文件中加入HTML代码：

    1
    2
    3
    4
    5
    6
    <div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
    <a title="返回顶部"><img src="/imgs/scrollup.png"/></a>
    </div>
    <!--文件引用-->
    <%- partial('totop') %>
    <script src="<%- config.root %>js/totop.js"></script>

  2. 新建文件 username.github.io/themes/next/source/js/totop.js，在文件中添加javascript代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    (function($) { 
    	// When to show the scroll link
    	// higher number = scroll link appears further down the page   
    	var upperLimit = 1000;
    	
    	// Our scroll link element
    	var scrollElem = $('#totop');
       
    	// Scroll to top speed
    	var scrollSpeed = 500;
       
    	// Show and hide the scroll to top link based on scroll position   
    	scrollElem.hide();
    	$(window).scroll(function () {            
    		var scrollTop = $(document).scrollTop();       
    		if ( scrollTop > upperLimit ) {
    			$(scrollElem).stop().fadeTo(300, 1); // fade back in           
    		}else{       
    			$(scrollElem).stop().fadeTo(300, 0); // fade out
    		}
    	});
    	// Scroll to top animation on click
    	$(scrollElem).click(function(){
    		$('html, body').animate({scrollTop:0}, scrollSpeed); return false;
    	});
    })(jQuery);
    // 如果对显示位置和回滚速度不满意，修改以上代码的upperLimit和scrollSpeed参数即可。

  3. 添加按钮图片。将下图复制到 username.github.io/themes/next/source/imgs 目录下，文件名为scrollup.png
    scrollup.png

TODO

  • 评论区 多说快关闭了，需要考察下用什么
  • 博客迁移