使用github pages和hexo搭建自己的博客

发表于 2017-09-25 更新于 2021-12-22 分类于其他阅读次数：本文字数： 5.8k 阅读时长 ≈ 5 分钟

我搭建博客的一个简单记录，使用 github pages 和 hexo 搭建的。

如果没有安装 node.js,git 的话要先安装
安装 hexo
npm install hexo-cli -g

升级

修改 package.json

{
  "hexo": {
    "version": ""
  }
}
hexo clean
npm install hexo-cli -g
npm install hexo --save

首先登录 Github 创建一个代码库，username.github.io
搭建基本的环境
安装 Node
安装 Hexonpm install hexo-cli -g
安装 git

新建立一个空目录用来放博客文件hexo init
生成目录如下
使用github-pages和hexo搭建自己的博客-5a6011e8.png

目录说明：

node_modules: nodejs 模块所在的目录，比如 hexo 相关的模块
scaffolds: 新文件模板目录
source: 博客主要的源码目录
posts: 文章目录，我们现在在里面能看到一个 hello-world.md 的文件，这就是我们的第一篇文章
drafts: 草稿目录（这里还未生成）
data: 博客的数据目录（这里还未生成，但是有些 Hexo 的插件会使用）
themes: 博客的主题目录
执行命令hexo s，就可以打开网页查看了http://localhost:4000/
生成一个静态博客hexo g执行后会生成一个 public 的目录，这里面就是静态博客的内容了

完整命令	简写指令	备注
hexo init		hexo 初始化
hexo clean		清楚旧的 public 生成文件
hexo generate	hexo g	生成 public 静态文件
hexo server	hexo s	本地
hexo deploy	hexo d	部署到 GitHub

升级 hexo

npm update -g
npm i hexo-cli -g

配置

config.yml 文件可以配置博客相关信息
一定注意：在 yaml 文件中，冒号后面一定要留一个空格，不然加载的时候会报语法错误。
安装 hexo-deployer-git
npm install hexo-deployer-git --save
配置 Github 仓库信息

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://MeZhengJun.github.io
  branch: master

评论系统

在主目录的_config.yml 里面添加如下配置

# 填写你自己的 shortname
disqus_shortname: zhengjunblog

然后在themes里面根据主题做适当的配置，主要就是disqus_shortname。

部署注意

git config --global user.name "yourName"
git config --global user.email "yourEmail@gmail.com"
ssh-keygen -t rsa -C "yourEmail@gmail.com"

打开刚刚生成的 pubkey，copy 内容
在 github 里面添加 ssh key，然后执行下面命令验证是否成功
ssh git@github.com然后就可以使用hexo d发布了

写文章

添加博客其实非常简单，我们只需要在source/_posts目录下创建一个 markdown 的文件就行了。不过为了我们更加方便创建和管理所有的文章，hexo 还提供了一个命令来完成这件事情：
hexo n post
并且在_config.yml 中还提供了一个配置来设置新文章的文件名字。
new_post_name: :year-:month-:day-:title.md

hexo n "我的博客"
hexo g
hexo s
hexo d

##更换主题
Hexo 基本所有的主题安装流程都差不多，我现在用的主题是 hexo-theme-next（https://github.com/iissnan/hexo-theme-next），安装它只有几步：
1 在博客根目录下执行如下命令
git clone https://github.com/theme-next/hexo-theme-next themes/next
2 修改根目录下的_config.yml，即可。
theme: next
最好使用hexo clean清除一下缓存
然后重新生成

hexo g
hexo d

hexo server #Hexo 会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

配置 SSH 私钥使用多个 github 账户，创建或修改 config 文件

C:\Users\username\.ssh\config
#github 01
Host github01  #昵称
    HostName github.com #指代的网址
    User git
    IdentityFile ~/.ssh/01_rsa #认证私钥路径
    PreferredAuthentications publickey

#github 02
Host github02  #昵称
    HostName github.com #指代的网址
    User git
    IdentityFile ~/.ssh/02_rsa #认证私钥路径
    PreferredAuthentications publickey

使用时

git remote add origin git@github01:username.github.io
git remote add origin git@github02:username.github.io

绑定域名

在 source 目录下创建 CNAME 文件
内容是域名信息zhengjunblog.top
检查域名是否生效
键入 ping+空格+您的域名（如：www.net.cn）
nslookup www.aliyun.com

http://MeZhengJun.github.io

设置完域名不生效就清除一下 dns 缓存
sudo killall -HUP mDNSResponder

ping MeZhengJun.github.io
151.101.77.147
185.199.109.153
185.199.111.153

阿里云 DNS 解析
CNAME 的@记录和 MX 的@记录不能共存问题
由于我的域名开通的时候，自动开通了企业邮箱，因此，在域名解析那里，阿里云自动生成了几条和邮件相关的解析记录
首先使用 ping 命令看一下自己的 github pages 的 IP 是多少
然后添加 A 类型解析，主机记录@，记录值是上面查到的 ip 地址
如果 github 的 ip 有变化了，就解析不到了。需要重新设置一下

CNAME 文件的用处，把域名和项目进行绑定，当访问域名时，DNS 解析到 github 的 IP 时，由于请求头中会带有域名信息，github 通过 CNAME 的绑定，查询到了你具体的项目，才能正确找到你的项目。

black-blue 主题

http://geeksblog.cc/hexo-theme.html
安装常用插件，建议全部安装

图片

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

如果使用 fancybox 就显示不出来图片

images viewer | 图片浏览器

http://www.fancyapps.com/fancybox/

fancybox: false

## rss插件
npm install hexo-generator-feed --save
## 站点sitemap生成插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
## 百度url提交
npm install hexo-baidu-url-submit --save

百度 url 提交插件

修改站点配置文件_config.yml 增加以下内容：

baidu_url_submit:
  count: 3 ## 比如3，代表提交最新的三个链接
  host: guoyanjun.top ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥， 请不要发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

检查站点配置文件里 url 设置
url 必须和百度搜索资源平台里的域名保存一致

...
url: http://zhy.one
root: /
permalink: html/:title.html
...

修改站点配置文件里 deploy 项

deploy:
- type: git
  repo:
    coding: git@git.coding.net:username/username.git,master
    github: git@github.com:username/username.github.io.git,master
- type: baidu_url_submitter  #增加这一行

新链接的产生，hexo generate 会产生一个文本文件，里面包含最新的链接
新链接的提交，hexo deploy 会从上述文件中读取链接，提交至百度搜索引擎。

博客全局配置，修改根目录下_config.yml

Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap

rss 设置

feed:
  type: atom
  path: atom.xml
  limit: 20

本地搜索插件集成

npm install hexo-generator-search –save

本地搜索配置

search:
  path: search.json
  field: post

站点地图，seo 搜索引擎需要

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

主题配置

按修改时间排序

在网站的_config.yml配置一下就可以了需要如下的插件，貌似自带了
https://github.com/hexojs/hexo-generator-index

index_generator:
  path: ''
  per_page: 10
  order_by: -updated

文章置顶

置顶插件
然后在最顶端的描述部分写上 top: 1 即可，后面的数字越大优先级越高

npm install hexo-generator-index –save

https://github.com/hexojs/hexo-generator-index

修改根目录下的_config.yml 文件

修改 generator.js 文件
修改 node_modules\hexo-generator-index\lib\generator.js 文件。
这个文件是控制生成文章的顺序的。修改成按 top 排序。没有 top，则按时间来排序。
文件内容如下：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals) {
    var config = this.config;
    var posts = locals.posts.sort(config.index_generator.order_by);
    var paginationDir = config.pagination_dir || 'page';
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
    return pagination('', posts, {
        perPage: config.index_generator.per_page,
        layout: ['index', 'archive'],
        format: paginationDir + '/%d/',
        data: {
          __index: true
        }
    });
};

增加 top 和 sticky 属性
sticky 是让 next 主显示图钉样式的。
top 是来定义顺序的。
如

---
title: 为Hexo的增加置顶功能
tags: hexo
categories:
top: 1
sticky: 1
---
# title1

首页文章显示摘要

---
这是摘要部分的描述
<!-- more -->
这是正文

数学公式

启用Mathjax插件
npm install hexo-math --save

站点配置文件

math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    src: custom_mathjax_source
    config:
      # MathJax config
  katex:
    css: custom_css_source
    js: custom_js_source # not used
    config:
      # KaTeX config

主题配置文件

mathjax:
  enable: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML