Hexo+Github Page搭建个人博客

技术

我的博客

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

1.先全局安装脚手架

1
npm install hexo-cli -g

2.搭建博客文件夹

1
hexo init blog

3.进入建好的文件夹并安装依赖

1
2
cd blog
npm install

4.开启服务

1
2
3
hexo  server 
//简写
hexo s

官方文档

选择主题

主题链接

我选择的主题是 ocean

安装

1
$ git clone https://github.com/zhwangart/hexo-theme-ocean.git themes/ocean

启用

目录 theme 中 _config.yml 选择 theme: ocean

1
theme: ocean

更新

1
2
$ cd themes/ocean
$ git pull

配置

默认开启相册与关于菜单，关闭 Gitalk 评论功能，需要的同学 true 就可以了，关于 Gitalk 的使用 过程中遇到各种报错，有同样问题的，或者有兴趣想要了解 Gitalk 可以移步看一看。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# Menu
menu:
  主页: /
  归档: /archives
  相册: /gallery
  关于: /about
rss: /atom.xml

# Miscellaneous
favicon: /favicon.ico
brand: /images/hexo.svg

# Ocean 主页视频
# 多种格式的视频用于支持不同的浏览器，这里只需要配置好路径，前提是我把视频相关文件统一目录存放。
ocean:
  overlay: true      # 可选，false 则 Ocean 视频下方的笔触式遮盖不显示
  path: /images/ocean/      # 视频统一存放路径，格式 mp4/ogg/webm
  brand: /images/hexo-inverted.svg      # 可选，一个小 Logo

# 内容
excerpt_link: 阅读全文...
share_text: 分享
nav_text:
  page_prev: 上一页
  page_next: 下一页
  post_prev: 前一篇
  post_next: 后一篇

# fancybox
fancybox: true

# Local search
search_text: 搜索

# Gitalk
gitalk:
  enable: false      # 默认关闭评论 开启：true
  clientID:      # 申请 GitHub Application 网页上对应的 Client ID 与 Client Secret 参数
  clientSecret:      # 同上
  repo:      # 创建的仓库名称
  owner:      # Github ID
  admin:      # Github ID

Ocean 使用了 feathericon 图标库，菜单中的图标定义在“CSS source / css / _partial / navbar.styl”中，可根据需要进行更改或添加。
如果你不需要开启 相册 与 关于 菜单，需要删除或者注销掉他们的图标，如下边的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.nav-item
  &:nth-child(1)         // 主页
    .nav-item-link
      &::before
        content '\f12f'
  &:nth-child(2)         // 归档
    .nav-item-link
      &::before
        content '\f12a'
  //&:nth-child(3)         // 相册
  //  .nav-item-link
  //    &::before
  //      content '\f1a9'
  //&:nth-child(4)         // 关于
  //  .nav-item-link
  //    &::before
  //      content '\f174'

如果你想要开启 Tag（标签）、Categories（分类） 在菜单中显示，请看这里：关于 Ocean 使用中的问题

插件

  • 本地搜索 - 使用插件 hexo-generator-search 生成 xml 索引文件。

    1
    $ npm install hexo-generator-searchdb --save

    然后为 hexo 的配置文件 _config.yml 添加插件配置（注意：不是主题的配置文件，主题配置文件 Ocean 已经配置完成）：

    1
    2
    3
    4
    5
    6
    # hexo-generator-searchdb@1.0.8
    search:
      path: search.xml
      field: post
      format: html
      content: true

  • RSS - 如果您想启用RSS，还需要 hexo-generate-feed 插件，仅安装即可，Ocean 已经配置完成。

    1
    $ npm install hexo-generator-feed --save

文章封面图

需要写在 markdown 的 Front-matter 区域：

1
2
3
4
5
6
7
---
title: Post name
photos: [
        ["img_url"],
        ["img_url"]
        ]
---

需要注意的是，这里说的封面图并不是文章配图，文章配图按照 markdown 的语法写就好了！

相册

首先需要创建一个 page ，关于页面也一样需要创建。

1
$ hexo new page gallery

然后在编辑 markdown 的时候需要写在 Front-matter 部分，这种写法可能不是特别特别的好，希望能有更好的方法。

1
2
3
4
5
6
7
---
title: Gallery
albums: [
        ["img_url","img_caption"],
        ["img_url","img_caption"]
        ]
---

文章置顶

安装插件 hexo-generator-index-pin-top：

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

在需要置顶的文章的 Front-matter 区域加上 top: ture ，示例：

1
2
3
4
5
6
---
title: 新增文章置顶
author: zhwangart
date: 2019-07-18 15:45:03
top: ture
---

部署到 Github

安装 hexo-deployer-git。

修改配置：

1
2
3
4
5
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]

参考资料：https://hexo.io/zh-cn/docs/deployment

使用 Ocean 过程中遇到了问题？

ocean原文链接

Gittalk评论的使用