XiSun的博客

Learning is endless

0%

使用 hexo 搭建 github 博客

发表于 更新于
本文字数： 4.5k 阅读时长 ≈ 4 分钟

使用工具版本

默认已经安装 node.js 和 git。

1
2
3
git version: git version 2.27.0.windows.1
npm version: 6.14.7
hexo version: 4.2.0

git 客户端与 github 建立 SSH 连接

1
Please make sure you have the correct access rights and the repository exists.

当 git 客户端出现以上提示时，说明 SSH 连接过期，需要重新建立连接。参考如下方式：

  1. 先查看下 name 和 email
1
2
3
4
5
6
# 查看user的name和email
$ git config user.name
$ git config user.email
# 如果没设置，按如下命令设置
$ git config --global user.name {$yourname}
$ git config --global user.email {$youremail}

  1. 删除 .ssh 文件夹下的 known_hosts，路径为：C:\Users\{$userrname}\.ssh

  2. git bash 输入命令

1
$ ssh-keygen -t rsa -C {$youremail}

一直按回车，等结束后，.ssh 文件夹下会生成两个文件：id_rsa 和 id_rsa.pub，将 id_rsa.pub 的内容全部复制。

  1. 登录个人 github 账户，进入 Settings → SSH and GPG keys，点击 New SSH key，将复制的内容粘贴到 Key 里，点击 Add SSH key。

  2. git bash 输入命令

1
$ ssh -T git@github.com

在弹出的确定对话框输入：yes。

hexo 安装

在 git bash 中依次输入以下命令：

1
2
3
4
5
6
$ npm install hexo-cli -g
$ cd f: # 可以是任何路径
$ hexo init blog
$ cd blog # 进入blog目录
$ npm install
$ npm install hexo-deployer-git --save

命令执行完成后，会在 F:\ 目录下，多一个 blog 文件夹。

修改 _config.yml 文件

修改 blog 根目录下的 _config.yml 文件，将 deploy 节点修改为如下内容：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:{$yourname}/{$yourname}.github.io.git
  branch: master

说明：_config.yml 文件的配置均为 [key: value] 形式，value 前面必须要有一个空格。

然后在 git bash 中输入以下命令，发布博客：

1
$ hexo deploy

访问自己的博客

博客地址：https://{$yourname}.github.io/

写一个自己的博客

hexo 的项目结构是在网站根目录的 source\_posts 目录下存放你的博客文档，以 .md 文档格式存储，默认已存在一个 hello-world.md 文章。

  1. 新建文章
1
$ hexo new <title>

会在 blog 的 source\_posts 目录下，新建一个名叫 <title>.md 文章，如：

1
2
INFO  Validating config
INFO  Created: F:\blog\source\_posts\tesss.md

之后，在文章中添加自己的内容即可，建议使用 Typora 编辑，其语法参考：如何使用 markdown？

  1. 发布文章
1
2
3
4
$ hexo clean # 清楚缓存
$ hexo generate # 生成静态页面
$ hexo server # 本地发布，浏览器输入localhost:4000即可访问博客
$ hexo deploy # 将public中的静态页面复制到.deploy_git文件夹中，并提交到github

至此，你的第一个自己的博客发布完成。

说明：以上 hexo 的命令，都要在 F:\blog 目录下执行。

修改博客的 themes

如果想修改自己博客的 themes，可以下载好想要的，然后拷贝到 blog 的 themes 目录下，然后修改 _config.yml 文件，将 theme 节点的值，修改为你下载好的 themes 的名称，如：

1
theme: next

之后，再按照你下载的 themes 的使用说明，做相应修改即可。

参考：NexT 的使用

NexT 中 tags 的使用

  1. 修改 NexT 目录下的 _config.yml 文件，取消 menu 菜单下 tags 字段的注释
1
2
3
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  1. 在 blog 根目录的 source 目录下，新建 tags 目录
1
$ hexo new page "tags"
  1. 修改 tags 目录下的 index.md 文件
1
2
3
4
title: tags
date: 2020-10-27 16:35:56
type: tags
layout: "tags"

NexT 中添加字数统计、阅读时长

  1. 安装 hexo-symbols-count-time 插件
1
$ npm install hexo-symbols-count-time

或者

1
$ yarn add hexo-symbols-count-time
  1. hexo 配置，根目录下的 _config.yaml 文件，添加 symbols_count_time 节点
1
2
3
4
5
6
# Post wordcount display settings
symbols_count_time:
  symbols: true # 文章字数
  time: true # 阅读时长
  total_symbols: true # 所有文章总字数
  total_time: true # 所有文章阅读中时长
  1. NexT 配置，themes 目录下的 _config.yml 文件，symbols_count_time 节点
1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: false # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示

Next 中添加访客统计、访问次数统计、文章阅读次数统计

  1. 打开 next 主题配置文件 \themes\next\_config.yml，搜索 busuanzi_count，把 enable 设置为 true。
1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye
  1. 同样是在 next 主题配置文件 \themes\next\_config.yml 下，搜索 footer，在它底下添加 counter，设值为 true。
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
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:

  # Powered by Hexo & NexT
  powered: true

  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

  counter: true
  1. 来到 themes\next\layout\_partials，找到 footer.swig 文件，打开编辑，在底下添加代码。
1
2
3
{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}
  1. 站点访客数、访问次数显示在网址底部，文章阅读次数在文章开头。

在博客中添加图片

md 文件中插入图片的语法为：![]()。

其中，方括号是图片描述，圆括号是图片路径。一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。

相对而言，使用相对路径会更加方便，设置如下：

  1. 安装 hexo-renderer-marked 插件
1
$ npm install hexo-renderer-marked
  1. 修改根目录下的 _config.yaml 配置

将：

1
post_asset_folder: false

修改为：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true
  1. 设置 Typora

点击文件 → 偏好设置，设置如下：

这样，在粘贴图片到文件中时，会自动将图片复制到 source\_posts 目录下，与 .md 文件同名的目录中。

之后，在将博客发布时，会自动上传到文章所生成的静态网页同级目录之下。