基于Hexo + Github Pages搭建个人博客

发表于 | 分类于

摘要：搭建个人博客

1. 搭建个人博客

1.1 安装 Git : 官网下载地址

1.2 安装 Node.js : 官网下载地址

1
2
3
4
# 打开cmd,以此执行以下步骤，验证是否安装成功。
path
node -v
npm -v

1.3 安装Hexo

  1. 在电脑中新建一个 blog 文件夹存放自己的博客，在文件夹内右键点击 Git Bash 进入命令窗口，执行以下代码：

    1
    npm install -g hexo-cli

  2. 初始化 Hexo，得到 hexo 文件夹，用于存放 Hexo 博客所有的文件，包括下面会讲到的主题文件，Git Bash 窗口执行以下代码：（无特别提示，以下代码基本都在 Git Bash 命令窗口执行）

  3. 配置Hexo, 进入 hexo 文件夹安装依赖，部署形成的文件，分别执行以下代码：

    1
    2
    3
    cd hexo
    npm install
    hexo generate

  4. 启动服务器：执行以下代码，可以看到服务器端口号是 4000

    1
    hexo server

  5. 打开浏览器，地址栏输入http://localhost:4000/ ，结果如下图，可以看到，初始化的 Hexo 博客搭建成功，可以访问。

2. 将初始化的 Hexo 博客部署到 GitHub Pages

  1. 注册一个 Github 帐号，新建一个仓库，仓库名为：compassblog.github.io ，如下图所示：（由于我的仓库已经创建，所以会显示仓库已经存在，并且这个仓库的名称必须严格按照 username.github.io 的格式来命名。username就是GitHub登录名）

    仓库

  2. 进入已经建好的仓库，点击 settings ，找到 GitHub Pages 选项，点击 Choose a theme 选择一个主题，然后点击 select theme 选择主题，如下图所示：（到这一步其实已经可以在地址栏访问自己选择的主题了，选择主题这一步其实可以忽略，但我觉得 GitHub 提供的主题还是蛮酷的，所以就附上这一步吧）

主题

  1. 配置 Git 个人信息：在 compassblog 目录打开一个 Git Bash 窗口，输入下面的命令

git

  1. 生成 SSH KEY，其实就是生成一个公钥和密钥，因为 GitHub 需要一个密钥才能与本地相连接。执行以下命令，并连续按 3 次回车生成密钥：

    ssh

  2. SSH KEY 生成之后会默认保存在 C:/Users/电脑名用户名/.ssh 目录中，打开这个目录，打开 id_rsa.pub 文件，复制全部内容，即复制密钥。

  3. 打开 GitHub ，依次点击 头像–>Settings–>SSH and GPG keys–>New SSH key，将复制的密钥粘贴到 key 输入框，最后点击 Add Key ，SSH KEY 配置成功，如下图所示：配ssh

  4. 修改 hexo 文件夹下的 _config.yml 全局配置文件，修改 deploy 属性代码，将本地 hexo 项目托管到 GitHub 上，如下图所示：

deploy

  1. 执行下面的命令，安装 hexo-deployer-git 插件，快速把代码托管到 GitHub 上(在hexo文件夹下，Gitbash里执行)

bushu

  1. 执行下面的代码命令，将 hexo 项目托管到 GitHub 上

    1
    2
    3
    hexo clean
    hexo g
    hexo d

  2. 浏览器地址栏输入 https://username.github.io/ 访问，可以看到博客已经部署到 GitHub 上，正常访问，如下图所示：

3.配置博客

Next 使用文档

Hexo主题配置

个人博客设置

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

1
theme: next

3.1 添加“标签”页面

  1. 在 Hexo 目录下，新建一个页面，命名为 tags（Hexo 目录，gitbash下） ：

    1
    $ hexo new page tags

  2. 注意：如果有启用 多说 或者 Disqus 评论，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

    1
    2
    3
    4
    title: 标签
    date: 2014-12-22 12:39:04
    type: "tags"
    comments: false

  3. 在菜单中添加链接。编辑 主题配置文件 ， 添加 tags 到 menu 中，如下:

    1
    2
    3
    4
    menu:
      home: /
      archives: /archives
      tags: /tags

3.2 添加“分类”页面

  1. 在 Hexo 目录下，新建一个页面，命名为 categories（Hexo 目录，gitbash下） ：

    1
    $ hexo new page categories

  2. 注意：如果有启用 多说 或者 Disqus 评论，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

    1
    2
    3
    4
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    comments: false

  3. 在菜单中添加链接。编辑 主题配置文件 ， 添加 tags 到 menu 中，如下:

    1
    2
    3
    4
    menu:
      home: /
      archives: /archives
      tags: /tags3.3插入本地图片

3.3 插入本地图片

  1. 更改站点配置文件 config.yml

    1
    post_asset_folder: true

  2. 在hexo 目录中执行

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

  1. 新建博客，在 post 中会生成一个和博客名相同的文件夹和一个 .md 文件

    1
    hexo new "newblog"

  2. 把图片放入文件夹，在 .md 文件中使用

1
{% imgurl Github-Pages-Hexo%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/newblog/pict.jpg ful-image alt:newblog/pict.jpg %}

3.4 设置阅读全文

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

在文章中使用 手动进行截断，这是 Hexo 提供的方式，推荐使用。
在文章的 front-matter 中添加 description，并提供文章摘录
自动形成摘要，在 主题配置文件 中添加：

默认截取的长度为 150 字符，可以根据需要自行设定

1
2
3
auto_excerpt:
  enable: true
  length: 150

3.5 MathJax

只讲一种简单的方法 － 插件。
安装

1
$ npm install hexo-math --save

在 Hexo 文件夹中执行：

1
$ hexo math install

在 config.yml 文件中添加：

1
plugins: hexo-math

对于不含特殊符号的公式，可以直接使用 MathJax 的 inline math 表达式. 如果含有特殊符号，则需要人肉 escape，如 \ 之类的特殊符号在 LaTex 表达式中出现频率很高，这样就很麻烦，使用 tag 能够省不少事。

具体用法见 Hexo MathJax插件.
MathJax用法总结

3.6 设置标题列表

  1. 取消段落标题自动编号

进入next主题，修改主题配置文件那里的number为false

1
2
# 路径名为：
hexo\themes\next\_config.yml
1
2
3
4
5
6
toc:
	# 目录超长自动换行
	enable: true
	wrap: true
	# 段落标题自动编号,false为取消自动编号。
	number: true

段落标题

  1. 修改目录默认展开
1
2
# 路径：
themes/next/source/css/_custom
1
2
3
4
5
6
// 文章目录默认展开
.post-toc .nav .nav-child { display: block; }
//目录字体大小调整
.post-toc ol {  
  font-size : 13px;     
}

4. 在 Hexo 博客发布文章并托管到 GitHub Pages

  1. 永远的 Hello Hexo ：在博客目录下的hexo文件夹内右键打开git bash here，在 Git Bash 命令窗口执行下面的命令，新建一篇文章 “Hello Hexo”，到博客目录的 /source/_posts/ 文件夹下可以发现，已经生成了标题为 Hello-Hexo.md 的博客文件，如图所示，我们直接编辑自己的文章即可。
1
hexo new "Hello Hexo"
  1. 给文章添加分类和标签：直接在所要编辑文章的头部添加如下代码即可
1
2
3
title: 基于Hexo + Github Pages搭建个人博客
date: 2018-11-19 20:51:27
tags:[Hexo]
  1. 本地启动，浏览器测试预览文章，如图所示：
1
hero s
  1. 添加阅读全文按钮：在文章的任意位置添加下面命令即可
1
<!-- more -->
  1. 所要发表的文章在本地预览无误后，在 Git Bash 命令窗口执行以下命令，发布到 GitHub Pages 上
1
2
3
hexo clean
hexo g
hexo d
  1. 上传成功后，在浏览器地址栏直接访问自己的域名： 直接访问，即可看到自己编写的文章已经发布到了 GitHub 上。并且每次发布文章到 GitHub 都需要执行下面的流程：
1
2
3
hexo clean
hexo g
hexo d