Github+Hexo搭建博客

博客搭建

准备环境

Node.js下载并安装
Git下载并安装
安装Hexo，在命令行（即Git Bash）内输入命令：
$ npm install -g hexo-cli
初始化Hexo，并安装其依赖包
在命令行（即Git Bash）中输入命令：
1
2
3
$ hexo init <floder>
$ cd <floder>
$ npm install
新建完成后，在路径下（即），会产生以下文件和文件夹
1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
注：
- hexo相关命令均在站点目录下，用Git Bash运行。
- 站点配置文件：站点目录下的_config.yml。路径为_config.yml`
- 主题配置文件：站点目录下的themes文件夹下的，主题文件夹下的_config.yml。
  路径为<folder>\themes\<主题文件夹>\_config.yml
启动服务器。在路径下，命令行（即Git Bash）输入以下命令，运行即可：
hexo server //也可简写为 hexo s
浏览器访问：http://localhost:4000/

主题优化

选择主题

Hexo默认主题为landscape，推荐以下主题：

更多主题详见(https://github.com/search?q=hexo-theme)

应用主题

下载主题
将下载好的主题文件夹复制到站点目录下的themes文件夹下。

更改站点配置文件_config.yml的theme字段，更改为主题文件夹名称：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主题文件夹的名称>

主题优化

添加背景图

在 themes/<thenme floder>/source/css/_custom/custom.styl 中添加如下代码：

body{
    background:url(/images/bg.jpg); //背景图片所在目录
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

修改Logo字体

在 themes/<theme floder>/source/css/_custom/custom.styl 中添加如下代码：

@font-face {
        font-family: Zitiming;
        src: url('/fonts/Zitiming.ttf');
    }//导入自定义字体
    .site-title {
        font-size: 40px !important;
    	font-family: 'Zitiming' !important;
    }//应用字体到Logo

自定义鼠标样式

打开themes/<theme floder>/source/css/_custom/custom.styl,在里面写下如下代码：

// 鼠标样式
  * {
      cursor: url("/images/cursor.ico"),auto!important //将鼠标样式icon图片放置于themes\next\source\images目录下
  }
  :active {
      cursor: url("/images/cursor_active.ico"),auto!important //将鼠标激活样式icon图片放置于themes\next\source\images目录下
  }

注：

鼠标样式图片格式必须为icon

修改访问URL路径

默认情况下访问URL路径为：domain/2019/01/23/hexo-establish,修改为domain/share/hexo-establish。编辑 Hexo 站点下的_config.yml文件，修改其中的permalink字段：

1	permalink: :category/:title/

博文置顶

安装插件

1 2	$ npm uninstall hexo-generator-index --save $ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top即可：


---
title: 2019
date: 2019-01-23 16:10:03
top: 10
---

设置置顶标志
打开：/themes/<theme floder>/layout/_macro/post.swig，定位到<div class="post-meta">标签下,插入以下代码即可：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

在右上角或者左上角实现fork me on github

选择样式GitHub Ribbons,
修改图片跳转链接,将<a href="https://github.com/you">中的链接换为自己Github链接：
打开 themes/next/layout/_layout.swig 文件，把代码复制到<div class="headband"></div>下面。

插件配置

评论系统

	推荐指数	优点	缺点
Valine	4	每天30000条评论，10GB的储存	作者评论无标识
livere	4	多种账号登陆	评论无法导出
畅言	3	美观	必须备份域名
Disqus	1		需要翻*墙

Valine

1.1 获取APP ID和APP Key
请先登陆或注册LearnCloud，进入控制台后点击创建应用，
进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了。

1.2 填写APP ID 和 APP Key到主题配置文件_config.yml

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
  enable: true 
  appid:  hD6toShsJcsEQR6gT2iaw58b-gzGzoHsz 
  appkey:  Xn8ohIhFuwNcsDqVdPD6baA2 
  notify: true 
  verify: false 
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! //评论框内的水印文字
  avatar: mm 
  guest_info: nick,mail,link //评论所需信息
  pageSize: 10 
  visitor: false 
  comment_count: true

1.3 运行hexo g&&hexo d推送到博客。

错误分析

如果你使用Hexo遇到同样的问题,这里有一些常见问题的解决方案。

YAML Parsing Error

参数中包含冒号，请用加引号，如Last updated: %s
字段后面的冒号必须为英文冒号，如：last_updated:
字段冒号后面必须跟一个空格，如：last_updated: “Last updated: %s”

Server Problems

1	Error: listen EADDRINUSE

你可能使用相同的端口，同时开启了两个Hexo服务器。如果需要同时开启，可以尝试修改端口设置：

1	$ hexo server -p 5000

常用操作

创建文章

输入命令

1	$ hexo new [layout] <title>

参数说明

[layout]可以分为以下三种

参数名	功能	文章路径
post	新建博文	source/post
page	新建页面(如404，标签等)	source
draft	草稿	source/draft

草稿可以通过以下命令发布

1	$ hexo publish [layout] <title>

title不是博文标题，而是博文md文件名字。

文章模板

创建模板
在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：
1
$ hexo new blog “simon”
在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 blog.md，并根据其内容建立文章。
修改参数
以下是您可以在模版中使用的变量：

变量	描述
layout	布局
title	标题
date	文章建立日期