使用hexo和codeberg pages从零开始搭建个人博客

前言

拥有一个自己的博客网站听起来是一个很酷的事，你可以在博客里分享一些东西，它也许可以帮助到一些人，也可以让自己在互联网留下足迹，也许你会认为要买服务器买域名的，肯定要花不少钱，不过也有免费方案，例如我这个博客就是使用hexo框架，用codeberg的pages来托管自己的博客的，不过除了codeberg的pages服务，github也有pages服务，也就是我的副站，不过本篇博文只讲hexo和codeberg-pages从零开始搭建个人博客，github的找个时间再发布

注册账号

那么既然要使用codeberg pages服务那么肯定需要一个codeberg账号，如果没有就访问官方网站，Codeberg是一个代码托管平台，详细说明查看维基百科注册 codeberg账号这种小孩都会的东西我就不细说了，只需要准备一个可以正常使用的邮箱(最好是gmail)，然后注意一下自己的用户名,因为博客网址包含用户名称

安装软件

使用hexo我们需要nodejs和npm，我们使用包管理器安装
sudo pacman -S git nodejs npm

然后使用npm来全局安装hexo
sudo npm install -g hexo-cli

其他细节参考官方文档：
https://hexo.io/zh-cn/docs/

初始化博客

使用npm安装好hexo后，执行以下命令来初始化
hexo init blog

完成后就会在当前目录创建一个blog的文件夹，里面就是我们的博客本体,我们cd到该目录
cd blog

进入该目录后使用npm来补全依赖什么的
npm install

基本配置

打开_config.yml文件修改配置

# Site
title: Aidens的博客  #网站标题
subtitle: ''  #网站副标题
description: 'linux折腾记录'  #网站描述
keywords: Aidens  #网站的关键词
author: Aidens-fox  #名字
language: zh-CN #网站使用的语言
timezone: 'Asia/Shanghai' #网站时区

其他细节参考官方文档：
https://hexo.io/zh-cn/docs/configuration

配置主题

hexo默认的主题，虽然算不上难看但是我不喜欢，因为它没有暗色然后样式我也不太喜欢所以我的博客使用了cactus主题，一个极简的响应式主题，我们使用git工具把主题克隆到我们博客themes
文件夹里面
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

然后在_config.yml文件修改主题(不是主题的_config.yml，是博客根目录的_config.yml)

# theme: landscape
theme: cactus

然后创建一些比如说关于,标签的页面
hexo new page about

文件在blog/source/about文件夹里，打开里面的index.md修改为

---
title: about
type: "about"
---

正文

标签那些东西也是一样的操作

修改主题字体大小

正文字体大小设置

cactus主题默认的字体比较小，在阅读博文的时候就会比较费劲,打开blog/themes/cactus/source/css/_variables.styl

// Fonts 修改$font-size部分
$font-family-body = "Menlo", "Meslo LG", monospace
$font-family-mono = "Menlo", "Meslo LG", monospace
$font-size = 22px
$line-height = 1.725
$page-width = 0rem + (hexo-config("page_width") || 39)

小标题字体大小设置

但是修改完成后你好发现虽然正文字体变大了但是小标题那些还是原来的大小，就会让正文比小标题还大，这样就让小标题失去它的作用了，我们需要修改`blog/themes/cactus/source/css/_extend.styl
h1,h2,h3这些是从大到小的标题大小

$base-style
  h1, .h1
    display: block
    margin-top: 3rem
    margin-bottom: 1rem
    color: $color-accent-1
    letter-spacing: .01em
    font-weight: 700
    font-style: normal
    font-size: 1.5em

    antialias()

  h2, .h2
    position: relative
    display: block
    margin-top: 2rem
    margin-bottom: .5rem
    color: $color-accent-2
    text-transform: none
    letter-spacing: normal
    font-weight: bold
    font-size: 26px

  h3
    color: $color-accent-2
    text-decoration: underline
    font-weight: bold
    font-size: 25px

TOC字体大小设置

toc就是文章目录，但是还是老问题，toc字体太小了，所以打开blog/themes/cactus/source/css/_partial/post/actions_desktop.styl
修改#toc部分和上面的h1,h2,h3一样

#toc
   float: right
   clear: both
   overflow: auto
   margin-top: 1rem
   padding-right: 2rem
   max-width: 20em
   max-height: calc(95vh - 7rem)
   text-align: right

   a:hover
     color: $color-link

   .toc-level-1 > .toc-link
     display: none

   .toc-level-2
     color: $color-text
     font-size: 22px

     &:before
       color: $color-accent-1
       content: "#"

   .toc-level-3
     color: $color-meta
     font-size: 20px

   .toc-level-4
     color: darken($color-meta, 20%)
     font-size: 18px

   .toc-level-5
     display: none

   .toc-level-6
     display: none

   .toc-number
     display: none

其他设置

设置gruvbox主题配色

默认的cactus主题有三个主题，不过没有我最喜欢的gruvbox的主题，所以我们打开/home/uxtk/blog/themes/cactus/source/css/_colors/dark.styl 修改里面的配色

$color-background = #282828        // Gruvbox 经典深色背景
$color-footer-mobile-1 = lighten($color-background, 2%)
$color-footer-mobile-2 = lighten($color-background, 10%)
$color-background-code = #3c3836   // 代码块背景色 (bg1)
$color-border = #504945            // 边框色 (bg2)
$color-scrollbar = #7c6f64         // 滚动条 (bg4)
$color-meta = #928374              // 日期、标签等元数据 (灰色)
$color-meta-code = #928374
$color-link = #ebdbb2              // 普通链接颜色（复刻截图中的文章标题颜色）
$color-text = #ebdbb2              // 正文文本颜色 (米黄色 fg)
$color-accent-3 = #a89984          // 次要强调色 (fg4)
$color-accent-2 = #ebdbb2          // 悬停等状态色
$color-accent-1 = #fe8019          // 核心强调色：导航栏、分类大标题 (Gruvbox 橙色)
$color-quote = #b8bb26             // 引用块 (Gruvbox 绿色)
$highlight = hexo-config("highlight") || "gruvbox-dark"

在blog/themes/cactus/_config.yml 确保colorscheme是dark

设置logo和图标图片

默认的图片是一个可爱的仙人掌，所以我们要修改logo图片,在blog/themes/cactus/source/images放入自己的logo的图片,然后在blog/themes/cactus/_config.yml 修改为自己的图片

logo:
  enabled: true
  width: 100
  height: 100
  url: /images/logo.png
  gravatar: false
  grayout: false
  
  .....
  
favicon:
  desktop:
    url: /images/logo.png
    gravatar: false
  android:
    url: /images/logo.png
    gravatar: false
  apple:
    url: /images/logo.png
    gravatar: false

设置导航栏

在blog/themes/cactus/_config.yml修改nav部分

nav:
  home: /
  about: /about/
  articles: /archives/
  标签: /tags/
  资源: /resource/
  RSS: /atom.xml
  搜索: /search/

设置社交链接

在blog/themes/cactus/_config.yml修改social_links部分

social_links:
  -
    icon: github
    link: https://github.com/Aidens-fox?tab=repositories
 
  -
    icon: git
    label: codeberg
    link: https://codeberg.org/Aidens-fox

  -
    icon: mastodon
    label: mastodon.social
    link: https://mastodon.social/@aidens_fox

设置主页的文章显示数量

默认只显示最新的5篇文章，在blog/themes/cactus/_config.yml修改posts_overview部分

posts_overview:
  show_all_posts: true
  post_count: 10
  sort_updated: false

你也可以顺便在主页显示标签云
tags_overview: true

设置页面宽度

默认的宽度太窄了，我们修改page_width部分
page_width: 80

顺便更正真正的建站时间

copyright:
  start_year: 2026
  end_year:

本地查看一下效果

修改好这些后就可以在本地查看一下效果怎么样了，在博客根目录
下执行命令
hexo clean && hexo g && hexo s

然后在浏览器输入http://localhost:4000/就可以本地查看了

上传到仓库

安装hexo-deployer-git插件

hexo-deployer-git用来把生成好的网页文件自动推送到远程仓库,不用再手动git到仓库,在博客根目录使用npm安装插件
npm install hexo-deployer-git --save

打开根目录下的 _config.yml 文件在找到 deploy 配置项，修改为你的仓库信息

deploy:
    type: git
    repo: https://codeberg.org/Aidens-fox/pages.git
    branch: main

配置git

git在使用之前需要添加用户名和邮箱才可以使用,输入以下命令
git config --global user.name "你的用户名"

git config --global user.email "你的邮箱"

新建codeberg仓库

打开主页右上方的加号，选择创建仓库，仓库名称填入pages，然后创建仓库

创建访问令牌

打开右上角的头像点击设置再点击应用后点击创建访问令牌，令牌名称顺便，权限全部选择读写，仓库选择全部，然后点击生成令牌后把令牌复制到一个安全的地方就可以了

上传代码到仓库

输入以下命令
hexo clean && hexo g && hexo d

运行后会要求你输入用户名和密码，密码就是访问令牌

启用codeberg pages服务

打开仓库页面，点击右边扳手图标的设置，选择Web钩子，点击添加Web钩子，选择Forgejo，打开后目标URL填入
https://用户名.codeberg.page
最后点击更新web钩子,等待几分钟就可以得到你的个人博客了