henu_jizhideqingwa

Hexo+Github搭建静态博客

鉴于现在CSDN有时候会十分卡顿，于是临时决定利用github搭建一个静态的博客
这是我的博客: http://www.orzff.cn ，欢迎来踩

一. Hexo + Github 搭建博客：

跟着这篇博客走即可

二：Hexo 主题配置

Hexo目录下的_config.yml称为站点配置文件

Hexo/themes/next/目录下的_config.yml称为主题配置文件

1. next主题

下载next主题

 git clone https://github.com/theme-next/hexo-theme-next themes/next

在站点配置文件 _config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

在主题配置文件_config.yml中可以选择四种scheme，我选择的是Gemini

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2. 基本信息配置

配置站点配置文件_config.yml

title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言（简体中文是zh-Hans）
timezone: 网站时区（Hexo 默认使用您电脑的时区，不用写）

3. 菜单信息配置：

配置主题配置文件_config.yml

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

# Enable/Disable menu icons.
menu_icons:
  enable: true

4. 设置标签，分类页面

在Git-Bash中输入：

hexo new page "tags"
hexo new page "categories"
hexo new page "about"

这时在Hexo/source/下出现一个tags/index.md和categories/index.md

这时你修改index.md的属性，新加type属性

tags的index

---
title: 标签
data: 2019-08-10 00:11:16
type: "tags"
comments: false
---

categories的index

---
title: 分类
date: 2019-08-10 00:08:44
type: "categories"
comments: false
---

about的index

---
title: 这是我的自我介绍
layout: about
comments: false
---

comments: false是关闭评论功能

5. 搜索功能

在Hexo的根目录下执行

npm install hexo-generator-searchdb --save

站点配置文件_config.yml

search: # 本地搜索插件
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题配置文件_config.yml中

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

6. 头像设置

把你要作为头像的图片放到：Hexo/themes/next/source/images

然后更改主题配置文件_config.yml中的 Sidebar Avaatar

avatar: /images/header.jpg

7. 网站缩略图图标

把你要作为缩略图的图片放到：Hexo/themes/next/source/images

然后打开主题配置文件_config.yml,找到 favicon，修改成这样

favicon:
  small: /images/header.jpg
  medium: /images/header.jpg
  apple_touch_icon: /images/header.jpg
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

8. 修改链接文本样式

打开Hexo/themes/next/source/css/_common/components/post.styl，添加

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

9. 添加评论系统

注册登录来必力, 安装City，获得安装代码中的data-uid="xxx"

配置主题配置文件_config.yml,添加LiveRe Uid:

livere_uid: #你的LiveRe UID

10. 添加访问计数

next已经集成了busuanzi计数，编辑Hexo/themes/next/layout/_third-party/analytics/busuanzi-counter.swig

将

改为

主题配置文件_config.yml

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  total_visitors: true
  total_visitors_icon: user
  total_view: true
  total_views_icon: eye
  post_views: false
  post_view_icon: eye
  site_uv_header: -user">> 访客数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: -eye">> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: -file-o">>  阅读数
  page_pv_footer: 次