Hexo+NexT搭建个人博客

2019-12-15 本文已影响0人 Valten123

概述

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

准备环境

NodeJs安装

从官网https://nodejs.org/en/ 下载，直接安装即可，测试一下

node -v
# v11.15.0
npm -v
# 6.7.0

image

npm修改源

获取npm源

npm get registry

修改npm源

npm config set registry http://registry.npm.taobao.org/

如果想重置回去

npm config set registry https://registry.npmjs.org/

安装Git

从官网https://git-scm.com/download/win 下载，直接安装即可

安装hexo

npm install -g hexo-cli

建站部署

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

# 初始化博客文件夹
hexo init <folder>
# 进入博客目录
cd <folder>
# 安装
npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

博客结构

_config.yml

网站的配置信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.1.1"
  },
  "dependencies": {
    "hexo": "^4.0.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^2.2.0",
    "hexo-generator-index-pin-top": "^0.2.2",
    "hexo-generator-searchdb": "^1.2.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-helper-live2d": "^3.1.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-symbols-count-time": "^0.7.0",
    "hexo-tag-aplayer": "^3.0.4",
    "hexo-tag-cloud": "^2.1.1",
    "live2d-widget-model-shizuku": "^1.0.5"
  }
}

scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。

本地预览

# 编译项目，输入命令：
hexo g
# 运行项目，输入命令：
hexo s

在浏览器地址栏输入 http://localhost:4000/ 就能看到效果啦

部署到Gitee

安装插件

npm install hexo-deployer-git --save

修改站点配置文件

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://gitee.com/valten/blog
root: /blog/

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@gitee.com:valten/blog.git
  branch: prod

部署

hexo clean && hexo g && hexo d

测试

浏览器地址输入 https://gitee.com/valten/blog

部署到Gihub

安装插件

npm install hexo-deployer-git --save

修改站点配置文件

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://valten-hyl.github.io
root: /

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:valten-hyl/valten-hyl.github.io.git
  branch: master

部署

hexo clean && hexo g && hexo d

测试

浏览器地址输入 https://valten-hyl.github.io

最后我还是选择了Gitee。

为什么使用Gitee而不使用GitHub

1、GitHub Pages访问龟速不稳定；

2、GitHub私有仓库收费，而Gitee私有仓库免费；

配置优化

分类和标签

定义分类页

hexo new page categories

---
title: 分类
date: 2019-12-14 10:56:27
type: "categories"
---

定义分类页

hexo new page tags

---
title: 标签
date: 2019-12-14 10:56:27
type: "tags"
---

文章添加分类和标签属性

---
title: SpringBoot+Mybatis 通过databaseIdProvider支持多数据库
date: 2019-12-14 16:42:51
tags:
  - Spring Boot
  - Mybatis
  - databaseIdProvider
  - 多数据库
categories:
  - [Java,Spring Boot]  # 多级标签
  - Mybatis
---

修改主题配置文件，显示分类和标签菜单

# External url should start with http:// or https://
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  #about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

关于

hexo new page about

修改主题配置文件，显示关于

# External url should start with http:// or https://
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

编辑about目录下的index.md。

公益404

hexo new page commonweal

修改主题配置文件，#commonweal: /404/ || heartbeat改成commonweal: /404.html || heartbeat。

# External url should start with http:// or https://
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  commonweal: /404.html || heartbeat

附上index.md

---
title: 404 Not Found：该页无法显示
date: 2019-12-14 17:40:17
permalink: /404
---
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" 
homePageName="返回宝贝回家" homePageUrl="https://valten.gitee.io/blog">
</script>
</body>
</html>

阅读全文按钮

在文章中想要预览的文字后加``，这在之后的内容就会隐藏起来，点击Read More就会显示全文。

添加图片

---
title: Hello World
tags:
 - Hello 
 - World
categories:
 - Hello 
photos: 
    - "http://q2gep6iwb.bkt.clouddn.com/blog/20191213/7Jk7p7nSUWpC.jpg" 
---

文章置顶

移除默认安装的插件：

npm uninstall hexo-generator-index --save

安装新插件:

npm install hexo-generator-index-pin-top --save

最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：top: true
如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

文章 b 便会显示在文章 a 的前面。

添加萌宠看板娘

安装插件

npm install hexo-helper-live2d --save

安装想要的模型

npm install live2d-widget-model-shizuku --save

站点配置文件添加以下配置

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true # 开启live2d
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    # 选择哪种模型 https://huaji8.top/post/live2d-plugin-2.0/
    # shizuku、wanko、hibiki、z16、haru、Epsilon2.1、koharu、haruto、   
    # npm install live2d-widget-model-wanko --save
    use: live2d-widget-model-shizuku
  display: #放置位置和大小
    position: left
    width: 150
    height: 300
  mobile:
    show: false # 是否在手机端显示

修改站点基本信息

# Site
title: 青衫不改  # 标题
subtitle: 小白の博客  # 副标题
description: 浮生若梦，为欢几何  # 描述
keywords: 'Hexo, NexT'  # 网站默认关键词
author: valten
language: en
timezone: ''

文章永久链接

修改站点配置文件

#permalink: :year/:month/:day/:title/
permalink: :category/:title/

更换主题

# 下载主题
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

修改站点配置文件

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 值为themes目录下主题文件夹的名称

查看效果

hexo clean && hexo g && hexo s

社交链接

social:
  GitHub: https://github.com/valten-hyl || github
  E-Mail: mailto:valtenhyl@163.com || envelope
  Weibo: https://weibo.com/3114281855 || weibo
  简书: https://www.jianshu.com/u/9f816d1869d4 || book
  掘金: https://juejin.im/user/5baa5f9d5188255c5d569951 || ils
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #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
  #RSS: /atom.xml || rss
  
social_icons:
  enable: true       # 是否在社交链接标签上显示图标
  icons_only: true   # 只显示图标
  transition: false  # 是否显示过渡效果

友情链接

# Blog rolls
links_settings:
  icon: link                           # 链接图标
  title: 友情链接                       # 链接文字
  # Available values: block | inline
  layout: inline                       # 链接样式

links:
  圣豪Boy: https://xshcloudy.gitee.io/blog/
  BootCDN: https://www.bootcdn.cn/
  易百教程: https://www.yiibai.com/

代码高亮

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: default

图片浏览放大

cd themes/next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

修改主题配置文件

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

站点访问统计

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
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

评论系统

Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine: # 评论
  enable: true
  appid: jflkasjdklfjlajsdlkfklsd-sdfasdf # Your leancloud application appid
  appkey: ahskfdhlkasdkfjkalsdflasdf # Your leancloud application appkey
  notify: true # 评论回复邮件提醒, See: https://github.com/xCss/Valine/wiki
  verify: false # 验证码服务 Verification code
  placeholder: 留言区 # 留言区 Comment box placeholder
  avatar: mm # 头像配置 Gravatar style
  guest_info: nick,mail,link # 回复填写的信息 Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

本地搜索

npm install hexo-generator-searchdb --save

修改站点配置文件

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

修改主题配置文件，开启本地搜索

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true

文字数量和阅读时长

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

修改主题配置文件

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

开启RRS订阅

npm install hexo-generator-feed --save

站点配置文件添加以下配置

# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

主题配置文件

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/valten-hyl || github
  E-Mail: mailto:valtenhyl@163.com || envelope
  Weibo: https://weibo.com/3114281855 || weibo
  简书: https://www.jianshu.com/u/9f816d1869d4 || book
  掘金: https://juejin.im/user/5baa5f9d5188255c5d569951 || ils
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #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
  RSS: /atom.xml || rss

标签云配色

# TagCloud settings for tags page.
tagcloud:
  # All values below are same as default, change them by yourself.
  min: 12 # Minimun font size in px
  max: 31 # Maxium font size in px
  start: "#381096" # Start color (hex, rgba, hsla or color keywords)
  end: "#922a4b" # End color (hex, rgba, hsla or color keywords)
  amount: 200 # Amount of tags, change it if you have more than 200 tags

禁止页面评论

在不需要评论的页面或者文章Front-matter（文件最上方以—分隔的区域）加上comments: false

---
title: categories
date: 2019-12-14 17:22:21
type: "categories"
comments: false
---

AddThis分享

首先在AddThis官网注册账号，选择并配置分享按钮，激活，获取pubid，修改主题配置文件

# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id: ra-2341234445555

Fork me on GitHub

修改主题配置文件

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/valten-hyl
  title: Follow me on GitHub

隐藏强力驱动和主题信息

  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

在线聊天

首先到DaoVoice上注册一个账号,注册完成后会得到一个app_id，修改主题配置文件

# DaoVoice
# Online contact
daovoice: true
daovoice_app_id: 123sfa # 这里填你刚才获得的 app_id

打开themes/next/layout/_partials/head/head.swig，在文件中添加

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/e30c3408.js","daovoice")
  daovoice('init', {
      app_id: "{{ theme.daovoice_app_id }}"
    });
  daovoice('update');
  </script>
{% endif %}

嵌入歌单

新建歌单页面

---
title: palylist
date: 2019-12-15 01:04:41
type: "playlist"
comments: false
---

安装播放器

npm install hexo-tag-aplayer --save

修改站点配置文件

其中id是歌单生成的外链的id

# metingjs
metingjs:
  server: netease
  id: 3111577471 # 歌单id 8537501
  type: playlist
  theme: '#2980b9'
  loop: all
  autoplay: false
  order: random

修改模板

打开themes/next/layout/page.swig，在文件中加入以下代码

{% elif page.type === 'playlist' %}
          {{ page.content }}
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
            <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
            <!-- require MetingJS -->
            <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
            <meting-js style="margin-top: 1.5rem; width: auto; height: auto;" server="{{ config.metingjs.server }}" type="{{ config.metingjs.type }}" id="{{ config.metingjs.id }}" theme="{{ config.metingjs.theme }}" loop="{{ config.metingjs.loop }}" autoplay="{{ config.metingjs.autoplay }}" order="{{ config.metingjs.order }}" storageName="aplayer-setting" lrctype=0 />
{% elif page.type === 'schedule' %}

动态标签云

安装插件

npm install hexo-tag-cloud --save

修改站点配置文件

# hexo-tag-cloud
tag_cloud:
  textFont: Trebuchet MS, Helvetica
  textColor: '#192e4d'
  textHeight: 25
  outlineColor: '#5f7a74'
  maxSpeed: 0.5 # [0.01, 1]

修改页面模板

打开themes/next/layout/page.swig，找到class="tag-cloud"，在里面添加以下代码

# hexo-tag-cloud
tag_cloud:
  textFont: Trebuchet MS, Helvetica
  textColor: '#192e4d'
  textHeight: 25
  outlineColor: '#5f7a74'
  maxSpeed: 0.5 # [0.01, 1]

添加背景图片

打开themes/next/source/css/_common/scaffolding/base.styl

body {
  background: $body-bg-color;
  color: $text-color;
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;

  // 背景图片
  background: url(http://q2gep6iwb.bkt.clouddn.com/blog/20191215/s6j9RkCgHaW4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;

  +tablet-mobile() {
    // Remove the padding of body when the sidebar is open.
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

// 修改主体透明度
.main-inner {
  background: #0a1627;
  opacity: 0.9;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 0.8;
}

动态背景

cd themes/next

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

修改主题配置文件

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

命令

常用命令：

hexo new "postName"      # 新建文章
hexo new page "pageName" # 新建页面
hexo generate            # 生成静态页面至public目录
hexo server              # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy              # 将.deploy目录部署到GitHub

常用复合命令：

hexo d -g
hexo s -g
hexo clean && hexo g && hexo s
hexo clean && hexo g && hexo d

简写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

参考：

https://www.jianshu.com/p/6f77c96b7eff
https://blog.csdn.net/u012294515/article/details/83094693
https://blog.csdn.net/loze/article/details/94206726

Hexo+NexT搭建个人博客

概述

什么是 Hexo？

准备环境

NodeJs安装

npm修改源

安装Git

安装hexo

建站部署

博客结构

_config.yml

package.json

scaffolds

source

themes

本地预览

部署到Gitee

安装插件

修改站点配置文件

部署

测试

部署到Gihub

安装插件

修改站点配置文件

部署

测试

配置优化

分类和标签

定义分类页

定义分类页

文章添加分类和标签属性

关于

公益404

阅读全文按钮

添加图片

文章置顶

添加萌宠看板娘

修改站点基本信息

文章永久链接

更换主题

社交链接

友情链接

代码高亮

图片浏览放大

站点访问统计

评论系统

本地搜索

文字数量和阅读时长

开启RRS订阅

标签云配色

禁止页面评论

AddThis分享

Fork me on GitHub

隐藏强力驱动和主题信息

在线聊天

嵌入歌单

新建歌单页面

安装播放器

修改站点配置文件

修改模板

动态标签云

安装插件

修改站点配置文件

修改页面模板

添加背景图片

动态背景

命令

常用命令：

常用复合命令：

简写：

猜你喜欢

热点阅读