DIY教程:建立无代码网站的方法

无需加好友免费技术支持

正如我之前提到的，我最近沉迷于用无代码的方式建立个人网站，并建立了它Flag，一定会有更一期的入门版。DIY教程。拖了很久，今天终于带着56张图交差了。……

建立无代码网站的方法有很多。我的朋友用它Squarespace，效果相当出彩，我因为有博客的缘故，用的是WordPress。事实上，我认为市场上应该有很多类似的工具，任何选择都应该有类似的效果。

刚开始的时候，因为不熟悉各种模块，用无代码版建网站的时候很憋屈。所以我转头用了。WordPress的.org版本，裤子翻腾了几天，幸运的是效果很好。后来，我不愿意建立一个比其他人更难的网站，所以我又研究了WordPress的.com版。

最近又折腾了很久，终于对无代码网站的建设有了得心应手的感觉。这是这个版本的教程。

一、建设个人主页

WordPress有很多语言版本。刷新几次后，我莫名其妙地跳回了英文版本。然而，与太多语言的背景相比，我大致相同，主要是语言、一些社交软件和支付方式的差异。以下截图来自英文版本。

我从注册新电子邮件开始做教程，但后来我想，没有人会没有电子邮件。这一步只是省略了。直接在搜索引擎中搜索WordPress然后进入Wordpress.com以下界面将出现在网站建设指南中。我选择免费版本。

接下来，输入您的任何邮箱地址，起草用户名并设置密码。

建立WordPress账户结束后，跳转到域名界面。这个区域可以使用我已经拥有的域名或购买一个新的域名，但为了免费进行到底，我不打算在域名上花钱，所以我想到了一个名字。如果你将来想要一个好的域名，你也可以随时添加或更改它。

作为一个废柴，我想到了魔兽世界各主角的名字，最后选择了风元素领主奥拉基尔，所以我用了它windlord作为网站名称的关键字。然后在各种示意例子中，我选择了一个免费的网站。此时，选定的网站可以特别保存，然后经常使用，这是他们自己的网站的网站。

选择域名，自然开始正式的车站建设之旅。网页将跳转并自动进入网站建设的背景。Name your site这个紫色按钮是进入下一步的关键入口，接下来的步骤，就像我用红线框在右边一样。

正如我之前所说，我把我的新网站命名为Windlord，意思是控风者The rider of the wind element。

给网站命名后，就到了最重要的一步:编辑主页。也进入紫色按钮。

编辑主页时，会出现一些解释页面，如下图所示有必要看一看。如果你不看，它不会影响我以后解释的步骤。

我在主页上编辑页面，随意选择一种风格，事实上，你也可以选择空白页面或其他风格。但我一直认为，建立一个网站从最简单的地方开始，结果越简单，成就感就越快，就会有更多的动力去扔。

除了可以编辑主题图片外，下拉后的网页是博客的最新更新示例。事实上，就一个网站而言，这些内容太少了，就像博客的主页一样。WordPress从博客开始，有这个问题是可以理解的。

我随便看了一下，以为至少要加一些相册或者合辑，就从页面左上角 添加内容。这个按钮进去后有很多内容可供选择，其中Blocks”是一些固定模块，比如段落，比如题目，这个操作跟做PPT有异曲同工之妙。但我选择了右边的Patterns，里面有很多已经搭配好的内容，我选了一张带四张封面图的相册。

相册成功添加后，显示在整个主页的最后，但我想移动到前面的位置。点击相册的中间位置后，前两个相册的左上角将出现一个编辑框。小框中的第三个位置是向上和向下的箭头。始终点击向上的箭头。

前两张相册移到主页图片的底部，然后我移动了后两张相册。因此，主页变成了主题图片（跳转）、四张相册（可更改封面但不跳转）、三个最新博客和主题Content”模块。

到了这个时候，如果想要加相册或者图片显示，或者任意想要的模块（比如音乐或者视频），就都可以通过左上角的“ 继续，但作为一个例子，我打算直接发布这个页面。一般来说，官方不建议在网站还没有完成的时候发布，但我认为你可以在发布后问你的亲戚和朋友，让他们给出一些建议，所以发布更方便。按钮在右上角。

点击发布按钮后，WordPress看起来还是想再努力一点，于是又出现了诱拐买域名或者定制会员的行为。但我还是坚定地选择了免费版。

到目前为止，一个简单的网站已经发布成功，如果只是玩，你可以开始写一点内容，有自己的网站原型。

二、网页跳转

真正的网站必须有更多的功能和专栏，所以在发布后，网站需要开始想象你想要多少专栏。在这个例子中，我计划将网站分为主页、工作、生活和这四个专栏。因此，在主页的基础上，我还需要建立一个工作页面、一个生活页面和一个关于页面。

在构建新页面时，从屏幕左上角选择W”字样的WordPress的logo。然后点击左下角Add new page添加新页面。

新页面计划讲述与工作相关的内容。毕竟，它是一个个人网站，所以展示你所做的项目是一个更好的方法。Featured在选择中，这个区域有大家喜欢用的模板。

我选择了默认的Portfolio，这是一个页首是幻灯片页面内有多个项目可以编辑的形式。

把“Portfolio”改成了“Work然后点击右上角的Publish”发布。

页面发布后，继续新建页面。

新的页面计划讲述了生活的内容，所以选择了Gallery里面的模板。

改名为“Life并发布。

同样，发布后继续创建新页面。

新建的页面是个人资料页面，所以选择了About模板。

更改名称并发布。此时，共有三个新页面。作为一个例子就足够了。如果有必要，你可以建造更多。我很好奇是否有一个可爱的小傻瓜闲着测试成千上万个新网页需要多长时间。

三页建成后，选择Dashboard回到个人后台。

后台管理的左侧有很多功能，可以自由探索，但这次，我们主要来编辑菜单。菜单编辑按钮位于页面的右下角，主要目的是显示新的页面。

进入菜单编辑页面。

选择自动呈现的Primary”。

在Primary在这份菜单中，选择Add Items”。

右侧会出现 Pages，里面是主题本身带来的，所有刚刚建成的页面。添加三个新建的，它们会出现在左边的菜单栏中。

添加页面后，选择Reorder上下箭头是上下顺序，左右箭头是子集母集包含关系。

排序后，可以看到菜单栏已经显示在主页上方。网站建设又结束了。

丰富个人网站

退出菜单编辑的地方很麻烦。我还没有找到合适的返回键。私下里，我认为这种互动有点麻烦。我通常删除顶部的地址栏Wordpress.com，回到你的背景。继续选择主页编辑。

这时候可以先用预览看网站，也可以用手机打开个人网站，看看有什么疏漏。

例如，在这个示例网站中，主页几乎与专栏相同。主题图片可以更改或不更改。内容应自行复制，更换内部链接，并随意导入任何地方。

但往下看，你会发现新建的四张相册靠近主题图片，非常丑陋；四张相册只能改变封面图片和文本，没有地方可以点击。这是两个需要处理的问题。

处理第一个两块紧贴的问题很简单，要么尝试手动移动，要么添加一个Heading”。

我选择了最简单的。点击左上角的 ”号，在Blocks里选择“Heading而且没有输入文本。结果如下图所示，Heading主题图片与相册自动分离。

处理第二个相册不能跳转的问题有很多解决方案。其中，这些相册可以跳到指定的位置或页面，甚至是以前新建的三个页面的指定位置。但为了方便，我计划建立一个新的页面。

我选择了这个新页面Gallery里面的模板，图片会呈现平铺形式，左边会有一些相册的介绍。

将页名更改为相册名Brice点击发布。

发布页面确认时，复制页面右侧的链接。

点击左上角logo，回到后台管理页面。

选择右下角的编辑主页按钮。

选定“Brice在小编辑框中选择右三个链接选项。事实上，年份也可以自动分类，但这里没有需求。

将复制好的链接，输入到链接框体中，按回车键确认。

此时，“Brice颜色自动变化，下面有横线，新键的网页链接已经成功添加。点击右上角Update之后，用个人网站进入自己的网站，点击Brice可以跳转(编辑页面和预览页面基本不能跳转)。

事实上，这个区域也可以设置为图片中的文本模式。在编辑框中，可以实现带a的图标。许多人也喜欢将图片（无论是否有文本）设置为跳转链接。此操作只需点击图片，并在链接框中添加新复制的页面链接。

现在，相册的名称和封面都可以通过点击跳转到另一个页面。其余三本相册可以以同样的方式添加新页面和链接。其他任何单词也可以跳转。

更新网站后，登录个人网站（非编辑页面），获得以下网站页面。其余的是将网站的所有图片和文案更新为自己的内容。每天做一点，你就能得到一个伟大的网站。

后记

事实上，无代码网站可以实现许多功能，包括网页联系、订单、费用支付等。做更多的功能并不像预期的那么复杂，基本上是添加模块、页面、链接等。

个人网站或个人博客需要经常花时间来处理。那些需要制作个人作品集的人是值得拥有的。我也希望在这里看到朋友们。我们可以讨论更多的无代码网站建设，更多的联系和交流。