博客使用完全指南 - 从零开始搭建你的学习日志

作者名

博客使用完全指南

欢迎来到我的学习日志！这篇指南将详细介绍如何使用本博客系统，帮助你快速上手并开始记录自己的学习历程。

写在前面

本博客基于 Hugo 静态网站生成器构建，部署在 Cloudflare Pages 上。这意味着：

  • ⚡ 极速访问 - 全球CDN加速，无论在哪里访问都很快
  • 🆓 完全免费 - 无需支付任何服务器费用
  • 🔒 安全可靠 - 自动HTTPS加密，数据安全有保障
  • ✍️ Markdown写作 - 使用简单的Markdown语法，专注内容创作

一、快速开始

1.1 访问博客

博客地址：https://blog-cf-1mr.pages.dev/

打开浏览器，输入上述地址即可访问。建议将网址添加到浏览器书签，方便日常使用。

1.2 博客结构概览

博客主要包含以下几个部分：

页面功能访问路径
首页展示最新文章和博客介绍/
文章列表查看所有发布的文章/posts/
关于页面了解博客和作者信息/about/
单篇文章阅读具体文章内容/posts/文章标题/

二、如何发布文章

2.1 准备工作

在发布文章之前，你需要：

  1. 安装必要工具

    • Hugo (版本 >= 0.146.0)
    • Git
    • VSCode（推荐，带有Markdown插件）

  2. 克隆项目代码

    git clone https://github.com/monstercjz/blog-cf.git
cd blog-cf
git submodule update --init --recursive

  3. 启动本地预览

    hugo server -D

    然后访问 http://localhost:1313 查看效果

2.2 创建新文章

方法一：使用Hugo命令（推荐）

# 创建新文章
hugo new posts/我的文章标题.md

# 例如
hugo new posts/学习Python的第一天.md

方法二：手动创建

直接在 content/posts/ 目录下创建 .md 文件。

2.3 文章格式规范

每篇文章需要包含 Front Matter（文章元数据）：

---
title: "文章标题"
date: 2026-03-16T12:00:00+08:00
draft: false              # false=发布，true=草稿
tags: ["标签1", "标签2"]   # 文章标签
categories: ["分类"]       # 文章分类
---

# 正文标题

在这里开始写作...

2.4 Markdown写作技巧

基础语法

# 一级标题
## 二级标题
### 三级标题

**粗体文字**
*斜体文字*
~~删除线~~

- 无序列表项1
- 无序列表项2
  - 嵌套列表项

1. 有序列表项1
2. 有序列表项2

[链接文字](https://example.com)
![图片描述](/images/example.jpg)

> 引用文字
> 可以有多行

`行内代码`

```python
# 代码块
print("Hello, World!")
#`#*`#表`表内内#格m头容容：a114高*r级*k|技d巧o表内内w头容容n225|表内内头容容336|

任务列表：

- [x] 已完成任务
- [ ] 未完成任务
- [ ] 另一个任务

数学公式（支持LaTeX）：

行内公式：$E = mc^2$

块级公式：
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

2.5 发布流程

  1. 编写文章

    • 在VSCode中编辑Markdown文件
    • 使用Markdown Preview Enhanced插件实时预览

  2. 本地预览

    hugo server -D

    确保文章显示正常，没有格式错误

  3. 提交到Git

    git add content/posts/你的文章.md
git commit -m "添加新文章：文章标题"
git push

  4. 等待自动部署

    • Cloudflare会自动检测到代码更新
    • 约1-2分钟后，新文章就会上线
    • 可以在Cloudflare Dashboard查看部署状态

三、个性化设置

3.1 修改博客基本信息

编辑 hugo.toml 文件：

baseURL = 'https://blog-cf-1mr.pages.dev/'
languageCode = 'zh-CN'
title = '我的学习日志'           # 修改博客标题

theme = 'ananke'

[params]
  author = '作者名'              # 修改作者名
  description = '记录学习过程中的点滴'  # 修改博客描述

3.2 自定义导航菜单

在 hugo.toml 中添加或修改菜单项：

[menu]
  [[menu.main]]
    name = '首页'
    url = '/'
    weight = 1

  [[menu.main]]
    name = '文章'
    url = '/posts/'
    weight = 2

  [[menu.main]]
    name = '关于'
    url = '/about/'
    weight = 3
    
  [[menu.main]]
    name = '项目'                # 新增菜单项
    url = '/projects/'
    weight = 4

3.3 修改关于页面

编辑 content/about.md 文件：

---
title: "关于我"
date: 2026-03-16T10:00:00+08:00
draft: false
---

# 关于我

在这里介绍你自己...

## 联系方式

- Email: your.email@example.com
- GitHub: https://github.com/yourusername

3.4 自定义样式

编辑 static/custom.css 文件，可以修改：

  • 配色方案
  • 字体大小
  • 间距布局
  • 动画效果

示例：

/* 修改文章标题颜色 */
article h1 {
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
}

/* 修改链接颜色 */
a {
  color: #3498db;
}

a:hover {
  color: #2980b9;
}

四、图片和资源管理

4.1 添加图片

  1. 将图片放入static目录

    s└t─a─tii└cm─/a─geysur-image.jpg

  2. 在文章中引用

    ![图片描述](/images/your-image.jpg)

4.2 使用图床（推荐用于大图）

对于较大的图片，建议使用图床服务：

获取图片链接后，直接引用：

![描述](https://your-image-url.com/image.jpg)

五、评论系统（可选）

目前博客没有内置评论系统。如果需要添加评论，可以考虑：

5.1 Disqus

  1. 注册 Disqus 账号
  2. 创建新的站点
  3. 在Hugo配置中添加Disqus shortname

5.2 Giscus（推荐）

基于GitHub Discussions的评论系统，免费且无广告。

  1. 安装 Giscus 应用到你的仓库
  2. 在Giscus网站生成配置代码
  3. 添加到博客模板中

六、SEO优化

6.1 文章SEO设置

在每篇文章的Front Matter中添加：

---
title: "文章标题"
description: "文章描述，会显示在搜索引擎结果中"
keywords: ["关键词1", "关键词2"]
author: "作者名"
date: 2026-03-16T12:00:00+08:00
draft: false
tags: ["标签1", "标签2"]
categories: ["分类"]
---

6.2 生成Sitemap

Hugo会自动生成sitemap.xml，提交到搜索引擎：

七、常见问题解答

Q1: 文章发布后没有显示？

可能原因：

  • draft: true 设置为草稿状态
  • Cloudflare正在部署中（等待1-2分钟）
  • 缓存问题（强制刷新浏览器：Ctrl+F5）

解决方法：

  1. 检查Front Matter中的 draft 是否为 false
  2. 查看Cloudflare Dashboard的部署状态
  3. 清除浏览器缓存

Q2: 如何修改已发布的文章？

直接编辑对应的Markdown文件，然后提交到Git：

git add content/posts/文章名.md
git commit -m "更新文章"
git push

Q3: 如何删除文章？

# 删除文件
git rm content/posts/文章名.md

# 提交更改
git commit -m "删除文章"
git push

Q4: 本地预览正常，但线上显示异常？

可能原因：

  • Hugo版本不一致
  • 缓存问题
  • 资源路径错误

解决方法：

  1. 确保Cloudflare环境变量 HUGO_VERSION 与本地一致
  2. 检查静态资源路径是否正确
  3. 清除Cloudflare缓存

Q5: 如何备份博客内容？

由于所有内容都在Git仓库中，备份非常简单：

# 克隆仓库即完成备份
git clone https://github.com/monstercjz/blog-cf.git backup-folder

建议定期推送到GitHub，GitHub本身就是最好的备份。

八、进阶技巧

8.1 使用短代码

Hugo支持短代码，可以在文章中插入特殊内容：

{{< figure src="/images/example.jpg" title="图片标题" >}}

{{< highlight python >}}
def hello():
    print("Hello!")
{{< /highlight >}}

8.2 文章模板

在 archetypes/posts.md 中创建文章模板，新文章会自动使用该模板：

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
tags: []
categories: []
---

## 引言

## 正文

## 总结

8.3 多语言支持

如果需要添加英文版本，可以配置多语言：

# hugo.toml
[languages]
  [languages.zh]
    weight = 1
    contentDir = "content/zh"
    languageName = "中文"
  
  [languages.en]
    weight = 2
    contentDir = "content/en"
    languageName = "English"

九、写作建议

9.1 内容规划

  • 定期更新 - 保持每周至少1-2篇文章
  • 系列文章 - 将相关内容组织成系列，方便读者系统学习
  • 标签分类 - 合理使用标签和分类，便于检索

9.2 文章结构

  • 标题清晰 - 准确概括文章内容
  • 层次分明 - 使用标题层级组织内容
  • 图文并茂 - 适当添加图片和代码示例
  • 总结回顾 - 文章结尾总结要点

9.3 互动建议

  • 在文章末尾添加"思考题"或"讨论话题"
  • 鼓励读者在GitHub Issues中提问
  • 定期回顾和更新旧文章

十、相关资源

官方文档

学习资源

推荐工具

  • 写作：VSCode + Markdown All in One
  • 图片处理：Photopea（免费在线PS）
  • 图床：SM.MS、GitHub
  • 思维导图：XMind、MindMaster

写在最后

搭建这个博客的初衷是记录学习过程中的点点滴滴。技术在不断进步，唯有持续学习才能跟上时代的步伐。

希望这篇指南能帮助你快速上手，开始你的写作之旅。如果在使用过程中遇到任何问题，欢迎通过以下方式联系我：

Happy Writing! ✍️

最后更新时间：2026年3月16日