Hexo部署以及Next主题配置和美化(更新至Next-7.5.0版本)

  1. 1. 安装Hexo
    1. 1.1. 指令
      1. 1.1.1. new
      2. 1.1.2. server
    2. 1.2. 更换主题
  2. 2. Next主题的配置
    1. 2.1. 根目录下_config.yml的配置
      1. 2.1.1. Site设置
      2. 2.1.2. URL栏设置
      3. 2.1.3. 开启插入图片功能
      4. 2.1.4. 翻页设置
      5. 2.1.5. Deployment设置
      6. 2.1.6. 数学公式
    2. 2.2. 主题目录下_config.yml的配置
      1. 2.2.1. 网站Logo设置
      2. 2.2.2. 页脚设置
      3. 2.2.3. 版权信息
      4. 2.2.4. 主题选择
      5. 2.2.5. 侧边栏菜单设置
      6. 2.2.6. 侧边栏显示设置
      7. 2.2.7. 头像设置
      8. 2.2.8. 社交网站链接设置
      9. 2.2.9. 侧边栏目录设置
      10. 2.2.10. 开启阅读全文选项
      11. 2.2.11. 返回顶部按钮
      12. 2.2.12. 打赏
      13. 2.2.13. 代码块高亮和复制按钮
      14. 2.2.14. 书签
      15. 2.2.15. Github角标
      16. 2.2.16. 字体
      17. 2.2.17. 文章中图片点击实现全屏查看
        1. 2.2.17.1. 切换到lib目录
        2. 2.2.17.2. 下载插件
        3. 2.2.17.3. 更改主题配置文件next/_config.yml
        4. 2.2.17.4. hexo s重新启动
      18. 2.2.18. 页面搜索功能
      19. 2.2.19. mermaid流程图
        1. 2.2.19.1. 安装插件
        2. 2.2.19.2. 修改配置文件
        3. 2.2.19.3. 个性化背景颜色
        4. 2.2.19.4. 效果
        5. 2.2.19.5. 语法结构
  3. 3. Next主题深度美化
    1. 3.1. 顶部阅读进度条
      1. 3.1.1. 安装
      2. 3.1.2. 修改配置文件
      3. 3.1.3. 升级
    2. 3.2. 加载条
      1. 3.2.1. 安装
      2. 3.2.2. 修改配置文件
      3. 3.2.3. 调整颜色
      4. 3.2.4. 升级
    3. 3.3. 动态背景
      1. 3.3.1. 安装
      2. 3.3.2. 修改配置文件
      3. 3.3.3. 升级
    4. 3.4. 鼠标点击特效
      1. 3.4.1. 创建js文件
      2. 3.4.2. 修改layout文件
    5. 3.5. 标题抖动效果
    6. 3.6. Live2D看板娘
      1. 3.6.1. 安装
      2. 3.6.2. 基础配置
      3. 3.6.3. 终极进化版本
        1. 3.6.3.1. Using CDN
    7. 3.7. 音乐挂件
      1. 3.7.1. 安装
      2. 3.7.2. 配置music.js文件
      3. 3.7.3. 配置_layout.swig文件
    8. 3.8. 折叠代码块功能
    9. 3.9. 网站标题崩溃欺骗
    10. 3.10. 背景及半透明效果
    11. 3.11. 修改超链接样式
    12. 3.12. 修改文章底部标签样式
    13. 3.13. 在文章结尾添加本文介绍标志
    14. 3.14. 博文压缩
    15. 3.15. Code代码标签颜色
    16. 3.16. 网站运行时间
    17. 3.17. 访客统计
    18. 3.18. 字数统计和阅读时长统计
      1. 3.18.1. 安装
      2. 3.18.2. 修改配置文件
    19. 3.19. 文章加密访问
      1. 3.19.1. 安装
      2. 3.19.2. 配置
      3. 3.19.3. 使用
    20. 3.20. 文章置顶
      1. 3.20.1. 安装
      2. 3.20.2. 配置
      3. 3.20.3. 使用
    21. 3.21. 修改默认字体大小
    22. 3.22. 自定义鼠标样式
    23. 3.23. 图片懒加载
    24. 3.24. 添加评论功能
    25. 3.25. 自定义404页面
  4. 4. 部署Hexo到网站
    1. 4.1. Nginx
    2. 4.2. conf.d文件下的配置文件
      1. 4.2.1. nginx.conf
      2. 4.2.2. general.conf
      3. 4.2.3. letsencrypt.conf
      4. 4.2.4. security.conf
    3. 4.3. sites-available/blog.tyokyo320.com.conf
    4. 4.4. sites-enabled
    5. 4.5. www/blog.tyokyo320.com/public
    6. 4.6. HTTPS证书
    7. 4.7. 总结
    8. 4.8. 外网访问
  5. 5. hexo迁移到另一台电脑
    1. 5.1. next库的迁移
      1. 5.1.1. git仓库位于个人服务器
        1. 5.1.1.1. 笔记本电脑上的操作
        2. 5.1.1.2. PC上的操作
      2. 5.1.2. 上传至gitea个人仓库转移
        1. 5.1.2.1. 笔记本电脑上的操作
        2. 5.1.2.2. PC上的操作
  6. 6. 参考文章

安装Hexo

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

1
npm install -g hexo-cli

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

1
2
3
cd <folder>
hexo init .
npm install

指令

new

1
hexo new [layout] <title>

layout

  • post
  • page

server

1
hexo server(s)

启动服务器。默认情况下,访问网址为: http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式

read more

更换主题

这里选择的是hexo next主题

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

由于Next主题一直在更新,所以此处加一个更新命令:

1
2
cd themes/next
git pull

Next主题的配置

根目录下_config.yml的配置

Site设置

1
2
3
4
5
6
7
8
# Site
title: Z.QIANG'blog # 标题
subtitle: Fortune favors the prepared mind # 副标题
description: # 简介
keywords: # 关键词
author: tyokyo320 # 作者,文章中显示作者名称
language: zh-CN # 设置语言, zh-CN是简体中文, en是英语, 默认是德语
timezone: Japan # 设置时区

URL栏设置

1
2
3
4
5
6
7
8
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.tyokyo320.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing index.html from permalinks

开启插入图片功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''

post_asset_folderfuture设置成true

翻页设置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 12
order_by: -date

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

per_page:设置博文的数量

Deployment设置

这里有一个很迷的问题,在Mac上hexo deploy部署的时候, 10次有9次会卡住。目前还没解决。

数学公式

原来用的是MathJax引擎进行渲染的,每次打开文章加载插件js速度非常的慢,所以考虑更换成Katex引擎的markdown-it-plus插件通过css进行渲染。

  • 安装
1
2
3
4
5
npm install hexo-math --save

# 替换为Katex
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save
  • 修改博客主题目录下的_config.yml文件,将katex的后面设置为true
1
2
3
4
5
# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
enable: true
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false
  • 在博客根目录下的_config.yml文件后添加如下代码
1
2
3
4
5
6
7
8
9
10
# hexo-renderer-markdown-it-plus
markdown_it_plus:
highlight: true
html: true
xhtmlOut: true
breaks: true
langPrefix:
linkify: true
typographer:
quotes: “”‘’

主题目录下_config.yml的配置

网站Logo设置

1
2
3
4
5
6
7
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
android_manifest: /images/manifest.json
ms_browserconfig: /images/browserconfig.xml

把选好的图标放入/themes/next/source/images.记得注意尺寸并改成上面的文件名。

页脚设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2019

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https:// .com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#f08080"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: Z.QIANG

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: true
# Version info of NexT after scheme info (vX.X.X).
version: true

since:表示网站成立的年份
icon:设置年份后面的图标,图标可在Font Awesome选择,然后在name中修改
animated:设置图标是否有动画效果
color:设置图标颜色
copyright:显示图标后面的版权所属,不设置的话默认显示配置文件中的作者名
powered:设置是否显示Powered by Hexo
theme:设置是否显示当前主题的版本信息

版权信息

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: true
post: false
language: en

license:设置版权标准,具体参考Creative Commons licenses
sidebar:设置是否在侧栏显示版权标准
post:设置是否在文章底部显示版权信息
language:设置语言

主题选择

Next有4个主题可供选择

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

侧边栏菜单设置

1
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat

||前表示页面的地址,后面表示显示的图标的名称
about:设置关于界面
tags:设置标签功能
categories:设置目录页面,编辑博文时在顶部加上一栏categories就可以为博文设置所属目录.
archives:设置归档页面

Font Awesone6更新后图标会消失,需要改动。具体参考Font Awesome

侧边栏显示设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
sidebar:
# Sidebar Position.
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false

position:设置侧栏在左边还是右边,这个选择只对PiscesGemini两个主题起作用
width:设置侧栏的宽度,默认MuseMist是320,PiscesGemini是240
display:设置侧栏的显示方式,只对MuseMist两个主题起作用
offset:设置侧栏到顶部介绍的距离,只对PiscesGemini两个主题起作用
onmobile:设置是否在手机等宽度较小的设备上显示侧栏,只对MuseMist两个主题起作用

头像设置

设置是否在侧栏显示头像

1
2
3
4
5
6
7
8
9
10
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true

url:后填写头像图片的路径,默认在/themes/next/source/images
rounded:设置是否显示圆形头像
rotated:设置鼠标移动到头像上时头像是否旋转

社交网站链接设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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/tyokyo320 || fab fa-github
#E-Mail: mailto:tyokyo320@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
Twitter: https://twitter.com/ZHANG_1006 || fab fa-twitter
Bilibili: https://space.bilibili.com/8366997 || fas fa-tv
FB Page: https://www.facebook.com/profile.php?id=100011259601712 || fab fa-facebook
#VK Group: https://vk.com/yourname || fab fa-vk
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
YouTube: https://youtube.com/channel/UCHtrwJEAQ50k5irx73XT83w?view_as=subscriber || fab fa-youtube
Instagram: https://instagram.com/tyokyo320/?hl=en || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype

||前输入自己社交主页的链接,后面设置其图标
E-Mail格式为mailto:邮箱地址,在Win10系统可以调用系统邮件服务自动填写收件人

Font Awesone6更新后图标会消失,需要改动。具体参考Font Awesome

侧边栏目录设置

1
2
3
4
5
6
7
8
9
10
11
# Table of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 6

enable:设置是否开启侧栏目录
number:设置自动编号
wrap:设置当标题长度超过侧栏长度时是否自动换行
expand_all:设置是否展开全部目录,否的话自动展开正在看的部分
max_depth:设置自动生成目录的最大深度,也就是生成到几级标题

开启阅读全文选项

1
2
3
4
5
6
7
8
9
10
11
12
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Automatically excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

scroll_to_more: true:设置自动跳转到阅读全文选择之后的位置。设置完成后,在文字内加入<!-- more -->即可在首页隐藏剩下的博文并显示阅读全文按钮了
length:表示截止到的字符长度

返回顶部按钮

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

enable:是否开启回到顶部按钮
sidebar:设置是否将按钮放到侧栏中
scrollpercent:设置是否显示阅读进度百分比

打赏

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: false
animation: false
#comment: Donate comment here.

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

enable:设置是否在文章末尾显示打赏按钮
animation:设置打上按钮是否显示动画
reward:路径在/themes/next/source/images

代码块高亮和复制按钮

1
2
3
4
5
6
7
8
9
10
11
12
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 bright
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: mac

highlight_theme:一共有5种,可在tomorrow看预览效果
enable:开启代码块右上角的复制按钮
show_result:设置是否显示复制成功的提示

书签

左上角显示一个书签按钮可以跳转到上一次设置书签的位置
首先执行命令git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark安装bookmark插件到source/lib目录

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
enable: false
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

Github角标

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false
permalink: https://github.com/tyokyo320
title: Follow me on GitHub

enable:设置是否在页面右上角显示Github三角标
permalink:添加自己的Github地址
title:设置鼠标移动到图标后显示的文字

字体

部署了一段时间博客后,总是发现加载非常慢,而且会显示加载这个Google字体库超时,查了一下于是采取引入中科大的源这个解决方法.

1
2
3
4
5
6
7
font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: true

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: //fonts.lug.ustc.edu.cn

文章中图片点击实现全屏查看

切换到lib目录
1
cd next/source/lib
下载插件
1
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
更改主题配置文件next/_config.yml
1
fancybox: true
hexo s重新启动

页面搜索功能

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

mermaid流程图

安装插件
1
npm install hexo-filter-mermaid-diagrams
修改配置文件

主题目录下的_config.yml中修改:

1
2
3
4
5
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest
个性化背景颜色

打开博客根目录下的source/_data/styles.styl文件:

1
2
3
4
// mermaid流程图背景颜色透明
.mermaid {
background: transparent;
}
效果
graph LR
  A-->B
  A-->C
  B-->D
  C-->D
graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA
语法结构

语法结构如下:A[名称] --> B(名称)

其中,A、B均代表形状名称, -->表示箭头指向,形状样式用后面的括号来表示,括号里面的内容是形状中要显示的文本内容。其中有以下几种形状:

括号形式 形状样式
[] 矩形框
() 圆角矩形框
{} 菱形
(()) 圆形

如果没有形状边框,可以写成:C[语句] --> |语句| D[语句]或者C[语句] – 语句 --> D[语句]都可以。

相对而言,比Flowchart更加简洁清晰,Mermaid还支持制作时序图、甘特图等。其他的还有序列图,UML图等,大家也可以进行配置后运用Markdown生成图形。

Next主题深度美化

顶部阅读进度条

注意:Next-7.5.0版本之后已经自带顶部阅读进度条,不用下载安装,配置即可

在博文页面顶部添加Reading Progress进度条, 表示阅读进度.

安装

1
cd themes/next

安装模块到source/lib

1
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

修改配置文件

打开主题下的配置文件_config.yml,搜索reading_progress定位到以下代码,修改enable设置为true.

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
# position: top
color: "#0aaff0" # 调整线条颜色
height: 3px # 调整线条高度

线条颜色可以在ATOOL查询颜色并修改

升级

切换到安装目录,并git pull更新.

1
2
cd themes/next/source/lib/reading_progress
git pull

加载条

用于在网页加载的过程中显示加载进度, Next主题已支持pace功能

安装

切换到主题下的文件夹

1
cd themes/next

安装模块到source/lib

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改配置文件

打开主题下的配置文件_config.yml,搜索pace定位以下代码

1
2
3
4
5
6
7
8
9
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: bounce

enable:设置为true
theme:设置为上面Themes list的一种,主题样式可以在PACE查看

调整颜色

为了让进度条和主题背景相匹配,可以在theme/next/source/lib/pace中找到相应主题的css文件并修改颜色配置
下面以pace-theme-bounce.min.css示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
.pace {
width: 140px;
height: 300px;
position: fixed;
top: -90px;
right: -20px;
z-index: 2000;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 2s linear 0s;
-moz-transition: all 2s linear 0s;
transition: all 2s linear 0s;
}

.pace.pace-active {
-webkit-transform: scale(.25);
-moz-transform: scale(.25);
-ms-transform: scale(.25);
-o-transform: scale(.25);
transform: scale(.25);
opacity: 1;
}

.pace .pace-activity {
width: 140px;
height: 140px;
border-radius: 70px;
background: #29d;
position: absolute;
top: 0;
z-index: 1911;
-webkit-animation: pace-bounce 1s infinite;
-moz-animation: pace-bounce 1s infinite;
-o-animation: pace-bounce 1s infinite;
-ms-animation: pace-bounce 1s infinite;
animation: pace-bounce 1s infinite;
}

.pace .pace-progress {
position: absolute;
display: block;
left: 50%;
bottom: 0;
z-index: 1910;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-webkit-transform: scaleY(.3) !important;
-moz-transform: scaleY(.3) !important;
-ms-transform: scaleY(.3) !important;
-o-transform: scaleY(.3) !important;
transform: scaleY(.3) !important;
-webkit-animation: pace-compress .5s infinite alternate;
-moz-animation: pace-compress .5s infinite alternate;
-o-animation: pace-compress .5s infinite alternate;
-ms-animation: pace-compress .5s infinite alternate;
animation: pace-compress .5s infinite alternate;
}

@-webkit-keyframes pace-bounce {
0% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 140px;
-webkit-animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
-webkit-animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
-webkit-animation-timing-function: ease-out;
}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
}

@-moz-keyframes pace-bounce {
0% {
top: 0;
-moz-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 140px;
-moz-animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
-moz-animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
-moz-animation-timing-function: ease-out;}
95% {
top: 0;
-moz-animation-timing-function: ease-in;
}
100% {top: 0;
-moz-animation-timing-function: ease-in;
}
}

@keyframes pace-bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
50% {
top: 140px;
height: 140px;
animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
animation-timing-function: ease-out;
}
95% {
top: 0;
animation-timing-function: ease-in;
}
100% {
top: 0;
animation-timing-function: ease-in;
}
}

@-webkit-keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
-webkit-animation-timing-function: ease-out;
}
}

@-moz-keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
-moz-animation-timing-function: ease-out;
}
}

@keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
animation-timing-function: ease-out;
}
}

使用搜索功能搜索#定位到颜色设置

升级

切换到安装目录,并git pull更新.

1
2
cd themes/next/source/lib/pace
git pull

动态背景

Next主题默认提供了三种动态背景

这里我选择的是Canvas-nest

安装

切换到主题下的文件夹

1
cd themes/next

安装模块到source/lib

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

修改配置文件

打开主题下的配置文件_config.yml修改以下代码

1
2
3
4
5
6
7
8
9
10
# 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 # 是否在手机上显示
color: "0,0,255" # RGB 颜色设置
opacity: 0.5 # 线条不透明度
zIndex: -1 # 显示级别
count: 50 # 线条数量

如果想使用CDN加速的话需要设置

1
2
3
4
5
6
7
8
vendors:
...
# Internal version: 1.0.0
# Example:
canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
# canvas_nest:
# canvas_nest_nomobile:

注意:Next-7.5.0版本之后使用CDN加速会报错

升级

切换到安装目录,并git pull更新.

1
2
cd themes/next/source/lib/canvas_nest
git pull

鼠标点击特效

鼠标点击特效有心形特效和爆炸两种特效.这里我选择的是心形特效

创建js文件

themes/next/source/js/src下中创建clicklove.js,并粘贴下列代码

1
!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);

修改layout文件

打开themes/next/layout/_layout.swig并在末尾添加以下代码

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

标题抖动效果

鼠标点在标题上会有字体的抖动效果

  • 打开博客根目录下的source/_data/styles.styl文件, 在最后加上css代码即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 鼠标点在标题上字体抖动效果
.site-title:hover, .post-title:hover {
animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes shake-it {
0% {
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25% {
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50% {
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100% {
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}

Live2D看板娘

参考官方文档

安装

  • 执行命令npm install --save hexo-helper-live2d安装Live2D模块
  • 挑选喜欢的模型样式并执行命令npm install packagename安装模型,把packagename替换成模型的名字

预览效果图在这里查看

基础配置

打开博客根目录下的_config.yml文件
添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
enable: true # 开启Live2D
scriptFrom: local # 插件来源
pluginRootPath: live2dw/ # 插件根目录(相对路径)
pluginJsPath: lib/ # 脚本文件路径(相对于插件根目录路径)
pluginModelPath: assets/ # 模型文件路径(相对于插件根目录)
tagMode: false # 是否标签模式
debug: false # 是否开启调试模式
model:
use: live2d-widget-model-shizuku # 选择模型
display:
position: right # 模型在页面上的位置
width: 150 # 模型宽度
height: 300 # 模型高度
mobile:
show: true # 是否在手机端显示
react:
opacity: 1 # 设置模型透明度

终极进化版本

看到别人博客的看板娘能说话, 能换衣服. 发现了大佬们配置的这个Live-2D这个终极版本

项目地址:live2d-widget

Using CDN

我个人是通过使用CDN加载而不是直接把这些文件放到服务器上.
如果要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为

1
2
<!-- live-2d -->
<script src="https://cdn.jsdelivr.net/gh/tyokyo320/live2d-widget/autoload.js"></script>

将username替换为你的GitHub用户名即可.

将改好的上述代码插入到themes/next/layout/_layout.swig的末尾即可.

API 后端可自行搭建:

参考原项目,这里首先我自己在此项目上添加了一些model,模型添加要求见readme,修改完成后打上tag,然后releases。到这里live2d后端部分修改完成

然后修改前端部分,修改自己的live2d-widget项目中autoload.js文件中cdnPath(因为我是使用的CDN方式),修改完后打上tag,releases即可

音乐挂件

由于网易云音乐挂件有时会有版权问题导致音乐无法播放,所以这里使用的是Aplayer来播放音乐

缺点: 每当切换页面时候歌曲会中断, 而且似乎也不可以快进歌曲. 网页加载歌曲时候也会慢.

安装

点击访问Aplayer源码: GitHub Aplayer. 下载到本地, 解压后将dist文件夹复制到themes\next\source文件夹下

配置music.js文件

新建themes\next\source\dist\music.js文件, 添加内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const ap = new APlayer({
container: document.getElementById('aplayer'),
lrcType: 3,
fixed: true,
autoplay: false,
audio: [
/*
{
name: '小さな恋のうた',
artist: '髙橋李依',
url: '/dist/music/lrc1.mp3',
cover: '/dist/cover/cover1.jpeg',
lrc: '/dist/lrc/lrc1.lrc'
},
{
name: 'キセキ',
artist: '髙橋李依',
url: 'https://i.y.qq.com/v8/playsong.html?songid=234843249&source=yqq#wechat_redirect',
cover: 'y.gtimg.cn/music/photo_new/T002R300x300M000001HqCqr4KjbHI_1.jpg?max_age=2592000',
lrc: '/dist/lrc/lrc2.lrc'
},
{
name: '愛唄',
artist: '髙橋李依',
url: '/dist/music/lrc3.mp3',
cover: '/dist/cover/cover3.jpeg',
lrc: '/dist/lrc/lrc3.lrc'
}
*/
{
name: '虹の彼方に(SAO Alicization EDテーマ)',
artist: 'ReoNa',
url: '/dist/music/lrc4.mp3',
cover: '/dist/cover/cover4.jpg',
lrc: '/dist/lrc/lrc4.lrc'
}
]
});

具体可以参考Aplayer中文文档

audio对应的便是音频文件, 所以音乐播放器需要播放的音乐是需要自己进行相关信息(如歌曲链接、歌词、封面等)的配置.这里放一个[mp3音乐外链网站]:(http://up.mcyt.net/), 搜索对应的音乐, 然后复制url和右击封面图片链接粘贴到对应的位置上就行了.

注意:这里的外链网站是http,不是安全的,引用后博客加载的时候会有警告.所以我个人是采用本地上传音乐的形式.

配置_layout.swig文件

打开themes\next\layout\_layout.swig文件, 将

1
2
3
4
5
6
<!-- start music -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
<!-- end music -->

添加到<body itemscope …>后面就行, 即在里面.

重新生成, 访问页面, 就能看到左下角的音乐播放器了.

折叠代码块功能

网站标题崩溃欺骗

背景及半透明效果

  • 编辑主题目录下/_config.yml,把style前面注释去掉.
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
  • 将选好的图片放在博客主题目录/source/images文件夹中并注意命名.
  • 打开博客根目录下的source/_data/styles.styl文件并修改成跟图片一样的名字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
//背景
@media screen and (min-width:1200px) {
body {
background-image:url(/images/background.jpeg);
background-position: 50% 50%;
background-attachment: fixed;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}

#footer a {
color:#eee;
}
}

//改变背景色和透明度
.post-block {
background: rgba(255,255,255,0.9);
}
//改变菜单栏透明度
.header-inner {
background: #ffffffe8;
opacity: 1;
}
//标题颜色
.site-meta {
background: #00C9FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #92FE9D, #00C9FF); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

//标题字体及背景
.site-title {
display: inline-block;
vertical-align: top;
line-height: 36px;
font-size: 30px;
font-weight: normal;
font-family: 'Lato', "PingFang SC", "FZShuTi", sans-serif;
color: #000000;
}

//副标题配置
.site-subtitle {
margin-top: 10px;
font-size: 17px;
color: #000;
font-family: 'Lato', "PingFang SC", "STXingkai", sans-serif;
}

//底部博客信息颜色
.footer {
font-size: 14px;
color: #000;
}
//当鼠标移动到选项时的优化
.menu .menu-item a:hover, .menu-item-active a {
background: #ffffff85;
border-bottom-color: #dcd1d196;
}

//菜单右部的点
.menu-item-active a:after {
content: " ";
position: absolute;
top: 50%;
margin-top: -3px;
right: 15px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #484848;
}

修改超链接样式

打开themes\next\source\css\_common\components\post\post.styl并在末尾一串@import上面添加以下代码

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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;
}
}

修改文章底部标签样式

打开文件/themes/next/layout/_macro/post.swig

搜索rel="tag">#, 将#替换为<i class="fa fa-tag"></i>

注意:Next-7.5.0版本之后仅仅修改主题目录下/_config配置文件即可,在tag_icon后面加上tag即可.

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: tag

在文章结尾添加本文介绍标志

博文压缩

Code代码标签颜色

打开博客根目录下的source/_data/styles.styl文件:

1
2
3
4
5
6
7
8
9
10
// 针对Code代码标签的美化
code {
padding: 2px 4px;
word-wrap: break-word;
color: #ff7600;
background: #fbf7f8;
border-radius: 3px;
font-size: 15px;
font-weight: bolder;
}

网站运行时间

打开/themes/next/layout/_partials/footer.swig并添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 网站运行时间 -->
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("07/21/2019 00:00:00");
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
</div>

访客统计

在主题配置文件_config.yml中搜素busuanzi_count并将enable设置为true,icon可以自定义设置.

1
2
3
4
5
6
7
8
9
10
# 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

字数统计和阅读时长统计

安装

在博客根目录下执行命令安装统计插件

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

修改配置文件

在博客根目录下的配置文件_config.yml中加入以下代码

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
symbols: true # 所有文章总字数
time: true # 阅读时长
total_symbols: true # 所有文章总字数
total_time: true # 所有文章阅读中时长
exclude_codeblock: false

在主题目录下配置文件_config.yml中搜素symbols_count_time并修改为

1
2
3
4
5
6
7
8
# 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: false
awl: 4
wpm: 275

最后记得hexo clean一遍再hexo s

文章加密访问

文章加密插件目前与字数统计,目录生成功能存在冲突.例如一篇9k字的文章在字数统计中会显示43k.进入文章后没有目录生成,谨慎使用

安装

在博客根目录执行下列命令安装插件

1
npm install --save hexo-blog-encrypt

配置

在根目录的_config.yml中使用下列代码启用插件

1
2
3
4
# Security
##
encrypt:
enable: true

使用

然后在文章md文件的标头添加相应字段就可以实现加密访问了,如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 数理計画法(更新中)
mathjax: true
tags:
- 数理计划法
- 最优化理论
- 线性规划
- 机器学习
categories:
- 计算机
date: 2019-09-17 10:37:15
description:
password: 123456
abstract: 文章已加密
message: 请输入密码
---

其中password后面输入你想要的密码,abstract后面输入在首页展示的摘要,message后面输入密码输入框显示的信息

文章置顶

安装

在博客根目录执行下列命令安装插件

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

配置

打开博客主题目录下\layout\_macro\post.swig并搜索<div class="post-meta">,在其中添加下列代码以开启标签

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

使用

在需要置顶的文章中加入top: true即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 数理計画法(更新中)
mathjax: true
tags:
- 数理计划法
- 最优化理论
- 线性规划
- 机器学习
categories:
- 计算机
date: 2019-09-17 10:37:15
description:
password: 123456
abstract: 文章已加密
message: 请输入密码
top: true
---

修改默认字体大小

自定义鼠标样式

图片懒加载

添加评论功能

自定义404页面

部署Hexo到网站

利用

  • Ubuntu 18.04 Server
  • docker
  • nginx
  • Let’s Encrypt

进行部署.

Nginx

对于Nginx一般分为

  • 配置文件
  • 部署文件
  • 日志文件

三个部分, 于是我们在一个文件夹下创建以下的文件结构, 这里的文件是在主机上进行创建, 稍后要映射到Docker容器里面.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
~/docker/nginx
▶ tree -L 3 .
.
|-- conf # 配置文件
| |-- general.conf #
| |-- letsencrypt.conf #
| |-- nginx.conf #
| `-- security.conf #
|-- conf.d # 其他配置文件
|-- logs # 日志
| |-- access.log #
| `-- error.log # PID文件
|-- run #
| `-- nginx.pid #
|-- sites-available # 可用的网站配置
| `-- blog.tyokyo320.com.conf #
|-- sites-enabled # 激活的网站配置
| `-- blog.tyokyo320.com.conf -> ../sites-available/blog.tyokyo320.com.conf #
|-- start.sh #
`-- www # 网站文件
`-- blog.tyokyo320.com #
`-- public #

对于Nginx的配置文件, 可以通过nginxconfig进行生成, 然后再进一步自定义.

conf.d文件下的配置文件

nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# Generated by nginxconfig.io
# https://nginxconfig.io/?0.domain=blog.tyokyo320.com&0.php=false&0.index=index.html&0.fallback_html

user www-data;
pid /run/nginx.pid;
worker_processes 1;
worker_rlimit_nofile 1024;

events {
multi_accept on;
worker_connections 1024;
}

http {
charset utf-8;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
server_tokens off;
log_not_found off;
types_hash_max_size 2048;
client_max_body_size 16M;

# MIME
include mime.types;
default_type application/octet-stream;

# logging
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log warn;

# SSL
ssl_session_timeout 1d;
ssl_session_cache shared:SSL:10m;
ssl_session_tickets off;

# Diffie-Hellman parameter for DHE ciphersuites
ssl_dhparam /etc/nginx/dhparam.pem;

# Mozilla Intermediate configuration
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

# OCSP Stapling
ssl_stapling on;
ssl_stapling_verify on;
resolver 1.1.1.1 1.0.0.1 8.8.8.8 8.8.4.4 208.67.222.222 208.67.220.220 valid=60s;
resolver_timeout 2s;

# load configs
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}

general.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# favicon.ico
location = /favicon.ico {
log_not_found off;
access_log off;
}

# robots.txt
location = /robots.txt {
log_not_found off;
access_log off;
}

# assets, media
location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
expires 7d;
access_log off;
}

# svg, fonts
location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff2?)$ {
add_header Access-Control-Allow-Origin "*";
expires 7d;
access_log off;
}

# gzip
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;

letsencrypt.conf

1
2
3
4
# ACME-challenge
location ^~ /.well-known/acme-challenge/ {
root /var/www/_letsencrypt;
}

security.conf

1
2
3
4
5
6
7
8
9
10
11
12
# security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline' 'unsafe-eval'" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# . files
location ~ /\.(?!well-known) {
deny all;
}

注意一下,因为MathJax用到了eval,所以需要加上’unsafe-eval’。否则数学公式将渲染失败。

sites-available/blog.tyokyo320.com.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;

server_name blog.tyokyo320.com;
root /usr/share/nginx/html/blog.tyokyo320.com/public;

# SSL
ssl_certificate /etc/letsencrypt/live/blog.tyokyo320.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/blog.tyokyo320.com/privkey.pem;
ssl_trusted_certificate /etc/letsencrypt/live/blog.tyokyo320.com/chain.pem;

# security
include security.conf;

# index.html fallback
location / {
try_files $uri $uri/ /index.html;
}

# additional config
include general.conf;
}

# subdomains redirect
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;

server_name *.blog.tyokyo320.com;

# SSL
ssl_certificate /etc/letsencrypt/live/blog.tyokyo320.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/blog.tyokyo320.com/privkey.pem;
ssl_trusted_certificate /etc/letsencrypt/live/blog.tyokyo320.com/chain.pem;

return 301 https://blog.tyokyo320.com$request_uri;
}

# HTTP redirect
server {
listen 80;
listen [::]:80;

server_name .blog.tyokyo320.com;

# additional config
include letsencrypt.conf;

# index.html fallback
location / {
return 301 https://blog.tyokyo320.com$request_uri;
}
}

sites-enabled

进入到sites-enabled里面, 输入以下指令

1
sudo ln -s ../sites-available/blog.tyokyo320.com.conf .

即可’激活’blog.tyokyo320.com.conf这个网站的配置文件

www/blog.tyokyo320.com/public

将通过hexo g生成的日志根目录下public的全部内容移动到这里即可完成上传.

HTTPS证书

利用Let’s Encrypt进行证书签名, 由于Let’s Encrypt的签名需要网站可以访问, 所以我们需要先运行起来我们的网站.
如果在内网环境下, 也注意要先配置端口映射. 在docker/nginx下输入.

1
sed -i -r 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g' sites-available/blog.tyokyo320.com.conf

暂时取消HTTPS的设置, 否则Docker容器无法运行, 然后输入

1
2
3
4
5
6
7
8
9
10
11
12
13
docker run -d -p 80:80 -p 443:443 \
--name nginx \
-v $PWD/conf/security.conf:/etc/nginx/security.conf \
-v $PWD/conf/nginx.conf:/etc/nginx/nginx.conf \
-v $PWD/conf/general.conf:/etc/nginx/general.conf \
-v $PWD/conf/letsencrypt.conf:/etc/nginx/letsencrypt.conf \
-v $PWD/conf.d:/etc/nginx/conf.d \
-v $PWD/sites-enabled:/etc/nginx/sites-enabled \
-v $PWD/sites-available:/etc/nginx/sites-available \
-v $PWD/logs/:/var/log/nginx/ \
-v $PWD/www/:/usr/share/nginx/html \
-v $PWD/run/:/var/run/ \
nginx

运行Docker容器, 进入Nginx容器内部进行签名的生成

1
2
3
4
5
6
7
8
9
10
11
12
docker exec -it nginx /bin/bash
apt-get update && apt-get install software-properties-common certbot python-certbot-nginx

# Generate Diffie-Hellman keys:
openssl dhparam -out /etc/nginx/dhparam.pem 2048

# Create a common ACME-challenge directory (for Let's Encrypt):
mkdir -p /var/www/_letsencrypt
chown www-data /var/www/_letsencrypt

# Obtain certificate:
certbot certonly --webroot -d blog.tyokyo320.com --email tyokyo320@gmail.com -w /var/www/_letsencrypt -n --agree-tos --force-renewal

这里会把HTTPS证书等文件都放到/etc/letsencrypt/live文件夹里面.

1
2
3
4
5
6
7
8
9
10
docker exec -it nginx /bin/bash

root@ee783f0e1ef2:/# cd etc/letsencrypt/live/
root@ee783f0e1ef2:/etc/letsencrypt/live# ls -al
total 16
drwx------ 3 root root 4096 Sep 20 15:31 .
drwxr-xr-x 9 root root 4096 Sep 11 13:28 ..
-rw-r--r-- 1 root root 740 Sep 11 13:28 README
drwxr-xr-x 2 root root 4096 Sep 11 13:28 blog.tyokyo320.com
root@ee783f0e1ef2:/etc/letsencrypt/live#

然后恢复HTTPS的设置, 重新加载Nginx的配置.

1
2
3
# Uncomment SSL related directives in configuration:
sed -i -r 's/#?;#//g' /etc/nginx/sites-available/blog.tyokyo320.com.conf
nginx -t && nginx -s reload

以上, 即可完成Let’s Encrypt的证书配置.

总结

总结一下Nginx容器内部的文件结构,一些自带的文件略

  • 配置文件: /etc/nginx
1
2
3
4
5
6
7
8
9
10
11
12
/etc/nginx
|-- conf.d
|-- dhparam.pem
|-- general.conf
|-- letsencrypt.conf
|-- mime.types
|-- nginx.conf
|-- security.conf
|-- sites-available
| `-- blog.tyokyo320.com.conf
|-- sites-enabled
| `-- blog.tyokyo320.com.conf -> ../sites-available/blog.tyokyo320.com.conf
  • 日志文件: /var/log/nginx/
1
2
3
/var/log/nginx/
|-- access.log
`-- error.log
  • 网站文件: /usr/share/nginx/html/
1
2
3
/usr/share/nginx/html/
`-- blog.tyokyo320.com
`-- public

外网访问

路由器上设置

  • 80(HTTP)
  • 443(HTTPS)

端口映射. 映射到部署Docker的服务器上.

这里要注意一下端口回流, 因为NAT的原因, 内网的主机是无法访问公网IP的内网服务器的. 也就是你无法在内网通过域名或公网IP访问到和你在同一个内网下的服务器. 简单的来说就是你PC想和路由器(服务器在路由器下)建立链接, 但是服务器发现目标IP直接是你内网PC的IP, 于是服务器准备直接和你PC进行连接, 这连接就无法建立, 导致无法访问.

解决方法:
采用简单的解决方法, 有些路由器有对端口回流的有处理可以开启, 或者在路由器层次上配置DNS, 将对应的域名解析为内网服务器的IP地址, 更高级的方法就是设置NAT, 将源IP进行修改, 不过一般路由器无法实现.

hexo迁移到另一台电脑

随着blog文章数量的增加,笔记本电脑写日志的时候会相对较卡(笔记本电脑性能不高),于是想在家里写的时候用PC主机写。

迁移大致分为两部分,自己博客文件夹内容(hexo)和主题文件夹(next)。

1
2
3
4
5
6
7
8
9
.
└── hexo
├── node_modules
├── public
├── scaffolds
├── source
└── themes
├── landscape
└── next

自己的博客文件夹(hexo)直接git同步过去就行。但是next是另一个git库,里面是自己一些配置文件包括了背景图片等等。

next库的迁移

git仓库位于个人服务器

笔记本电脑上的操作
  1. 笔记本电脑修改next文件夹的下的git文件.git/config,添加远程链接
1
2
3
[remote "nuc"]
url = nuc-git:/home/git/repositories/Blog/next/.git
fetch = +refs/heads/*:refs/remotes/origin/*
  1. git push上传至自己的服务器
1
2
3
4
5
6
7
8
9
git push nuc
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 4 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 1.99 MiB | 12.65 MiB/s, done.
Total 5 (delta 3), reused 0 (delta 0)
To nuc-git:/home/git/repositories/Blog/next/.git
2190e49..2a98327 master -> master
PC上的操作
  1. 主机PC上先把自己的博客文件夹同步下来
  2. 再同步next文件夹,第一次直接git clone即可
  3. 此后再同步只需要在next路径下git pull即可(第一次克隆后此后都会按照这个路径)

上传至gitea个人仓库转移

笔记本电脑上的操作
  1. 笔记本电脑修改next文件夹的下的git文件.git/config,添加远程链接
1
2
3
[remote "gitea"]
url = http://git.tyokyo320.com/zhangqiang/hexo-next.git
fetch = +refs/heads/*:refs/remotes/origin/*
  1. git push上传至自己的服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
git push gitea  

Enumerating objects: 12543, done.
Counting objects: 100% (12543/12543), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4307/4307), done.
Writing objects: 100% (12543/12543), 79.59 MiB | 8.43 MiB/s, done.
Total 12543 (delta 8279), reused 12116 (delta 7931)
remote: Resolving deltas: 100% (8279/8279), done.
remote: . Processing 1 references
remote: Processed 1 references in total
To http://git.tyokyo320.com/zhangqiang/hexo-next.git
* [new branch] master -> master
PC上的操作
  1. 主机PC上先把自己的博客文件夹同步下来
  2. 再同步next文件夹,第一次直接git clone即可
  3. 此后再同步只需要在next路径下git pull即可(第一次克隆后此后都会按照这个路径)

参考文章