"> 腾讯云服务器+Hexo 搭建博客（三） | wsn'Blog

wsn'Blog

和有趣的人做有趣的事

0%

腾讯云服务器+Hexo 搭建博客（三）

发表于 更新于
本文字数： 1.4k 阅读时长 ≈ 5 分钟

进阶配置

配置https

申请证书

在腾讯云内申请一个免费的SSL证书。

image-20230311153628597

下载证书（Nginx）：

image-20230311153709277

解压后得到：

image-20230311153858130

使用scp命令将证书文件拷贝到服务器上：

1
2
cd 证书文件夹
scp * git@公网ip:/usr/local/soft/nginx/conf

修改配置文件

在服务器端修改配置文件

1
2
cd /usr/local/soft/nginx
vim conf/nginx.conf

修改内容如下：

image-20230311154255884

在文件最后修改server_name为你的公网ip或域名、ssl_certificate为*.pem文件存放的位置、ssl_certificate_key为*.key文件存放的位置。

修改location为hexo目录所在位置。

修改原有端口80的监听，加一行配置

1
return 301 https://www.xxxxxx.cn$request_uri;

image-20230311154842956

重启nginx:

1
2
cd /usr/local/soft/nginx/sbin
./nginx -s reload

Hexo主题配置

我是用的是next主题，配置后效果如下，如果不喜欢的话可以搜索其他博客的主题配置。

image-20230311154953981

配置next主题

1.前往Next主题制作团队的主页下载Zip压缩包

image-20230311155244994

  1. 下载后，解压到博客目录下的themes文件夹内

image-20230311155419423

重命名为next:

image-20230311155356824

  1. 修改站点配置文件_config.yml

    基础配置

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title:  					#博客标题
    subtitle: 					#副标题
    description:				#网站描述 
    keywords: 					#网站关键词
    author: 王士宁	  			  #名字
    language: zh-CN 			#网站参考语言
    timezone: 'Asia/Shanghai' 	# 时区

    修改主题：

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

  2. 修改主题配置文件themes\next\_config.yml

    (1) 主题风格

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

    (2) 设置导航栏菜单

    可自行增减功能，取消注释即可启用。

    image-20230311160301923

（3）侧边栏设置

侧边栏我设置的位置是左侧，同时设置永远显示，这里也可以根据注释修改

image-20230311160412761

（4） 侧边栏头像

​ url链接为图片的相对路径，在next/source目录下。

image-20230311160550828

（5）社交链接

这里是侧边栏链接，可以指向某个链接或某个网址。

这里我只加了一个email，因为其他账号都没有发啥东西，等开始更新再添加。

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
social:
  #GitHub: https://github.com/yourname || fab fa-github
  E-Mail: 2803125272@qq.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/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  
social_icons:
  enable: true
  icons_only: false
  transition: false

# Blog rolls
links_settings:
  icon: fa fa-link
  title: Links
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com

（6）打赏功能

效果如下

image-20230311161459148

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  comment: Q：如果你觉得博主写的不错，可以打赏支持一下
  #comment: Donate comment here.

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

（7）关注其他发布渠道

image-20230311161601353

1
2
3
4
5
6
7
# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

(8) 返回顶部按钮并显示阅读进度

image-20230311161710143

1
2
3
4
5
6
7
8
9
10
11
12
13
14
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: left
  color: "#37c6c0"
  height: 5px

没用但是好玩的配置

2D人物

添加一个在左下角看着你的小人，没啥用但是很好玩。其实还有鼠标点击有爱心和好玩的丝线等奇奇怪怪的功能还没来得及配置，虽然没啥用，但是很有意思。

image-20230311161920116

  1. 下载插件
1
npm install --save hexo-helper-live2d
  1. 添加配置文件

​ 修改站点目录下的_config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
live2d:
  enable: true  # 是否启动
  scriptFrom: local # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  # 调试, 是否在控制台输出日志
  model:
    # use: live2d-widget-model-wanko  ## 模型文件
    # use: live2d-widget-model-hibiki  ## 模型文件
    use: live2d-widget-model-koharu  ## 模型文件
    # use: live2d-widget-model-shizuku  ## 模型文件
  display:
    position: right # 定位方向 left right top bottom
    width: 150  # 小人宽度
    height: 300 #  小人高度
    hOffset: -15  # 向 偏移
    vOffset: -15  # 像 偏移
  mobile:
    show: true  # 手机端是否显示
  react:
    opacity: 0.7  # 模型透明度
  1. 安装你喜欢的模型

模型名称如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
>live2d-widget-model-chitose
>live2d-widget-model-epsilon2_1
>live2d-widget-model-gf
>live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
>live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
>live2d-widget-model-haruto
>live2d-widget-model-hibiki
>live2d-widget-model-hijiki
>live2d-widget-model-izumi
>live2d-widget-model-koharu
>live2d-widget-model-miku
>live2d-widget-model-ni-j
>live2d-widget-model-nico
>live2d-widget-model-nietzsche
>live2d-widget-model-nipsilon
>live2d-widget-model-nito
>live2d-widget-model-shizuku
>live2d-widget-model-tororo
>live2d-widget-model-tsumiki
>live2d-widget-model-unitychan
>live2d-widget-model-wanko
>live2d-widget-model-z16

可直接通过命令下载，比如要下载wanko模型就用：

1
npm install --save live2d-widget-model-wanko

因为是在站点目录下修改的配置文件，所以需要修改路径：

在博客目录下创建一个文件夹live2d_models，在node_modules中找到下载好的2d人物模型，复制到live2d_models文件夹下。

修改配置文件：

1
2
3
4
5
model:
    # use: live2d-widget-model-wanko  ## 模型文件
    # use: live2d-widget-model-hibiki  ## 模型文件
    use: live2d-widget-model-koharu  ## 模型文件
    # use: live2d-widget-model-shizuku  ## 模型文件

use后修改为模型名称即可完成修改。

Q：如果你觉得博主写的不错，可以打赏支持一下

欢迎关注我的其它发布渠道