Ovler

Ovler

tg_channel
twitter
telegram
github
HomeArchivesTagsNFT

How did I built this blog

#hexo#blog#xlog31
AI-generated summary
This blog post discusses the process of building a blog using the Hexo framework. It covers the selection of Hexo as the content framework, Vercel as the hosting service, and pnpm as the package manager. The post also includes steps for creating a Hexo website using a Vercel template, configuring the website locally, and selecting the YUN theme. It provides instructions for installing dependencies, updating the Hexo version, and running the Hexo server locally. Additionally, it explains how to configure the YUN theme, set up social icons in the sidebar, configure the banner, cursor, avatar, and footer, and use the XiaWu WenKai font.

更新于 2023-03-21：目前该文已于 xlog 重新发布，如想看到之前的 hexo，请通过 hexo.180811.xyz 访问。

零：内容框架、托管服务等的选择及必要的准备#

内容框架：选择 Hexo#

  • 配置较为简单
  • 简洁而快速
  • 是静态内容框架
  • 社区活跃，插件、主题众多

托管服务：选择 Vercel#

  • 配置较为省心

  • CI/CD 方便

  • 既往使用经验较多

可以从官网注册。

包管理器：选择 pnpm#

  • 节约磁盘空间

  • 安装速度快

  • 各系统间表现稳定

安装可以参考官方教程。

存储处；选择 GitHub#

  • 与 Vercel 深度结合
  • 使用场景多样
  • 全球最大

可以从官网注册。

一：使用 Vercel 模板快速创建 Hexo 网站#

在 Vercel 创建新项目#

前往 Vercel ，新增项目。

image-20220325182649912

前往模板中心寻找模板#

image-20220325182905036

选择 Hexo#

image-20220325182957226

创建 Git 文件夹#

image-20220325183111580

完成#

image-20220325183645368

此时已经搭建完成一个基本的 Hexo 站点。

二：配置网站#

本地安装依赖#

之前本地已经安装了 pnpm，故直接运行

pnpm install

结果为

image-20220325201839522

升级 Hexo 版本#

观察发现 Hexo 有新稳定版本 6.1.0，故升级。

pnpm update ----latest

image-20220325202013959

在本地运行 hexo 服务

image-20220325202058110

此时发现有 warn，故修改 warn 处，顺便配置文件进行了 本地化 修改：

image-20220325203724428

此时网页效果为：

image-20220325202141659

选用 YUN 主题#

此时感觉网页效果不佳，准备安装并使用 Hexo-Theme-Yun 主题。

pnpm install hexo-theme-yun@latest --save
hexo config theme yun

image-20220325202453027

image-20220325202524210

配置 YUN theme#

在 YUN 主题的配置文件 _config.yun.yml 中做以下配置：

语言设置为中文#

language: zh-CN

配置侧边栏社交图标#

特别：关于 RSS#

RSS 是本人的心头爱，肯定要进行配置。配置 RSS 不止需要在 _config.yun.yml 中进行配置，还需要安装 hexo-generator-feed，具体如下：

pnpm install hexo-generator-feed --save

再在_config.yml的末尾加入如下内容作为hexo-generator-feed的配置项：

feed:
  enable: true
  limit: 20
  hub: https://pubsubhubbub.appspot.com/
  content: true
  order_by: -date
  icon: images/avatar.jpg
  autodiscovery: false
  template:

再在 _config.yun.yml 中加入以下配置，完成侧边栏的设置。下面的是当时我实际配置文件。

# 配置侧边栏社交图标
social:
  - name: RSS
    link: /atom.xml
    icon: icon-rss-line
    color: orange
  - name: GitHub
    link: https://github.com/Ovler-Young
    icon: icon-github-line
    color: "#181717"
  - name: E-Mail
    link: mailto:ovlertheyoung@gmail.com
    icon: icon-mail-line
    color: "#8E71C1"
  - name: 网易云音乐
    link: https://music.163.com/#/user/home?id=310842841
    icon: icon-netease-cloud-music-line
    color: "#C10D0C"
  - name: Telegram
    link: https://t.me/Ovler
    icon: icon-telegram-line
    color: "#0088CC"
  - name: Telegram Channel
    link: https://t.me/shengxiaoguan
    icon: icon-telegram-fill
    color: "#0088CC"

配置标语动画#

banner:
  enable: true
  title: 
    - Ovler
    - 的
    - hexo
  border: true
  cloud:
    enable: true
    color: "white"
  go_down:
    enable: true
    icon: icon-arrow-down-s-line

配置替换鼠标光标#

cursor:
  enable: true

配置侧边栏头像#

avatar:
  enable: true
  url: /images/avatar.jpg
  rounded: true
  opacity: 1
  mickey_mouse: false
  status:
    enable: true
    emoji: 😀
    message: Hello world!

配置页脚#

配置了年份和运行时间

footer:
  since: 2022
  live_time:
    enable: true
    prefix: 本博客已运行
    suffix: (●'◡'●)
    start_time: "2022-03-21T17:05:00"

使用 霞鹜文楷 字体#

个人较为喜欢 霞鹜文楷 字体，参考教程后配置。

先安装lxgw-wenkai-webfont字体包：

 pnpm install lxgw-wenkai-webfont --save

image-20220327011612735

再在 _config.yun.yml 中加入以下配置，完成霞鹜文楷字体的设置。

font:
  cdn:
    enable: true
    lib:
      - https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@latest/style.css
  serif:
    family: "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif"
    weight: 900
  sans_serif:
    family: "'LXGW WenKai', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif"
    weight: 400
  monospace:
    family: "'Source Code Pro', 'Courier New', Courier, Consolas, Monaco, monospace"

配置友链#

新建页面：

hexo new page links

image-20220331023933139

根据文档对友链进行配置：

进入 source/links/index.md，设置 links 字段。

  • url: 博客链接
  • avatar: 头像图片链接
  • name: 怎么称呼？
  • blog: 站点名称
  • desc: 一句话描述
  • color: 代表色，默认是灰色 gray

根据文档，我的友链配置为：

---
layout: links
title: Friends
date: 2019-06-21 13:06:06
keywords: 链接
description: 一个emm，咖啡馆？
comments: true
links:
  - url: https://hexo.180811.xyz
    avatar: https://hexo.180811.xyz/images/avatar.jpg
    name: Ovler
    blog: Ovler 的 Hexo
    desc: Feeling tired.
    color: "#a5f4e8" # 代表色
    email: ovlertheyoung@gmail.com
  - url: https://blog.180811.xyz
    avatar: https://hexo.180811.xyz/images/avatar.jpg
    name: Ovler
    blog: Ovler 的 typecho
    desc: 以前的博客站，似乎，好久没更新了
    color: "#df5749" # 代表色
    email: ovlertheyoung@gmail.com
placeholder: 还没想好说些什么 # 默认对友链的描述
tip: 友链加载中～如失败请刷新重试～
---

## 友链

一个emm，咖啡馆？

来坐坐吧！

目前还没啥来加的，大佬们可以通过侧边栏的各种联系方式联系到我来加友链，我会尽快回复的！

目前只有自娱自乐，也希望日后能加多一些。

配置背景#

在 _config.yun.yml 中加入以下配置，完成背景的设置：

bg_image:
  enable: true
  url: https://cdn.jsdelivr.net/gh/Ovler-Young/blog/source/images/2830.png
  dark: https://cdn.jsdelivr.net/gh/Ovler-Young/blog/source/images/2830.png
  opacity: 0.8

注意：这里的图片链接最好是图床等加载较快的图片，太慢的话滑动会闪：（

配置页面#

配置链接#

参考 https://hexo.io/zh-cn/docs/permalinks 中配置修改

配置搜索#

配置搜索需要安装 hexo-generator-search，具体如下：

pnpm install hexo-generator-search --save

image-20220327012220168

再在主题文件_config.yun.yml的末尾加入如下内容作为hexo-generator-feed的配置项：

# 关闭默认的引擎搜索
engine_search:
  enable: false
# 开启本地搜索
local_search:
  enable: true

配置 tags#

安装 hexo-generator-tag，具体如下 (截图时已安装)：

pnpm install hexo-generator-tag --save

image-20220327014615469

参考主题的教程, 有

新建 tags 页面，在博客根目录下输入：

hexo new page tags

修改 source/tags/index.md 的 Front Matter

---
date: 2017-10-09 19:11:58
comments: false
type: tags
---

在 _config.yun.yml 中设置：

wordcloud:
enable: true

来使用彩色的词云替代原生的标签云。

配置分类#

因为原有配置中已经包含了hexo-generator-tag依赖，配置分类不再需要安装新插件。

新建页面：

hexo new page categories

image-20220331023215967

修改新生成文档的头部信息：

---
title: categories
date: 2022-03-31 02:27:20
comments: false
type: categories
---

处理 warngins#

image-20220326235513205

Hexo 运行总有好多 warning，让我很头疼。于是查阅资料，在这份资料中发现了解决办法。故，在package.json中加入以下内容：

  "resolutions": {
    "stylus": "^0.57.0"
  }

将 nib 中的过时 package 强制解析为新版本。在运行 pnpm install , 更新包及依赖。

顺便，它也干掉了 pnpm install 时报的 4 个 deprecated warn.

(nib 咋 GitHub 更新 npm 不发包呢…)

剩下两个 pnpm install 的 deprecated warn 都是来自 CSS 这个两年没维护的老东西了… 暂时无法处理

旧文章导入#

之前已有过一个博客，为 typecho 搭建，这次也一并迁移过来。

先在本地安装 hexo-migrator-rss 插件：

$ pnpm install hexo-migrator-rss --save
Packages: +56
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 529, reused 500, downloaded 27, added 56, done

dependencies:

image-20220331082820673

再运行 hexo migrate rss <source> 命令，我的情况是：

hexo migrate rss https://180811.xyz/index.php/feed/

image-20220331083006026成功导入四篇内容。

再对导入的文章做一遍校对，这里就不再赘述了。

另：还要干啥#

  • 补完站点介绍与个人页面

  • 写写怎么搞个 HexoPlusPlus 来管理 Hexo

    UPD： HexoPlusPlus， 它， achieved 了…… 等替代品 Wexagonal 变得可用中…

  • 还有啊，别做鸽子了：（

    不过感谢你们的催更，嘻嘻

  • 绑定网址

  • 为旧文章打 tag

  • 调整配色和背景图片

主要参考资料#

https://vercel.com/guides/deploying-hexo-with-vercel

https://pnpm.io/cli/update

https://yun.yunyoujun.cn/guide/

https://www.haoyizebo.com/posts/710984d0/

https://github.com/lxgw/LxgwWenKai/issues/24

https://hexo.io/zh-cn/docs/permalinks

https://hexo.io/zh-cn/docs/migration#RSS

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.