目录

  1. 用hexo搭建博客
    1. 准备工作
    2. 搭建博客
  2. 基本命令
  3. 更改主题，以Tranquilpeak为例
  4. 扩展功能
    1. siderbar
    2. author
    3. 分类
    4. 标签
    5. 时间排序
    6. 文章目录
    7. 搜索
    8. 缩略+缩略图
    9. 题图
    10. 分享和评论
    11. 隐藏
    12. 插入本地图片
    13. 插入音频、视频
    14. 字数统计
    15. 文章模板
    16. 定制404页面
    17. 网页图标
  5. careful

用hexo搭建博客

官方教程： https://hexo.io/zh-cn/docs/index.html
参考链接：http://blog.csdn.net/wx_jin/article/details/51027783

准备工作

  1. 安装Node.js https://nodejs.org/zh-cn/
  2. 安装Git https://git-scm.com/download/win
    一步步按指令安装即可。
  3. 注册GitHub账号

  4. 产生生产新的SSH Key
    在Git Bash执行代码：

    1
    ssh-keygen -t rsa -C "xxxx@gmail.com"

    成功后在C:\Users\xxx.ssh的文件夹下会产生两个文件id_rsa 以及id_rsa.pub

  5. 在GitHub网页右上角，点击你的头像，选择Settings-> SSH keys->New SSH key，将id_rsa.pub复制粘贴到“key”中

搭建博客

  1. 安装hexo
    在本地新建一个文件夹，右键，选择Git Bash；输入：

    1
    npm install -g hexo

    初始化：

    1
    hexo init hexo

    初始化成功会显示Start blogging with Hexo!这时在你刚才创建的文件夹里面会多出一个hexo文件，继续输入以下命令

    1
    2
    3
    4
    cd hexo
    npm install
    hexo g
    hexo server

    分别为打开hexo目录、安装依赖文件、部署形成文件、跑起hexo服务。
    这时提示Hexo is running at http://loalhost:4000/.
    接着我们打开浏览器，输入http://localhost:4000/ 便可看到默认的博客
    hexo已经安装完毕，我们已经可以看到默认的博客内容了。

  2. 配置GitHubPage
    在GitHub新建一个repository，并输入仓库名为你的Github名称.github.io。使用GitHubPage可以使用免费的域名搭建属于自己的静态网页，即使不搭建博客也可以在这里写一些静态网页。

  3. 将本地hexo项目托管到Github
    打开（记事本等）修改hexo目录下配置文件_config.yml，编辑最后面的deploy属性，加入以下代码：

    1
    2
    3
    type: git
    repository: https://github.com/username/username.github.io
    branch: master

    repository属性改成你的刚才创建仓库git地址。

  4. 安装hexo-deployer-git插件
    输入以下代码：

    1
    npm install hexo-deployer-git --save

    部署你本地的主题到GitHub上

    1
    hexo d

基本命令

1
2
3
4
5
6
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。更换主题需要运行该命令。
hexo g #generate 生成静态文件
hexo server # 启动服务器
hexo d #deploy 部署到GitHub
hexo g -d #更新后直接发布相当于g 和 d两条命令
hexo new "" #新建文章

更改主题，以Tranquilpeak为例

  1. 下载主题
    https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak（download），解压缩之后重命名为tranquilpeak复制到你的本地博客themes目录下
  2. 配置主题
    hexo目录下的_config.yml修改如下设置：
    1
    theme: tranquilpeaks

以下是针对Tranquipeaks的扩展配置，让功能更加强大更多个性化的设置。本文主要针对已实现的功能做说明，建议参考官方文档：https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak

扩展功能

theme/tranquilpeak的主题配置文件_config.yml里配置更多功能，建议先在hexo/_config.yml中将语言改成中文

1
language: zh-cn

该主题支持中文

siderbar

  • title: title 显示的题目，global.home 全局已经设置好了支持多语言，也可以设定自己想要的内容。
  • url: url 链接，可以是其他链接，也可以是本网站下的目录。
  • icon: icon 显示的图标。可以在Font Awesome找到你所需要的icon
    可以自定义侧边栏，只要按照“groups of links- > link- > title, link, icon”这样的层级关系自定义即可
    1
    2
    3
    4
    5
    6
    sidebar:
        menu:
            home:
                title: Home
                url: /
                icon: home

author

设置作者相关信息，但个人简介（bio）和工作信息需要在hexo\themes\Tranquilpeak\languages对应的语言配置文件中修改

1
favicon: favicon.png #你的头像

分类

1
hexo new page "all-categories"

该命令在source产生一个新的文件夹all-categories，文件夹内的文件index.md修改成如下：

1
2
3
4
5
---
title: "all-categories"
layout: "all-categories"
comments: false
---

在新建的文章开头即可添加分类

1
2
3
---
categories: 前端
---

浏览时便能按照分类来浏览

标签

同上，将categories改为tags即可

时间排序

同上，将categories改为archives即可

文章目录

在正文开始之前加入以下代码，自动根据标题级别生成目录

1
<!-- toc -->

搜索

针对本主题，在根目录下的_config.yml文件中，自己加入以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
algolia:
  appId: "appId"
  apiKey: "apiKey"
  adminApiKey: "adminApiKey"
  chunkSize: 5000
  indexName: "tranquilpeak"
  fields:
    - title
    - date
    - permalink
    - thumbnailImageUrl
    - tags
    - categories
    - excerpt
    - excerpt:strip

如果搜索功能无效，可能需要hexo clean，每次更新了内容都需要重新输入hexo algolia，无其它代码配置
支持对标题、日期、摘要、标签、分类的搜索，对正文暂不支持

缩略+缩略图

  • 缩略显示：在需要显示在首页之后的内容结尾处加上 <!-- more -->,在这之后的内容不会显示在首页。或者使用摘要<!-- excerpt -->，则摘要中的文字（标签之前）的文字不会出现在打开的正文中

  • 缩略图（移动端不加载），在PC端，可以在文章左侧或右侧：

    1
    2
    thumbnailImage:  welcome/welcome.png #在文章开头的Front-matter中写，路径为“文章名（文件名）/图片名”
    thumbnailImagePosition: bottom #图片位置，可以为left/right/bottom，第一篇文章放bottom，后面都建议统一放左侧或右侧

  • 缩略图制作：可以用画图工具将图片打开，重新调整大小（建议调整为140*140），如果非方形图，将最小的值设为140，接着选择（左下角有像素），裁剪，保存

    题图

    题图是一打开文章的全屏大图，

    1
    2
    3
    4
    coverImage: city.jpg #位置同缩略图
    coverSize： full/partial #full:全屏，partial：60%高度
    coverCaption: # 对图片的说明
    coverMeta: in/out # in: 标题、日期、分类等属于meta信息放在图片上（垂直居中），out: meta信息放在图片下

分享和评论

  • 分享

    1
    2
    3
    4
    sharing_options:
        facebook:
            icon: "fa-facebook-official"
            url: "https://www.facebook.com/sharer/sharer.php?u={{post.permalink}}"

  • 评论
    多说已经停止服务了，而disqus在国内也不能配置，甚至使用都不行，但配置不复杂，此处省略。
    本博客使用的是disqus，如果科学上网，即可使用该功能。

    隐藏

    对于目录中以”_”开头的文件，默认是不会渲染的，这个功能可以作为草稿功能更加方便，当然，也可以使用主题中的draft文件

    插入本地图片

    1
    ![](/img/picture.png) #这是在Tranquilpeak\source文件夹下面自己建的img文件夹而对于处理大量图片的文章是不适合的


安装插件：npm install hexo-asset-image --save
此时输入 hexo n "xxxx"新建文章时，会同时新建同名文件夹，将图片放入该文件夹内，并将图片地址写为：文件夹名/文件名即可，开头不需要输入斜杠

插入音频、视频

直接插/入如网易云音乐、优酷等网站提供的网页代码。markdown支持将网页代码直接解析。

字数统计

安装wordcount插件

1
npm i --save hexo-wordcount

在\Tranquilpeak\layout_partial 文件夹下，post.ejs文件中,根据插入页面的位置插入如下代码，在每篇文章中显示总字数

1
<span class="post-count">全文共计<%= wordcount(post.content) %>字</span>

在\Tranquilpeak\layout_partial 文件夹下，index.ejs文件中，根据插入页面的位置插入如下代码，在首页显示博客总字数

1
<span class="post-count" > 共计<%= totalcount(site) %> 字</span>

文章模板

在\hexo\scaffolds 文件夹下，分别有对文章、页面和草稿的模板，可以对Front-matter和正文修改模板。

定制404页面

在tranquilpeak文件夹下的source文件夹中放入404.html文件，当页面不存在，会自动跳转到该页面。如果是404.md，则需要在YAML front matter （开头—内）中配置

1
2
3
4
5
title: Page not found
meta: false
actions: false
comments: false
permalink: 404.html  #覆盖文章网址

可以不新建404.md文件，不过当404出现在二级或更多级的目录下时，css仍然在根目录下，此时无法加载css样式。

网页图标

在该主题下的_config.yml文件下找到如下属性：

1
favicon: favicon.ico

图片放在主题目录下的：assets\images

但此主题特殊之处在于，查看审查元素时可以看到，facicon在最后生成的网页中的地址是http://yoursite.com ，所以要将根目录下的url设置为网页地址。
但这样在server上测试时，如果图片没有先上传，就无法预览到图片。
这个问题是困扰了我很久的，网上搜遍了答案，也用了审查元素，最后的解决办法居然是，查看源代码，前端做了这么久，还不知道审查元素看到的不是源代码。

careful

  1. 在修改本地主题的时候一定要“clean”，记得做好备份：

    1
    2
    3
    hexo clean
    hexo g
    hexo d

  2. 如果只是修改了博客的内容，不需要反复generate，直接在server刷新就能看到最新的修改的效果了。