Hexo搭建博客

发表于   |   分类于 ，   |   | 阅读量 次

概述

hexo是一种快速、简洁且高效的博客框架，可以快速的生成静态网页托管在github等平台上。对markdown有很好的支持，并支持从Wordpress等迁移。

搭建博客相关技术和工具

搭建blog

安装node.js

安装node.js有以下几种方式：

github

  • 注册
  • SSH生成及上传github

安装hexo

官方网站

本地安装hexo

1
2
3
4
npm install hexo-cli -g
npm install hexo --save
hexo init
npm install

cli是3.0版本，之前的版本安装通过命令npm install hexo -g.

本地部署HEXO

也可以用来预览和调试

# hexo g
# hexo s

然后可以通过http://0.0.0.0:4000/或者localhost:4000访问.

hexo工作目录也可以通过github同步，方便在另一台机器上部署hexo, 主要步骤分为以下几个部分:

  • install node.js and hexo app
  • git clone hexo文件夹
  • npm install下载node_modules
  • git clone next theme

github部署hexo

安装git deployer
npm install hexo-deployer-git –save

修改_config.yml

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

hexo的使用

init

新建一个网站
# hexo init [folder]
在folder文件夹下建立网站。

generate

新建一篇page
# hexo new page <title>

new

新建一篇文章
# hexo new [layout] <title>
如果没有指定layout，则使用_config.yml中默认的layout.

deploy

文章编辑

文章分为两个部分，头部和正文。

头部

1
2
3
4
title:
date:
categories:
tags:

多级分类语法格式如下：

1
2
3
4
5
6
7
8
# 第一种
categories:
	- 一级分类
	- 二级分类
	- etc

# 第二种
categories: [一级，二级， etc]

首页文章预览添加图片

1
2
photos:
	- url

设置文章摘要
文章摘要就是在主页中能够看到的部分, 通过<!--more>设置.

1
2
3
以上是摘要
<!--more-->
以下是正文

问题

  1. Npm速度过慢
    由于某些大家都知道的缘故，npm官方源在国内的下载速度极其慢，用官网的npm install hexo-cli -g速度非常感人，所以不推荐这种方式。这里我推荐用淘宝的npm分流——cnpm
    安装过程很简单：npm install -g cnpm --registry=https://registry.npm.taobao.org
    然后等着装完即可，之后的用法和npm一样，无非是把npm install改成cnpm install,但是速度比之前快了不止一个数量级(不过下文为了方便理解，还是会用默认的npm安装，如果你发现速度不好的话，请自行替换成’cnpm’)
    或者设置
    npm config set registry http://registry.npm.taobao.org/

  2. 插件不能使用-g安装
    hexo插件安装的时候先cd到blog根目录，并且安装参数不要带-g。 （即不要全局安装，因为全局安装的时候插件会被装到node的根目录下去，而不是blog目录），hexo的插件需要在blog目录下才能工作。

博客设置

主题

主题资源

github主题站
hexo 主题站
知乎主题帖
推荐主题next

next主题使用

设置参考

语言设置

在hexo安装目录下的_config.yml中设置。

language: option

其具体的选择项由themes中language目录下的内容决定。

新建page

# hexo new page <page name>
about, categories, tags都属于page.
在新建page之后，需要在主题配置文件中添加：

1
2
3
4
5
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

文章分类

第三方插件或服务

简单的插件或者服务设置可以参考next doc.

sitemap插件

提高网站被搜索引擎收录的可能性(网站的SEO有关系). 大部分内容参考hexo提交搜索引擎这篇文章，另外还有这篇可供参考.

  1. 安装sitemap插件

    1
    2
    $ npm install hexo-generator-sitemap --save
    $ npm install hexo-generator-baidu-sitemap --save

  2. 修改配置文件_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    sitemap:
    	path: sitemap.xml
    baidusitemap:
    	path: baidusitemap.xml

    # 或者

    plugins:
    	- hexo-generator-sitemap
    	- hexo-generator-baidu-sitemap

    在经过上述操作后，重新部署blog，应该可以通过yousite/sitemap.xml 和 yousite/baidusitemap.xml访问到对应的xml文件.

  3. 验证网站
    • 百度
      登陆百度站长管理网站, 新建站点，选择html tag方式验证.
      添加方法：在themes/next/layout/layout/_partials/head.swig开始出添加需要添加的代码.
    • google
      登陆google站点管理网站，具体操作方法同上.
  4. 提交sitemap

站内搜索

域名

blog文章数超过十篇，考虑申请域名。

留言评论

网址 : 多说

  • 创建多说账号
  • 安装多说
    • 填写自己的站点url
    • 创建duoshuo_shortname
  • 在_config.yml中添加duoshuo_shortname = {shortname}

注意：在page中需要disable留言，通过在page的header处添加comments: false

博客访问

不蒜子

网址 : 不蒜子
+ themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<span id="busuanzi_container_site_pv">
  &nbsp; | &nbsp; 本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

<span id="busuanzi_container_site_uv">
  &nbsp; | &nbsp; 本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

+ themes/next/layout/_macro/post.swig
在div class=”post-meta”结尾添加

1
2
3
4
5
6
7
8
9
{% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.page_pv %}                   
	&nbsp; | &nbsp;                                                                                      
	<span class="page-pv">{{ theme.busuanzi_count.page_pv_header }}                                      
	<span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>{{ theme.busuanzi_count.page_pv_footer }}
	</span>
{% endif %}
{% if not is_index %}
    <span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

注意：” ”是html中空格的意思

图床

七牛云

图片自动上传并返回link脚本，参考: 拖曳文件上传到七牛的Python脚本

参考

官方

HEXO官方网站

blog

知乎汇总页
github官方 jekyII
为project创建github pages
github官方 none jekyII
User, Organization, and Project Pages
custom domain redirect
automate deploy keys
using a custom domain with github pages
example
hexo博客搭建遇到的一些问题 – 速度，部署等等
Hexo静态博客搭建指南
如何在百度中搜索到你的blog

hexo & next development

ARAO’S Blog
next author’s blog
hexo 插件分析