以最低的学习成本制作一个完整的个人博客,无需了解前端,但有一些模板上的局限性

前言

个人博客对于像我这样从其他领域转码的rookie来说,还是很有必要的,可以记录自己的一些经验,方便自我回顾,可以巩固知识点,加深记忆和熟练掌握的程度。

Coding Page

Coding是一个提供代码托管和协作研发的工具网站,在建博客中的功能是托管博客网站的html代码,提供的原始博客网址称为Coding Page。网站本身类似Github码云,三者选其一即可,各有优缺点

  • Github Page在国内无法正常访问,需要VPN/SSR
  • 码云的Gitee Page无法在后续所用到的Gridea软件上直接配置,需要通过编程批量替换Gridea的字符串,再批处理拉取远程仓库,更新文件(我用python写的脚本,但是pyinstaller需要python版本较低,我不想重装因此放弃)。在此贴出参考如何采用Gitee Pages + Gridea 搭建个人主页
  • Coding Page的域名不像Github和码云的page一样是以io结尾的固定域名,而是随机分配的,所以非常复杂,所以几乎必定得购买注册域名,例如本博客的原始Page域名是https://coding-pages-bucket-3541328-8521428-15072-548659-1257216000.cos-website.ap-hongkong.myqcloud.com/post/markdown-yu-fa-da-quan/

Coding Page配置

首先进入coding官网点开右上角的登录/注册,选择免费注册。

第一行团队名称随意,第二行的团队域名请谨慎填写,在之后配置Gridea时会用到。

img

随后点击下一步,进入创建用户阶段,选择邮箱注册,不要选微信注册,这里注册邮箱需要记录下来后续会用到

img

下一步完成注册后回到登陆页面登录即可。登陆后流程如下所示:

  1. 点击左侧项目,然后选择创建项目。

在这里插入图片描述
在这里插入图片描述

我这里是已经创建好了项目kimtanyo

  1. 项目模板选择代码托管项目
img

填写项目名称、项目标识,其中项目标识请谨慎填写,在之后配置Gridea时会用到。

img

弹出的邀请成员加入项目关掉即可,不用理会。

  1. 进入到新建的项目中,创建代码仓库(此处我已经创建了,仍为kimtanyo)
img

填写仓库名称创建,如果是从github或者码云的原博客想转过来,也可以选择导入外部仓库

img
  1. 在项目中,选择左下角的项目设置。
img

点击功能开关

打开持续部署和持续集成

  1. 此时可以看到左边菜单栏多出持续部署和持续集成选项,展开持续部署后选择网站托管,点击新建网站

选择静态网站即可(因为后续所用的Gridea只能写静态博客)

网站名称随意,代码仓库选择刚刚新建的,分支选择默认的master,注意节点一定要选择香港,选大陆地区的话,涉及配置自定义域名时需要自行备案,如不备案,则会部署失败

等待几分钟网站部署好之后,进入部署好的网站,记录下来网站地址后续会用到

  1. 点击右上角的个人账户设置

选择访问令牌——新建令牌,此处要记录令牌用户名,之后会用到

随意填写令牌描述,勾选第一项project:depot,完成创建,创建后会得到令牌,也需要记录下来

Gridea

简而言之,Gridea就是个静态博客写作客户端,帮助构建和管理博客或静态站点的工具。使用简单,支持Markdown语法,且windows/Mac OS/Linux全平台支持,这也是我选择它的理由之一。虽然目前还不支持云端同步,配合onedrive同步盘工具还是可以实现三平台无缝衔接。

不过通常我并不会直接在Gridea里面写博客,而是在Typora或其他Markdown写作工具上写好之后,再复制进去直接发布即可,因为Gridea里面的Markdown实时解析偶尔会卡顿显示不出图像,如果写了html代码在文章中,显示的排版也有点小问题,和实际发布后访问网站的结果不太一样。

Gridea配置

先去Gridea官网下载并安装,而后选择远程中的Coding Pages,其中要填写的所有内容都在前面高亮标记出来了

域名:填写在coding配置中静态网站的访问地址

仓库名称:填写创建项目时填写的项目标识/项目标识,例如我的项目标识为kimtanyo,则填写kimtanyo/kimtanyo

分支:填写master即可

仓库用户名:填写注册coding账户时的团队域名

邮箱:填写注册coding账户时的邮箱

令牌用户名和令牌:个人账户设置中创建访问令牌时的令牌用户名和令牌

CNAME:这里先不填写即可,如果已经有了个人域名则输入个人域名,后面会讲

Gridea博客写作

Gridea配置好之后,首先需要给自己的博客设置一个主题,也就是一个模板

主题设置好之后可以点击左下角的预览打开本地文件,嫌麻烦也可以去官网查看并预览更多主题,此外还可以在自定义配置中设置名片和社交超链接,还可以设置网页的图标,也就是favicon.ico,还有主题中显示的个人头像

设置好之后点击同步,就可以更新到你的博客了,注意以后每次更改设置或者发布博客之后都要点击同步(即使是添加标签也算)

现在可以开始写博客了,点击文章——新建,把在typora里写好的文章复制到这里来,点击右上角保存即可

注意文章右侧的设置中,可以设置文章的URL、分类标签(需要提前在主界面先创建)以及封面图

封面图不要上传本地文件,一定要用外链,这里推荐把封面图上传到图床,再在此处使用链接(关于图床后面会说)

Gitalk评论配置

Gridea支持Gitalk和Disqus两种评论系统,这里我使用Gitalk评论系统。

首先你需要有一个 「GitHub OAuth Application」 ,点击这里创建

这里Homepage和Authorization callback的URL都填博客主页的域名,application name随意

设置完成后,会生成一个Client ID,需要自己手动创建一个Client Secret,这里先复制或者记录下来,在接下来的配置中使用。

创建用于存放评论的仓库,注意仓库名中间不允许空格,如果有空格会被默认替换成-

注意检查新建的仓库有没有打开Issues栏,如果没有则要去仓库的Setting—Options—Features,勾上Issues

回到Gridea的评论配置,依次填写即可

这里Owner即Github名

完成后点击同步,在博客网页的文章最下方就会出现评论栏(图中的大实话评论在本文最后)

注意:有部分帖子称会发生点击评论处的登录Github时,会跳转到博客首页,此时将刚刚创建的Application的Homepage和Authorization callback的URL都改成Coding Page的原始URL即可解决问题

个人域名绑定

此时其实已经可以通过coding中静态网站的访问地址,访问你的博客网站了

但是coding分配的域名没有规则,难以记忆,B格不高。这时候如果我们就可以花上一点小钱,买上一个域名,就可以拥有一个更加🐂🍺的体验。域名服务自己购买即可。这里最好还是选择腾讯云的服务,毕竟白嫖了人家的coding服务器,而且腾讯云的域名非常便宜。

点击腾讯云主页,注册登陆后搜索域名注册,购买域名,并完成实名制,这里就不详述过程了。

在Coding项目的静态网站中,选中自定义域名,点击新建域名,输入买的域名(前面要加上www

此时先跳过证书的相关步骤,记下来这里的CNAME指向

回到腾讯云——域名注册——我的域名,点击解析

默认的两条记录不要进行删改,点击添加记录

第一条:主机记录www;记录类型CNAME;记录值填写CNAME指向的域名

第二条:主机记录@ ;记录类型A ;记录值:

Win+R打开cmd,输入ping+空格+CNAME指向的域名,例如

ping www.kimtanyo.cloud.cdn.dnsv1.com

记录值填写返回的数字ip地址即可,例如此处是18.166.25.109

然后我们点击这两条新建记录右侧的SSL,申请CA证书,等待几分钟通过

然后回到Coding重新检查证书颁发状态

最后进入Gridea填写自己的个人域名到CNAME中去,并点击同步

现在你可以访问你的个人域名来打开博客了

COSBrowser

经常发博客的人可能会头疼,图片如果用本地的路径写入Markdown文本中,那只有自己才能看得到,别人打开博客是加载不出来的。

图床就是一个在网络上存储图片的地方,目的是为了节省本地服务器空间,将图片传到图床后,每张图片都会有自己的链接,即可写入Markdown中引用外链共享。

图床推荐腾讯云的COS对象存储,搭配官方的可视化界面工具COSBrowser,首次使用有很长的免费期,且收费也非常便宜,并且Coding也是腾讯的、域名也是腾讯的,就一条路到黑最方便了。

进入【对象存储】→【存储桶列表】→【创建存储桶】

这里所属地域要选择和你的网站同样地区(也就是香港),权限一定要选择公有读私有写

创建完毕后点击【密钥管理】→【云API密钥】→【新建密钥】

这里的SecretId和SecretKey要记录或复制下来

回到【对象存储】→【工具】→【客户端下载】,下载Windows版本的COSBrowser

安装后用SecretId和SecretKey登录,其他不用填

打开新建的存储桶,尽量为每篇博客都新建一个文件夹分好类,写文章的时候,将需要用到的图片都拖动进来上传

相比COSBrowser,可能很多人用的是PicGo,因为泛用性强,可以兼容市面上几乎所有的图床,但是经常出毛病上传失败,所以如果你不是用的腾讯云的COS作为图床,那可以改用PicGo。