Hexo博客的搭建与Next主题修改

Hexo 博客的搭建

这篇文章介绍了Hexo的搭建,以及Next主题的使用和一些实用的更改主题方法。
参考了网上的另一篇文章以及官方文档,把所有模块都列出来了,哪里不会点哪里

准备工作与参考链接

  • nodejs 与npm的安装,windows下安装时默认勾选npm
    注意 - 如果npm install的时候连接不上
    那么可以通过npm config set proxy http://ip:port 来设置代理
  • theme-next 需要更改theme为next的时候,参考此链接修改

    安装Hexo

  • 安装Hexo

    1
    2
    3
    4
    mkdir hexo #创建一个文件夹
    cd hexo
    npm install -g hexo-cli
    npm install hexo --save
  • 初始化一个hexo目录 hexo init
    如果想清除该目录则hexo clean

  • 安装Hexo 插件:自动生成sitemap,Rss,部署到git等,建议安装
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    npm install hexo-generator-index --save
    npm install hexo-generator-archive --save
    npm install hexo-generator-category --save
    npm install hexo-generator-tag --save
    npm install hexo-server --save
    npm install hexo-deployer-git --save
    npm install hexo-deployer-heroku --save
    npm install hexo-deployer-rsync --save
    npm install hexo-deployer-openshift --save
    npm install hexo-renderer-marked@0.2 --save
    npm install hexo-renderer-stylus@0.2 --save
    npm install hexo-generator-feed@1 --save
    npm install hexo-generator-sitemap@1 --save

如何使用Hexo - Hello World

只需要四步

  1. Create a new post
    默认使用post,关于模版在scaffolds文件夹下,可以更改模版,比如添加categorises: 以添加分类

    $ hexo new “My New Post”
    More info: Writing

  2. Run server
    可以在本地预览你对博客所做的更改http://127.0.0.1:4000

    $ hexo server
    More info: Server

  3. Generate static files
    生成静态文件

    $ hexo generate
    More info: Generating

  4. Deploy to remote sites
    需要提前配置好要发布到的网站

    $ hexo deploy
    More info: Deployment

部署到Git

配置全局_config.yml
修改内容

1
2
3
4
deploy:
type: git
repository: git@github.com:{yourGitName}/{yourGitName}.github.io.git
branch: master

然后就可以通过hexo deploy来发布了,注意需要配置好github上的ssh密钥(yue)

使用Next主题与各种第三方服务

参考这个链接进行配置修改,很快就可以完成。注意theme主题也有一个_config.yml配置文件,不要弄混了
然后修改全局_config.yml中的theme: next 就可以了

添加tags与categories

可以让博客拥有标签和目录的功能,注意目录功能是有一级一级的先后顺序的。而tag是没有顺序的
运行下面两条命令,会自动生成相应目录,在目录下会有index.md
hexo new page tags
hexo new page categories
并且修改相应sources文件下各目录内的index.md

1
2
type: "tags" #或type: “categories"
comments: false

其中comments:false 的意思是关闭评论功能
最后在主题_config.yml下的Menu Settings部分,将相应的tags和categories目录配置好即可

第三方服务

多说评论

今天收到邮件,多说要在6.1关闭服务了…
多说建立一个站点,选择我要安装,然后把多说域名拷贝下来
填写到主题配置文件中

duoshuo_shortname: 你的多说域名

Disqus评论

由于多说的服务马上就要停了,所以要换一套服务,备选的方案有网易云跟帖,畅言,来必力,以及disqus
简单说一下区别,试用了网易云跟帖,发现github.io的域名已经不能注册了,畅言需要备案,而且还有盖章的功能,显得太乱,不适合个人博客,另外评论是要被监管的。来必力界面看起来还不错,但是免费版不支持微信,豆瓣等的登录,并且博客访问量大于1500之后,可能会有广告,尤其是试用了一下,发现加载很慢,想来想去还不如用disqus,反正都是不支持国内sns登录的
disqus注册个账号,然后建一个站,会给你一个站点名,随后将这个名字,填写到

disqus_shortname: your_name

最后还可以在disqus设置允许以游客发身份回帖,这样防止被墙的无法登录不存在网站的问题。另外游客的回复是需要管理员approve之后才能正常显示的。
另外需要注意,网站需要开启https访问才可以加载disqus模块,具体代码在这里

百度统计

需要注册一个账号,并且打开代码统计部分
hm.src = "https://hm.baidu.com/hm.js? 复制问号后面的一段字编辑到主题配置文件中

baidu_analytics: 那串字符

阅读次数统计

参见这篇文章进行配置
需要注册LeanCloud的账号

搜索

站内搜索

npm i -S hexo-generator-json-content
并且在主题配置文档中设置 local_search true
github链接

主题优化

自动定位搜索框的焦点

见我写的另一篇文章

更改颜色与主题

  • 自定义页面显示方式
    next\source\css\_custom\custom.styl中更改
    比如说更改超链的颜色为蓝色,参考了这篇文章,代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    .post-body p a {
    color: #0593d3;
    border-bottom: none;
    &:hover {
    color: #0477ab;
    text-decoration: underline;
    }
    }
  • 更改字体颜色
    \themes\next\source\css\_variables 更改base.styl.比如想更改选中字体的颜色,就可以更改selection-bg

  • 更改或添加主题
    \themes\next\source\css\_common\components\highlight中更改theme.styl

背景动画

- 将 [particle.js](https://github.com/ilovin/ilovin.github.io/blob/master/js/src/particle.js) 文件添加到 `\themes\next\source\js\src` 文件目录下
- `\themes\next\layout\_layout.swg`,在`</body>`前添加
1
2
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>

设置首页不显示全文(而是阅读更多)

在主题_config.yml
如下所示,改成True

1
2
3
auto_excerpt:
enable: True
length: 150

更美观一些的方式是在文章自己认为合适的位置添加
<!-- more -->