四款软件和coding的体验日记

从想拥有自己的个人网站的想法已经有了大概几个月了。

年前就开始折腾了摆弄了一些无代码建站的工具。从最开始的Gridea，再到publii，再到Brizy，国际上最知名的wordpress建站工具我其实没有去用，至于为什么，可能是没有缘分吧hhh。

我最开始的学习路径其实是迷迷糊糊的，当时也分不清什么语言，什么标记语言。C语言，php，phtyon，Js这些东西我对他们的认识仅存在网上关于程序猿的段子当中。

来，这就正式开始，这篇内容可能稍微有些硬核且枯燥。（对于不懂代码的设计师来说）

先来说一下自己建站所需要的条件。

需要html页面文件，这是网页需要展示的内容。

需要一个域名，

需要一个服务器/虚拟主机二选一。（具体有什么区别我也不知道）

第一款——Gridea

在我鼓捣Gridea的时候，我对Github有了非常初步的认识。Gridea的其中一个实现的原理是可以通过GitHub托管你的网页文件的。Gridea里面也有很多的Blog模版。涉及到代码的内容只有一丢丢链接Github时候的操作。

下面是我使用这短短的一段时间的感受

我第一次了解了网页文件可以托管在Github上面，用自己买一个域名然后解析的时候指向GitHub，就完成了自己第一个简易Blog网站。

Gridea算是我对代码的启蒙软件，虽然软件当中涉及很少的代码信息。这也是让我的心态不是很抵触的去了解了一些大的框架原理 ，Gridea的作者真的很棒，设计细节也做的很棒。

Gridea当然支持程序猿最喜爱的Markdown编辑模式，很纯净，可以专心沉寂在内容上面。

我Gridea里面写Blog排版是一些比较大的问题，不太好操作，可能是因为我使用markdown没有那么熟练吧。

这个网站建立完成，我只买了一个域名，html文件是Gridea软件自动生成的，服务器则是用（白嫖）Github的。

可自定义的内容还算比较丰富，颜色图标显示文章数。作为博客网站来说是足够了。

下面是Girdea的软件界面部分截图。

第二款——Publii

第二款我体验的无代码建站软件是publii。

我是从微信群里看到有人在使用这款软件，然后就抱着好奇心摆弄了一下。这是是一款国外的软件，拥有独立的客户端。

先说体验，我个人觉得不太好，极有可能是因为我没有用太明白。

Publii相比Gridea来说前者是国外产品，自然界面语言是英文的，相比Gridea上手难度肯定会高一些。

Publii的的概念跟Gridea是有一些相似的，从这两个软件的界面截图就可以看出来，都是以post/发布文章来作为构成整个静态页面的主要内容。

支持markdown还有block编辑器。

publii的思路就是，直接生成html文件，放置在任何你想放的地方。客户端就是生成本地html的一个编辑器，只是形式区别与直接coding。

编辑体验在视觉感官上比Gridea我觉得差很多，以及整个客户端的使用体验我经常迷路。

下面是Publii的软件界面部分截图。

第三款——Brizy

第三款是Brizy，也是0代码建站。这是一款在线编辑软件。

先说体验，我个人觉得非常好。

整体使用的思路是由Block来组成整个静态页面，跟html的div的概念很类似。（这也是我最近在自己写html的时候才有的体会）

内置也有很多模版类型，可以根据里面的模版来进行修改。

Brizy在我看来相比前两个是一款真正的无代码自定义的建站工具。

Block可以任意改动。在Block里面也可以任意添加内容。里面的一些修改概念也跟css是一致的，比如margin，pading，hover等内容。

下面是Brizy的软件界面部分截图。

这款软件是以设计师的思路来建立整个页面。整体的体验很流畅。

Brizy当然不只这些，提供一个免费的子域名。当然也可以自定义自己的域名。甚至还可以download生成的html文件，直接上传到自己的服务器/虚拟主机（前提是你有的情况下）

这个网站建立完成，域名，服务区，html文件，你统统不用管。域名可以使用Brizy提供的免费子域名，html文件Brizy自动生成。服务器也是托管在Brizy上面的。

下面是Brizy的软件界面部分截图。

第四款——我的手

第四款，是我的手，不是软件名字，真的是我的手，hhhh。

直到前几天觉得自由度还是不够高，为什么不尝试着自己写一个呢？然后我就开坑了。自己亲手写的自由度也是最高的，毋庸置疑，当然相比以上三个软件也是最难的。

说干就干，我在B站了看了一位up主讲的html和css的基本知识，讲的真的很棒。结果一看就会，自己上手写就废。

自己写html网页一个思路就是首先需要梳理清楚这个页面的整个结构，由大到小。从外到里。然后我就开始边写边复习，边查找解决问题的办法。

去参考其他网站的一些我想要的效果是怎么实现的。我在最开始的时候，是做了一张设计稿的，还原度就很惨了hhh。

实践过后才能真正的理解那些你看过的知识点应该要具体怎么应用。具体要怎么写，我就不过叨叨了，网上很多教程都很棒。说一下感受，我觉得这次coding之后给我带来的是对于设计上的更深的理解。不是之前只一味的去追求视觉效果，而是页面的合理性以及布局的更多思考。

下面是一些我的片段代码截图，也算纪念一下吧，毕竟是第一次coding。

下面是代码部分截图。

👇有兴趣可以复制到电脑浏览器

http://lyhdesign.space/