冰冻橘子的自留地
0%

博客折腾笔记

发表于 更新于 分类于 Valine：

之前有拿Wordpress搭建过博客，感觉还是太臃肿了，Hexo这种静态博客刚好满足我的需求，记录下折腾博客的过程。

前期准备

在云服务商处购买服务器与域名，备案的时候需要服务器，如果打算将博客托管在对象存储或者github pages之类的平台，可以选择不购买服务器，直接到*宝购买服务号即可。

Hexo

Hexo 的安装

使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

  • 安装hexo
1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

如果你觉得速度慢，可以使用阿里提供的NPM淘宝镜像，或者使用代理

  • 修改配置

    打开_config.yml，修改title、description、author、language、url字段。

安装 next 主题

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

在_config.yml中将theme字段值设置为next。

配置 next 主题（可选）

配置next主题指的是修改next/_config.yml文件，注意区分。

选择 Scheme

1
2
3
scheme: Muse
#scheme: Mist
#scheme: Pisces

设置头像

1
2
3
4
5
6
7
avatar:
  # Replace the default image and set the url here.
  url: https://image.onebug.tech/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

添加标签页

  • 新建标签页

    1
    2
    $ cd your-hexo-site 
    $ hexo new page tags

  • 修改主题配置文件

    1
    2
    3
    4
    5
    6
    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

添加分类页

  • 新建标签页

    1
    2
    $ cd your-hexo-site 
    $ hexo new page categories

  • 修改主题配置文件

    1
    2
    3
    4
    5
    6
    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

侧边栏社交链接

1
2
3
social:
  GitHub: https://github.com/lsqls || fab fa-github
  邮箱: mailto:764666894@qq.com || fa fa-envelope

设置字体

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
font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

设置动画效果

1
2
use_motion: true  # 开启动画效果
# use_motion: false # 关闭动画效果

设置页脚

  • 不显示Powered by Hexo & NexT信息

    1
    powered: false

  • 添加备案号

    1
    2
    3
    beian:
     enable: true
     icp: 京ICP备17073808-2

  • 站点建立时间

    1
    since: 2020

设置版权信息

1
2
3
4
5
# Declare license on posts
post_copyright:
 enable: true
 license: CC BY-NC-SA 3.0
 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

加载进度条

  • 安装pace

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

  • 修改配置文件

    1
    2
    3
    4
    5
    6
    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: minimal

显示当前浏览进度

1
scrollpercent: true

搜索功能

1
2
local_search:
 enable: true

百度统计

登录 百度统计，定位到站点的代码获取页面，复制 hm.js? 后面那串统计脚本 id，编辑 主题配置文件， 修改字段 baidu_analytics，值设置成你的百度统计脚本 id

文章阅读次数统计

NexT主题已集成了不蒜子的访客人数和文章阅读统计功能。

修改NexT\_config.yml设置enable为true即可。

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

CDN

比较常用的开源项目 CDN 服务商主要有 unpkg、bootcdn、 cdnjs、jsdelivr 和 cloudflare，本站主要使用 jsdelivr 提供的 CDN 加速服务。

评论系统

Hexo+Next添加Valine评论系统 | Z Blog (yueyue200830.github.io)

leanCloud配置域名解决博客valine无法评论问题 | 吴志勇的博客 (wu-zy.com)

博客部署

依赖

  • git
  • nginx

部署

git服务器

  • 搭建git服务器

  • 配置钩子

    在 /home/git/lsqls/public.git/hooks 目录下新建一个 post-receive 可执行文件，编辑这个文件，写入如下内容：

    1
    2
    #!/bin/bash
    git --work-tree=/var/www/hexoblog/public --git-dir=/home/git/lsqls/public.git checkout -f
    • 设置这个文件的可执行权限：chmod +x post-receive
    • 更改配置目录的权限：chown -R git:git /var/www/hexoblog/public/
    • 注意，/var/www/hexoblog/public 要换成你自己的部署目录

    可以尝试手动执行脚本，验证是否正常工作。

nginx服务器

1
2
cd /etc/nginx/conf.d/
vi blog.conf

blog.conf文件配置，开启缓存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
        listen       80;
        server_name  www.onebug.tech;
        charset utf-8;

        root   /var/www/hexoblog/public;# 这里是静态文件地址
        index  index.html;
    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {

   		access_log off;
    		expires 30d;
	}

	location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
			access_log off;
			expires 24h;
	}
	
	location ~* ^.+\.(html|htm)$ {
	 		expires 1h;
	}

}

编辑nginx.conf，开启gzip

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
gzip on;

#设置允许压缩的页面最小字节数;
gzip_min_length 1k;

#设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_buffers 4 16k;

#压缩版本
gzip_http_version 1.1;

#设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快;级别越高，压缩就越小
gzip_comp_level 6;

#制定压缩的类型
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/javascript application/json image/svg+xml application/x-font-ttf font/opentype image/x-icon;

#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";

#选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写
gzip_vary on;

七牛云

方法一

  • 在hexo目录配置文件 qiniu.conf：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
      "src_dir": "D:\\hexoblog\\public",
       //储存空间名称
      "bucket": "lbshexoblog",
      //是否覆盖  
      "overwrite" : true,
      //检查新增文件
      "rescan_local" : true
    }

  • 添加CDN刷新文件列表cdnrefresh.txt：

    1
    https://www.onebug.tech

  • 上传命令：

    1
    2
    3
    hexo g
    qshell qupload qiniuyun.conf
    qshell cdnrefresh -i cdnrefresh.txt

  • 一键部署，修改package.json，今后只需要 npm run publish 就可实现一键打包部署到七牛云

    1
    2
    3
    "scripts":{
        "publish": "hexo g && qshell qupload qiniuyun.conf && qshell cdnrefresh -i cdnrefresh.txt"
      }
方法二

使用工具qiniu/QSunSync: 七牛云文件同步图形化工具－Windows版本 (github.com)同步。个人更倾向于用该方法。

设置404页面

在七牛云存储控制设置静态页面处上传自定义404页面。

image-20230323122939028

图床

图床能够很大程度降低响应延迟，本站使用的是七牛云作为图床。可以参考该文章搭建。

bugfix

中文目录不跳转

hexo更新后遇到中文目录不跳转的问题，修复见fix: Chinese TOC cannot jump。直接替换source/js/utils.js。