github + hexo 博客搭建记录

github + hexo 博客搭建记录

前期准备

下载安装

nodeJS: https://nodejs.org/en/
Git ：https://git-scm.com/download/win

配置

git配置

安装好git后，需要配置用户名称和邮件地址

$ git config --global user.name "username"
$ git config --global user.email "username@example.com"

github配置

在自己的GitHub账号下创建一个新的仓库，命名为username.github.io（username 必须与你的账号名保持一致)。

配置SSH key

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

1. 检查电脑是否已经有SSH KEYS
   $ ls -al ~/.ssh
   如果提示：No such file or directory 说明你是第一次使用git

2. 如果没有SSH KEY，则生成新的SSH KEY
   ssh-keygen -t rsa -C "your_email@example.com"
   然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key
   将刚复制的内容粘贴到key那里，title随便填，保存。

3. 测试是否成功
   $ ssh -T git@github.com
   如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：
   Hi h0ryit! You've successfully authenticated, but GitHub does not provide shell access.
   看到这个信息说明SSH已配置成功！

此时你还需要配置：

$ git config --global user.name "liuxianan"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

具体这个配置是干嘛的我没仔细深究。
以上的配置流程，我是用的别人的

安装Hexo

Hexo 官网有详细步骤。

注意事项：

1. 很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；

2. hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；

3. hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme下的，在配置文件中修改时，冒号后面必须有一个空格，否则可能会出问题

Hexo 创建项目

打开你 Git Bash ，进入到你项目所在目录：

#Hexo 的安装
$ npm install -g hexo
#查看版本，确认是否安装成功
$ hexo -version 
#建站
$ hexo init <project-name>
$ cd <project-name>
$ npm install
#生成静态页面（markdown文件转化为html文件）
$ hexo generate
#网站预览（默认的主题风格landscape）
$ hexo server

默认预览端口为：http://localhost:4000/页面正常显示则创建成功

部署到github

1. 配置站点_config.yml

deploy:
  type: git
  repo: https://github.com/h0ryit/h0ryit.github.io.git
  branch: master

1. 安装git插件
   $ npm install hexo-deployer-git --save

2. 部署上线

$hexo generate
$hexo deploy

成功后通过https://username.github.io进行访问

个性化配置

安装NexT主题

1. 下载主题
   https://github.com/iissnan/hexo-theme-next
   将其放置在./theme/next目录下（自己创建）
2. 启用主题
   打开站点配置文件_config.yml
theme: next
3. 验证主题
   hexo s --debug
   此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

站点_config.yml配置文件

title: h0ryit's blog #博客名字
subtitle: 格物致知，知行合一 #小标题
description: 技术分享 学习记录 #站点描述
author: h0ryit #作者名称
language: zh-Hans #语言
timezone:     #时区，可不填写

url: https://h0ryit.github.io/  #一般写自己的站点连接
root: / #设置根目录
permalink: :year/:month/:day/:title/  #生成的链接的格式
permalink_defaults:  #生成链接中各部分的默认值

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
  - README.md
  - CNAME
#目录一般不需要修改，这里需要改动的是skip_render，跳过指定文件的渲染，这里写上去着两个文件名便可

# Category & Tag
default_category: uncategorized  #如果撰写文章时没有设置分类，默认的分类选择。
category_map: #用于映射分类的别名。
tag_map: #用法和分类别名是一样的

需要配置的之前都已经说了，其他的保持默认配置就行。

主题配置文件_config.yml

注：不是站点配置文件，在themes/next目录下

选择布局

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces  #我选的Pisces布局
#scheme: Gemini

添加RSS

安装 hexo-generator-feed插件

$ npm install --save hexo-generator-feed

修改站点配置文件，在最后添加以下代码：

feed: # RSS订阅插件
  type: atom
  path: atom.xml
  limit: 0

plugins: hexo-generate-feed

修改主题配置文件如下：

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

菜单设置

图标开启

menu:
  home: / || home                          //首页
  archives: /archives/ || archive          //归档
  categories: /categories/ || th           //分类
  tags: /tags/ || tags                     //标签
  about: /about/ || user                   //关于
  #schedule: /schedule/ || calendar        //日程表
  #sitemap: /sitemap.xml || sitemap        //站点地图
  #commonweal: /404/ || heartbeat          //公益404

看看你需要哪个菜单就把哪个取消注释打开就行了

新建页面

在站点根目录输入以下代码新建页面：

$ hexo new page tags
$ hexo new page categories
$ hexo new page about

设置类型

打开站点根目录\source\tags、站点根目录\source\categories分别进行修改：

---
title: tags
date: 2018-08-06 08:52:25
type: "tags"
comments: false
---

---
title: categories
date: 2018-08-06 08:52:40
type: "categories"
comments: false
---

如果有集成评论服务，页面也会带有评论。因为后面我们会添加评论系统所以这里需要添加字段 comments 并将值设置为 false。

添加侧边栏社交链接

social:
  GitHub: https://github.com/h0ryit || github
  E-Mail: mailto:1425810321@qq.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

头像设置

打开主题配置文件找到Sidebar Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径，只需把你的头像命名为header.jpg（随便命名）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！

添加搜索功能

安装 hexo-generator-searchdb 插件

$ npm install hexo-generator-searchdb --save

打开 站点配置文件 找到Extensions在下面添加

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开主题配置文件找到Local search，将enable设置为true

添加评论系统

登陆来必力注册,注册后点击导航上的安装，选择免费的city版本，点击现在安装后填入网站的一些信息就可以获取到安装代码，框中的就是你的来必力id：

复制上边的id，在主题配置文件里面搜索livere_uid，在后面添加来必力id即可：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的来必力id}

另外可以点击用户头像进入管理界面个性化你的评论系统：

增加版权信息

在目录themes/next/layout/_macro/下添加my-copyright.swig，代码如下：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改themes/next/layout/_macro/post.swig，在代码:

    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

前面添加代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import "my-post-copyright"

最后到站点根目录/scaffolds/post.md，在两个---中间增加一行：

copyright: true

之后的每一篇文章都会自己加上版权信息，之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息。

添加背景动画

NexT已经自带了多种背景动画效果，你只需要根据需求在主题配置文件修改其中一个为true即可。

# Canvas-nest 
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

添加侧边栏友情链接

修改主题配置文件：

# Blog rolls
links_title: Links
#links_layout: block
links_layout: inline
links:
  csdn: https://blog.csdn.net/w0ryitang

自动折叠全文

进入hexo博客项目的themes/next目录

用文本编辑器打开_config.yml文件

搜索”auto_excerpt”,找到如下部分：

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable改为对应的false改为true，然后hexo d -g，再进主页，问题就解决了！

以上是我搭建博客的记录，效果如下
h0ryit’s blog

关于 hexo 的博文写作参考:https://hexo.io/zh-cn/docs/writing