如何写好技术博客

outlier 4 分钟 1494 字 15 0

前言：为什么要写技术博客？

先问你一个问题：你写过多少次"Hello World"级别的笔记，然后存在本地某个角落，再也没打开过？

成为一名博主，首先要明白从消费者到生产者的角色转换，技术博客和私人笔记最大的区别在于：博客是写给别人看的，这会逼着你把事情讲清楚，切勿沉迷于"敝帚自珍"，要让自己的努力价值最大化。

写博客的好处：

mindmap root((技术博客的价值)) 对自己 加深理解 建立知识体系 复习备查 对职业 个人品牌 面试加分 认识同行 对社区 知识分享 帮助他人 开源精神

但现实是：

"我写了，没人看啊..."

"SEO是什么？能吃吗？"

"百度怎么搜不到我的文章？"

今天这篇文章，就来解决从内容创作到让人看到的全链路问题。

一、内容建设：写什么和怎么写

1.1 技术博客写什么？

flowchart TB subgraph CONTENT["技术博客内容类型"] T1["📚 教程类<br/>从入门到精通"] T2["🔧 实战类<br/>踩坑与解决方案"] T3["🏗️ 架构类<br/>设计与思考"] T4["📊 对比类<br/>技术选型分析"] T5["🎯 总结类<br/>知识体系梳理"] T6["💡 观点类<br/>行业思考"] end T1 --> V1["适合新手入门<br/>流量最大"] T2 --> V2["SEO友好<br/>解决具体问题"] T3 --> V3["展示深度<br/>吸引同行"] T4 --> V4["实用性强<br/>决策参考"] T5 --> V5["知识沉淀<br/>长期价值"] T6 --> V6["建立影响力<br/>风险也大"]

内容选题建议：

类型示例特点
解决问题型"MySQL死锁排查实录"SEO最友好，搜索量大
教程入门型"Docker从入门到放弃"流量大，竞争也大
深度分析型"Redis持久化原理剖析"展示专业度
工具推荐型"10个提升效率的VS Code插件"容易传播
年度总结型"2024年我用过的技术栈"人格化，有温度

1.2 如何写出好文章？

一篇好的技术文章需要具备以下结构：

flowchart TB subgraph STRUCTURE["文章结构金字塔"] HOOK["🎣 开头：痛点共鸣<br/>为什么要看这篇文章"] WHAT["❓ 是什么<br/>概念解释清楚"] WHY["🤔 为什么<br/>原理讲透"] HOW["⚙️ 怎么做<br/>实操步骤"] PRACTICE["💻 实战<br/>代码示例"] SUMMARY["📝 总结<br/>要点回顾"] end HOOK --> WHAT --> WHY --> HOW --> PRACTICE --> SUMMARY

写作技巧清单：

✅ 开头要有"钩子"，让人想继续看
✅ 用类比解释复杂概念（Redis像一个超级快的字典）
✅ 代码要能跑，最好有完整示例
✅ 配图、流程图胜过千言万语
✅ 适当的幽默，但不要喧宾夺主
✅ 文末要有行动指引（参考资料、下一步建议）

❌ 不要复制粘贴官方文档
❌ 不要写流水账（今天我学了xxx）
❌ 不要堆砌术语装X
❌ 不要有明显的技术错误

1.3 建立自己的写作风格

以我的"从入门到放弃"系列为例：

flowchart LR subgraph STYLE["写作风格要素"] S1["固定系列名<br/>从入门到放弃"] S2["统一结构<br/>痛点→原理→实战→避坑"] S3["语言特色<br/>幽默自嘲"] S4["视觉风格<br/>Mermaid图表"] end S1 & S2 & S3 & S4 --> BRAND["形成个人品牌<br/>读者一看就知道是你"]

二、博客搭建：Typecho实战

2.1 为什么选Typecho？

flowchart TB subgraph COMPARE["博客框架对比"] WP["WordPress<br/>功能强大但臃肿"] HX["Hexo/Hugo<br/>静态博客，速度快"] TE["Typecho<br/>轻量级动态博客"] end TE --> ADV["优势"] subgraph ADV A1["PHP + MySQL<br/>部署简单"] A2["轻量级<br/>500KB核心"] A3["Markdown原生支持"] A4["插件生态丰富"] A5["国内社区活跃"] end

2.2 Typecho必装插件

flowchart TB subgraph PLUGINS["Typecho插件推荐"] subgraph SEO_P["SEO相关"] P1["Sitemap<br/>生成站点地图"] P2["BaiduSubmit<br/>百度主动推送"] P3["Keywords<br/>关键词优化"] P10["TypechoRedisCache<br/>Redis"] end subgraph CONTENT_P["内容增强"] P4["EditorMD<br/>Markdown编辑器"] P5["HighlightJS<br/>代码高亮"] P6["TableOfContents<br/>文章目录"] end subgraph FUNC_P["功能扩展"] P7["CommentToMail<br/>评论邮件通知"] P8["Views<br/>阅读量统计"] P9["Links<br/>友情链接"] end end

(我用的是cuteen插件 + Sitemap + Mermaid + TypechoRedisCache + 百度统计)
TypechoRedisCache下载

插件安装方法：

# 1. 下载插件
cd /path/to/typecho/usr/plugins/

# 2. 解压到plugins目录
unzip Sitemap.zip

# 3. 后台启用
# 访问：后台 → 控制台 → 插件 → 启用

2.3 Typecho SEO优化配置

1. 伪静态配置（重要！）

# Nginx配置
location / {
    index index.html index.php;
    if (!-e $request_filename) {
        rewrite ^(.*)$ /index.php$1 last;
    }
}

# 开启后，URL从：
# example.com/index.php/archives/123/
# 变成：
# example.com/archives/123.html

2. 固定链接设置：

后台 → 设置 → 永久链接 → 启用地址重写

推荐格式：
/archives/{slug}.html     # 使用文章别名
或
/posts/{year}/{slug}.html # 带年份

不推荐：
/archives/{cid}.html      # 纯数字ID对SEO不友好

3. 主题SEO优化（修改header.php）：

<head>
    <meta charset="<?php $this->options->charset(); ?>">
    
    <!-- SEO三要素 -->
    <title><?php $this->archiveTitle([
        'category' => _t('分类 %s 下的文章'),
        'search'   => _t('包含关键字 %s 的文章'),
        'tag'      => _t('标签 %s 下的文章'),
        'author'   => _t('%s 发布的文章')
    ], '', ' - '); ?><?php $this->options->title(); ?></title>
    
    <meta name="description" content="<?php 
        if ($this->is('single')) {
            echo mb_substr(strip_tags($this->content), 0, 150);
        } else {
            $this->options->description();
        }
    ?>">
    
    <meta name="keywords" content="<?php 
        if ($this->is('single')) {
            $this->tags(',', false); 
        } else {
            echo '大数据,Java,技术博客';  // 默认关键词
        }
    ?>">
    
    <!-- Open Graph（社交分享优化） -->
    <meta property="og:title" content="<?php $this->title(); ?>">
    <meta property="og:description" content="<?php echo mb_substr(strip_tags($this->content), 0, 150); ?>">
    <meta property="og:type" content="article">
    <meta property="og:url" content="<?php $this->permalink(); ?>">
    
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- RSS订阅发现 -->
    <link rel="alternate" type="application/rss+xml" 
          title="<?php $this->options->title(); ?>" 
          href="<?php $this->options->feedUrl(); ?>">
    
    <!-- Sitemap -->
    <link rel="sitemap" type="application/xml" 
          title="Sitemap" href="/sitemap.xml">
</head>

三、SEO优化：让搜索引擎找到你

3.1 SEO核心原理

flowchart LR subgraph SEARCH["搜索引擎工作原理"] CRAWL["🕷️ 爬虫抓取<br/>Spider访问你的网站"] INDEX["📇 建立索引<br/>分析内容，存入数据库"] RANK["📊 排名算法<br/>根据相关性、权重排序"] SHOW["📱 结果展示<br/>用户看到搜索结果"] end CRAWL --> INDEX --> RANK --> SHOW subgraph YOU["你能做的"] Y1["让爬虫能抓到<br/>Sitemap/Robots"] Y2["让内容被理解<br/>标题/描述/结构"] Y3["提升权重<br/>外链/内链/原创"] end Y1 --> CRAWL Y2 --> INDEX Y3 --> RANK

3.2 Sitemap配置

Sitemap是告诉搜索引擎"我的网站有哪些页面"的地图。

Typecho Sitemap插件配置：

// 插件会自动生成 /sitemap.xml
// 内容类似：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://example.com/</loc>
        <lastmod>2024-01-01</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://example.com/archives/hello-world.html</loc>
        <lastmod>2024-01-15</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>
</urlset>

手动提交Sitemap：

搜索引擎提交地址
GoogleGoogle Search Console
百度百度搜索资源平台
BingBing Webmaster Tools

3.3 Robots.txt配置

# /robots.txt - 告诉爬虫哪些能抓，哪些不能抓

User-agent: *

# 允许抓取
Allow: /
Allow: /archives/
Allow: /category/
Allow: /tag/

# 禁止抓取（隐私/无价值页面）
Disallow: /admin/
Disallow: /usr/
Disallow: /var/
Disallow: /*?*           # 禁止带参数的URL
Disallow: /archives/*.html?*  # 禁止文章页带参数

# Sitemap位置
Sitemap: https://example.com/sitemap.xml

3.4 百度SEO专项优化

百度和Google的爬虫行为不同，需要专门优化：

flowchart TB subgraph BAIDU["百度SEO优化"] B1["主动推送<br/>API实时推送新文章"] B2["自动推送<br/>JS代码触发"] B3["Sitemap提交<br/>定期更新"] B4["MIP/AMP<br/>移动端加速"] end B1 --> FAST["收录更快"] B2 --> AUTO["无需手动"] B3 --> FULL["全面覆盖"] B4 --> MOBILE["移动端排名↑"]

百度主动推送代码（Typecho插件或手动实现）：

<?php
// 文章发布后自动推送给百度
function pushToBaidu($url) {
    $api = 'http://data.zz.baidu.com/urls?site=example.com&token=你的token';
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: text/plain']);
    
    $result = curl_exec($ch);
    curl_close($ch);
    
    return $result;
}

// 在文章发布钩子中调用
Typecho_Plugin::factory('Widget_Contents_Post_Edit')->finishPublish = function($contents, $obj) {
    $permalink = $obj->permalink;
    pushToBaidu($permalink);
};

百度自动推送JS（放在页面底部）：

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

3.5 SEO检查清单

flowchart TB subgraph CHECKLIST["SEO自检清单"] subgraph PAGE["页面级别"] C1["✅ 标题包含关键词<br/>且不超过60字符"] C2["✅ Meta Description<br/>150字符内的吸引描述"] C3["✅ URL简短易读<br/>包含关键词拼音/英文"] C4["✅ H1标签唯一<br/>且包含关键词"] C5["✅ 图片有Alt属性"] C6["✅ 内链指向相关文章"] end subgraph SITE["站点级别"] S1["✅ Sitemap已提交"] S2["✅ Robots.txt正确"] S3["✅ HTTPS已启用"] S4["✅ 移动端适配"] S5["✅ 页面加载<3秒"] S6["✅ 404页面友好"] end end

四、RSS订阅：让读者追着你

4.1 RSS是什么？

flowchart LR BLOG["你的博客"] -->|"生成RSS"| FEED["RSS Feed<br/>/feed/"] FEED --> R1["RSS阅读器<br/>Feedly/Inoreader"] FEED --> R2["即刻/轻芒"] FEED --> R3["邮件订阅服务"] FEED --> R4["其他聚合平台"] R1 & R2 & R3 & R4 --> USER["订阅用户<br/>自动收到新文章"]

RSS的价值：

对博主对读者
沉淀忠实读者不错过更新
不依赖平台算法信息聚合
被聚合平台收录高效阅读

4.2 Typecho RSS配置

Typecho默认支持RSS，访问地址：

# 全站RSS
https://example.com/feed/

# 分类RSS
https://example.com/feed/category/技术/

# 标签RSS  
https://example.com/feed/tag/Java/

# 评论RSS
https://example.com/feed/comments/

优化RSS输出（修改functions.php）：

<?php
// 在RSS中输出全文而非摘要
function themeInit($archive) {
    if ($archive->is('feed')) {
        $archive->parameter->component = 'archive';
    }
}

// RSS添加版权声明
function feedContentFilter($content, $widget, $lastResult) {
    $copy = '<p>本文来自：' . $widget->options->siteUrl . '</p>';
    $copy .= '<p>原文链接：' . $widget->permalink . '</p>';
    return $content . $copy;
}
Typecho_Plugin::factory('Widget_Abstract_Contents')->contentEx = 'feedContentFilter';

4.3 RSS推广渠道

flowchart TB subgraph CHANNELS["RSS推广渠道"] C1["📱 即刻<br/>创建主题，绑定RSS"] C2["📰 今日热榜<br/>提交博客"] C3["🔗 BlogHub<br/>中文博客聚合"] C4["📧 Follow<br/>RSS订阅平台"] C5["🌐 十年之约<br/>独立博客圈"] end C1 & C2 & C3 & C4 & C5 --> TRAFFIC["流量来源"]

推荐提交的平台：

平台地址说明
BlogHubbloghub.fun中文独立博客聚合
十年之约foreverblog.cn博客圈互访
积薪firewood.news中文独立博客
RSS Sourcerss-source.comRSS订阅源收录

五、引流推广：酒香也怕巷子深

5.1 引流渠道矩阵

flowchart TB subgraph CHANNELS["引流渠道"] subgraph SEARCH["搜索引擎（被动流量）"] SE1["Google"] SE2["百度"] SE3["Bing"] end subgraph COMMUNITY["技术社区（主动曝光）"] CO1["掘金"] CO2["CSDN"] CO3["博客园"] CO4["SegmentFault"] CO5["V2EX"] end subgraph SOCIAL["社交平台"] SO1["知乎"] SO2["微信公众号"] SO3["Twitter/X"] SO4["即刻"] end subgraph OTHER["其他"] OT1["GitHub"] OT2["RSS聚合"] OT3["友链互换"] end end SEARCH --> |"长期稳定"| BLOG["你的博客"] COMMUNITY --> |"初期首选"| BLOG SOCIAL --> |"品牌建设"| BLOG OTHER --> |"辅助渠道"| BLOG

5.2 技术社区运营策略

同步发布策略：

flowchart LR ORIGINAL["原创文章<br/>首发自己博客"] --> SYNC["同步到各平台"] SYNC --> JJ["掘金<br/>标注原文链接"] SYNC --> CSDN["CSDN<br/>设置原创"] SYNC --> CNB["博客园<br/>标注出处"] JJ & CSDN & CNB --> BACK["引流回博客"] subgraph TIPS["注意事项"] T1["首发博客，等收录后再同步"] T2["同步时标注原文链接"] T3["各平台标题可略作调整"] end

各平台特点：

平台特点适合内容
掘金前端氛围浓，有推荐机制前端、工具推荐
CSDN百度收录好，流量大教程、解决方案
博客园技术纯粹，.NET氛围深度技术文章
知乎问答形式，长尾流量系统性知识
V2EX程序员社区，讨论热烈观点、工具分享

5.3 知乎引流技巧

flowchart TB subgraph ZHIHU["知乎引流策略"] FIND["找相关问题<br/>搜索你文章的关键词"] ANSWER["回答问题<br/>精简版内容+博客链接"] ARTICLE["发布文章<br/>完整版，标注原文"] COLUMN["开设专栏<br/>系列文章集合"] end FIND --> ANSWER ANSWER --> |"引流效果最好"| BLOG["博客"] ARTICLE --> BLOG COLUMN --> BLOG

知乎回答模板：

[简要回答问题，100-200字]

这个问题我之前写过一篇详细的文章分析：

- xxx原理是什么
- xxx如何配置
- xxx常见问题

篇幅较长，这里放个链接：[文章标题](博客地址)

如果对你有帮助，欢迎点赞收藏~

5.4 友链交换

友链是独立博客圈的传统，可以互相引流：

flowchart LR YOUR["你的博客"] <-->|"友链"| OTHER["其他博客"] subgraph BENEFITS["友链好处"] B1["互相引流"] B2["提升权重"] B3["拓展圈子"] end subgraph RULES["友链原则"] R1["内容相关"] R2["更新活跃"] R3["无违规内容"] end

友链页面示例（Typecho独立页面）：

<div class="friend-links">
    <div class="link-item">
        <a href="https://xxx.com" target="_blank">
            <img src="avatar.jpg" alt="博客名">
            <span>博客名 - 一句话介绍</span>
        </a>
    </div>
    <!-- 更多友链 -->
</div>

<h3>申请友链</h3>
<p>欢迎交换友链，要求：</p>
<ul>
    <li>技术类博客</li>
    <li>近3个月有更新</li>
    <li>已添加本站链接</li>
</ul>
<p>请在评论区留下：博客名称、地址、描述、头像</p>

六、数据分析：用数据驱动优化

6.1 统计工具配置

flowchart TB subgraph ANALYTICS["统计工具"] GA["Google Analytics<br/>国际标准，功能强大"] BAIDU["百度统计<br/>国内友好，SEO整合"] UMAMI["Umami<br/>开源自建，隐私友好"] BUSUANZI["不蒜子<br/>轻量，仅计数"] end GA --> DATA["数据分析"] BAIDU --> DATA UMAMI --> DATA subgraph DATA D1["访问量PV/UV"] D2["来源渠道"] D3["热门文章"] D4["用户行为"] end

推荐方案：

场景推荐原因
国内为主百度统计与百度SEO整合
海外为主Google Analytics功能最全
注重隐私Umami自建数据自己掌控
极简需求不蒜子一行代码搞定

不蒜子接入（最简单）：

<!-- 在footer添加 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!-- 显示统计 -->
<span>本站总访问量 <span id="busuanzi_value_site_pv"></span> 次</span>
<span>本站访客数 <span id="busuanzi_value_site_uv"></span> 人</span>
<span>本文阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>

6.2 数据分析看什么？

flowchart TB subgraph METRICS["关键指标"] M1["📈 访问量趋势<br/>整体是否在增长"] M2["🚪 流量来源<br/>哪个渠道效果好"] M3["🔥 热门文章<br/>什么内容受欢迎"] M4["🔍 搜索词<br/>用户搜什么找到你"] M5["📉 跳出率<br/>内容是否吸引人"] end M1 --> A1["调整发文频率"] M2 --> A2["加大有效渠道投入"] M3 --> A3["多写类似主题"] M4 --> A4["优化相关关键词"] M5 --> A5["改进内容质量"]

6.3 Google Search Console

Google Search Console是SEO必备工具，可以看到：

flowchart LR GSC["Google Search Console"] GSC --> P1["索引状态<br/>哪些页面被收录"] GSC --> P2["搜索表现<br/>展示/点击/排名"] GSC --> P3["问题诊断<br/>抓取错误/移动端问题"] GSC --> P4["链接分析<br/>外链/内链情况"]

七、进阶技巧

7.1 结构化数据（Rich Snippets）

让你的搜索结果更醒目：

<!-- 文章页添加JSON-LD结构化数据 -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "<?php $this->title(); ?>",
    "author": {
        "@type": "Person",
        "name": "<?php $this->author(); ?>"
    },
    "datePublished": "<?php $this->date('c'); ?>",
    "dateModified": "<?php $this->modified('c'); ?>",
    "description": "<?php echo mb_substr(strip_tags($this->content), 0, 150); ?>",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "<?php $this->permalink(); ?>"
    }
}
</script>

7.2 网站速度优化

flowchart TB subgraph SPEED["速度优化"] S1["CDN加速<br/>静态资源分发"] S2["图片优化<br/>WebP格式+懒加载"] S3["代码压缩<br/>CSS/JS压缩合并"] S4["缓存策略<br/>浏览器缓存+服务端缓存"] S5["数据库优化<br/>索引+查询优化"] end S1 & S2 & S3 & S4 & S5 --> FAST["加载<3秒"] FAST --> SEO["SEO加分"] FAST --> UX["用户体验↑"]

Typecho缓存插件推荐：

TpCache - 页面静态缓存
DBCache - 数据库查询缓存

7.3 内容更新策略

gantt title 博客更新节奏建议 dateFormat YYYY-MM-DD section 周更新 技术文章1篇 :a1, 2024-01-01, 7d 技术文章1篇 :a2, after a1, 7d section 月度 总结/盘点 :b1, 2024-01-28, 3d section 持续 旧文章更新 :c1, 2024-01-01, 30d

持续更新的秘诀：

策略说明
写作素材库平时记录灵感和问题
固定写作时间养成习惯，如每周日下午
系列化拆分大主题为系列文章
复用内容一个主题，多种形式（博客/知乎/公众号）

八、总结

写好技术博客是一个系统工程：

flowchart TB subgraph SYSTEM["技术博客系统工程"] CONTENT["📝 内容为王<br/>写有价值的文章"] SEO["🔍 SEO优化<br/>让搜索引擎找到"] PROMOTE["📢 主动推广<br/>让更多人看到"] DATA["📊 数据分析<br/>持续优化"] end CONTENT --> SEO --> PROMOTE --> DATA DATA -->|"反馈"| CONTENT

最后的建议：

  1. 内容第一：再多的技巧也比不上一篇好文章
  2. 坚持更新：一年写50篇，比一个月写10篇然后弃坑强
  3. 不要急于求成：流量是慢慢积累的，保持耐心
  4. 享受过程：写作本身就是一种学习和成长

记住：

"写博客不是为了流量，流量是写好博客的副产品。"

当你真正帮助到别人的时候，流量自然会来。

参考资料

Typecho资源

SEO工具

学习资源

🎉 希望这篇文章能帮你从"写了没人看"变成"写了有人追"！

相关文章

给个人博客加 AI 问答和音频，先把这两条路径走通 那些年被淘汰的技术 我为什么要写博客？ 猛男养成记之饮食重构

评论

还没有评论，来说点什么吧。

发表评论

Ctrl + Enter 快速提交
Enter 搜索Esc 关闭