hexo博客搭建指南

废权 • 2017-05-01 • 其他

自己在腾讯云买了一个域名半年来都不知道做什么（学生党购买腾讯云只要1块钱！！！），Hexo优雅整洁深深的把我给吸引住了，于是动手搭了一个博客出来，在搭建博客的过程中碰到很多问题，我在参考别人的博文的基础上整理此文，一是方便其他搭建自己的人博客，二是给自己的学习之旅做个总结。

我的博客地址：blog.yjscloud.com

Hexo介绍

Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github和Heroku上。

  • 超快速度
  • 支持MarkDown
  • 一键部署
  • 丰富的插件
    下面的搭建过程都是以我的博客为例：blog.yjscloud.com

安装所需要的软件

Node.js

node.js可以去官网下载对应的最新版本的安装包
检验是否安装成功：

$ node -v

安装git

git的使用教程可以参考我博客中的两篇git的学习笔记，我相信你可以在很短的时间内学会git的使用。接下来我们还要去github官网注册一个git账号，官网地址

注册过程我就不再赘述，如果没有办法访问github的网站请挂上vpn后再访问。

安装hexo

$ sudo npm install hexo-cli -g

非Mac的电脑需要使用如下命令：

$ npm install hexo-cli -g

搭建hexo博客

创建博客目录yjscloud.github.io

$ sudo hexo init yjscloud.github.io
$ cd yjscloud.github.io
$ sudo npm install

启动博客

$ hexo clean
$ hexo g
$ hexo s

新建文章

hexo new post "title"  # 生成新文章：\source\_posts\title.md，可省略post

编辑文章

打开新建的文章\source_posts\postName.md：

title: HelloWorld！ # 文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2017-5-1 19:54:26 # 文章生成时间，一般不改
categories:   # 文章分类目录，参数可省略
    - 随笔
    - 瞬间
tags:   # 文章标签，参数可省略
    - hexo
    - blog # 个数不限，单个可直接跟在tags后面
---
这里开始使用markdown格式输入你的正文。

多级分类语法格式：（标签也可以用类似的写法）

# 第一种
categories:
  - 一级分类
  - 二级分类
  - etc...

# 第二种：
categories: [一级分类, 二级分类]

首页文章预览添加图片：

photos:
  - http://xxx.com/photo1.jpg
  - http://xxx.com/photo2.jpg

正文中可以使用设置文章摘要 如下:

以上显示在摘要中
<!--more-->
以下是余下全文

more 以上内容即是文章摘要，如果设置了主页只显示摘要，则more以下内容点击 Read More 链接打开全文才显示。

注：

hexo g == hexo generate # 生成

hexo d == hexo deploy # 部署 # 可与hexo g合并为 hexo d -g

hexo s == hexo server # 本地预览

hexo n == hexo new # 写文章

插入图片

博客中的图片可以直接放在source文件夹下，部署时上传到Github仓库中。但是Github项目容量有限，而且主机在国外，访问速度较慢，把图片放在国内的图床上是个更好的选择。我用的是七牛云存储，大家可以去七牛官网去注册一个账号即可。

免费用户实名审核之后，可以获取10GB永久免费存储空间、每月10GB下载流量、每月10万次Put请求、每月100万次Get请求，做图床绰绰有余。具体使用方法就自己去看官方文档吧~~~很简单的

注：

Markdown 插入图片的语法为：

![](图片网址)

配置博客

全站配置

注意：文件中配置项的冒号后面必须加空格，否则报错

下面有些选项要配置后文的插件才有效，文件中已注明。

  • 整站的配置：博客根目录下的_config.yml文件。

下面是我的博客配置文件内容


# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 戏子登台
subtitle: 唱一曲词，戏子登台，人生若只初相见，卖弄风骚为谁演。
description: 独孤九剑，剑指运维！
author: Pan # 作者，在站点左下角可以看到
avatar: http://oovxjr0mr.bkt.clouddn.com/WechatIMG8.jpeg # 头像。Next主题增加的字段
language: zh-Hans # 语言。Next主题增加的字段
timezone:
time: 2017 # 博客建立年份，Next主题增加的字段

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

social:
  Github: https://github.com/yjscloud
  Weibo: http://weibo.com/5655429866
  Email: mailto:yjscloud@gmail.com
  zhihu: https://www.zhihu.com/people/zhao-zi-long-8-52

# Swiftype Search Key
swiftype_key: xFvELz3zTWLevZ-Gjxdd

# title, chinese available
links_title: 友情链接
# links
links:
  博客园: http://www.cnblogs.com/yjscloud/
  我的信息: http://blog.yjscloud.com/about/
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.yjscloud.com
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:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

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

# 百度  # 需要安装插件 npm install hexo-generator-baidu-sitemap@0.1.1 --save
baidusitemap:
  path: baidusitemap.xml

sitemap:
  path: sitemap.xml

search:
  path: search.xml
  field: all

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:yjscloud/yjscloud.githut.io.git

index_generator:
  per_page: 10 ##首页默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 20 ##归档页面默认20篇文章标题
  yearly: true  ##生成年视图
  monthly: true ##生成月视图

tag_generator:
  per_page: 10 ##标签分类页面默认10篇文章

category_generator:
  per_page: 10 ###分类页面默认10篇文章

更换博客主题

Hexo博客可以安装不同的主题，这里我们只说最火的Next主题。首先我们在自己电脑里的博客文件夹内（即username.github.io文件夹内）

  • 在博客根目录下执行：
git clone https://github.com/iissnan/hexo-theme-next.git themes/next。

  • 启用：修改博客根目录下的_config.yml配置文件中的theme属性，将其设置为next

  • \themes\next_config.yml修改主题配置。

我的_config.yml文件：

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: http://oovxjr0mr.bkt.clouddn.com/favicon.png

# Set default keywords (Use a comma to separate)
keywords: " Linux, Python, RedHat"

# 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

# Specify the date when the site was setup
#since: 2015

# icon between year and author @Footer
authoricon: heart

# Footer `powered-by` and `theme-info` copyright
copyright: true

# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: false

# If true, will add site-subtitle to index page, added in main hexo config.
# subtitle: Subtitle
index_with_subtitle: false

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
#  Linux: /Linux
#  Python: /Python
#  RedHat: /RedHat
  #sitemap: /sitemap.xml
  #commonweal: /404.html

# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat

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

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

# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
#     light, light italic, normal, normal italic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  host:

  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: Lato

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family:

  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family:

  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:
    size:

# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
#social:
  #LinkLabel: Link

# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo

# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true

  # Sidebar offset from top menubar in pixels.
  offset: 12
  offset_float: 0

  # Back to top in sidebar
  b2t: false

  # Scroll percent label in b2t button
  scrollpercent: false

# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

# Automatically saving scroll position on each post/page in cookies.
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

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

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
#   enabled: [true/false] - Replace with specific image
#   image: url-of-image   - Images's url
custom_logo:
  enabled: false
  image:

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:
  enable: false
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

# Han Support docs: https://hanzi.pro/
han: false

# Disqus
disqus:
  enable: false
  shortname:
  count: true

# Gentie productKey
gentie_productKey: b3a09e175e704bb0a23058b39947aa9f

# changyan
changyan:
  enable: false
  appid:
  appkey:

# CNZZ count
cnzz_siteid: true

# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 0
  #admin_nickname: Author

# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true

# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
  enable: false
  num_of_posts: 10  # min posts num is 1
  width: 100%       # default width is 550px
  scheme: light     # default scheme is light (light or dark)

# VKontakte API Support.
# To get your AppID visit https://vk.com/editapp?act=create
vkontakte_api:
  enable: false
  app_id:       #<app_id>
  like:         true
  comments:     true
  num_of_posts: 10

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>

# 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: false
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

# Tencent analytics ID
# tencent_analytics:

# Tencent MTA ID
# tencent_mta:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
  enable: false
  calendar_id: <required>
  api_key: <required>
  orderBy: startTime
  offsetMax: 24
  offsetMin: 4
  timeZone:
  showDeleted: false
  singleEvents: true
  maxResults: 250

# Algolia Search
algolia_search:
  enable: false
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"

# Local search
local_search:
  enable: false
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

# External URL with BASE64 encrypt & decrypt
# Usage: {% exturl text url "title" %}
# Alias: {% extlink text url "title" %}
exturl: false

#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Motion
use_motion: true

# Fancybox
fancybox: 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

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

# Assets
css: css
js: js
images: images

# Theme version
version: 5.1.1

个性化配置

sitemap 插件

谷歌与百度的站点地图，前者适用于其他搜索引擎，用来手动提交以增加收录

安装：

sudo npm install hexo-generator-sitemap@1 --save
sudo npm install hexo-generator-baidu-sitemap@0.1.1 --save

_config.yml添加代码：

baidusitemap:
  path: baidusitemap.xml

修改页面宽度

现在一般都用宽屏显示器，博客页面两侧留白太多，调整一下宽度。
打开\themes\next\source\css_common\components\post\post-expand.styl文件，找到

@media (max-width: 767px)

改为

@media (max-width: 1080px)

打开\themes\next\source\css\ _variables\base.styl文件，找到

$main-desktop                   = 960px
$main-desktop-large             = 1200px
$content-desktop                = 700px

修改$main-desktop和$content-desktop的数值：

$main-desktop                   = 1080px
$main-desktop-large             = 1200px
$content-desktop                = 810px

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将font-size-base改成16px：

$font-size-base           = 16px

修改网页配色

打开\themes\next\source\css\ _variables\base.styl文件，找到文件开头的colors for use across theme，加入自定义颜色：

// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 下面是我自定义的颜色
$my-link-blue = #0593d3  //链接颜色
$my-link-hover-blue = #0477ab  //鼠标悬停后颜色
$my-code-foreground = #dd0055  // 用``围出的代码块字体颜色
$my-code-background = #eee  // 用``围出的代码块背景颜色

修改超链接颜色

改掉这几行：

// Global link color.
$link-color                   = $my-link-blue
$link-hover-color             = $my-link-hover-blue
$link-decoration-color        = $gray-lighter
$link-decoration-hover-color  = $my-link-hover-blue

修改小型代码块颜色

修改code-background和code-foreground的值：

// Code & Code Blocks
// 用``围出的代码块
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 15px
$code-background                = $my-code-background
$code-foreground                = $my-code-foreground
$code-border-radius             = 4px

修改底栏

先准备一些代码。站长统计，注册并获取统计代码：

  |  
<script type="text/javascript">
  var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

出于保护隐私的考虑，我编辑掉了部分关键代码，直接复制上面的无法使用。

百度和Google网站地图，上面已经安装了，这是插入到底栏的代码：

不蒜子统计代码：

  |  本页点击 <span id="busuanzi_value_page_pv"></span> 次
  |  本站总点击 <span id="busuanzi_value_site_pv"></span> 次
  |  您是第 <span id="busuanzi_value_site_uv"></span> 位访客

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

百度自动推送代码，在页面被访问时，页面URL将立即被推送给百度，可以增加百度收录：

<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

下面把这些代码全加入模板中，打开\themes\next\layout_partials\footer.swig，修改后的完整文件内容为：

<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  © {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="icon-next-heart fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}

    |  
  <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
  </script>

    |  <span><a href="/sitemap.xml">Google网站地图</a></span>
    |  <span><a href="/baidusitemap.xml">百度网站地图</a></span>

  </span>
</div>

<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT{% if theme.scheme %}.{{ theme.scheme }}{% endif %}
  </a>
</div>

  |  本站总点击 <span id="busuanzi_value_site_pv"></span> 次
  |  您是第 <span id="busuanzi_value_site_uv"></span> 位访客

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

{% block footer %}{% endblock %}

注意把上面的xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx换成你自己的站长统计代码

标题下添加「阅读量」

打开/themes/next/layout/_macro/post.swig，找到标签

，在该标签内部合适的位置添加：

{% if not is_index %}
  <span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

网易云跟帖

2017年6月1日多说就关闭评论服务，所以现在用网易云跟帖可能比较合适。由于最新版（5.1）版本的next已经集成了网易云跟帖，所以只需要在主题的设置文件中配置你的productKey就可以了。获取productKey也很简单，在官网网易云跟帖中注册，然后在获取代码>通用代码中拿到productKey，之后在你的主题配置文件中的gentie_productKey字段后添加即可~

hexo-wordcount实现统计功能

wordcount可以实现字数统计，阅读时常还有总字数的统计功能
只需要npm install hexo-wordcount --save 就可以安装wordcount插件，
主要功能
字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount
安装完插件之后在主题的配置文件中开启该功能就可以~

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

添加头像

要添加一个这个的头像要怎么操作呢，很简单首先把你的头像上传到七牛云里，把链接复制到博客配置文件的相应位置即可。

title: 戏子登台
subtitle: 唱一曲词，戏子登台，人生若只初相见，卖弄风骚为谁演。
description: 独孤九剑，剑指运维！
author: Pan
avatar: http://oovxjr0mr.bkt.clouddn.com/WechatIMG8.jpeg #头像地址！！！
language: zh-Hans
timezone:
time: 2017

设置网站logo

通过网站favicon在线制作 制作favicon图片，logo最好设置32*32。

# 在next主题配置文件中添加：
favicon: http://oovxjr0mr.bkt.clouddn.com/favicon.png #七牛图片存储链接

为博客加入鼠标点击显示红心

鼠标点击小红心在\themes\next\source\js\src文件目录下添加love.js文件。内容为：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

找到\themes\next\layout_layout.swing文件，在文件的后面，之前 添加以下代码：

<!-- 小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

添加RSS

添加Rss，需要先安装rss生成模块：

sudo npm install hexo-generator-feed --save

然后在themes/yilia/_config.yml开启rss

rss: /atom.xml

添加站点地图插件

npm install hexo-generator-sitmap --save

添加网易云音乐

在知道了页面的结构之后，你就可以将你的播放器添加在页面的任意位置，开始我是放在了首页，然后发现一上来就自动播放太吵了，于是就放在了侧边栏，想要听得朋友可以手动点击播放，
我们可以直接在网易云音乐中搜索我们想要插入的音乐，然后点击生成外链播放器,然后可以根据你得设置生成相应的html代码，将获得的html代码插入到你想要插入的位置即可

我放在了侧边栏，所以对应的修改layout\_macro\sidebar.swig 文件

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

添加搜索功能

next支持Swiftype 、微搜索和Local Search

Swiftype （收费的没有免费版，进可以使用15天）是为网站和移动应用提供内部搜索的工具，点击进入Swiftype注册页面 ，注册之后需要填写自己的博客的网址

然后选择
swiftype01

选择 install Search

swiftype02

途中的即为swiftype_key

修改nanshanyi.github.io/themes/next/_config.yml中的

swiftype_key:上面红圈中的内容

点击 resume Configuration 选择 search field edit

swftype03

save

发布即可看到效果

SEO优化

更改首页标题格式为「关键词-网站名称 - 网站描述」。打开\themes\next\layout\index.swig文件，找到这行代码：

{% block title %} {{ config.title }} {% endblock %}

把它改成：

{% block title %}
  {{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

项目主页添加README

Github上博客的仓库主页空荡荡的，没有README。如果把README.md放入source文件夹，hexo g生成时会被解析成html文件，放到public文件夹，生成时又会自动删除。

解决方法很简单，在source目录下新建文件README.mdown，在里面写README即可。hexo g会把它复制到public文件夹，且不会被解析成html

优化主题next头像

就是为主题next头像添加圆形化旋转的效果。修改 /themes/next/source/css/_common/components/sidebar/sidebar-author.styl 文件，我的整个 sidebar-author.styl文件的代码如下，你可以直接复制这段代码去替换你这个文件中的所有代码。
有一个注意事项，就是你要保证你的头像，也就是 avatar.jpg 这个图片是正方形，不是的话你要将其修改成正方形，这样才能通过样式将其展现为很好看的正圆，否则会是一个椭圆形。

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

自定义页面样式

我的css

文件路径：/user/xwq/Documents/yjscloud.github.io/themes/next/source/css/_custom/custom.styl

这是我的css代码大家可以参考一下

// Custom styles.
//首页文章阴影样式
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

//首页尾部样式
.footer {
    background: none;
    font-size: 16px;
}
.footer-inner {
    font-family: 'Comic Sans MS', sans-serif;
    text-align: center;
    color: #4c618f;
}

//侧栏按钮样式
.sidebar-toggle {
    background: #649ab6;
}
.back-to-top {
    background: #649ab6;
}
//文章目录样式
.post-toc .nav .active>a {
    color: #4f7e96;
}
.post-toc ol a:hover {
    color: #7784ba;
}
.sidebar-nav .sidebar-nav-active:hover {
    color: #37596c;
}
a {
    border-bottom: none;
}
//首页阅读全文样式
.post-button {
    margin-top: 30px;
    text-align: center;
}
.post-button .btn {
    color: #fff;
    font-size: 15px;
    background: #686868;
    border-radius: 16px;
    line-height: 2;
    margin: 0 4px 8px 4px;
    padding: 0 20px;
}
.post-button a{
  border-bottom: 1px solid #666;
}
.post-button a:hover {
    color: #7784ba;
}

网站部署

前言

假设前面已经注册了github帐号和创建了对应的仓库。如果你是学生党你可以去腾讯云购买域名，价值只需要1块钱！！！，非学生党去腾讯云买个域名也不贵就几十块一年，这里就不再赘述如何注册获取域名。

github绑定域名

1、在source文件夹中新建一个CNAME文件（无后缀名），然后用文本编辑器打开，在首行添加你的网站域名，如http://xxxx.com，注意前面没有http://，也没有www，然后使用hexo g && hexo d上传部署。

2、在域名解析提供商，下面以dnspod为例。（1）先添加一个CNAME，主机记录写@，后面记录值写上你的http://xxxx.github.io（2）再添加一个CNAME，主机记录写www，后面记录值也是http://xxxx.github.io这样别人用www和不用www都能访问你的网站（其实www的方式，会先解析成http://xxxx.github.io，然后根据CNAME再变成http://xxx.com，即中间是经过一次转换的）。上面，我们用的是CNAME别名记录，也有人使用A记录，后面的记录值是写github page里面的ip地址，但有时候IP地址会更改，导致最后解析不正确，所以还是推荐用CNAME别名记录要好些，不建议用IP。

3、等十分钟左右，刷新浏览器，用你自己域名访问下试试

参考链接：github怎么绑定自己的域名？

生成SSH

$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>

系统会要求你输入密码，这里设置的密码主要是在你提交Git时弹出密码认证，直接回车

成功输出如下代码

Your identification has been saved in /root/.ssh/id_rsa.

Your public key has been saved in /root/.ssh/id_rsa.pub.

The key fingerprint is:

02:58:bd:65:5c:dc:12:78:4f:fe:bf:6e:5e:e9:84:79 1303460512@qq.com

The key's randomart image is:

+--[ RSA 2048]----+

|    .. . +oo     |

|   o  . = + o    |

|  . .  + . =     |

|     ..     o    |

|      . S    .   |

|       .      + .|

|             o E.|

|              +.o|

|              +=.|

+-----------------+

配置SSH

找到id_rsa.pub 并复制文件内容
id_rsa.pub文件一般位于电脑用户配置文件夹下的一个.ssh文件下\Users\你的用户名.ssh
登录Github并添加密钥
进入github首页在右上角选择settings设置。

ssh01

创建一个新的SSH key，图中显示我已经创建好了。
title可以随便取
ssh02

测试通过git bash链接到Git

链接Git

$ ssh -T git@github.com

提示如下：yes

The authenticity of host 'github.com (207.65.227.44)' can't be established.
RSA key fingerprint is 16:27:42:18:60:1d:7b:13:d2:b5:c4:20:7e:56:86:d8:71:f3
Are you sure you want to continue connecting (yes/no)?

以下为成功链接到Git

Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.

使用Git bash简单的设置一下用户信息：

git config --global user.name your name
git config --global user.email your_email@youremail.com

部署到Github

在此之前，先安装Git部署插件

npm install hexo-deployer-git --save

打开根目录配置文件，拉到底部，修改部署配置：

deploy:
  type: git
  repo:
    github: git@github.com:cduyzh/yjscloud.github.io.git,master

注意冒号后面是网站对应的用户名，接着就是/，然后再是你的项目名加上 .git,master

保存后终端执行

hexo clean
hexo g
hexo d

到这里基本上完成了hexo的配置和项目的上传,您也拥有了自己的hexo博客！！！

|| 版权声明
作者：废权
链接：https://blog.yjscloud.com/archives/16
声明：如无特别声明本文即为原创文章仅代表个人观点，版权归《废权的博客》所有，欢迎转载，转载请保留原文链接。
THE END
分享
二维码
hexo博客搭建指南
自己在腾讯云买了一个域名半年来都不知道做什么（学生党购买腾讯云只要1块钱！！！），Hexo优雅整洁深深的把我给吸引住了，于是动手搭了一个博客出来，在搭建……
<<上一篇
下一篇>>
文章目录
关闭
目 录