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

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

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

安装

安装node.js
// 安装 cnpm 避免 npm 不可用的问题 安装成功以后，将npm改成使用cnpm安装模块即可
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装git

// 更新 Node.js 项目需要使用 npm-check 和 npm-upgrade 两个包。
npm install -g npm-check
npm install -g npm-upgrade

// 安装hexo
npm install hexo-cli -g

// 检查升级版本
npm-check
// 更新 package.json 文件
npm-upgrade
// 按照 package.json 文件内容进行更新
npm install --save

vscode markdown 插件

// 图片插件
npm install https://github.com/CodeFalling/hexo-asset-image --save

git部署插件
npm install hexo-deployer-git --save

// 配置 git 用户，生成 ssh 密钥对
git config --global user.name "yourName"
git config --global user.email "yourEmail@gmail.com"
ssh-keygen -t rsa -C "yourEmail@gmail.com"
// 配置git 指定私钥位置 需要在 git 仓库下执行
// Windows环境中使用/作为路径分隔符，--global表示全局配置，不加则只对当前Git项目生效。
git config core.sshCommand "ssh -i e:/ZhengJunBlog/blogHome"

admin权限打开 power shell 
查看 ssh-agent 状态
Get-Service ssh-agent
// 设置为手动启动
Get-Service -Name ssh-agent | Set-Service -StartupType Manual

// 运行 ssh-agent
ssh-agent

// 加入私钥
ssh-add priv_key

ssh -T  git@github.com
// 指定本地的 私钥 
ssh -T -i blogHome git@github.com


// 图片插件 Paste Image
Paste Image: Base Path
${currentFileDir}/${currentFileNameWithoutExt}

Paste Image: Default Name
YYYYMMDD_HHmmss

Paste Image: Insert Pattern
<img alt="${imageFileName}" src="${currentFileNameWithoutExt}/${imageFileName}" width="500" height="">

Paste Image: Path
${currentFileDir}/${currentFileNameWithoutExt}


markdown all in one
markdown preview github styling

Markdown 语法检查器
markdownlint

安装 MdTableEditor 扩展，火箭提升表格编辑效率

更新 next 主题
cd themes/next
git pull

配置

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

next 主题配置

Scheme Settings 
scheme: Pisces

language: zh-Hans

搜索 menu 打开对应的栏目标签

浏览页面显示当前浏览进度
搜索关键字 scrollpercent，把 false 改为 true。

启用本地搜索功能
local_search:
enable: true

设置网站图标
图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里

增加文章字数统计及阅读时常功能
https://github.com/theme-next/hexo-symbols-count-time
npm install hexo-symbols-count-time
搜索关键字post wordcount,修改如下

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."


文章置顶功能
移除默认安装的插件
npm uninstall hexo-generator-index --save
安装新插件:
npm install hexo-generator-index-pin-top --save

最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：
设置top的值（大的在前面） 文章 b 便会显示在文章 a 的前面

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

如果使用fancybox就显示不出来图片，有时间查看一下

images viewer | 图片浏览器

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

fancybox: false

站点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必须和百度搜索资源平台里的域名保存一致

修改站点配置文件里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

本地搜索插件集成

如果使用next主题配置如下：

npm install hexo-generator-searchdb --save

在站点配置文件中添加

search:
  path: search.json
  field: post
  format: html
  limit: 10000

主题配置文件

# Local search
local_search:
  enable: true

下面不是next主题的搜索配置

npm install hexo-generator-search --save

本地搜索配置

search:
  path: search.json
  field: post

如果上面配置不行，就同时安装下面的

npm install hexo-generator-search --save

要注意如果文件内容为空会导致搜索功能不好用，另外使用json格式，xml格式解析有问题。

next主题的搜索代码在 layout/_third-party/search

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

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

RSS支持

安装RSS插件

npm install hexo-generator-feed --save

编辑网站根目录下的 _config.yml，添加以下代码开启

# RSS订阅支持
plugin:
- hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

主题开启 RSS 支持，根据不同主题处理不同，next默认支持
这个东西还挺不错的，之前一直都没注意。现在使用feedly订阅。

数学公式

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

git仓库

npm install hexo-deployer-git --save

配置Github仓库信息
在~/.ssh/config文件中添加

Host githubblog
        User ZhengJun2018
        Hostname github.com
        IdentityFile ~/project/ZhengJunBlog/blogMe

添加路径下面的私钥（xxxxx请替换成自己sshkey的文件名）
ssh-add ~/.ssh/xxxxx

deploy:
- type: git
  repo: git@githubblog:MeZhengJun/MeZhengJun.github.io.git
  branch: master
  name: MeZhengJun
  email: aslucky1977@gmail.com

连接内部文章

{% post_link markdown-learning-by-maxiang 点击这里查看这篇文章 %}
markdown-learning-by-maxiang是你的文章名称。如果文章不存在，这段代码将会被直接忽略。
点击这里查看这篇文章是该链接的标题。如果置空，则自动提取文章的标题。