从今天开始写博客
介绍
在前几期 Newsletter 中，我向各位读者朋友介绍了我的个人网站，有读者朋友回信咨询如何建立，加上我也想要复盘一下心得和方法，因此就有了这篇文章。
于我而言，个人网站更像是一个自留地，不受各种算法的影响。我可以尽情地在这里发布、整理文章，不用担心干扰。
我的个人网站，实际上是「博客」。博客其实是一个互联网非常古早的产物了。在我读小学的时候，我舅舅就经常写新浪博客，甚至来我们家做客的时候，还要关心家里电脑能否联网给他看一下博客。
但随着互联网发展，博客这种「安静」的信息传递方式已经难以为企业赚钱了，企业纷纷转向了视频、公众号这种「聒噪」的方式，争夺用户的注意力。
这意味着两件事情：一是现在博客的关注度确实不高，二则是发展多年的博客，技术已经十分平民化了。事实上，无需高深的编程和代码知识，任何会操作电脑的人都能够跟着教程一步一步完成。
值得一提的是，我们在网上搜到的其他建站教程，有些会宣称「不用一行代码」。事实上，想在由计算机构成的互联网世界有一片自留地、又不依托任何社交平台，必然需要一定量的编程知识。
当然，如前所述，你不需要学过编程，掌握这些知识也不难。
基础
事实上，我想先强调一些有关建站的基础：
- 坚持写作、拍视频等创作能力。
- 使用外网的能力。
- 查阅（英文）文档的能力。
这三个能力，我想缺一不可。关键在于，即使你现在没有也没关系。谁的能力不是慢慢强化得来的呢？我们会在一天天的发展中，逐渐获得并强化这些能力。我逐一解释：
坚持创作。建站给人的感觉很酷，但是如果只有一个空壳的话，再酷也不会吸引人长久驻留。
使用外网。无论是后文需要使用的 GitHub，还是大部分国际公认的优秀网站，如 Figma、Notion 等，基本都来自于欧美国家（这并非指中国大陆没有优秀的互联网产品）。个中原因不在此分析，只是从结果来看：我们如果不掌握使用外网的能力，将会错过互联网世界的绝大部分美景。
查阅（英文）文档。文档通常是一个互联网产品的说明书。至于为什么需要英文能力，和第二点的原因类似，既然众多优秀网站和产品都来自于海外，那在语言上势必优先支持英文。况且，当我们遇到问题时，很多解决方案也是由英文写就的。
多嘴说一句，我遇到了很多人声称自己「英语不好」，听来只觉痛心。语言并非天堑鸿沟，退一万步说，我们每个人都至少熟练掌握了一门语言：中文（普通话或方言）。只要多运用，任何语言都会逐渐成为我们身体的一部分。因此，别再说自己英语不好了，不如说自己「英语暂时不熟悉，还需要多说多看」。
我并非计算机系，未经过系统的专业化训练。在以下教程中，可能会出现错误，还请海涵和指正。本文会同步发表于个人网站，如需更好的代码复制体验可以移步此处。
在第一章的最后，我想分享编程区 up 主 Codesheep 在视频手把手教你从0开始搭建自己的个人博客中说过的一句话：
不要怕遇到问题，因为你一定会遇到问题。没关系，解决问题就好了。
我在 2020 年的时候也曾经尝试建立个人博客，预期太高、以为会很顺利，结果一直不断遇到一些小问题，感觉受挫、没一会儿就放弃了。不久前刷到了技术博主的视频，这句话给了我很大的信心和勇气。
每个人的电脑配置、网络环境各有差异，你一定会遇到大大小小的问题。没关系，遇到问题就去寻找解决方案，逐个尝试后，解决掉就好了！
安装
正常来说，以下安装过程适用于 Windows、macOS、Linux。
与网上能找到的绝大多数相似教程相比，我更想用一种诗意的比喻方式来我们可以将最终的网站成品类比为「一个装饰精美的储物盒，盒子里装着一沓纸」。
打造工作台：构筑环境
首先，构筑环境。我们需要一个「工作台」来加工和维护储物盒。如果我们的工作间是我们的电脑，那工作台便是 Node.js 和 Git 。你不需要理解它们的原理，但我们需要在电脑里安装它们。
请分别点击链接进入二者的官网，网页一般会默认提供适配当前电脑的下载选项。
- Node.js 请选择左边的绿色方框下载。
- Git 请选择 Standalone Installer 中的 64-bit Git for Windows Setup（如果你知道自己的电脑是 32 位版本，请选择 32-bit Git for Windows Setup）。
找到好工具：使用终端
有了工作台，有了目标，我们还需要一个趁手的扳手来执行操作。无论是什么系统，每台电脑都提供了这个扳手，那就是「终端」。
终端实际上是我们与电脑「直接沟通」的中介，平常我们用电脑时的各种软件其实是我们与电脑「间接沟通」的中介。
终端无需额外下载，你可以在搜索中（Windows 中敲击 win+s，macOS 中敲击 command+space）输入终端二字打开。你可以考虑在 Windows、Linux 和 macOS 上安装 PowerShell，对 Windows 用户的体验优化很明显。
终端实际上是在特定文件夹内的操作，因此在你的输入位置前总是有一行文件路径名。因此，有两个命令很重要。（#号后面为注释内容，请不要在终端中输入#号后面的内容，下同）
1 | cd folderName #进入名为folderName的子文件夹中 |
先打造外框：博客框架
一个储物盒，如果没有稳定的框架，势必会散架。对于博客而言，框架便是 Hexo 。
Hexo 自 2012 年发布以来，已经稳定提供服务 10 年，由台北人陳嘉輝（Tommy Chen）编写。基本上，如果你想要搭建博客，框架不是选择 Hexo 便就是 Hugo，足以证明其强大。
与我们日常安装软件不同，Hexo 的安装只需要一行代码即可。但是，在哪里输入代码呢？
我们可以在任意位置新建文件夹，右键菜单中选择「在终端中打开」。以下所有代码，每一行输入后需敲击一次 Enter 键。
在弹出的窗口中，我们逐行输入以下代码，检查工作台是否搭建好了（检查 Node.js 和 Git 是否安装好了）。如果分别出现一行版本号，即安装完毕。
1 | node -v #检查node版本 |
由于国内网络环境限制，电脑访问外网通常非常缓慢。我们需要将工作台改为中国大陆版本（即更改镜像源）。
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org |
紧接着，确认工作台无误后，我们便可以先打造好博客框架了（安装Hexo）。
1 | cnpm install -g hexo-cli |
我们同样需要检查我们的博客框架是否打造好了（检查Hexo安装情况）。
1 | hexo -v |
开始造盒子：建储物盒
框架已经完成，意味着我们拥有了建储物盒的模具。我们便可以使用模具来创建第一个储物盒。
你可以在你电脑的任意位置新建文件夹，既然我们要建立个人博客，那就起名「blog」吧！随后，在「blog」文件夹内，右键菜单中选择「在终端中打开」。以上操作，你也可以在终端中输入以下代码代替：
1 | hexo init blog # 初始化创建，会在你所在位置创建 blog 文件夹 |
稍等一会儿，略显粗糙的第一个储物盒就建好了！
什么，你没看到？仔细看看刚才的文件夹，里面应该出现了不少文件。这些配置文件便构筑起了我们的储物盒。回到终端里，继续输入：
1 | hexo clean # 清除所有记录 |
接下来，我们使用浏览器打开 http://localhost:4000/ ，便可以看到一个默认的储物盒了。
自定义外观：博客主题
我们都喜欢好看的东西，对于网站亦如此。随着 Hexo 这么多年的发展，来自全球的开发者已经为其创造了 300 多个风格各异的主题，足够让你挑花眼。
你可以随意浏览。点击图片可以进入该主题的范例网站，点击标题可以进入该主题的 GitHub 页面。GitHub 页面中一般会写明安装方法和配置要求。实际上，安装方法无外乎两种：
第一种，在 GitHub 页面中点击蓝色的 Code 按钮，选择「Download ZIP」，下载包含该主题所有代码的文件。解压后放入我们的「blog」文件夹中的「themes」中（下文将使用「blog/themes」表达相同意思）。
第二种，在使用一行代码，从终端直接同步该主题的所有代码。通常在博客的Github页面都会写明如何安装。
1 | git clone xxx themes/yyy |
值得注意的是，如果你遇到了 GitHub 访问很慢、无法git clone的情况，你可以采取「曲线救国」的策略。Gitee 是国内类似 Github 的代码托管网站，注册后，在「+」中选择「从 Github/Gitlab 中导入仓库」，输入你想要的Github网址。
安装好之后的下一步，是配置。即在各个主题提供的范围内进行自定义。每个主题都各有不同，在这里无法逐一介绍。请发挥前述提到的第三个能力，根据主题的 GitHub 中的 README 文档，完成该任务吧！
值得强调的是，丰富的主题其实是一把双刃剑，好处是我们可以为网站精挑细选主题，但坏处便是我们很容易深陷其中、舍本逐末。好的网站，最重要的并不是外观，而是内容。如果没有扎实、吸引人的内容，访客的鼠标只会快速点击「关闭」键，和你说再见。
我的个人网站目前看起来非常有模有样，很大一部分原因是我已经在前期有了长足的文章积累。在完成前面的步骤之后，我其实只需要将文章复制粘贴生成即可，
向世界发布：部署网站
部署（deploy），听起来很高级，但是我们可以理解为将博客从本地发布到云端，让我们可以通过一行网址访问。
由于该部分内容并不难，请参阅部署 Hexo | Easy Hexo 👨💻的教程进行配置。
出于安全性考虑，GitHub 应该会要求用户提供 SSHkey，你可以理解为电脑和 GitHub 之间的「暗号」，请参阅查看本机 ssh 公钥，生成公钥。
值得一提的是，我并不推荐你部署到国内代码托管网站，如 Gitee。不推荐的理由是老生常谈了：审查机制。以 Gitee 为例，每一次网址重新发布，用户都必须进入 Gitee 手动点击部署，十分麻烦。除此之外，Gitee 会使用机器以不明朗的规则审查文字，十分正常的内容也可能被判定违规、不予部署。
当然，Gitee 的（唯一）好处是国内访问速度很快。相比之下，GitHub 作为真正开源的国际网站，在国内访问速度并不稳定。请自行斟酌考量部署网站的选择。
如果你具有更强的能力可以将博客部署到自己的服务器、域名之上，那自然是再好不过了。即便没有，使用 GitHub 等网站提供的部署服务也非常方便优雅。
写作
我怎么写
所有的博客文章，我们都可以在本地的博客文件夹名字/source/_post中看到，并且会以 .md格式存在，md 是 markdown 的缩写。
如果你完全不知道 markdown 是什么，那么你必须先阅读认识与入门 Markdown，了解 markdown 的常用语法。别担心，这不仅学起来很简单，学会之后，也会让我们以后的文字处理都变得简单起来。
如果你对常用 markdown 语法有所遗忘，请随时查阅Markdown 语法速查表。
如果你想选择一款好用的 markdown 编辑器，你可以在这些Markdown 工具中进行选择。当然，电脑自带的纯文本工具（即记事本或文本编辑）其实也完全足以编辑，只不过无法对你写下来的 markdown 语法进行即时渲染。
当你想要新建一篇文章时，你可以二选一：
- 直接在前述文件夹中右键新建md文件，并编辑其中的内容。
- 使用终端命令
hexo new post xxx，xxx为博客网址名。
基础信息
每篇 hexo 文章都会需要一个 front-matter，用以告知这篇文章的基础信息是什么。通常而言，「标题、日期、标签、分类」即足矣。
1 | --- |
如果你还想了解更多，请参阅Front-matter | Hexo。值得注意的是，每个主题通常都会提供一些特殊的信息用以配置 front-matter，你通常可以在主题的 GitHub 页面中找到配置指南。
多台电脑
如果你拥有两台及以上的电脑，希望每台电脑上你都可以编辑博客内容并发布，你可以参阅多台电脑使用Hexo。过程很简单，因此在此不再复述。
彩蛋：插入 B 站或 YouTube 视频
基础操作
绝大部分的 Hexo 主题，都支持通过一行复制粘贴的代码嵌入 B 站或 YouTube 的视频，非常适合视频创作者来构建自己的个人网站。那么，这行神奇的代码从哪里复制来呢？
很简单，用浏览器打开任意你想要嵌入的视频，找到分享按钮里的「嵌入」键，拷贝由 B 站或 YouTube 提供的这行代码，并将这行代码粘贴到博客文章中去。当然，不只限于这两个视频网址，任何提供嵌入代码的视频网站都可以。
重新渲染博客后，打开对应页面，你就可以看到一个可以直接在网页内点击播放的视频了！
时分跳转
涉及视频插入的场景，我们常常会想要指明几分几秒。比如我们想要插入一个教程，但我们想特别注明只需从第 2 分 30 秒开始看就好了。那我们应该如何操作呢？
对于 Youtube 视频，非常简单，嵌入功能原生支持设置时间节点。我们只需要在嵌入界面设置「2:30」或「150」即可，前者为几分几秒，后者为秒数，二者等效。
对于B站视频，则显得稍微麻烦些许。我们需要在提供的代码中的「src」引号内的最后添加上「&t=02m30s」。如果视频有多个分p，你可以添加「p=2&t=02m30s」，用以表示跳转至第2部分的第2分30秒。
1 | # B站提供的视频嵌入代码 |
宽高调整
在具体的网页渲染中，我们还可以指明播放器的宽度和高度。
无论是 YouTube 还是 B 站提供的播放器，我们都可以在第一个括号内加上一段代码，这样子我们便可以自定义播放器的宽高了。
1 | # 添加宽高参数以前 |
你可以输入两种类型的值来定义宽或高：
- 百分比，即播放器占浏览器的百分比。如「width=”100%”」。
- 纯数字，即像素值。如「height=”300”」。
结语
到此为止，我的一个小梦想已经圆了：建立个人网站。
于我而言，在互联网上有一个自己的域名，打开后装满了自己设计和书写的内容，带来的成就感和满足感还是很强的。
接下来，就是你创作的过程了！
参考文献
本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。
This essay is under CC BY-NC-SA 4.0 license agreement. Please indicate the source when reproduced.
