Hexo+github 博客搭建以及 NexT 主题配置

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

主要参考的博客：《github+hexo 搭建个人博客(超详细)》，《GitHub平台上Hexo博客系统的搭建》。过程简略的记录一下，把遇到麻烦的地方写详细点。

本地环境搭建

  1. git config --global user.email "xxx@qq.com" # 填写你github注册并且验证的邮箱；
  2. git config --global user.name "xxxx" # github 用户名；
  3. ssh-keygen# 会出现下面的内容，一直按Enter键就行；
  4. 打开用户目录下的 .ssh目录下面生成 id_rsa(私钥)id_rsa.pub(公钥)两个文件，打开id_rsa.pub，复制里面的内容,到 github: Settings -> New SSH key -> SSH and GPG keys -> (填写)Title -> (粘贴)Key -> Add SSH Key；
  5. 测试 ssh -T git@github.com，输出 You’ve successfully authenticated 表示添加key 成功。
  • 建主页仓库：
  1. github 账号注册；
  2. New repository -> (XXXX.github.io) Repository name -> Public -> (勾上)Initialize ... -> Creator repository；
  3. 同样的方法，另建一个仓库存放配置和文章，blogSource。
  • 创建本地仓库
  1. 新建gitBlog文件夹，然后，在此文件夹路径下git clone xxx/github/io.git。
  • 博客安装配置
  1. 安装 Node.js
  2. node -v //查看版本, 验证成功否
  3. 安装 ，打开git 或cmd
  • npm config set registry http://registry.cnpmjs.org/ # node 的源有很多，切换方式也很多，可以自行选择
  • npm install hexo -g　　　#全局安装hexo,可能需要3分钟 出现warn警告信息不用管。
  • npm update hexo -g 　　# 更新
  • npm install hexo-server --save 　#安装服务
  • npm install hexo-deployer-git --save
  1. D:\gitblog\hexo 目录下初始化 hexo。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mkdir hexo            # 创建一个文件夹，初始化hexocd hexo
hexo init             # 初始化 hexo 文件夹 成功就会提示
当你看到Start blogging with Hexo! 恭喜！框架就已经搭建好了
执行以下命令就可以在本地起服务,进入hexo 目录下
hexo server
然后访问 http://localhost:4000/，就能看到自己博客的雏形了
hexo文件夹的作用
hexo/_config.yml      # 这个是 hexo 站点配置文件
hexo/.deploy_git/     # 这个目录下面存放的是hexo 自带的git 配置
hexo/node_modules/    # hexo 需要的node js 模块
hexo/.npmignore       # 文件里面存放的是npm需要忽略的文件
hexo/package.json     # node.js 的配置文件
hexo/public/          # 存放要生成的静态网页，需要发布的内容
hexo/scaffolds/       # 生成文档的格式，用于 hexo new 命令 默认是post格式
hexo/source/          # 存放hexo new 生成的源文件，我们写的 md 博客就是在这里
hexo/themes/          # hexo 的主题 都在这里面
  1. 安装hexo依赖包和模块
  • npm install
  • node_modules文件夹中查看是否已安装的扩展(直接搜索扩展名字，有就代表安装了)，官网扩展； 
1
2
3
4
5
6
npm install hexo-server --save     # Hexo3把hexo-server服务器独立成模块,一些版本可能需要安装才能运行
npm install hexo-deployer-git --save 
npm install hexo-generator-searchdb --save   # 本地搜索
npm install hexo-generator-feed --save       # 用于生成RSS订阅
npm install hexo-generator-sitemap --save    # 用于生成搜索引擎网站地图
npm install hexo-generator-baidu-sitemap --save    # 用于生成百度搜索引擎网站地图
  1. 博客常用命令：
命令 命令简写 描述
hexo new “标题” hexo n “标题” 新建文章
hexo new page“标题” hexo n page “标题” 新建页面
hexo server hexo s 本地预览,Ctrl+C关闭
hexo generate hexo g 生成本地静态网页(有时候需要两次才能编译好)
hexo deploy hexo d 部署网页到仓库
hexo clean 清除缓存
cd 切换操作路径,如 cd /d/hexo 就是切换到D盘hexo文件夹

主题配置

主题是克隆的这个哥们的（点击），并在此基础上做了下修改。同时他的这两篇博文也有用(如何用github写博客，博客的图标、统计、评论)。官网的主题站，也可以进去选自己喜欢的主题。我比较喜欢 NexT 主题，因为它比较简洁。（hexo theme next安装及应用）。

NexT 主题官方，参考博文。

配置过程：1. 将主题文件 clone 之 themes 文件夹下；2. 去站点配置文件_config.yml(其在 hexo 文件夹下，另外的主题配置文件_config.yml在相应的主题文件夹下)下更改配置项为theme: next。

注意：

所有配置项后的:之后都要留至少一个空格。

百度统计：

自行注册（点击），另可参考这里（hexo的next百度统计）。

但是，他的“点击2”中的百度统计有关_layouts/default.html文件添加一段代码是针对他的另一重博客(jekyll)而言的，hexo 只需要去主题配置中添加hm.src = "https://hm.baidu.com/hm.js?uuid"; 中的uuid换成自己的即可，搜索关键字baidu_analytics后进行参数替换。

图标：

好像有两种方法，也不知道那种有效，反正我都照做了。

  1. 主题文件夹/source/images/下的favicon-16x16-next.png和favicon-32x32-next.png替换成自己想要的图标(点击)。
  2. 改名后的 ico favicon.ico要放在所用主题的 source 下，因为不确定，我站点 source 也放了，各种放。

阅读数，访问量：

搜索关键字busuanzi_count。

1
2
3
4
5
6
7
8
busuanzi_count:
    enable: true
    total_visitors: true
    total_visitors_icon: user
    total_views: true
    total_views_icon: eye
    post_views: true
    post_views_icon: eye

这里是和leancloud一样的功能，开了这个就不用开leancloud了吧？？

可以参考：（网站访问量统计 | hexo）。

评论：

搜索关键字valine，替换成自己leancloud的 apikey 和 appkey。传送至 valine。传送至leancloud。

站内搜索

安装 hexo-generator-search:

1
npm install hexo-generator-search --save

在站点配置文件中加入：

1
2
3
search:
    path: search.xml
    field: post

参考：（Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索）。

打赏功能

主题配置文件下搜索关键字reward_comment进行配置：

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！   # 可以修改自己的话
wechatpay: /images/wechat.jpg    # 换成自己的，图片放置路径：themes/next/source/images
alipay: /images/aipay.png    # 换成自己的

图片像素不能太大，200px*200px 就好，宽度太宽布局会出问题。

“关于”和“标签”页面

2、在命令行中输入$ hexo new page tags

3、这时会在在sources/tags里面有个index.md的文件，打开这个文件编辑

—title: tags
date: 2016-11-11 21:40:58
type: “tags”
—type: 改成tags

4、在主题配置文件中，在menu项下，要把tags页打开如menu:

home: /
categories: /categories

#about: /about
archives: /archives
tags: /tags 　　　　　＃ 配置项需要修改，确保标签页已打开。

#schedule: /schedule

#commonweal: /404.html
参考：（hexo 下的分类和表签无法显示，怎么解决？）。

关于页面：

1
2
3
4
5
---
title: 关于我
date: 2019-01-29 14:05:54
comments: false     # 可以关闭评论
---

标签和分页可以参考小居的这篇文章，第一篇博文及标签、分类页的建立。

关于图床

七牛云需要自己备案的域名，那只能从简书或者微博上做图床吧。

其他：

主题配置:_config.yml中搜索social:项，将github和微信配置项换成自己的链接。

主题配置:_config.yml中搜索avatar:项目：将其下url:项换成自己的头像链接。

绑定域名

申请域名有很多途径，阿里云，腾讯与等都可以，自己注册申请。

配置有问题是，会收到警告邮件：

1
2
3
4
5
6
7
8
9
The page build completed successfully, but returned the following warning for the `master` branch:

Your site's DNS settings are using a custom subdomain, www.andyvj.com, that's set up as an A record. We recommend you change this to a CNAME record pointing at AndyVJ.github.io. For more information, see https://help.github.com/articles/using-a-custom-domain-with-github-pages/.

For information on troubleshooting Jekyll see:

  https://help.github.com/articles/troubleshooting-jekyll-builds

If you have any questions you can contact us by replying to this email.

相应的主页的设置下的GitHub Pages处也会有警告显示，原因是域名解析没设置对。把CNAME主机记录改成www，具体如下：
域名解析

官方 help 页，官方 help 页1，网友提问，github help，github help2。

生成站点地图收录至搜索引擎

安装好这两个插件：

1
2
npm install hexo-generator-sitemap --save    # 用于生成搜索引擎网站地图
npm install hexo-generator-baidu-sitemap --save    # 用于生成百度搜索引擎网站地图

可以参考：（点击1），（点击2），百度经验。

感谢支持！