30岁了才有了自己的博客

写作是很痛苦

说来惭愧，干程序员这么多年，30 岁了，终于想起来要自己搭建一个博客了！其实一直羡慕别人拥有炫酷的博客，可是自己却一直没去做。作为前端程序员，通常来说，搭建好看的博客还是非常容易的，不过因为自己没啥分享欲望，加上上学时对写作的厌烦（上学时，语文不及格的主要原因就是作文）。

为什么现在想起来搭建博客呢？

我发现，我虽然不喜欢写作，却喜欢记录，学习笔记、工作总结、快捷命令汇总等等。学习新技术时，我喜欢把教程或者书本上的语言总结成自己能看懂的语言记录起来，然后看看自己的记事本，这么多年来也有 600 多篇了。

因此，我觉得我不是不喜欢写东西，而是我内心对写作的的恐惧，也担心自己水平有限，文章不够深入，误人子弟。也是为什么我一直不敢把自己写的东西发布到网上。

[质问] 那么，为啥你现在敢发了，你水平更高了？还是你写作水平提升了？？

[回答] 其实都不是！回想有一天，发现我多年前发布的第一篇文章，竟然现在都还有人收藏点赞，全文不过 500字，当时 md 语法都不知道，更别谈什么排版了。

这让我意识到一个问题：即便随手写的一篇文章，只要有完整的解决方案，都有可能帮助到别人。

我掘金的第一篇文章。

当然，除了帮助别人，分享文章还有有什么好处呢？会获得点赞和评论；甚至会遇到一些志同道合的人加好友，一起聊技术细节。当然，对于淡泊名利的你来说，这些有什么用呢？这些东西都是正反馈的来源呀!!!

正反馈

说到正反馈，这真的是一个值得深入的话题。工作中，大多数时候的任务是重复和无聊的，你的正反馈来源多数是你的上级或者同事，可是这样的正反馈是很少的。生活中也是一样。也就导致对工作失去兴趣，对技术失去兴趣，因为没有正反馈，也就没有动力继续，不想做任何事情。所以我们需要主动去寻找一些能产生正反馈的事情，写文章、运动、学习，分享。都可以。（有段时间，我每天上班第一件事就是看看有没有新的点赞和评论。）

其实这些道理一早就知道，很多文章、前辈都有说过，可是呢，人呀，就是要自己亲身体会后才会明白！

开始写作

与其说是开始写作，不如说是开始记录，对我来说更加合适。我并不擅长写出段落清晰、用词优美的文章。所以我决定把写作当做生活中的记录，把本地的总结记录分享到线上论坛。

既然要分享到网上，也促使我要求自己发布的文章不仅是自己能看懂，尽量也能让所有人看懂。这很重要！！！

让所有人能看懂很重要，因为即便是自己写的文章，隔一段时间你回头看，会发现啥也看不懂了，根本回想不起来当时是怎么实现的。这就是因为当时写得不够清晰。

于是，我逐渐将本地的记录文章颁发到了论坛，并获得了一些收获。

当然，这点数据根本不够看。对我来说是一个开始，打破固有思维的开始！渐渐地，我从一年 5 篇，到一年 10 篇了，现在一个月一篇。发布的文章逐渐变多了... 这可并不是我强迫自己输出呀（不可能，我意志力不强），这本来就是我本地记录的频率。

这也是我的做事风格，把一些看似很难的事情变得平常化。例如记单词，地铁上就非常适合记单词，手机没网络，记完单词刚好就到公司了。

写本篇的时候，我发现又有一段时间没更新了，不是我没写，是写了很多，都还没发布，因为总觉得少点什么。

搭建博客

说了这么多，总算可以回归正题了~

我参考了 v 友们的建议想搭建自己的博客，求大佬们推荐方案 - V2EX，总结出以下常见的博客框架。

• 
  
• wordpress
  
• hugo
  
• hexo
  
• Astro
  
• typecho
  

不过，看了一圈，都不太适合我，要么是配置麻烦、要么主题不好看。相反，并不是这些博客不好，里面的插件、主题多得很，只是没有找到我想要的那种风格（喜欢折腾0.0），下面我会详细解释。

我喜欢的风格

之前我一直很长一段时间，我很喜欢那种酷炫的博客，例如，动态背景图（雪花、3D 地图），或者页面下方还有个可以通过鼠标挑逗的二次元卡通人。再就是搞一些炫酷跳动文字？大家应该都懂，哈哈。

而现在呢，我想要的博客就是：

”简约“

看了太多混杂广告、推广、链接的博客，我更想让读者专注在文章本身上。所以除了文章相关的内容，其他东西一律去除。

”简单“

博客要关注的是内容，所以发布流程越简单越好，我只需要关注写内容就好了。

结合这两点，并简单调研了下相关实现，还是决定自己搭建一个，比较往后较长一段时间都要用它，所以还是自己用着舒服为主。

页面展示

Github: github.com/chennlang/c…

PC 端

H5 端

样式参考了以下两个非常喜欢的博主。

• 
  
• Tw93 的个人博客
  
• idoubi.cc/
  

NextJs 搭建博客

其实博客的本质，无非就是一个 markdown 的渲染器，对于前端来说，实现起来不算难事。所以我决定使用 NextJs 自己搭建一个，选用 Nextjs 的主要是因为它天然对 SSG （静态生成）的友好支持。

1.配置 nextConfig

通过如下配置，我们就可以导出一个静态web项目。

const nextConfig: NextConfig = {
/* config options here */
trailingSlash: true,
output: 'export',

};

2. 文章格式范式

我们将文章放在 posts 目录下，文章格式如下：

---

title: "时隔三年，一个可视化可交互的前端依赖分析工具发布了"

date: "2025-02-01"

categories: "Life"
summary: "我一直认为它只是一个不完美的半成品，所以我只是悄悄的上架到了个人的 github 仓库，并没打算公之于众。不过就在今天，我意外的发现仓库多了一个陌生人的 Issue，真的很震惊，我没想到真的有人安装文档安装使用了。这真的让我感到意外，也许真的有人觉得有用，那么我就要做好它，也有责任做好它！"

---

### 终于有勇气发布了~

我一直认为它只是一个不完美的半成品，所以我只是悄悄的上架到了个人的 github 仓库，并没打算公之于众。不过就在今天，我意外的发现仓库多了一个陌生人的 Issue，真的很震惊，我没想到真的有人安装文档安装使用了。这真的让我感到意外，也许真的有人觉得有用，那么我就要做好它，也有责任做好它！

3. 解析文章内容-核心逻辑

import { promises as fs } from "fs";
import path from "path";
import matter from "gray-matter";
import { remark } from "remark";
import html from "remark-html";

// 获取文章内容
export async function getPost(id: string) {
const markdownWithMeta = await fs.readFile(

    path.join("posts", id + ".md"),
"utf-8"

    );
// frontmatter 是文章的元数据信息， content 是文章内容
const { data: frontmatter, content } = matter(markdownWithMeta);

const processedContent = await remark().use(html).process(content);
const contentHtml = processedContent.toString();


    frontmatter.categories = Array.isArray(frontmatter.categories) ? frontmatter.categories : [frontmatter.categories || "Default"]

return {

        id,

        contentHtml,

        frontmatter,

    }

}

4. 展示文章页面-核心逻辑

const Post = async ({ params }: any) => {
const { frontmatter, contentHtml } = await getPost(params.id);

return <div>
<h1 className="text-2xl mb-4 font-bold">{frontmatter.title}</h1>

       {/* 元数据 */}
<p className="flex flex-wrap">

        {metaList.map((item) => (
<span key={item.label} className="text-gray-600 mr-4">
<label>{item.label}: </label> {item.value}
</span>

        ))}
</p>

      {/* 内容 */}
<div className="mt-4" dangerouslySetInnerHTML={{ __html: contentHtml }} />
<div className="mt-10">
<Comments />
</div>
</div>

};

展示就很简单了 dangerouslySetInnerHTML 将内容渲染在页面上就好了

5. 添加评论功能

因为是静态页面，所以就不存在数据库和server服务，所以最佳的方式是直接使用 giscus

利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。

首先我们到 giscus 上配置好我们的 github 项目，并在项目中开启 GitHub Discussions 功能。

所以本质上，所有评论最终都存在该仓库的 Discussions 里，每个文章对应一个 discussion。

对应关系可以自行设置，默认是文章的 url 路径对应作为 discussion 的标题，然后该文章的评论都是在这个 discussion 下。

然后新建一个 Comments 组件（配置需要根据自己的仓库自行修改）

"use client";

import Giscus from "@giscus/react";

export default function Comments() {
return (
<Giscus
repo="xx/xxx.github.io"
repoId="xxxx"
category="xxx"
categoryId="xxxx"
mapping="pathname"
strict="0"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
theme="preferred_color_scheme"
lang="zh-CN"

    />

  );

}

注意：

1. 
   
2. 本地 localhost 域名可能不会自动创建 discussion，发布到线上后就能解决。
   
3. 自动创建Discussion的触发条件是：当用户首次在该页面发表评论或表情时才会创建。若未进行任何交互，Discussion不会自动生成。
   

Github Page 部署

既然输出是静态页面，可以托管的地方就很多了，前面我也提到了，我并不想做除了写内容以外的任何事，Github Page 就是很不错的选择，不仅能托管文章代码，还能配合流水线自动构建，一举两得。

新建一个 [用户名].github.io 的 Github 仓库

2. 
   
3. 新建一个 nextjs 部署构建流水线 .github/workflows/nextjs.yml