关于本站

1 月 1 日，2022

约 4 分钟阅读 ( 1463 个字 )

阅读

切换到原始 Markdown 内容

构建与托管

本站使用 HEXO 构建生成静态网站文件，~~托管在云服务器创建的 Plesk 面板中。~~

~~在 Plesk 中配置了 Webhook，当我提交变更到我的 Github 私有仓库以后，触发 Actions 构建网站，变更的内容将自动同步到 Plesk 网站文件夹进行更新。~~

2024-02-06 因为虚拟主机宿主机多次被 DDoS 攻击，所以我把网站托管换到了 CloudFlare Pages。

为什么用 HEXO?

很多年前当我还是一个大学生的时候，捣鼓 VPS、建站是一件很酷的事情。当时我用的是 BandWagon Host，使用 NGinx、PHP、MySQL 等配套软件安装 WordPress 建立了自己的个人博客。当时还经历过数据库被勒索，丢失了我写的几篇文章（其实也没有什么，很初级的内容）。

重点在于，像 WordPress 这样依赖数据库的博客非常需要维护，对比之下，静态生成的博客如 HEXO、HUGO 只需关心自己的博客文章文件即可，同时 Markdown 格式又允许使用不同的设备随时编写、记录，没有什么迁移负担。

换到 HEXO 以后，整个博客站点托管在 GitHub，可以很方便地通过它的 Actions 自动生成新的网站文件，也不用担心丢失。

个性化

主题

~~使用 Icarus 主题。~~

2025-01-18 换上了自己写的主题。

LynanBreeze/hexo-theme-linen: A clean Hexo theme.

大屏设备可以获得最佳阅读体验。谢谢有读者喜欢我的主题，因为是从头开始搓，所以陆陆续续一直在优化/修 bug。估摸着跑个一年到时候开源的话应该是比较 ok 的状态了。

想做的主题：

小而美 审美嘛因人而异，主要是想要用尽可能少的资源来做，目前的主题风格是参考 The Medium Blog
可访问性好 希望在各种设备都可访问，例如：禁用 JavaScript，RSS 阅读器，老旧设备，小屏设备（我的一代 iPhone SE）

封面图片

有的来自 Unsplash，有的是我自己拍的，有的则是我自己用 Figma 绘制并导出的 SVG 文件。矢量图形清晰度非常完美，体积也极小。使用 Figma 后，整理素材更简单了。

字体

本站共计使用两种开源/免费字体：

Source Serif
The quick brown fox jumps over the lazy dog
Source Han Serif CN
敏捷的棕色狐狸跳过了懒狗

以及系统字体：

font-family

font-family:
  SF Pro Text,
  SF Pro Icons,
  Helvetica Neue,
  Helvetica,
  Arial,
  sans-serif;

字体文件由脚本收集所有用到字符简化而成，提高加载速度。

插件

懒加载

使用了 hexo-lazyload-element 处理图片、视频、iframe 资源的懒加载，提升页面性能的同时避免消耗不必要的流量。

WebP 图片

~~部分图片是上传到七牛云并使用 ?imageMogr2/format/webp 参数加载 WebP 图片格式资源。但是对于一些设备（iOS13 以下，MacOS Mojave 以下）需要做兼容。~~

2024/02/22 更换了图床，全站都没有再使用七牛云的资源了。

RSS

使用 hexo-generator-feed 生成 /feed.xml 便于 RSS 阅读器订阅。

你可以使用以下地址订阅内容。

RSS

1	https://lynan.cn/feed.xml

评论区

使用 Gitalk。

彩蛋

CSS 动画

例如

过山车🎢

iframe 交互

有些页面会内嵌一些iframe，简单方便地实现一些交互功能。

单独设置的文章背景

例如关西旅行的枫叶背景。

暂时是这些，未来可能会有一些新的想法加入进来。

详细更新内容可见：新特性

---
title: 关于本站
date: 2022-01-01 12:00
tags: [HEXO]
cover: https://r2-assets.thelynan.com/u/easter-eggs-banner-xzczVz.svg
ogImage: "https://r2-assets.thelynan.com/uPic/ester eggs.jpg"
hide:
  recent: true
translations: ["en"]
appendRawMarkdown: true
---

## 构建与托管

本站使用 [HEXO](https://hexo.io/index.html) 构建生成静态网站文件，~~托管在云服务器创建的 [Plesk](https://www.plesk.com/) 面板中。~~

~~在 [Plesk](https://www.plesk.com/) 中配置了 Webhook，当我提交变更到我的 Github 私有仓库以后，触发 Actions 构建网站，变更的内容将自动同步到 [Plesk](https://www.plesk.com/) 网站文件夹进行更新。~~

<div class="new-updates">
2024-02-06 因为虚拟主机宿主机多次被 DDoS 攻击 <span style="display: inline-block; width: 14px; height: 14px; background-image: url('https://r2-assets.thelynan.com/uPic/3zffxN_1700142351761.png'); background-size: cover;"></span>，所以我把网站托管换到了 CloudFlare Pages。
</div>

### 为什么用 HEXO?

很多年前当我还是一个大学生的时候，捣鼓 VPS、建站是一件很酷的事情。当时我用的是 [BandWagon Host](https://bwh1.net/)，使用 NGinx、PHP、MySQL 等配套软件安装 [WordPress](https://wordpress.com/) 建立了自己的个人博客。当时还经历过数据库被勒索，丢失了我写的几篇文章（其实也没有什么，很初级的内容）。

重点在于，像 WordPress 这样依赖数据库的博客**非常需要维护**，对比之下，静态生成的博客如 HEXO、HUGO 只需关心自己的博客文章文件即可，同时 Markdown 格式又允许使用不同的设备随时编写、记录，没有什么迁移负担。

换到 HEXO 以后，整个博客站点托管在 [GitHub](https://github.com/)，可以很方便地通过它的 Actions 自动生成新的网站文件，也不用担心丢失。

## 个性化

### 主题

~~使用 [Icarus](https://github.com/ppoffice/hexo-theme-icarus) 主题。~~

<div class="new-updates">
2025-01-18 换上了自己写的主题。
</div>

<br>

<a href="https://github.com/LynanBreeze/hexo-theme-linen" class="github-link">
  <img class="preview-img" no-lazy no-link src="https://opengraph.githubassets.com/b1330d2c1ce09a9be1c10994129f537498cf40c686e5df762a58b187eea59e11/LynanBreeze/hexo-theme-linen" style="aspect-ratio: 1200/600;">
  <span class="title">LynanBreeze/hexo-theme-linen: A clean Hexo theme.</span>
</a>

大屏设备可以获得最佳阅读体验。谢谢有读者喜欢我的主题，因为是从头开始搓，所以陆陆续续一直在优化/修 bug。估摸着跑个一年到时候开源的话应该是比较 ok 的状态了。

想做的主题：

- **小而美** 审美嘛因人而异，主要是想要用尽可能少的资源来做，目前的主题风格是参考 [The Medium Blog](https://medium.com/blog)
- **可访问性好** 希望在各种设备都可访问，例如：禁用 JavaScript，RSS 阅读器，老旧设备，小屏设备（我的一代 iPhone SE）

### 封面图片

有的来自 [Unsplash](https://unsplash.com/)，有的是我自己拍的，有的则是我自己用 [Figma](https://www.figma.com/) 绘制并导出的 SVG 文件。矢量图形清晰度非常完美，体积也极小。使用 Figma 后，整理素材更简单了。

### 字体

本站共计使用两种开源/免费字体：

1. **[Source Serif](https://github.com/adobe-fonts/source-serif)**
   <span style="font-family: 'source-serif';">The quick brown fox jumps over the lazy dog</span>
2. **[Source Han Serif CN](https://fonts.adobe.com/fonts/source-han-serif-simplified-chinese-subset)**
   <span style="font-family: 'source han serif cn';">敏捷的棕色狐狸跳过了懒狗</span>

以及系统字体：

```css font-family
font-family:
  SF Pro Text,
  SF Pro Icons,
  Helvetica Neue,
  Helvetica,
  Arial,
  sans-serif;
```

字体文件由脚本收集所有用到字符简化而成，提高加载速度。

## 插件

### 懒加载

使用了 [hexo-lazyload-element](https://github.com/LynanBreeze/hexo-lazyload-element) 处理图片、视频、iframe 资源的懒加载，提升页面性能的同时避免消耗不必要的流量。

### WebP 图片

~~部分图片是上传到七牛云并使用 `?imageMogr2/format/webp` 参数加载 WebP 图片格式资源。但是对于一些设备（iOS13 以下，MacOS Mojave 以下）需要做兼容。~~

<div class="new-updates">
2024/02/22 更换了图床，全站都没有再使用七牛云的资源了。
</div>

### RSS

使用 [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed) 生成 `/feed.xml` 便于 RSS 阅读器订阅。

你可以使用以下地址订阅内容。

```html RSS
https://lynan.cn/feed.xml
```

### 评论区

使用 [Gitalk](https://github.com/gitalk/gitalk)。

### 广告

~~使用 [Google AdSense](https://www.google.com/adsense)，在边栏 Widget 内（小屏设备则在文章最底部），对阅读影响比较小。如果它能覆盖我的 OSS 费用就好啦。~~

有时候会弹全屏广告，体验不好，关了关了。

## 彩蛋

### CSS 动画

例如

<span style="display: inline-block;animation: tilt-shaking ease infinite 0.3s;"><span style="margin-top: 3px; font-size: 18px; font-weight: bold; transform: rotate(30deg);display: inline-block;">过</span><span style="margin-top: -2px; font-size: 14px; font-weight: bold; transform: rotate(-17deg); display: inline-block;">山</span><span style="margin-top: 3px; font-weight: bold; font-size: 19px;transform: rotate(25deg); display: inline-block;">车</span></span><span style="font-size: 24px; margin-left: -13px">🎢</span>

### iframe 交互

有些页面会内嵌一些iframe，简单方便地实现一些交互功能。

<iframe src="/static/image-comparison/index.html?src1=https://r2-assets.thelynan.com/u/65546b9bc458853aefcd0334.jpg&src2=https://r2-assets.thelynan.com/u/65546bb0c458853aefcd392e.jpg" scrolling="no" border="0" frameborder="no" framespacing="0"  style="width: 100%; height: 100%; aspect-ratio: 1.3333333333" referrerpolicy="" data-placeholderimg="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAASABgDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAQGBwj/xAAmEAABBAEDAQkAAAAAAAAAAAACAAEDBAUGBxFhEhMUITFBUXGC/8QAFwEBAAMAAAAAAAAAAAAAAAAABAECA//EABoRAAIDAQEAAAAAAAAAAAAAAAABAgMxIUH/2gAMAwEAAhEDEQA/AIm2W/tyEY4rExEzce62Oxv7BYxRhBNwbN8rjnB4DI4mJ5O5Ly6Kz6eguzmQzG7MRenKmF8nxlHWl02SG/Y1Zd8XYMiFy5ZFM0vWiqY0GjZu2zIkLDJlJyEUTUJnaIG/LKlUDMb3Ak7fToiAtFeGraPkkIhYjJ26uiImwwO9P//Z"></iframe>

### 单独设置的文章背景

例如[关西旅行](/journey-to-japan-2023/)的枫叶背景。

暂时是这些，未来可能会有一些新的想法加入进来。

详细更新内容可见：[**新特性**](/new-features/)

<link rel='stylesheet' href="/css/animations.css" />

HEXO