此前曾提过，我近期沉迷于用无代码的方式建设个人网站，还立下Flag，说一定会更一期入门版的DIY教程。拖了许久，我今天终于带着56张图片来交差了……
建设无代码网站的方式有许多，我好友用的是Squarespace，效果相当出彩，我因为有博客的缘故，用的是WordPress。其实我觉得市面上应该有不少类似的工具，随便选一家应该都有相似的效果。
刚开始时，我因为不熟悉各种模块，用无代码版建网站时很憋屈。因此，我转头用上了WordPress的.org版，吭哧吭哧地折腾了几天，幸而效果还不错。后来不甘心于建个网站都比别人艰难，于是又研究回了WordPress的.com版。
近日又折腾了许久，总算对无代码版网站的建设有了得心应手的感觉。本次更的就是这个版本的教程。
一、建设个人主页
WordPress有多个语言版本，我刚开始时跳转的中文版，刷新几次后莫名就跳回了英文版，但我对比过多语言的后台，其实大致都一样，主要是语言以及一些社交软件及支付方式方面的区别。以下截图来自于英文版。
我是从注册新邮箱开始做的教程，不过后来一想，也不会有什么人没有电子邮箱了，这一步干脆略过。直接在搜索引擎搜“WordPress”，随后进入到的网站建设指引，接着会出现以下界面，我选的是免费版。
接下来，输入自己的任意一个邮箱地址，拟一个用户名，以及设定密码。
建立WordPress账号以后，跳转到的是域名界面。这个区域可以使用自己已经拥有的域名，也可以买一个全新的域名，不过为了将免费进行到底，我不打算在域名上花钱，就随便想了个名字。以后要是想要有个好域名，也可以随时添加或更改。
作为一个起名废柴，我把魔兽世界里的各个主角的名字都想了一遍，最后选定了风元素领主奥拉基尔，于是用了windlord作为站点名称的关键字。随后在各种示意例子中，我选择了免费的网址。这时候，这个选定的网址可以专门存下来，之后经常会用到，并且在很长的时间里，这便是自己网站的网址了。
选定了域名，自然就开始了正式的建站之旅。网页将跳转并自动进入到建设网站的后台。其中“Nameyoursite”这个紫红色按键就是进入下一步的关键入口，随后的步骤，就如右边被我用红色线条框起来的差不多。
就如先前所说的那样，我将我的新网站，起名为Windlord，意即“驭风者”，还随手写了句标语：Theriderofthewindelement。
给网站起名后，就到了最重要的一步：编辑主页。同样是在紫红色按钮处进入。
编辑主页的时候，会如下图一般，出现一些讲解页面，看一看还是很有必要的。不看的话，其实也不影响我之后讲解的步骤。
我在主页编辑页面，随意选了一个风格，其实也可以选空白页或者其他风格。但我一直认为，建网站从最容易的地方开始，出成果越简单，成就感就来得越快，也就有更多的动力去折腾。
除了主题图片可以进行编辑以外，网页下拉后是博客的最新更新示例。事实上，就一个网站而言，这些内容显得太少了，就像个博客的主页一般。不过WordPress是靠博客起家的，有这个毛病也无可厚非。
我随意看了下，认为最起码还是要加些相册或者合辑，于是我从页面左上角的“+”号处，添加内容。这个按键进去后有很多内容可以选择，其中，“Blocks”是一些固定模块，比如段落，比如题目，这个操作跟做PPT有异曲同工之妙。但我选择的是右边的“Patterns”，里面有很多已经搭配好的内容，我选了一个带四幅封面图的相册。
至此，一个简易的网站算是正式发布成功了，如果单纯就是玩玩，可以开始往里面写一点内容，算是有了个自己的网站雏形了。
二、网页跳转
真正的网站肯定还是有着更多的功能跟栏目的，所以在发布以后，网站需要开始设想要多少个栏目。我在这个示例里，计划将网站分成主页、工作、生活、关于这四个栏目。所以在“主页”的基础上，我还需要建设一个“工作“页面、一个“生活”页面、一个“关于”页面。
新的页面打算讲诉“工作”相关的内容，毕竟是个人网站，所以展示做过的项目是比较好的做法。先在“Featured”里选择，这个区域有大家比较喜欢用的模板。
我选择了默认里的Portfolio，这是一个页首是幻灯片页面内有多个项目可以编辑的形式。
发布完页面后，继续新建页面。
新建的页面计划讲诉生活方面的内容，因而选择了“Gallery”里面的模板。
改名为“Life”，并发布。
同样的，发布后继续新建页面。
本次新建的页面是个人资料页，所以选择了“About”里的模版。
改名并发布。此时一共新建了三个页面。作为示例是已经够了，如果有需要，还可以建设更多。我很好奇，有没有可爱的“小傻子”闲着测试一下新增成千上万个网页要花多久时间。
三个页面建设完毕后，选择“Dashboard”,回到个人后台。
后台管理的左侧有非常多的功能，有空可以探索下，但此次，我们主要是来编辑菜单的。菜单编辑的按钮在页面右下角，主要目的是把新建的网页显示出来。
进入菜单编辑页面。
选择自动呈现的“Primary”。
在Primary这个菜单里，选择“AddItems”。
右侧会出现Pages，里面就是主题自己带的，以及刚刚建好的所有页面。把新建的三个添加即可，它们会出现在左侧菜单栏里。
添加页面完毕后，选择“Reorder”进行排序，上下箭头是上下顺序，左右箭头是子集母集包含关系。
排序完毕后可以看到，菜单栏已经显示在主页的上方。网站建设又告一段落。
三、丰富个人网站
从菜单编辑的地方退出来是比较麻烦的，我一直没找到比较合适的返回键。私以为，这个交互有点麻烦。我通常是把顶上的地址栏删得只剩下，就会回到自己的后台。继续选择主页编辑。
这时候可以先用预览来看一下网站，也可以用手机打开自己的个人网站网址，看看有什么疏漏。
处理第一个“两个区块紧贴”的问题非常简单，要么试着手动挪，要么添加一个“Heading”。
处理第二个“相册不可跳转”的问题有许多解决方案。其中，这些相册根据用途的不同，可以跳到各指定位置或各种页面，甚至是之前新建好的三个页面的指定位置。但为了方便举例，我计划新建一个页面。
这个新页面我选择了Gallery里面的一个模板，图片将呈现平铺形式，并且左侧会有一些关于这个相册的简介。
发布页面确认时，在右侧把该页面的链接复制下来。
选择右下角的编辑主页按钮。
选定“Brice”字样，在小编辑框中选择右三的链接选项。其实年份也可以自动分类，只是这里其实没这个需求。
将复制好的链接，输入到链接框体中，按回车键确认。
更新网站后，登陆个人网站（非编辑页面），即可得到如下这般的网站页面，剩下的，就是把这个网站的图片及文案，全部更新成自己的内容即可。每天做一点，就可以得到一个很棒的网站。
后记
事实上，无代码建设的网站可以实现的功能还很多，包括网页联系、下订单、费用支付等。做更多的功能也并没有想象中的那么复杂，基本上都是添加模块、页面，链接等便可做到。
个人网站或者个人博客，需要经常花费时间去打理，有做个人作品集需要的人很值得拥有。也非常希望能看到这里的朋友，可以一起来探讨更多的无代码网站建设，多多联系，多多交流。
