Nodejs安装Hexo搭建博客

使用nodejs的hexo插件，生成静态网页，然后部署到github上，使用github pages实现静态博客。
hexo主题选用Next，评论系统可以使用gitalk。

安装nodejs

https://nodejs.org/dist/latest-v6.x/node-v6.17.1-win-x64.zip
下载解压，设置环境变量

下载安装git
https://github.com/git-for-windows/git/releases/download/v2.22.0.windows.1/Git-2.22.0-64-bit.exe

安装hexo

需要指定版本安装，因为版本的变化，经常会导致出现各种问题
npm install -g hexo-cli@1.1.0

本地搭建hexo

hexo init blog
cd blog

调式运行博客：
hexo server

本地访问
localhost:4000

ctrl+c可结束运行

博客关联github

github注册账号

lizer2014
创建仓库lizer2014.github.io

git配置

1 2	git config --global user.name "lizer2014" git config --global user.email "646136740@qq.com"

git配置查看

1 2	git config --global user.name git config --global user.email

生成密钥

ssh-keygen -t rsa -C “646136740@qq.com“
将id_rsa.pub文件添加到github的ssh keys上

配置hexo的部署信息

blog项目下_config.yml文件，修改Deployment
deploy:
type: git
repo: git@lizer2014.com:lizer2014/lizer2014.github.io.git
branch: master

hexo部署到github上

cd blog
npm install hexo-deployer-git@0.3.0 –save

生成静态文件部署到github
hexo clean
hexo generate
hexo deploy

绑定域名

github setting custom domain

永久访问
此时有一个问题是每次更新博客都要在github上设置一次的个性域名, 这是因为在更新博客的时候会把CNAME文件给删除, 我们在blog/source目录添加一个CNAME文件可解决. 注意文件无后缀. 键入lizer2016.cn保存即可

Next主题安装

后面会有两个配置，一个是博客配置，一个是主题配置
所有命令行命令全部是在博客根目录打开命令行下输入的
git clone https://github.com/theme-next/hexo-theme-next themes/next
next 7.2.0
安装完成后，打开博客配置文件修改最上方的theme项为next

修改语言

修改博客配置文件下的language项为zh-CN
title: lizer’s blog
subtitle:
description: 我啊~嘿嘿
keywords:
author: lizer
language: zh-CN
timezone:

修改菜单及创建分类页

修改主题配置文件下的menu项，按需要打开菜单。例如我需要把标签页面打开，就把tags项前面的#去掉就行了。随后根据标签页或者分类页输入:

hexo new page categories // 来新建出分类页
hexo new page tags // 新建出标签页。
hexo new page about // 新建出关于页

menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
about: /about/ || user
archives: /archives/ || archive

在source每个对应页添加type和制定模板

修改主题风格

Next自带四种主题风格，可以在主题配置文件搜索Scheme项，将需要的风格前的#去掉，注意只能开启一个风格。我是用的是Gemini主题

设置作者头像

编辑主题配置文件，搜索修改字段 avatar，值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。
本地设置：放置在source/images目录下，设置为url: /images/avatar.jpg
avatar:
url: /images/avatar.jpg
rounded: true
rotated: true

这个rounded项可以设置头像为圆形，设置为ture后会自动根据头像的尺寸将头像变化为圆形或者椭圆，头像图片为正方形的话则为圆形。长方形的话长宽相差越大，椭圆越明显。
设置opacity的值控制头像的透明度，值为0 - 1。
rotated项为头像旋转，设置为true，则鼠标指到头像时头像会旋转。

设置代码高亮主题

NexT 使用 Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties
更改主题配置文件中的highlight_theme 字段，将其值设定成你所喜爱的高亮主题即可。

侧边栏社交链接

侧栏社交链接的修改包含两个部分，配置在主题配置文件中。social字段为连接，格式为显示文本: 链接地址 || Font Awesome图标名称

图标名称是 Font Awesome 图标的名字（不必带 fa- 前缀）。enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。例如: 百度: https://baidu.com || firefox
Font Awesome图标可以到Font Awesome查看

设置RSS

NexT 中 RSS 有三个设置选项，满足特定的使用场景。更改主题配置文件，设定 rss 字段的值：
false：禁用 RSS，不在页面上显示 RSS 连接。
留空：默认就是留空的，使用 Hexo 生成的 Feed 链接。你可以需要先安装 hexo-generator-feed 插件。
安装方法：根目录下命令行输入

npm install hexo-generator-feed –save

设置网站图标

在EasyIcon中分别找一张（16 16与32 32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon16.ico与favicon32.ico，然后把图标放在/themes/next/source/images或者放在根目录的/source/images文件夹里。
在主题配置文件内搜索favicon字段，把 small、medium字段的地址修改为/images/favicon16.ico 与 /images/favicon32.ico

实现全站/文章数字统计/阅读时长

根目录命令运行
npm install hexo-symbols-count-time –save
博客配置文件底部添加如下内容，保存。
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

添加顶部加载条

最新版本的Next主题是内置了加载条功能的。
根目录打开命令行，输入如下命令：

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
然后主题配置文件搜索pace字段，修改pace: false为pace: true即可开启加载条功能，修改下方的pace-theme字段还可以修改加载条的样式。
pace:
enable: true
theme: bounce

修改网页底部的小图标

主题配置文件搜索footer字段，修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字（不必带 fa- 前缀）。

animated自动为闪动开关，设置为true后图标会闪动。
以及可以设置图标颜色，color处填入16进制颜色代码即可。注意保留原来的双引号。

去掉页面底部的强力驱动信息及设置备案信息
主题配置文件搜索copyright字段，修改powered下的enable字段的true为false即可去掉强力驱动部分的内容。

同样的theme下的enable设置为false的话可以去掉页面底部的主题信息。

如果博客有备案的话，下方beian字段设置为true，icp后填写备案号。

添加动态背景

根目录打开命令行，输入：
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
主题配置文件搜索canvas-nest字段，enable项设置为true。

增加回到顶部按钮及显示当前浏览进度

主题配置文件搜索b2t字段，将b2t字段的false修改为true即可，（注意此功能只能用于Pisces和Gemini主题）。
将下方的scrollpercent字段设置为true即可实现当前浏览进度的显示。

增加本地搜索功能

首先安装插件，根目录命令行输入
npm install hexo-generator-searchdb –save
编辑博客配置文件，新增以下内容到任意位置：
search:
path: search.xml
field: post
format: html
limit: 10000
主题配置文件搜索local_search字段，设置enable为true

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成<i class="fa fa-tag"></i>，此处的图标用的是Font-Awesome，可以根据需要换成其他的图标。

在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

增加网站访问量统计

在主题设置文件中搜索busuanzi, 设置:
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

文章更新

文章中添加图片

本地存储的方式添加图片(我使用的方法)
开启资源文件夹功能. 在 _config.yml 文件中设置

post_asset_folder: true
在根目录下执行:

npm install https://github.com/CodeFalling/hexo-asset-image –save
确保在 source/_posts 下创建和 markdown 文件同名的文件夹，里面存放需要的图片，然后在 markdown 中插入图片

! hexo image

文章中添加下载资源

在source目录下新建download文件夹，将需要上传的文件复制到该目录, 例如xx.xls.

在_posts博文中，插入：

点击下载
值得注意的是, txt/md/jpg/png等格式点击会直接在浏览器打开, 想下载的话, 需要复制链接到下载软件中下载

首页自动折叠

主题配置文件
auto_excerpt:
enable: true
length: 200

打赏

主题配置
reward_settings:
Front-matter.
enable: true
animation: false
comment: 等我熬尽一日苦，喂你一口甜

reward:
wechatpay: /images/wechatpay.png

在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

更新文章文件

根目录命令行输入hexo new <模板> <文章名>新建文章
其中<模板>在scaffolds中，默认情况下有三个模板post、draft、page

参数功能路径
post 新建文章 /source/_posts/
draft 新建草稿 /source/_drafts/
page 新建页面（标签页，分类页等） /source/

更新普通文章

在blog目录下执行：

new post “post1”

- 编辑该文件（遵循Markdown规则）
- 修改起始字段
  - title 文章的标题
  - date 创建日期 （文件的创建日期 ）
  - updated 修改日期 （ 文件的修改日期）
  - comments 是否开启评论 true
  - tags 标签    //建议使用分类
  - categories 分类    //建议使用分类
  - permalink url中的名字（文件名）
- 编写正文内容（MakeDown）
- hexo clean 删除本地静态文件（Public目录），可不执行。
- hexo g 生成本地静态文件（Public目录）
- hexo d 将本地静态文件推送至github


## gitalk实现hexo博客评论功能
Register Application
在GitHub上注册新应用，链接：https://github.com/settings/applications/new
Application name： # 应用名称，随意
Homepage URL： # 网站URL
Application description # 描述，随意
Authorization callback URL：# 网站URL

主题配置

gitalk:
enable: true
github_id: lizer2014 # GitHub repo owner
repo: lizer2014.gitHub.io # Repository name to store issues
client_id: # GitHub Application Client ID
client_secret: # GitHub Application Client Secret
admin_user: lizer2014 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free modeforce language value
```

分享NeedMoreShare2

git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

主题配置
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

博客迁移

npm install hexo-migrator-rss –save
插件安装完成后，执行下列命令，从 RSS 迁移所有文章。source 可以是文件路径或网址。
$ hexo migrate rss

参考：
Next主题安装与优化
 使用gittalk实现hexo博客评论功能