我的第一篇博客：Hexo + Docker + Oranges 主题初体验
2024-12-25 18:05:36 #Hexo #Docker #Oranges #博客

摘要：
本文记录了我在 Docker 环境下使用 Hexo 搭建博客，并选用 Oranges 主题的初步体验。希望能为正在搭建个人博客的朋友们提供一些参考，也期待与更多热爱技术与写作的人交流！

前言

不知不觉，已经想拥有一个属于自己的博客很久了。从最早的 WordPress，到后来的静态博客框架 Hugo，再到如今的 Hexo，总算折腾了好一阵子。
如今我选择了 Hexo + Docker 的方式，并在主题上花了点心思，挑选了比较小众、且颜值在线的 Oranges 主题。趁着这股热情，便写下了我的第一篇博客来与大家分享。

为什么选择 Hexo + Docker？

  • Hexo 是一款基于 Node.js 的静态博客框架。它的优点在于：

    1. 生成速度快
    2. 支持多主题、多插件
    3. Markdown 写作体验佳

  • Docker 则大大简化了环境配置、部署及迁移的流程。只需一个 Docker 镜像，便能在任何支持容器的地方快速运行，一旦需要切换服务器或者本地开发环境，也可以轻松迁移。

这样的组合，让我在搭建博客时能把更多精力花在内容写作上，而不是被各种依赖安装、环境冲突等问题卡住。

Oranges 主题的魅力

在 Hexo 社区里，热门主题如 Next、Butterfly 等已有大量用户及维护者。但我想尝试不一样的东西，于是发现了 Oranges 这个主题。

  • 清爽配色：如同主题名一样，页面以淡雅的橙色为主色调，看起来活泼不失稳重。
  • 极简风格：布局精致，排版舒适，适合想专注内容写作，又不想让读者被多余的 UI 元素分散注意力的博主。
  • 易于定制：配置文件内能简单地改配色、功能开关等，无需深入修改源码。

你可以在 Oranges 主题官方仓库（示例链接，可替换成真实链接）中查看完整的文档与示例页面。

Docker + Hexo + Oranges 快速上手步骤

下面简单分享下我搭建博客的流程，以供大家参考。若你也想搭建一个 Docker 化的 Hexo 博客，可以尝试以下思路：

  1. 准备 Docker 环境

    • 安装 Docker 与 Docker Compose（如果需要）。
    • 确保本地或服务器中 Docker 已正常运行。

  2. 拉取 Hexo 镜像
    如果没有现成的 Hexo 镜像，可以基于 Node.js 的官方镜像自行构建：
    （下面以 Node.js 16 为例，使用四空格缩进模拟代码）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    FROM node:16-alpine

    # 安装 Hexo CLI
    RUN npm install -g hexo-cli

    # 创建工作目录
    WORKDIR /blog

    EXPOSE 4000

    CMD ["hexo", "server", "-o"]

    然后执行 docker build -t your-hexo-image . 来构建该镜像。

  3. 启动容器

    • 创建并挂载本地目录到容器内，用于存放博客内容与配置：

      1
      2
      3
      4
      5
      docker run -d \
        --name my-hexo-blog \
        -p 4000:4000 \
        -v $(pwd)/blog:/blog \
        your-hexo-image

    • 在浏览器访问 http://localhost:4000（或你服务器的 IP:4000）即可查看。

  4. 安装 Oranges 主题

    • 在容器本地文件 blog/themes 下克隆或下载 Oranges 主题： 

      1
      git clone https://github.com/xxx/oranges.git blog/themes/oranges

    • 修改 blog/_config.yml 或者 blog/config.yml 里的 theme 字段为 oranges，并根据实际需要调整主题配置。

  5. 更新并发布

    • 在 blog 目录下创建新文章： 

      1
      hexo new post "Hello Oranges"

    • 写完后执行：

      1
      hexo clean && hexo generate && hexo server

    • 若要发布到线上服务器或静态空间，记得使用相应的部署命令（如 hexo deploy），或者将生成的 public 文件夹通过 CI/CD 或其他方式同步到部署环境。

我的体验与心得

  • Docker 的灵活性
    一旦写好 Dockerfile 并配置好镜像，你可以非常轻松地在不同的服务器或本地环境中启用同样的博客服务。

  • Oranges 主题的可定制性
    只需要改改主题的配置文件，就能让博客的整体观感迥然不同。也可以进一步深入修改 CSS，实现个性化。

  • 持续写作的动力
    当你对自己的博客项目倾注心血、反复打磨后，就会有更多热情去输出文字与见解，而这正是博客最有价值的地方。

展望

这是我的第一篇博文，也是我初次尝试在 Docker 环境下使用 Hexo 搭建静态博客。未来，我会继续探索更多 Hexo 插件、前端优化技巧，以及与 DevOps 流程结合的可能性，并在此记录和分享。

感谢你读到这里。若你对 Hexo、Docker 或 Oranges 主题也有兴趣或经验，欢迎在评论区留言交流，期待与你一起探讨更多可能！

温馨提示：

  1. 记得保存并推送你的 Docker 镜像和博客代码到远程仓库（如 GitHub、GitLab），以免本地环境损坏导致文件丢失。
  2. 针对 Hexo 的配置和插件，有许多可自由探索的方向，比如搜索插件、SEO 优化等，能为你的博客增色不少。

恭喜你完成了第一篇博客的搭建与写作！愿我们都能在技术与文字的世界里找到更多乐趣与价值。让这片橙色的天空，伴随我们每一次的笔耕不辍。

—— END ——

Prev
2024-12-25 18:05:36 #Hexo #Docker #Oranges #博客
Next