Hexo博客搭建说明书(指北书)

2019-01-28 22:29:55


提起博客,这似乎是一个需要氪金的工程,实不然。

我开始的理解:博客=域名(at least 10¥)+代码(HTML、CSS、JavaScript...)+服务器(at least 3000¥)

但后来,当我看到Hexo这款神奇的开源的静态博客生成器,就彻底改变了我的想法。

网上有很多教程,但总找不到全面和有效的(本来Hexo的坑就多),所以今天就和各位分享一下。

Tips:到我的hexo博客阅读可以帮助理解哦!

优点

  • 应用markdown,易于编辑,博客前端自动生成无需搭建

  • 能够像手机一样自由添加应用(即插件)

  • 无需基础,只要你对代码敏感就好

缺点:

  • 博客访问用的文件生成的速度和上传博客的速度跟电脑配置有关,一般较慢

  • 博客源文件(配置好)占用你的硬盘内存较大,一般接近1G或以上

材料/工具:

安装完成后即可进入下一步。

基础配置:

本地:

本步骤时间较长,请耐心等待。

在本地创建一个新的文件夹(必须为新的/空的),名字自行定义。

打开文件夹后鼠标右键打开Git Bash。

输入npm install -g hexo下载Hexo

输入hexo init安装Hexo(此时文件夹下会陆续出现文件/文件夹)

输入npm install安装必要配置包

输入hexo s启动Hexo,打开浏览器输入地址localhost:4000查看

云端:

在github上新建存储库你的github用户名.github.io

进入存储库后,打开这里:

找到这行并修改成如下:

在Git Bash中输入ssh-keygen生成SSH密钥,并按三次回车,随后用记事本打开C:\Users\Administrator\.ssh\id_rsa.pub(本目录因电脑而异,大部分相同),把内容复制下来,打开https://github.com/settings/keys,新建一个SSH Key,粘贴key项目内(title随便填),最后按下add SSh key。

回到Git Bash,输入ssh -T git@github.com,若显示Hi!xxxx的字眼,则代表成功。

接下来输入npm install hexo-deployer-git --save安装上传工具deployer

打开文件夹根目录下的_config.yml,找到如下部分并按要求修改:

注意:该配置项:后要有两个空格(当时就把我坑到了)

deploy:
  type:  git
  repository:  git@github.com:你的github用户名/你的github用户名.github.io.git
  branch:  master

输入hexo g生成静态博客文件

输入hexo d上传文件至github

若是首次上传,会失败,会有以下提示:

git config --global user.name "yourname"
git config --global user.email "youremail@example.com"

将这两行指令分别复制并将yorname``youremail@example.com分别替换成你的github用户名与注册邮箱,重新粘贴至Git Bash即可。

博客配置:

终于到最复杂的环节了,但其实认真读一遍说明你就会感到豁然开朗。

我这里就只介绍NexT主题(V6.7.0)中的Gemini风格的配置,同主题不同风格注意_config.yml中的设置限制(基本没有限制),其他主题参阅官网(其实大都相似)

以下所有步骤均建议配置完成后输入hexo s启动本地浏览,进入localhost:4000验证。

主题安装:

下载NexT主题(V6.7.0)

把压缩包直接解压到博客根目录下的theme文件夹内:

打开博客根目录下的_config.yml,找到这行并修改成如下:

theme: hexo-theme-next-6.7.0

首页标题/名字/语言设置

打开博客根目录下的_config.yml.

其它语言参照/theme/languages/下的语言配置文件(可魔改)

例子:

# 标题
title: YRC的博客
#小标题
subtitle: Nothing is impossible!
description:
keywords:
# 名字
author: YRC
# 语言
language: zh-CN
# 时区(不建议使用)
timezone:

博客图标:

favicon:
  # 网站图标-放在主题目录下/source/images/,按照你的图标名修改以下两行即可
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png

目录:

主目录:

按个人所需使用,每行设置前加#的为不显示。

home 主页

about 关于

tags 标签(配置在下文会提到)

archives 归档

其他的项目不建议小白使用(因为真的没什么用)

若要添加新的选项,按照name: /(在博客根目录下source文件夹下的地址) || 图标,并在Git Bash输入hexo new page "about"新建页面,在/soure/about/index.md内即可编辑

图标的名字参照官网

menu:
  # 目录
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  # categories: /categories/ || th
  archives: /archives/ || archive
  # schedule: /schedule/ || calendar
  # sitemap: /sitemap.xml || sitemap
  # commonweal: 404.html || false
  # 加#号的用处不大,在此不赘述(且要安装插件)

文章内部目录栏

toc:
  # 是否生成文章目录
  enable: true
  # 目录是否自动添加序号
  number: true
  # 目录中的字符长度若大于目录栏宽度,多余的字符则放下一行,否则多余字符以省略号代替
  wrap: false
  # 默认即可
  max_depth: 6

目录栏的位置:

sidebar:
  # 目录栏在博客中的位置 left | right (only for Pisces | Gemini).
  position: left
  #position: right

设置主题风格

# Schemes
# NexT主题下的四种风格
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

社交网站

|| 后面的仍为图标名,参照上文中目录图标设置即可。

例子:

social:
  # 社交网站
  GitHub: https://github.com/dgsyrc || github
  E-Mail: mailto:yrcminecraft@qq.com || envelope
  luogu: https://www.luogu.org/space/show?uid=89910 || code
  bilibili: http://space.bilibili.com/179225431? || tv

若不想显示图标,则将下面这行设置为false.

social_icons:
  # 不显示图标
  enable: false
  # 只显示图标
  icons_only: false

友情链接

# 标题前图标
links_icon: link
# 标题
links_title: 友情链接(部分需翻墙)
# 排版设置(不加#为设置项,加#不设置,二者不可~~得兼~~同时设置)
#一行一个
#links_layout: block 
#一行多个
links_layout: inline
# 链接
links:
  cloudflare: https://dash.cloudflare.com
  freenom: https://my.freenom.com/clientarea.php
  Minecraft Wiki: https://minecraft-zh.gamepedia.com/Minecraft_Wiki
  Pixiv: https://www.pixiv.net

头像

# 头像
avatar:
  # 头像地址(以根目录下的source为根目录的地址,而非主题下的source)
  url: /images/main.png
  # 头像圆形
  rounded: true
  # 0不显示头像,1显示
  opacity: 1
  # 头像旋转
  rotated: true  

返回顶部按钮:

找到如下代码:

b2t: true为显示,b2t: false为不显示。

# 返回顶部按钮
  b2t: true
  # 显示阅读百分比
  scrollpercent: true

阅读全文按钮:

enable: true为主页显示全文,enable: false为主页不显示全文。

auto_excerpt:
  enable: true
  # 主页每篇文章显示字数
  length: 150
# 在主页是否显示阅读全文按钮
read_more_btn: true

文章字数/阅读时长统计

在Git Bash中输入以下指令,安装插件。

npm install hexo-symbols-count-time --save

修改如下代码:

博客目录下_config.yml

symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

主题目录下_config.yml

# 博客字数,阅读时长统计
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

代码复制按钮

codeblock:
  border_radius:
  copy_button:
    # 是否启用
    enable: true
    # 是否提示复制成功
    show_result: true

使用 $Latex$

per_page: true时,只有博文中有mathjax: true时才启用,若为false,则每篇文章都启用。

math:
  # 是否启用
  enable: true
  per_page: true
  # 推荐使用mathjax
  engine: mathjax
  #engine: katex

分享

页面左边浮动按钮:

文章底部:

在Git Bash中输入git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton安装插件。

修改如下配置:

needmoreshare2:
# 添加分享按钮
  enable: true
  postbottom:
  # 每一篇文章底部显示按钮
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
  # 页面左边显示浮动按钮
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

访问统计

文章访问统计:

博客访问统计:

修改如下设置即可:

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

站内搜索

在Git Bash中输入npm install hexo-generator-searchdb --save安装插件。

在博客目录下的_config.yml添加如下设置:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在theme目录下的_config.yml修改如下设置:

# 站内搜索
local_search:
  enable: true
  top_n_per_article: 1
  unescape: false

书签

添加书签后,访客每次访问文章时会返回到上次阅读的那行。

在Git Bash中输入git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark安装插件。

# 书签
bookmark:
  enable: true
  # if auto
  #   - save the reading position when closing the page
  #   - or clicking the bookmark-icon
  # if manual, only save it by clicking the bookmark-icon
  save: auto

标签

在Git Bash中输入hexo new page "tags"新建Tag页面。

然后向source\tags\index.md中添加一行:

type: "tags"

文章标签的设置如下:

tags:
- 标签1
- 标签2
- 标签3

背景

打开themes目录下\source\css\_custom\custom.styl

添加如下代码:

body {
    background-image:url(/images/background2.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
}
.main-inner {
    opacity: 0.9;
}

background-image:url:背景链接,目录默认为主题目录下的\soure\images\

background-repeat: no-repeat:背景图不重复出现

background-size: cover:平铺

opacity::不透明度

鼠标点击显示爱心图案

下载js:

将该js放在主题根目录下\source\js\src内。

打开layout/_layout.swig,在文件末尾添加一行:

<script type="text/javascript" src="/js/src/love.js"></script>

文章的撰写

新建文章

在Git Bash输入hexo new "文章名"新建文章

如想在文中引用博客内图片,则需修改博客目录下的_config.yml的这一行(为true即可),以便以后使用hexo new命令时自动生成文件夹,需引用的图片需放在博客根目录下的\source\_post\文章名\内:

post_asset_folder: true

除了可以使用命令添加文章外,还可以直接在_post文件夹内直接新建文章名.md与文件夹文章名,但是文章名.md内必须按照以下格式:

---
title: 文章名
mathjax: true(此行可去)
date: 2019-02-01 12:30:42(可自定义,当然设为1000-01-01 00:00:00是没有问题的)
tags:
- Tag1
- Tag2
---

撰写

打开\source\_post\文章名.md

按照markdown的语法写即可。

完成

部分效果可参考我的hexo博客