写博客对我而言,是一种爱好,可以追溯到 2009 年,这篇文章记录了一些博客写作过程之中的实践。
设计博客
广泛的查看别人的博客
设计博客好比画画,从零开始画出一幅好画比较困难,但是如果临摹大师的作品就会相对容易一些。你可以搜索一些博客聚合类站点,查看成员的博客配置,对博客站点的设计有个大概的印象。这类站点通常有比较好的可迁移性。
不需要买域名和服务器
我建议个人博客使用 markdown 编写,存在 GitHub 并绑定自己默认是个非常好的选择。如果你从服务器开始搭建,不光会耗尽初始的热情,也会由于更新不便,服务器异常而法专注于内容。
博客美化切记过度
起初,写技术博客对我来说是一件容易的事,因为我无时无刻都有很多想法。我添加许多炫酷的特效在我的博客上,包括但不限于鼠标特效、点击特效、全局画布、一言、看板娘、音乐播放器、随机背景图、各种悬浮点击渐变特效。但这些美化难以做到不同设备上的兼容。此时我开始删减博客中我曾经认为“增色”的部分:内容不是越多越好。
更新方式
周更
周更的使用者是阮一峰老师,他从 2018 年开始每周都会定期更新,周更压力在于:不知道这周写什么。
双周更
双周更理论上能够很好的保持足够的输入,但实际操作中更容易遇到一整周都很忙的情况。
月更
月更是我坚持最久的更新方式,一个月足以输入足够的知识和内容。
载体选择
纯文字
纯文字的内容往往更能加载更快、获得国际流量的青睐、非常易于检索。
多媒体
只在必要的地方加入多媒体。注意:我并不是在否定文字以外的媒介,越来越多的知识不局限于通过书籍的方式传播:视频、音频、图片、动态网页、互动游戏。
整理博客
好的博客离不开定期整理,包括:
- 清除无法访问的链接
- 汇总合并类似的章节
- 将碎片的知识串联成体系
标签分类
我个人建议:表头的栏目推荐为 4-5 个,如有折叠展开:展开内容为 3-5 个。我们信息加工能力的局限1
风格化
这一步是要将你的站点与其他站点区分开来,风格化过程中会涉及到一些编程相关的知识,但主要是审美。
// 一个足够简单的单元,配上无数次的重复即可呈现一个有趣的画面 // 一张小巧无缝矢量图即可实现用极小的内存平铺满整个背景。 function example(props) { // 使用 XPath 查询选择输出框 const xpathSelector = "/html/body/div/div[2]/div/div/main/article/div/div[2]/div[4]"; const myElement = document.evaluate( xpathSelector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue; // 你可以在这里查看或修改这个SVG图片 // 譬如 https://jiangmiemie.com/img/logo-192.svg myElement.style.backgroundImage = 'url("https://jiangmiemie.com/img/protruding-squares.svg")'; myElement.style.backgroundColor = "ee5522"; // 使用 backgroundColor,而不是 background-color // 添加一个时钟 const [date, setDate] = useState(new Date()); useEffect(() => { const timerID = setInterval(() => tick(), 1000); return function cleanup() { clearInterval(timerID); }; }); function tick() { setDate(new Date()); } return ( <div style={{ color: 'white', height: "200px", // 适当调整高度 }}> <h1>{date.toLocaleTimeString()}</h1> </div> ); }
放平心态
由于各种问题都会发生,譬如国内忽然不能访问 Github 了,那么容灾和冗余就决定了你是否能够快速恢复站点(如果不能的话,对你的打击会非常大)
博客的流量和短视频相比差的太多了,数年无人问津更是常态。不要急于求成,否则只会适得其反。这里推荐几个真正在玩博客的前辈:
Footnotes
-
Miller, G. A. (1956). 神奇的数字:7±2;我们信息加工能力的局限(The magical number seven, plus or minus two: Some limits on our capacity for processing information) ↩