手把手教BIMer搭建区块链博客

搭建过程中的踩坑记录，供同为小白的同志们参考，陆续补充，并录制视频进行教学，预计完成时间2023.10月。在开始动手之前，建议先想想值不值得投入大量时间和精力来折腾。

起因

何为区块链博客？可参照这篇文章：区块链博客，作者的博客也是搭建在区块链之上的。看完文章后我对Web3.0产生了浓厚的兴趣，但作为一个技术小白，似乎只能做两件事情。一是去购买IPFS发行的Filecoin；二是像上面的博客搭建一个区块链博客。这篇文章就是记录后一件事情的一些细节。

作为一个合格的BIMer，向来就是什么难搞搞什么，画得了图建得了模写得了代码，在知乎、头条、微信号上面简单写字发点文章，实在是没有什么难度，要就整点区块链独立博客，在区块链博客上写技术文章，才能符合BIMer钻研的精神。

区块链博客本质上是一个静态博客放在区块链网络中，所以我们首先要做的是搭建一个静态博客。

简要指南

静态博客搭建

本博客使用Hugo，同步到Github私有仓库，并采用Vercel自动部署进行实时更新展示。

基础搭建步骤可以参考文章：如何在 Windows 系统从零开始构建一个和我一样的 Hugo 博客，文章详细但不啰嗦，每一步关键点说的也很清楚。搭建步骤不再复述，只在第三章节记录我遇到的问题，作为补充参考。

博客同步到区块链

同步到区块链可以参照区块链博客一节选，作者科普倾向比较多，对于具体操作则是简要说明。当然我在看IPFS（InterPlanetary File System，星际文件系统）这一概念是有点小激动的。在第四章节我会记录遇到的问题。

博客搭建补充说明

Github速度慢

Github在国内大部分地区限流，几K速度每秒，如果没有条件挂梯，可参考解决GitHub访问速度慢问题来提高下载上传速度。不过没有合适的上网手段不建议使用此种方法搭建博客，毕竟之后写博客也麻烦。可以参考其他相关教程使用国内的Gitee。

Stack主题使用

博客使用Stack主题，感觉主题文档写的不够详细，也没有中文版，小白操作难度很大。在基础搭建步骤里面只说了如何做，但详细说明每一步作用有助于之后遇到问题灵活处理。

我把Hugo官方Quick Start的做个说明然后再解释一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
hugo new site quickstart
//安装hugo后利用命令新建一个quickstart名字的文件夹，当做站点
cd quickstart
//进入文件夹
git init
//初始化
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
//拉取主题ananke的文件放在themes/ananke中，作为子模块
echo "theme = 'ananke'" >> config.toml
//在quickstart目录下修改config.toml，插入一行 theme = 'ananke' 使用该主题
hugo server
//启动站点进行预览

教程中的添加Hugo主题Stack跟上面操作类似，只文章没有说明为啥要复制文件出来粘贴替换。

作者回复是主题设置没有生效，你可以试一下按命令拉取主题内容到themes以后，在目录下config.toml 插入 theme = “hugo-themes-stack” 是否有作用。如果有网站生成说明生效了。

如果不生效则需要手动去把主题中的文件复制出来进行替换。类似的操作Stack主题文档中也有说明

原教程则是使用完全替换的方法，照做能够生效也行。

如果是使用根目录下修改成config.toml加入 theme = 'ananke'的方式使用主题，则主题的参数设定则需要到thems/hugo-them-stack/config.yaml中修改，两个配置文件共同起作用控制站点。

同时在thems/hugo-them-stack/exampleSite中主题给出了填充网站的内容，和修改的网站配置文件，复制到根目录下进行替换，操作和之前类似，不再赘述。

Stack主题安装报错

安装出现以下错误

1
2
3
4
5
6
ERROR 2023/03/18 20:52:31 Failed to get JSON resource "https://publish.twitter.com/oembed?dnt=false&omit_script=true&url=https%3A%2F%2Ftwitter.com%2FDesignReviewed%2Fstatus%2F1085870671291310081": Get "https://publish.twitter.com/oembed?dnt=false&omit_script=true&url=https%3A%2F%2Ftwitter.com%2FDesignReviewed%2Fstatus%2F1085870671291310081": dial tcp 108.160.170.52:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
If you feel that this should not be logged as an ERROR, you can ignore it by adding this to your site config:
ignoreErrors = ["error-remote-getjson"]
ERROR 2023/03/18 20:52:40 render of "home" failed: "C:\Blog\layouts\index.html:9:15": execute of template failed: template: index.html:9:15: executing "main" at <partial "article-list/default" .>: error calling partial: partial "article-list/default" timed out after 30s. This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.
Error: Error building site: failed to render pages: render of "page" failed: "C:\Blog\layouts_default\single.html:27:7": execute of template failed: template: _default/single.html:27:7: executing "main" at <partial "article/article.html" .>: error calling partial: "C:\Blog\layouts\partials\article\article.html:2:7": execute of template failed: template: partials/article/article.html:2:7: executing "partials/article/article.html" at <partial "article/components/header" .>: error calling partial: partial "article/components/header" timed out after 30s. This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.
Built in 30134 ms

如果没有挂梯子，一是json报错，主题默认内容里面有国外网站，可以删掉主题里自带的Rich Content这篇文章，或者参照下方；二是主题生成时间过长，超过30s，安装下方增加时限即可。

在config.yaml文件里面增加这两行 ignoreErrors: [“error-remote-getjson”] timeout: 200000

网址设定

除根据搭建教程完成设置以为，我自己配置的主要有以下内容

language 我只需要中文，所以删除了；
DefaultContentLanguage 设定为 zh-cn；
permalinks 文章路径 post: /post/:slug/ 页面路径 page: /:slug/

更多设定参照Hugo官方文档，链接这章的说明我找了Hugo框架中文文档内容管理链接URLs一文，方便英语不过关的同志参考。不过英语不好，不看原始文档，弄起来难度会大很多。

category页面设定

删掉theme/hugo-them-stack/content/categories，在根目录下进行设定，或者删掉根目录下的文件，再主题文件的categories文件夹下面编辑，只留一个，否则可能搞混乱。在categoires下面新建文件夹，文件夹名称是分类展示的名称，里面按要求编写_index.md文件

例如想新建美好生活的分类，则新建名称为美好生活名称的文件夹，在此文件夹下面建立_index.md文件，内容如下，同级文件插入图片进行链接展示。

1
2
3
4
5
6
7
8
9
---
title: "美好生活"
description: "This is an example category"
slug: "美好生活"
image: "helena.jpg"
style:
    background: "#2a9d8f"
    color: "#fff"
---

社交图标

首先svg图片路径在 assets/img 下面，相应的图标在config.yaml的social一节可以进行修改，具体步骤参照基础教程。这里我的知乎图标在教程的网站没找到，直接找了Victor42的博客F12查看源代码复制了一个过来。

图片插入设定

主题建议插入的图片和文章是以下格式

1
2
3
4
5
|-- post
    |-- 区块链博客
    |   |-- index.md
    |   |-- pic1.jpg
    |   |-- pic2.jpg

index.md文章中的图片只需要直接![](pic1.jpg)格式插入，前后空行，Stack模板会自动生成相册模式。如果使用下方的外部链接形式则相册模式不可用，可自行选择。

图片插入模式排版

另外一种格式是，图片统一在post下面新建img文件夹，里面有index.md空文件，然后按年份放置图片，post下的文章按年份组织排列，使用slug来控制名称，页面的设置用slug来控制。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
|-- post
    |-- 2023
    |   |-- 文章1.md（文章按年份归类）
    |   |-- 文章2.md
    |-- 2022
    |   |-- 文章3.md
    |-- img
    |   |-- index.md（这个必须要有）
    |   |-- 2023
    |       |-- 202303-1.jpg
    |   |-- 2022
    |       |-- 202201-1.jpg

这样在文章1.md里面写文章要插入202303-1.jpg这张图片，只需要在markdown格式下插入如下网址就行: ![](/post/img/2023/202303-1.jpg)。优点是不用每篇文章都新建一个文件夹，图片也能集中到一处，缺点则是因为相当于外链，没有了相册预览模式。

相册预览模式

可自行取舍。

favicon与头像

参照教程，可搜索favicon generater等工具，生成favicon.ico图标，并放置在根目录下static文件夹（没有就新建一个），再在config.yaml文件中设定。

1
2
3
4
5
6
params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon:  /favicon.ico

网站速度优化

使用17CE测速，作为部署在被墙的Github上的网站，达到这种速度心满意足。唯一隐患就是可能随着该部署方式的普及，Vercel可能被墙，到那时候再说吧。类似的替代产品不少，国内也有一些。

speedtest

如果你的网站测速比较慢，可以按F12，打开Network，刷新网站，逐一查看是哪些地方拖累了速度，有针对性的进行修改。

博客写作

静态博客最大的槽点在于太麻烦，不仅只是部署，连写作都是。传统的写文章，无非是登录网页，输入账号密码，开始写作，提交更新。而静态博客由于没有管理后台，需要用特定编辑器或者git push等写代码的方式更新。

门槛太高。

这里分别在PC和手机上提供一种方法，只需要登录网页点击鼠标就能更新博客，忘记那些写代码的方法。git命令，add commit push pull根本弄不清。

当然一点基础的Markdown知识必不可少，让你不用担心排版效果，写作思路连续。

网页在线写作

PC端操作总结起来一句话，登录Github网站部署页面，按鼠标右下的.符号，则进入github.dev编辑器。写作的界面就像下面这样

我们只需要在post下新建md格式文件，便可以开始写作，而且提供markdown即时预览界面，左右对比。

官方解释如下:

github.dev 编辑器引入了完全在浏览器中运行的轻量级编辑体验。使用 github.dev 编辑器，可以从 GitHub 中导航文件和源代码存储库，并创建和提交代码更改。

也就是说在github上搭建的静态博客有了一个足够强大的后台编辑器，你的更新和上传图片在网页端就能完成，即使是在一台新的电脑上，只要你能访问Github，就可以简单的更新文章而不用再把文章同步到本地，并且使用烦人git同步命令。

当然，新建文章后的一些标签还是得要设定，如果你记不住，找之前的一篇文章复制过来改改就行。

比如像下面这样

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
+++
slug = 2000
title = "手把手教你搭建区块链博客"
date = "2023-03-18"
description = "好奇心驱使下的行动，没想到是一个深坑"
tags = [
    "区块链",
    "博客",
    "教程",
]
categories = [
    "生命不息折腾不止",
]
image = "/post/2023/202303-1.jpg"
+++

这是一篇新的文章

写完之后在这里输入更新内容说明，点击Commit&Push提交就行，网页会自动更新。中间的操作就是Github会把新的代码传递给Vercel，Vercel进行编码处理生成静态文件，然后发布到网站。当然这些中间操作是自动的，我们不用关心。

手机在线写作

下载GitHub App，手机打字更新文档，相关应用程序可自行搜索。这一项应该不是强需求，手机上打好字在电脑或者平板上编辑上传更快捷。

如果视频播放不支持，可点击链接查看手机在线写作。

博客备份

备份最简单的就是直接打开网址，点击Code，把程序都下载下来，在content/post文件夹下面有你所有的文章。自动的保存就不折腾了，投入产出比太小。而且只要你不乱来删除文件，或者被封号，Github也不倒闭。没啥问题。

博客上链

参照Vercel部署方式，在Fleek上面选择与Github绑定，然后选择部署博客仓库，使用Hugo，选择合适的版本。如果部署不成功可以查看一下原因

稍等片刻之后就会给你把博客部署到区块链网络上面，顺带给你一个可供访问的域名。如果有需要，可参照之前文章注册.eth域名并进行绑定。此处不再赘述。

有任何问题可随时联系