写技术博客那点事 - 好文

<>前言

写文章是一个短期收益少，长期收益很大的一件事情，人们总是高估短期收益，低估长期收益
。往往是很多人坚持不下来，特别是写文章的初期，刚写完文章没有人阅读会有一种挫败感，影响了后期创作。

从某种意义上说，博客是我最好的学习笔记和个人名片
。在IT行业内，技术博客是了解一个开发者最好的方式之一，特别是当你没有一张足够分量的文凭或者一段出彩的工作经历时，你就应该沉下心来好好打磨自己技术，打造自己的博客。往者不可谏，来者犹可追。从现在开始，养成写技术博客的习惯，或许可以在你的职业生涯发挥着不可忽略的作用。

作为一个一年多工作经验的前端小白，本文并不是想炫耀自己在写博客这件事上，有多么的出色，至少我从来不觉得！相反我想以我的切身体会来分享一些诸如如何去写技术博客，如何推广自己文章，以及如何打造个人品牌的一些事。

<>一、写技术博客的收获

仔细算来，我坚持写博客已经有15个月了，目前在掘金社区
<https://juejin.im/user/5a9a9cdcf265da238b7d771c/posts>
上，发表文章51篇，阅读量11w+,点赞数6000+，在segmentfault社区
<https://segmentfault.com/u/langlixingzhou>上发表文章40篇，阅读量6w+,点赞数4000+，Github博客
<https://github.com/ljianshu/Blog>
上发表文章50篇，900+star，170+watch，文章也曾被奇舞周刊、前端大全、前端之巅等知名公众号转载过，这里并不是为炫耀这点微不足道的成绩，只是想勉励和我一样默默坚持付出的朋友们----功不唐捐。

刚开始写文章和大部分人一样，最主要的目的有两个：第一，记录自己阶段性的学习成果；第二，想多结识一些志同道合的人。不管是以什么样的目的开始的，只要坚持写下去，就会渐渐感受到这件事所给你带来的好处：

<>1.检验自己学习成果，加深对技术的理解

如果一件事情不能用通俗、简单的语言说出来或者写出来，证明你并没有全面地掌握或者掌握的深度不够。只有通过知识共享才能更好地发现自己在知识理解和掌握上的不足。

<>2.提高文字的表达能力

随着我的阅读量的增多，我对自己的文章的要求就越来越高，无论是文章质量还是给读者的阅读体验上我都会花费心思去琢磨，经常在写作过程反复问自己,诸如“如何可以让读者更容易吸收我所写的东西?”“如何表达更让人印象深刻？”等等，此外我会借助思维导图工具
xmind和生成动态图工具ScreenToGif，因为图像比文字记忆牢固，视觉化记忆可以充分发挥优势。

<>3.结交更多优秀的人，获得更多内推机会

乐莫乐兮新相知，通过文章结交新朋友何尝不是快乐的事!况且分享知识的同时还能帮助到别人，也会给人带来成就感!
回复读者留言的时候，可以通过这种方式和五湖四海的技术人在一起交流。素未谋面，但神交已久这是件很酷的事！

<>4.打造个人品牌，提高业内影响力

自媒体时代，信息高度流通，是个段子手都可能收获一份事业。通过知识共享可以帮助自己找到更有价值的朋友和合作伙伴，从而协助你打造个人品牌。“让别人知道你知道”，建立你的个人品牌，让别人更愿意跟你合作——传递和共享自己的知识是最简单的方法，通过知识共享，可以促进人们对你的了解和信任，为个人发展开拓新的天地。当你有了足够的名气时，你会收到类似网站广告，（付费）演讲邀请，录制视频，出书等邀请和机会。

<>5.得到报酬（稿费/打赏/广告费等）

坚持写优质的文章会带来稿费或者是打赏，虽说可能都是些小钱，但这也是正向反馈一种形式，会刺激你持续输出。等到博客帮你塑造了个人品牌后，这个东西会成为和你日常所做的工作同样有价值，甚至超过你的本职工作。

<>二、如何写出一篇受欢迎的技术文章？

<>1.全力找一个好标题

标题可以说是一个门户的作用，是让读者了解到文章的内容主旨的一个标识。如果标题起得不好，就很难引起别人的兴趣，更不必说高阅读量了，即使是文章的内容质量很好。

标题确定下来后，要多查找些资料，因为不同的人可能对同一个事物有不同的看法，所以通过阅读和整理多个人对同一事件的描述可以让自己更深刻，更多角度地理解这个问题，然后再结合自己的理解，就会理解的很快，也比较透彻。

<>2.明确目标和受众

确定好标题后就需要确定你的目标读者群体。了解你的读者群体是极其重要的一步，他们是怎么样的人，有什么背景知识（或者你希望你的读者群体需要什么知识），这些人需要什么思维方式。这是极其重要的一步，最好是能够把你对读者的要求写在文章的前面，这样对你和读者都有好处。了解目标群体就像产品经理了解目标用户需求，切身体会到了才能做出好的产品。

<>3.有一个好的开头结尾并且内容翔实

俗话说，巧妇难为无米之炊，事实上要想写出一篇内容翔实的文章，高质量参考文章必不可少！以下罗列一些个人觉得不错前端资料：

*
JavaScript Weekly，这是一份相当有名气的英文周报，整理的文章质量都很高，如果你只想订阅一份周报，那就是它了。

*
33 Concepts Every JavaScript Developer Should Know，这份资料讲解了 33 个前端开发必须知道的 JS
概念，内容是英文的，网上有中文版。

*
前端精读周刊，这是一份前端好文集合，每周都会更新，目前已经更新了 84 篇文章。

*
前端性能清单，这是一份前端性能清单，如果你需要优化一个项目的话，可以根据这份清单一个个来检查优化项。

*
30-seconds-of-code，30 秒系列，很短的代码片段让你了解一个知识点。

*
30-seconds-of-css，30 秒系列，很短的代码片段让你了解一个CSS知识点

*
must-watch-javascript，这份资料包含了很多高质量的前端相关视频，值得一看。

*
css-protips，通过这份资料你可以学习到很多 tips 来提高你的 CSS 技能。

*
奇舞周刊，每周都会整理一份不错的中文文章合集。

如果想了解更多优秀的前端资料，建议收藏下前端英文网站汇总
<https://www.notion.so/0ba81e1707ae479b8c2b9ec79fe3a3ce>这个网站，收录了国外一些优质的博客及其视频资料。

<>4.获得反馈并进行迭代

我有一个毫无根据的理论，并且对此深信不疑：好文章都是慢慢打磨出来的。当有一定阅读量后，跟读者互动交流后，就会发现文章不足之处，此时就应该及时修改过来。等过了段时间，写过的文章也应该经常拿出来温习，此时可能能力较之前有所进步，看问题更深刻，觉得不满意的旧文章也应该进行迭代！这样，你的写作能力才能迅速提高！

<>5.添加最后润色：包装，发布和宣传

<>三、关于写博客的几个问题

<>1.什么时候开始

每个人的心里，有多么长的一个清单，这些清单里写着多少美好的事，可是，它们总是被推迟，被搁置，在时间的阁楼上腐烂。

万事开头难，写技术文章也是，很多人会在起步这个阶段逗留很长的时间，你或许有这样的疑问：开发人员技术到什么程度才有资格去开通自己的博客？
种一棵树的最好时机是十年前，其次是现在
，开通技术博客同样如此。其实我一年前开始写那些文章，现在再回头看，便觉得当时写得很差劲，对于那些不满意的文章，可以等你能力提高了，再删掉重新写。所以非要等到是技术牛人，才有资格写文章，然而恰恰相反，你可以通过写文章来记录自己成长轨迹，分享文章的同时，打造自己个人品牌，何乐而不为？

<>2.如何开始写？

* 从模仿和重写开始

对于一个新手想要一开始就写出一篇高质量文章，往往会觉得无从下手。而我的建议是从模仿和重写开始，虽然你可能还没开始写文章，但你一定阅读过那些优秀的博客文章，不妨先模仿那些优秀文章，学习如何给文章起标题的，如何写开场白，如何阐述他们的观点，以及如何总结的。通过模仿和重写，你会渐渐培养起写作的感觉，并且越写越好的。

* 建议先确定主题，然后再根据主题查找相关资料
根据主题来查阅资料，而不是根据资料来查阅主题。按照主题来阅读，你会发现读的时候不再是老老实实地一本书看完看另一本，而是非常频繁
地从一本书跳到另一本书，从一处资料跳到另一处资料，从而来获得多个不同的人对同一个主题是如何讲解的。通过对比不同资料，取其精华，去除糟粕，总结成文。

* 养成思考习惯
刘未鹏《暗时间》中提到：“你走路、买菜、洗脸洗手、坐公交、逛街、出游、吃饭、睡觉，所有这些时间都可以称为‘暗时间’。
我们可以充分利用这些时间进行思考、反刍和消化平时看和读的东西，让我们的认识脱离照本宣科的层面。”

当思考和总结成为习惯之后，诉诸文字以及借助书写来进一步思考就变成了一件自然而然的事情，
就变成了一件“因为你在思考和总结从而必须书写下来”的事情，博客就变成了副产品。

<>3.写博客挺花时间，如何平衡工作和学习？

写一篇高质量的文章确实很花功夫，为了可以让读者有所收获，需要从内容，措辞，配图，排版等多个方面下功夫，而这些地方都是需要花时间的。

其实我的大部分的博客的初稿就是我的学习笔记，这主要包括看视频学习或者看书做的笔记，有了这样的初稿，写博客已经成功了一半。接下来你要做的事，就是如何将你所掌握的知识进行深度和广度的延申，最后通俗易懂地讲给别人听。所以如果你不坚持学习，很难持续高产。

程序员可能是加班相对严重的一种职业。对于有工作的上班族来说，写博客就要善于利用小块时间，也就是《奇特的一生》中所说的“时间下脚料”，比如利用中午休息时间，根据主题搜索一些资料，做好前期准备。我一般一个礼拜时间才写一篇文章，从来不是花个几个小时一气呵成，而是有时间就写一部分，写博客对我来说是挺享受一个过程。

<>4.在哪个平台写

现在可以写文章的地方太多了，所以选择会有很多，反而让人迷茫，哪里才是技术人员真正的聚集地。我发现很多爱写文章的技术人，首先会在一个平台去写文章，慢慢的在这个平台积累了一些名气之后，就会被各种编辑邀请或者是出于推广的目的，会在各个热门的平台下去同步自己的文章，然后引流到自己的独立博客，最后开通自己的公众号。

如果是写作新手，我建议先重点选择一个平台，了解这个平台的规则和技术氛围，如果各方面都和自己比较贴切，那就选择它写作发表文章，平台积累了一些名气之后，再选择开通自己的博客。至于选择什么样的平台，个人觉得最好选择支持
Markdown语法的平台，这样你就不必花心思调整文章的格式，在IT技术平台中，个人最喜欢掘金和SegmentFault社区，两者的技术氛围都很不错，只是前者比后者浏览量来的多！

* 掘金
* SegmentFault
* Github issues
<>5.如何推广自己的文章？

好酒也怕巷子深，如今写技术文章而且写的不错的人太多了，如果不太注重推广的话，文章很快淹没在知识的海洋中，阅读量很小，继而影响写文章的动力和激情。
就我个人而言，写文章最大的乐趣就是和读者互动交流以及他们带来的反馈，如果阅读量少了，我就会质疑自己文章是否对别人到底有没有帮助，文章质量是不是很差？

到底如何推广呢，第一需要研究清楚平台的规则，熟悉规则，才能玩转规则！接下来以SegmentFault社区为例，你应该仔细研究我们进一步改善了首页的推送
<https://segmentfault.com/a/1190000015216424>这篇文章，里面详细介绍了如何上首页的一些条件：

当满足上述一个条件的时候，这篇文章就会被推送到所有订阅了相关标签用户的时间线上了。这又引出了另一个问题，那就是在撰写文章时对标签的使用，我们建议为了扩大你潜在的文章阅读人群，第一个标签最好选择一个比较广泛的技术标签。

<>6.为什么应该采用博客的形式而不是云笔记

上文我们提到，博客源于自己的笔记，这里可能会有不少人有疑惑为啥不直接在印象笔记来记录笔记，而还要花心思来写博客？我认为采用云笔记的局限性如下：

* 记录在笔记，更多的是为自己看，无法进行深入理解和研究
* 无法分享给广大同行，不利于发现自己看待问题的不足和更有的见解
* 无法获得类似知识变现，名气提升等益处，更不用说打造个人品牌了
<>四、2018年文章列表（50篇）

过去一年，坚持写博客，陆陆续续写了五十多篇，不乏有些不错的文章，被一些前端知名公众号转载过，得到过别人的认可和赞誉，这让我在写博客这条路一发不可收拾，越陷越深！现将所有文章归纳如下，希望对你们有些许帮助。

<>Vue全家桶

<>1.从头开始学习Vuex <https://github.com/ljianshu/Blog/issues/36>

<>2.从头开始学习vue-router <https://github.com/ljianshu/Blog/issues/39>

<>3.Vue2.0父子组件间通信 <https://github.com/ljianshu/Blog/issues/32>

<>4.Vue2.0自定义指令与实例的属性和方法 <https://github.com/ljianshu/Blog/issues/33>

<>5.Vue2.0数据通信详解 <https://github.com/ljianshu/Blog/issues/34>

<>6.Vue2.0组件的继承与扩展 <https://github.com/ljianshu/Blog/issues/35>

<>页面性能优化

<>1.页面性能优化办法有哪些 <https://github.com/ljianshu/Blog/issues/9>

<>2.懒加载和预加载 <https://github.com/ljianshu/Blog/issues/8>

<>3.函数节流和防抖 <https://github.com/ljianshu/Blog/issues/43>

<>Javascript

<>1.深入浅出JavaScript运行机制 <https://github.com/ljianshu/Blog/issues/2>

<>2.JavaScript预解释是一种毫无节操的机制 <https://github.com/ljianshu/Blog/issues/3>

<>3.JavaScript的数据类型及其检测 <https://github.com/ljianshu/Blog/issues/4>

<>4.JavaScript创建对象几种形式 <https://github.com/ljianshu/Blog/issues/17>

<>5.细说数组常用遍历的方法 <https://github.com/ljianshu/Blog/issues/31>

<>6.浅拷贝与深拷贝 <https://github.com/ljianshu/Blog/issues/5>

<>7.深入浅出Javascript闭包 <https://github.com/ljianshu/Blog/issues/6>

<>8.你还没搞懂this？ <https://github.com/ljianshu/Blog/issues/7>

<>9.原型与原型链详解 <https://github.com/ljianshu/Blog/issues/18>

<>10.九种跨域方式实现原理（完整版） <https://github.com/ljianshu/Blog/issues/55>

<>11.Dom事件机制 <https://github.com/ljianshu/Blog/issues/44>

<>12.JavaScript常见的六种继承方式 <https://github.com/ljianshu/Blog/issues/20>

<>13.JavaScript数据类型转换 <https://github.com/ljianshu/Blog/issues/1>

<>14.JavaScript线程机制与事件机制 <https://github.com/ljianshu/Blog/issues/28>

<>15.前端模块化详解(完整版) <https://github.com/ljianshu/Blog/issues/48>

<>16.浏览器与Node的事件循环(Event Loop)有何区别?
<https://github.com/ljianshu/Blog/issues/54>

<>ES6

<>1.ES6核心特性 <https://github.com/ljianshu/Blog/issues/10>

<>2.ES6数组的扩展–Array.from()和Array.of()
<https://github.com/ljianshu/Blog/issues/12>

<>3.异步解决方案–Promise与Await <https://github.com/ljianshu/Blog/issues/13>

<>4.JS 异步编程六种方案 <https://github.com/ljianshu/Blog/issues/53>

<>5.ES6迭代器和生成器 <https://github.com/ljianshu/Blog/issues/42>

<>CSS

<>1.实现三栏布局的几种方法 <https://github.com/ljianshu/Blog/issues/14>

<>2.深入理解BFC <https://github.com/ljianshu/Blog/issues/15>

<>3.如何清除浮动 <https://github.com/ljianshu/Blog/issues/16>

<>4.LESS即学即用 <https://github.com/ljianshu/Blog/issues/19>

<>5.如何居中一个元素（终结版) <https://github.com/ljianshu/Blog/issues/29>

<>6.几种常见的CSS布局 <https://github.com/ljianshu/Blog/issues/40>

<>7.关于响应式布局，你必须要知道的 <https://github.com/ljianshu/Blog/issues/38>

<>Http协议与数据请求

<>1.关于Http协议，你必须要知道的 <https://github.com/ljianshu/Blog/issues/22>

<>2.关于Http协议一些重要概念 <https://github.com/ljianshu/Blog/issues/21>

<>3.深入浅出HTTPS工作原理 <https://github.com/ljianshu/Blog/issues/50>

<>4.Ajax原理一篇就够了 <https://github.com/ljianshu/Blog/issues/45>

<>5.Ajax请求后台数据 <https://github.com/ljianshu/Blog/issues/46>

<>6.fetch 如何请求数据 <https://github.com/ljianshu/Blog/issues/47>

<>浏览器相关

<>1.从URL输入到页面展现到底发生什么？ <https://github.com/ljianshu/Blog/issues/24>

<>2.浏览器存储 <https://github.com/ljianshu/Blog/issues/25>

<>3.深入浅出浏览器渲染原理 <https://github.com/ljianshu/Blog/issues/51>

<>4.深入理解浏览器的缓存机制 <https://github.com/ljianshu/Blog/issues/23>

<>web安全

<>1.常见六大Web安全攻防解析 <https://github.com/ljianshu/Blog/issues/56>

<>工具

<>1.如何在线预览 GitHub 项目 <https://github.com/ljianshu/Blog/issues/52>

<>实战

<>1.vue全家桶制作一个精致的美团项目 <https://github.com/ljianshu/Blog/issues/37>

<>五、2019年待写文章计划(暂定)

这部分写作计划参考木易杨大神的进阶系列目录 <https://juejin.im/user/56dea4aa7664bf00559f002d/posts>
,目前暂定以下主题，个人觉得这些都是前端重难点，有必要深入了解。

* 调用堆栈
* 原型与原型链
* bind、call、apply的实现原理
* 高阶函数
* JavaScript设计模式
* Promise原理及手写Promise
* webpack配置
* webpack原理
* 计算机网络概述
* TCP/UDP协议
* http2协议
* websocket
* 前端监控
* 性能优化
* 骨架屏实现
* Vue3.0新特性
* vue与react对比
* MVVM框架实现原理
* Diff算法
* Virtual Dom原理
* 前端数据结构与算法
<>六、后记

事实上，理解一件事并不难，难的是如何将一件事通俗分享给别人，并让别人也有所收获。我有个习惯，经常会翻看自己之前写的文章，觉得不满意，便会重新修改，这是我一直秉持的态度：文章的质量要比数量重要得多，每一篇文章，都是像是我的孩子，要认真对待！

上文中提到写文章诸多好处，这里友情提醒大家，千万不要为了写博客而写博客，作为程序员，我个人觉得最重要的还是敲代码的能力，以及工作中解决问题的能力，千万不要本末倒置，捡了芝麻丢了西瓜。

给大家推荐一个好用的BUG监控工具Fundebug <https://www.fundebug.com/?utm_source=liao>，欢迎免费试用！

最后打个小广告，如果你想了解前端的重难点、常考面试题和新知识等等，可以关注我的公众号「前端工匠」，一周两篇原创优质文章，旨在用通俗语言带你入门！

<>参考文章及书籍

* [译]如何撰写精彩的技术博客文章 <https://juejin.im/post/5c336723f265da61117a7812>
* 我从写技术博客中收获到了什么？- J_Knight_ <https://juejin.im/post/5c02b2bce51d4533253f2f43>
* 技术博客那些事儿
<http://www.ityouknow.com/other/2017/07/16/operating-technology-blog.html>
* 你也可以写出优秀的技术博客 <https://www.jianshu.com/p/954c1c7b3eb7>
* 如何开始写技术博客，怎么选择？ <https://www.zhihu.com/question/24629410>
* 为什么程序员应该要尝试写一写博客
<https://droidyue.com/blog/2017/01/02/why-every-programmer-should-try-to-write-blogs/>
* 前端面试之道
<https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5be91751e51d450ee5063ef5>
* 暗时间 <https://book.douban.com/subject/6709809/>
* 你的知识需要管理 <https://book.douban.com/subject/4630664/>

热门工具换一换