手把手：用obsidian写文章，hugo生成html，cloudflare发布

a min to read comment 计算机

一、前言

在这篇文章中，我们将逐步学习如何使用 Obsidian 来撰写文章，并利用 Hugo 静态网站生成器将其转换为 HTML 格式，最后通过 Cloudflare 来发布我们的网站。这个流程将帮助你快速高效地创建和发布内容。

二、准备工作

1. 安装 Obsidian

  • 前往 Obsidian 官网 下载并安装最新版本的 Obsidian。
  • 创建一个新的 Vault，用于存储你的文章。

2. 安装 Hugo

  • 根据你的操作系统下载并安装 Hugo。
  • 确认 Hugo 是否成功安装，可以在终端中输入 hugo version 来检查。

3. 设置 Cloudflare

  • 注册并登录 Cloudflare。
  • 添加你的域名并按照提示配置 DNS 设置。

三、使用 Obsidian 写作

  1. 创建新文档：

    • 在 Obsidian 中打开你的 Vault，点击左侧的“新建文档”按钮。
    • 输入标题和内容，使用 Markdown 格式进行排版。

  2. 保存文档：

    • 确保将文件保存为 .md 格式，以便 Hugo 正确识别。

四、使用 Hugo 生成 HTML

1. 创建 Hugo 网站

在终端中执行以下命令：

hugo new site myblog

这将创建一个名为 myblog 的新目录，里面包含基本的 Hugo 文件结构。

2. 添加主题

选择一个主题并克隆到 themes 文件夹。例如，我们可以使用 Ananke 主题：

cd myblog/themes
git clone https://github.com/budparr/gohugo-theme-ananke.git

3. 配置网站

编辑 config.toml 文件，根据需要修改网站的基本信息，例如标题、描述等，并指定主题：

baseURL = "http://example.com/"
languageCode = "en-us"
title = "我的博客"
theme = "ananke"

4. 将 Obsidian 文档导入 Hugo

将你在 Obsidian 中写好的 Markdown 文档复制到 myblog/content/posts/ 文件夹下。确保文件名符合 Hugo 的命名规则（例如：2023-10-01-my-first-post.md）。

5. 构建网站

在终端中运行以下命令来生成静态文件：

hugo

生成的 HTML 文件会被存放在 myblog/public/ 文件夹中。

五、通过 Cloudflare 发布网站

  1. 上传静态文件：

    • 使用 FTP 客户端或 Git，将 public/ 文件夹中的所有文件上传到你的服务器或存储服务（如 GitHub Pages）。

  2. 配置 Cloudflare：

    • 在 Cloudflare 控制面板中，将 DNS 设置指向你的网站 IP 地址。
    • 等待 DNS 生效，这可能需要几分钟到几个小时不等。

  3. 访问你的网站：

    • 打开浏览器，输入你的域名，你应该能够看到用 Hugo 和 Markdown 创建的网站了！

六、总结

通过上述步骤，你已经成功地使用 Obsidian 撰写文章，并借助 Hugo 将其转化为 HTML，再利用 Cloudflare 完成了发布。这一流程不仅高效，而且灵活，非常适合个人博客和小型项目。希望你能在这个过程中获得乐趣！

Published At