“现在谁还写博客啊”？
从高中开始有写博客的习惯，虽然大学之后更新的频率有所下降，但域名一直都在且时不时还是会发点东西。这样执着地在网络上给自己辟出这么一亩三分地，是因为这是一个让我能有机会把感受慢慢梳理总结成文的领域，长度不限也不针对什么观众，像一个漂流瓶扔出去，重要的只是自己“记录”的这一过程。
最近几年很大的感受就是自己表达欲望的降低和表达能力的损耗，社交媒体的环境“功不可没”——我必须承认自己是手机重度依赖，虽然已经有心控制，但还是不免被一种短平快的语言模式影响，其结果是我对事情的喜好或不怎么喜好经常凝结为武断的”哈哈哈“或者”好厉害“或者”很无语“，因此我时常很怀念高中大学的时候一集动画片写一大堆快乐的废话的习惯。所以这两年开始拉远和社交媒体的距离，回归自顾自的闲话（😼），简单来说，即便是简单的“喜欢”或者“不喜欢”，我希望我也不要失去“展开讲讲为什么”的能力。
怎么讲，写博客的感觉就好像大家各自经营自己的小星球，在宇宙中偶然相遇会发现对方生态完整，怡然自得，更为惊喜，这也是设计媒体没有办法提供的乐趣。
搬家小工程细节
为什么要搬家？
因为可以达到一个近似不花钱的效果（正色）
之前一直用的是wordpress，但逐渐觉得在内容的灵活性方面受到这样那样的限制（毕竟wordpress cms只能允许你在博客中添加它所规定的内容类型），更重要的原因就是我想做一个完全符合我自己审美的外观。锦上添花（？）的是gatsby在performance方面确实比较优越。
The stack
搭建这个博客主要使用的是__Gatsby JS__ （现在还是自称static site generator，不过感觉已经比这个定义要强大多了……），也是在gatsby cloud上deploy的。Gatsby本身是react-based，所以写起来也很顺手（由此还让我接触到了graphql，很上头）
有两个地方用到的是third party：
这个主要是现阶段图方便💦，虽然对整体performance会有一丢丢影响……有空的时候可能会再改，但我也不指望博客有超多访客，所以就随便吧💦
styling方面用到的是Emotion，主要是@emotion/react和@emotion/styled比较多，熟悉styled-components的话用起来也非常顺手……大部分的设计都是自制，有少部分modal用到了material-ui（完全取决于我当天的心情来的）。light和dark mode的转换使用了theme-ui。
内容的输出方面，主要是contenful，project页面的内容是直接写MDX。其实我本来有想过全部使用MDX，但因为之前的博客习惯了使用例如wordpress这样的cms,所以还是有点难以放弃有一个cms（headless CMS, even better)的“诱惑”…… 话虽如此，MDX用起来真的好愉悦！
MDX的愉悦（笑
使用MDX的快乐在于它在Markdown的基础上，能够允许我import任何我自己的react component，达到1+1>2的效果……这就给我很多空间，能够在内容里面插入任何奇怪的（？）设计元素。目前我在博客里面并没有运用太多，但使用storybook记录自己的component library的时候是必需品。
一段我在别的project里面使用到的简单MDX例子：
## Primary Buttons
Primary buttons are used as a call to action
and indicate the most important action on a page.
<Preview withToolbar>
<Story name="primary">
<PrimaryButton
onClick={action('button-click')}
disabled={boolean("Disabled", false)}
>
Hello World
</PrimaryButton>
</Story>
</Preview>
code snippets
一个比较特殊的内容是code snippets（因为我打算在博客里记录一些学习体会，或者project相关的心得，因此这个非常必要）。这边使用的是prism-react-renderer和react-live
比如这条是不可编辑的code snippet:
function myFunction() {
const iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
}
而这条可以自行编辑并且生成预览:
() => {
return(
<div>
<h2>Hi there!</h2>
<button onClick={()=>alert('clicked!')}>Click me!</button>
</div>)
}
效果比较简单，我好喜欢现在用的这个syntax highlighting的主题（叫synthwave84）在主题的基础上没有做太大的我流改动，以后再说吧（懒洋洋）
TO-DO LIST
目前还有三件待完成事项：添加站内检索功能，给博客添加一些音效（对，音效……谁不想在切换dark mode的时候听到类似拉灯的音效啊？没有人 ），以及基于Lighthouse report的优化……
总结来说搬家的过程虽然因为这样那样的原因比我想象中拖得久了一点，但结果是至少获得了一个可以说完全是自我风格的、网络世界安身一角。（虽然我感觉没过多久我就又会寻思着给博客大变样再次折腾起来……）