最新版hexo+github搭建个人博客

从学生时代开始就有做笔记和总结的习惯，以前的笔记都是在本子上，经常不知不觉就做了很多笔记，每次回头看到那么多工整漂亮（嗯，就是自恋>o<）的笔记成就感就油然而生。现在已经是信息时代了，购物也从线下搬到线上，想必笔记也应该如此。俗话说，“好记性不如烂笔头”，希望自己搭建的这个博客能够成为自己以后的笔记本。

本人博客预览：[email protected]

搭建环境：Windows10

前提条件

拥有github账户

已经有github账户，如果没有的话，先注册一个，参考这个链接GitHub注册及使用流程，注意邮箱要确认注册，否则无法新建repository。

踩坑提醒：

github设置公钥以后，第一次使用时出现以下提示，记得选择yes：

​ 这个提示出现的原因是：第一次连接远程主机的时候，为了避免中间人攻击——如果有人中间截获了你的登录请求，并且模拟ssh服务端的话，你的密码就会泄漏，所以ssh要询问一下，选择yes确认把服务端的信息加入本地的~/.ssh/known_hosts文件，下次再连接同一台主机的时候则不会再询问了。（参考如何用ssh key在网络上畅通无阻）

必要软件

• Notepad++

  Notepad++比 Windows中的Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合编写计算机程序代码。良心软件，非常好用，实力避坑！

• Haroopad/Typora

  Windows环境下比较好的Markdown文本编辑器，用于编写博客及修改部分hexo文档。

环境准备

node.js环境搭建

在nodejs官网下载新版的node.js环境安装，安装过程一路next即可，除了下图的选择要注意一下：

安装完按住Win+R打开cmd，运行node -v和npm -v查看node.js和npm的版本信息，出现以下界面则说明安装成功，否则请检查前面的安装过程，看是否有所遗漏：

Git环境搭建

首先下载Git安装文件：https://git-scm.com/downloads

按照以下步骤安装：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ka7YWOwv-1587783326388)(https://cloudyunfan.github.io/images/Git2.jpg)]

和Node.js一样，大部分情况都只需要保持默认设置，但是出于操作方便考虑，建议PATH选项按照下图选择：

上图选择的选项的解释是：出于安全考虑，只有在Git Bash中才能进行Git的相关操作。按照上图进行的选择，将会使得Git安装程序在系统PATH中加入Git的相关路径，使得你可以在cmd界面下调用Git，不用打开Git Bash了。

同样，在cmd窗口运行git --version，出现下图的版本信息则说明安装成功：

博客正式搭建

github设置

• 创建代码库

  在Repository name下填写yourname.github.io，Description 下填可以写一些描述，如图：

  踩坑提醒：

  图中的yourname必须为github的用户名，在这里就是cloudyunfan，否则在这里就无法用https://cloudyunfan.github.io直接访问，而只能用https://cloudyunfan.github.io/yourname.github.io访问。

• 开启gh-pages功能

  点击界面右侧的Settings，可以看到库的setting页面，向下拖动，直到看见GitHub Pages

  在GitHub Page中选择master分支：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpoqwiiW-1587783326404)(https://cloudyunfan.github.io/images/master.png)]

  去到你本地想建立项目的文件夹，克隆新建的库到本地（使用公钥注意用SSH链接）

  $ git clone https://github.com/yourname/yourname.github.io
  

  进入项目文件夹，增加一个index.html文件：

  $ cd username.github.io
  $ echo "Hello World" > index.html
  

  把变更推送到github上：

  $ git add --all
  $ git commit -m "Initial commit"
  $ git push -u origin master
  

  接下来就是可以访问https://yourname.github.io页面啦，此页面出现的是index.html的Hello World。如果可以正常访问页面，那么Github这边的配置则结束了。接下来讲解hexo这边的配置。

hexo配置

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

配置

假设我们在e盘新建了一个文件夹hexo，首先在cmd或MINGW64窗口（Git Bash打开）运行一下命令：

$ cd e:/hexo
$ npm install hexo-cli -g
$ hexo init blog

blog文件夹是我们通过初始化命令hexo init自动建立的。在cmd窗口运行hexo -v，出现下图的版本信息则说明安装成功：

$ hexo -v
hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.13.0
v8: 6.8.275.32-node.36
uv: 1.23.2
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件：

$ hexo init blog
$ cd blog
$ npm install

新建完成后，blog文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

接下来，hexo生成静态文件：

$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server，可以在http://localhost:4000/ 查看

网页运行http://localhost:4000/ 可以看到如下页面，则说明配置成功：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lA4opxtK-1587783326407)(https://cloudyunfan.github.io/images/hexo.png)]

到目前为止，hexo在本地电脑的安装配置已经全部结束，接下面讲解如何将hexo和github page关联起来。

踩坑提醒（坑有点多）：

• hexo g生成静态文件的时候报错

  $ hexo g
  ERROR Local hexo not found in E:\hexo\blog
  ERROR Try running: 'npm install hexo --save'
  

​ 解决方法：删除node_modules文件夹 ，执行npm install，详情可参考https://blog.csdn.net/xcantloadx/article/details/78296227

• hexo g报错

  $ npm install
  npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
  npm WARN deprecated [email protected]: no longer maintained
  npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
  npm WARN engine [email protected]: wanted: {"node":">= 6.9.0 <= 11.1.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
  

  仔细看警告，可以发现警告的意思是node.js环境的版本过低，这在安装的时候没有问题，可是后续会导致hexo命令失效的问题：

  $ hexo g
  Usage: hexo
  
  Commands:
  help Get help on a command
  init Create a new Hexo folder
  migrate Migrate your site from other system to Hexo
  version Display version information
  
  Global Options:
  --debug Display all verbose messages in the terminal
  --safe Disable all plugins and scripts
  
  For more help, you can use hexo help [command] for the detailed information
  or you can check the docs: http://zespia.tw/hexo/docs/
  

​ 解决方法：下载新版本的node.js安装

• hexo d的时候找不到部署器（后续部署的坑）

  $ hexo d
  ERROR Deployer not found: git
  

  解决方法：需要提前安装一个扩展npm install hexo-deployer-git --save

• 安装webpack出现警告

  $ npm install hexo-cli -g
  C:\Users\yunfa\AppData\Roaming\npm\hexo -> C:\Users\yunfa\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  

  出现原因：fsevent是mac osx系统的，在win或者Linux下使用了 所以会有警告，忽略即可。

关联hexo与github page

配置Git个人信息（以前配置过则不用配置）

git config --global user.name "cloudyunfan"
git config --global user.email "[email protected]"

可以通过$ git config --list查看Git配置

配置Deployment

找到路径e:/hexo/blog/下的_config.yml文件，配置deploy如下

deploy:
  type: git
  repo: [email protected]:cloudyunfan/cloudyunfan.github.io.git #github上的仓库SSH地址
  branch: master

写博客

执行以下命令新建博客：

hexo new post "your title"

然后在我的电脑的目录下e:\hexo\blog\source\ _posts 将会看到 your title.md文件，用MarkDown编辑器编辑文章，运行生成、部署命令：

hexo g   # 生成
hexo d   # 部署

等价于hexo d -g #在部署前先生成命令。部署成功后访问https://yourname.github.io将可以看到新的文章。

主题配置

Hexo安装过后,默认的主题是landscape，有两个比较好的主题推荐给大家。 Yilia 主题是为 hexo 2.4+制作的主题， 崇尚简约优雅，以及极致的性能。NexT主题简洁美观，是目前Github上Star最高的Hexo主题，支持若干种不同的风格，这个主题确实很成熟，优化、配置、扩展很多都集成了，比较简单。下面以NexT主题为例配置主题。

配置NexT主题

安装主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 再修改配置文件即可。

$ cd blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

当克隆/下载完成后，注意blog文件夹中有两个_config.yml文件，分别为站点配置文件和主题配置文件

.
├── _config.yml # 站点配置文件
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
    ├── landscape
    └── next
         └── _config.yml # 主题配置文件

打开站点配置文件， 找到 theme 字段，并将其值更改为 next。 启用 NexT 主题

theme: next

NexT 主题安装完成后我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好先用 hexo clean 来清除 hexo 的缓存。

验证主题

启动hexo本地站点并开启调试模式：

hexo s –debug

使用调试模式的好处是可以将详细消息记录到终端和debug.log 文件，在服务启动的过程，注意观察终端输出是否有异常信息，如果碰到问题，这些信息将帮助我们更好的定位错误。当终端输出：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

我们就可以使用浏览器访问http://localhost:4000，如果出现以下外观（NexT 默认的 Scheme是Muse），则说明主题安装成功：

hexo的scheme

Scheme	样式
Muse	默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist	Muse 的紧凑版本，整洁有序的单栏外观
Pisces	双栏 Scheme，小家碧玉似的清新
Gemini	与Pisces相似，阴影效果有所区别

# Schemes 注释掉不用的Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

基础信息设置

设置主题的语言、博客名字、站点描述、作者暱称等信息，编辑站点配置文件

# Site
title: 为梦想加油！！！ #博客名
subtitle: 大柔非柔，至刚无刚
description: 安而后能虑，虑而后能得 #站点描述可以是你喜欢的一句签名:)
keywords:
author: ** #暱称
language: zh-CN #设置语言为简体中文
timezone:

​ 目前NexT 支持的语言可以参考NexT官网

设定菜单内容

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

编辑主题配置文件， 菜单内容的设置格式是：item name: link。其中 item name是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。||运算符后面代表的是图标名称，如没有设置或者设置无效的 Font Awesome 图标名字，则会显示问号图标。

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  schedule: /schedule/ || calendar
  sitemap: /sitemap.xml || sitemap
  commonweal: /404/ || heartbeat
  psychology: /psych/

NexT 默认的菜单项有（斜体表示的页面要手动创建）

键值	设定值	显示文本（简体中文）
home	home: /	主页
archives	archives: /archives	归档页
categories	categories: /categories	分类页
tags	tags: /tags	标签页
about	about: /about	关于页面
commonweal	commonweal: /404.html	公益 404

设置菜单项的显示文本

在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的languages/{language}.yml文件

（{language} 为你所使用的语言）。

以简体中文为例，若你需要添加一个菜单项，比如 psychology。那么就需要修改简体中文对应的翻译文件languages/zh-CN.yml，在 menu 字段下添加一项：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  psychology: 心理学

请注意键值（如 home）的大小写要严格匹配

设置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改主题配置文件中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。

设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

• left - 靠左放置
• right - 靠右放置

sidebar:
  position: left

目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。

设置侧栏显示的时机

修改 sidebar.display 的值，支持的选项有：

• post - 默认行为，在文章页面（拥有目录列表）时显示
• always - 在所有页面中都显示
• hide - 在所有页面中都隐藏（可以手动展开）
• remove - 完全移除

sidebar:
  display: post

已知侧栏在 use motion: false 的情况下不会展示。 影响版本5.0.0及更低版本。

设置头像

编辑主题配置文件， 修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：

• 完整的互联网 URI：http://example.com/avatar.png
• 站点内的地址：将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在） 配置为：avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png

avatar: 
  url: http://example.com/avatar.png

添加插件

为了我们的博客能够更好的被搜索引擎收录以及被其他人订阅，我们可以添加sitemap、baidusitemap和feed插件，切换到你本地的hexo 的blog目录，在命令行窗口，输入命令：

$ npm install hexo-generator-feed -save
$ npm install hexo-generator-sitemap -save
$ npm install hexo-generator-baidusitemap -save

修改站点配置文件，增加以下内容：

# Extensions
Plugins: 
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidusitemap
# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
# sitemap
sitemap:
  path: sitemap.xml
# baidusitemap
baidusitemap:
  path: baidusitemap.xml

部署hexo d -g，就可以访问 https://cloudyunfan.github.io/atom.xml 和 https://cloudyunfan.github.io/sitemap.xml 、 https://cloudyunfan.github.io/baidusitemap.xml 这三个文件了。

参考资料

https://blog.csdn.net/gdutxiaoxu/article/details/53576018

https://www.jianshu.com/p/1c2e9f19d14f

http://theme-next.iissnan.com