【博客】Github Page + Hexo实现静态博客

发表于 | 分类于
字数统计: 1.6k 字 | 阅读时长 ≈ 7 分钟

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

博客部署

  1. 安装git

到git官网上下载（https://gitforwindows.org/）

  1. 下载node.js

windows直接进入这个网址（https://nodejs.org/en/download/），选择windows Installer一路下载就可以了。

检查以下命令，以判断node.js是否安装成功：

1
2
node -v
npm -v
  1. 安装Hexo

先在某个目录下创建一个文件夹blog，然后cd到这个文件夹下。git bash进入命令行，输入：

1
npm install -g hexo-cli

检查以下命令，以判断Hexo是否安装成功：

1
hexo -v
  1. 配置Hexo

先初始化Hexo：（假设目录名是blog）

1
hexo init blog

初始化之后，这个目录已经有一个博客的模板了，我们先来看看博客能否正常打开：

1
2
hexo generate
hexo server

输入这些命令后，到浏览器的地址栏输入：localhost:4000，如果出现了一个Hexo博客的页面，那么恭喜你已经配置成功了。

  1. 创建Github个人仓库

创建Github账号，new repository，创建一个名为：用户名.github.io的仓库。

然后检查邮箱，用户名配置以及添加SSH：

1
2
3
4
git config --global user.name "yourname"
git config --global user.email "youremail"

ssh-keygen -t rsa -C "youremail"

这样就在电脑中生成.ssh文件夹了，找到它，然后在github的设置中，找到SSH Keys的设置，点击new SSH Key，把id_rsa.pub的信息复制进去。检查是否成功：

1
ssh -T git@github.com
  1. 将Hexo部署到Github

将Hexo与Github进行关联，也就是将hexo博客部署到Github上，打开blog文件夹下的_config.yml，翻到最后，修改为：

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

安装deploy-git工具：

1
npm install hexo-deployer-git --save

最后：

1
2
3
hexo clean
hexo generate
hexo deploy

这样，过一会就可以在https://yourname.github.io 这个网站看到你的博客了！

博客个性化

原来默认的Hexo博客必然不是我们所喜欢的，我们可以通过各种个性化配置，来美化博客。

2.1 更换主题

主题对于博客的美观程度是影响最大的，我们可以选择最流行的NexT主题进行配置。使用方法也很简单：

  1. clone repo

在blog目录下，进入git bash，输入：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next
  1. 进入blog目录下的_config.yml文件

在100行左右的位置，修改为：

1
theme: next
  1. 更新Hexo
1
hexo clean && hexo g && hexo d

2.2 其他美化

  1. menu界面：

创建tags，categories等页面

详见：https://blog.csdn.net/Wonz5130/article/details/84666519

  1. 炫酷美化：

参考：https://www.jianshu.com/p/f054333ac9e6

关于文章的截断显示，可以在makedown中手动添加

1
<!--more-->

来实现。参考：https://www.jianshu.com/p/78c218f9d1e7

  1. 添加萌物：

在hexo根目录下执行以下命令，安装live2d插件

1
npm install --save hexo-helper-live2d

挑选喜欢的模型，可以在这个页面中选择（https://huaji8.top/post/live2d-plugin-2.0/）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

本人安装的是 live2d-widget-model-koharu

1
npm install live2d-widget-model-koharu

接下来：

  1. 在hexo的根目录创建名为live2d_models的文件夹

  2. 把之前安装的模型文件夹从node_modules文件夹复制到live2d_models中

  3. 在hexo根目录下的_config.yml中的最后面添加以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-haruto
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true

2.3 个人域名配置

参考：https://xiangzhihong.blog.csdn.net/article/details/53355036

注意：需要在/source/下自己新建CNAME文件，写入购买的域名，再将hexo推到github上。否则直接修改github page，在hexo下次部署时，github自动创建的CNAME文件被删除，就会链接失败。

功能简介

（1）发布/删除文章

发布/删除只需要在hexo根目录中的source/_post/文件夹下创建/删除 md文件，并输入 hexo d -g 就可以了。

发布也可以用 hexo new "文章名" 来创建。

（2）写文章时插入图片

在本地写makedown的时候能看到图片，但是部署之后，在网页上却看不到

具体解决办法参考：https://fuhailin.github.io/Hexo-images/

常见问题

（1）配置博客后，进入的页面访问出现一堆英文，如下：

1
{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}

这是因为hexo在5.0之后把swig给删除了，需要自己手动安装，输入以下命令：

1
npm i hexo-renderer-swig

（2）博客显示时没有css样式

这个问题可能是因为hexo根目录中_config.yml中的url配置有问题，可以配置成：（也跟hexo版本有关，这个方法不一定都可行）

1
url: https://yourgithubname.github.io

（3）侧边栏头像下面的日志跳转失败

这个是hexo主题的bug。可以找到\theme\next\layout\_macro\sidebar.swig，在49行左右：

1
<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

将其修改为：

1
<a href="{{ url_for(config.archive_dir) | trim }}">

（4）分页时，出现多余的标签代码

这也是一个主题bug，可以找到\themes\next\layout\_partials\pagination.swig，将：

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

替换为：

1
2
3
4
5
6
7
8
9
10
11
12
{%- if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left" aria-label="' + __('accessibility.prev_page') + '"></i>',
        next_text: '<i class="fa fa-angle-right" aria-label="' + __('accessibility.next_page') + '"></i>',
        mid_size : 1,
        escape   : false
      })
    }}
  </nav>
{%- endif %}

扩展功能

以下todo-list为本博客未来的扩展功能：

  • 实现字数统计，预计阅读时间
  • 实现评论系统
  • 配置个人域名
0%