自我接触网络时就有过想法做一个自己的网站，但那会什么都不懂，就连服务器是什么都不知道。全靠百度搜索，翻过各种误导信息广告信息，总算是得到了一些了解，但最终还是因为技术层面了解得太少，兴趣被耗空了，最终放弃了最初的那种热情。 

最初的想法已经过去好多年了。

但就在几个月前，忽然又萌生回了这个想法，做个自己的个人主页吧，放一些个人作品什么的。但是我还是不会html，虽然学习html并不难，但问题是，html对于我或者在看本文的很多人来说，平时可能几乎都用不上，一个不常用的技能却要花比较多的时间和精力去学习，而且还建立在毫无兴趣的基础上，这可能会很难，因此这个想法搁置了半年了也一直没有动静。 

不过近期闲着也是闲着，要不就就试试找找看吧，在这个年代，专业工作软件越来越往简易化智能化的方向发展，说不定还会有更加简单，更低成本的网站建立办法呢。 

于是，现在我算是找到了（一个可能比较可行的办法）。 

不需要写代码，即可制作网页（静态页面），发布到互联网。非常合适小白入手。 

平台和工具：阿里云OSS ，WYSIWYG Web

Builder（网页生成工具） 

前排提示：本图文教程面向新手小白，手把手式指点教程，因此节奏比较慢。 

教程内容分为两部分，制作网页和发布网站。图文为了让小白稍微理解一下网站知识，所以这里先说阿里云OSS如何发布网页，再说如何制作网页，不用担心，内容都很简单。 

--------------------------------------------- 

阿里云是国内知名的云计算平台，如果小白没有听说过这名字，那你总听说过和它同一家的阿里巴巴和淘宝吧。 

而OSS是什么呢？它是对象存储，更加直白一点说就是个云盘，但实际用途并不只是云盘。

对象存储主要用于服务器的数据文件存放，比如你使用某app时注册了账号，上传了一张头像，那这个文件就会被app服务器存放到对象存储里。

OSS只是阿里云对象存储的名称，其他云计算平台的有所不同，比如腾讯云的对象存储叫COS等，名字略有不同但使用大概都差不多。 

开始工作，首先得注册阿里云，百度搜索进入阿里云官网，在阿里云网页右上角点击免费注册，注册很简单使用支付宝直接登录即可。 

（也好像不用注册，直接登录支付宝账号就行了，毕竟是一家的） 

现在我们需要配置好OSS这个东西，再进行网页制作。 

注册/登录完成后，在阿里云首页左侧栏就能找到【对象存储OSS】，（上图里也能看到），点进去，就能看到OSS的产品介绍和购买按钮，这里不需要进入购买，直接选择【管理控制台】 

接下来即对象存储OSS的控制台界面，在左侧栏选择【Bucket 列表】，Bucket即一个对象存储容器，再说直白点就是一个储存空间，你一个账户可以创建很多个不同的OSS。

因为还没有使用Bucket，所以列表肯定是空的，因此下一步点击蓝色按钮【创建Bucket】 

将会弹出一个窗口，主要设置Bucket的名称，地域，读写权限等。

Bucket名称随意；

地域建议选择上海；

读写权限得改为公共读，这样你的网站才能被别人访问。 

上图中，Endpoint即你的OSS访问网址，创建好OSS后，通过这个链接就能访问你这里存放的文件。 

信息都填好后，点确定即可创建。 

创建完成再回到Bucket列表就能看到它了。

接下里， 

点击刚刚新建的Bucket名称，即进入配置页面，如下

这是我现在在用的Bucket，因此右侧存放了一些文件。到这里关于Bucket的配置就好了。 

那么小白看到这里可能心里还有点不太明白，到目前为止，教程所做的东西干什么。 

这里说一下对象存储的一些基础小知识吧 

开头说了，对象存储就像是一个云盘，但不同的是它存放的文件，默认都具备一个绝对路径链接，也叫直链（即直通文件的链接）。通过这个绝对路径，其他人就可以直接在线访问/下载这个文件。网页文件即html格式，那么把它存放在这里面，通过浏览器打开时，浏览器就能识别这个网页并将它呈现在屏幕上，就是这么简单就实现了网站的基础，接下来只需要制作好网页再上传到这里，网站就完成了。 

值得一提的是，我们所访问的网站如百度首页，www。 Baidu。com，它的后缀并没有.html的文件名，那么为什么浏览器访问它也能打开网页呢？那是因为，当浏览器访问这个地址时，如果链接里后缀没有文件名，那么浏览器会默认补上”index.html“，百度首页的页面其实是www。 Baidu。com/ index.html（14。215。177。39 /index. html）。 同样的这个规则也存在于阿里云OSS里，阿里云Bucket的默认首页也是你的OSS链接/index. Html。不止是index，还有404页面也是如此（OSS链接/404. html）。只要把做好的网页文件，命名为index.html，上传到OSS里，就可以直接访问首页了。 

------------------------------------------ 

那么接下来制作网页，你只需要把首页的页面后缀名改成index.html，再上传到OSS根目录中，那通过OSS的网址直接访问就能进入你的网站了。  ------------------------------------------ 

小知识到此完毕，那么接下来来说说如何制作网页吧。 

首先不得不提一下很废话东西，网页本质是什么。  如果在电脑上新建一个记事本的文本文档，如1.txt，

如下图 

写完后记得保存，然后右键点击这个文件，选择浏览器程序打开，或者把这个文件拖到你电脑的任何一个浏览器上。 

通过浏览器打开文档后，我们能看到刚刚所编辑的文字显示到了浏览器上。 

做这个演示的目的就是告诉你，网页实际上就是一个文本文档，本身就不需要代码即可呈现。 

但TXT纯文本文档是不具备任何格式的，甚至连字体大小颜色都没有，这样所制作的网页会非常空乏，完全不能满足于普通使用，因此就有了html代码。  Html代码的本质是一种标记语言，并不属于编程代码。它的作用是把内容文本进行标记，如标记这个文本是标题，字号是多少，颜色是什么；或者标记了这个元素属性是按钮，而不是图形；那个是带链接的文字而不是普通文本。Html代码的写法几乎就是背单词，没有任何逻辑运算，学习起来其实也很简单。 

但即便如此，对于刚入手的人来说，或者对于代码不感兴趣的人来说，编写html仍然是一个难题。我的确想要一个网站，但我并不想花时间精力去学习对自己完全不必要的html技能。 

我所使用过的方法有以下： 

Adobe XD + html导出插件； 

Office Powerpoint 2007（可另存为html）； 

使用建站平台（建站之星，凡科，等）做好网页后，使用浏览器另存为页面； 

下载网页模板（但还是要改代码内容）  Mockplus（可以导出html，软件主要用途类似XD） 

Adobe Muse 

WebPageMaker（功能有点缺乏）） 

但上述办法实际上都存在各自的缺陷 

以及接下来要讲的主角： 

WYSIWYG Web Builder  （末尾提供下载） 

打开软件主界面，能看到这玩意界面就像是office和VS的结合体。

其实这软件使用起来还真是挺简单的，就像画图一样，左侧栏工具箱里把你想要的部件拖上去，拉个大小，就好了。这个软件使得网页设计轻松了很多，但有一点不得不提的是，这软件，bug特别多，但又真找不到能替代它的软件了，不得已这里还是用它来说吧。 

下面来举个栗子，我随便用它做了一个网页，最终成品效果： http://sepilly.oss-cn-shenzhen.aliyuncs.com/ 

美观程度也就一般，因为我没有具体设计，只是为了接下来的教程演示而随便做的一个。以及这个网页没有适配手机版页面，动画元素都是配合电脑宽屏浏览器的。 

当然如果你有网页设计更具体想法的话，可以尝试做的更好一些，这个软件也可以把网页做的很好看。  （注：网站背景图是5K分辨率的） 

那么下面开始吧，接下来的教程，我就以上面发的网站最终效果图为案例进行制作。 

首先，新建一个文件，在顶部菜单栏选择首页→属性。 

在弹出的窗口中设置页面大小为1000*2000（主要设置宽度，高度会跟随内容自动增加。建议最低1000或1200，不要超过1400为好） 

因为我现在的电脑屏幕比较小，所以选择了1000的宽度。 

其他的参数可以不用改，设置好后点击确定。 

然后在左侧工具栏，里找到【图像】，拖动到页面上。作为个人网站的背景图。 

选择好你想要的图片，这样图片就加入好了。 

现在图片是加入了，但排版还不正确。在界面右下角即属性面板，即可设置这张图片的属性信息，修正它的排版问题。 找到【位置】和【大小】，位置即图片左上角的坐标，设置0,0即可；大小只需要把宽度改成上一步设置的网页宽度即可，我设置的是1000。设置好宽度后，高度默认也会自动按比例缩放，现在这张图片的排版就已经正确了。  （PS：如果你的电脑屏幕跟我一样也比较小，记得主界面右下角可以缩放大小） 

接下来，添加一个居中的头像。作为个人网站，直接放自己的照片也行，但如果你不想放照片，放一个自己的虚拟头像也是很合适的。 

在顶部菜单栏，选择【插入】页面，找到图形这个图标，展开下拉找到圆形。 

然后在工作区域把这个圆形画出来，画好后在右下角属性面板，把大小修改为200,*200，这个大小在电脑上浏览是一个比较合适的大小，当然你可以设置为其他值，这没限制。 

设置好后 ，拖动圆形到图片中心，不用担心居中问题，软件自带对齐线辅助，只要拖动要差不多中间位置就会出现对齐线。

上面的步骤就做好后，就是这样子了。 

然后是设置头像了，双击这个圆形，将会弹出具体设置。 

如下图操作，记得导入头像图片前，务必把头像裁剪成正方形。 

然后点击确定即可。 

基本的操作就是像上面这样，接下来稍微加快教程速度。 

添加头像标题，即你的昵称。左侧栏选择【文本】，拖放到合适位置，输入文字。  （PS不知是不是软件问题，这软件不能输入中文，但中文可以复制粘贴进去） 

文字格式的设置，可以像这样 

Arial字体是网页通用字体，要记得网页上字体不能随便设置，别人客户端浏览器上不一定能显示出来，除非把字体集成到网站上。但使用Web标准字体都行，就比如默认的Arial就可以了。

其他的，选择居中，字号差不多就行，可以加粗。 完成后再稍微拖动要居中位置即可。 

文字颜色按实际情况设置，一般白色比较通用，但使用白色也存在一个很明显的问题，看不清。因为我这张图背景是偏亮的，用白色文字的确会产生视觉干扰。如何解决这个问题呢？比如可以把背景图压暗一些，在这里可以加入一个半透明黑色的遮罩层，降低背景图的亮度。 

同样的，在顶部菜单选择插入，图形，绘制一个矩形。 

属性，将矩形的位置设置为0,0，大小设置和背景图一样，使得矩形可以刚好重叠背景图即可。然后右键单击矩形，移动到最底层。 

再右键点击背景图，同样点移动到最底层。这样这个遮罩层的位置就在背景图上面，在其他元素下面了。 

双击矩形，在弹出来的窗口设置如下参数：

再点击确定，这样遮罩层就加入好了。白色的文字也就更加清晰了。 

到这里，WYSIWYG Web Builder的基本使用方法也就这样了。 

通过更加细致的修改，你可以加入更多文本或其他元素。

还有一点，如何制作网页动画？这个软件还有一个强项优势，就是可以很快速的制作出各种不错的动画。比如我上面的例案，刚开始就是一个背景图模糊渐入的动画。使用WYSIWYG Web Builder制作动画也很简单，如下： 

首先，给背景图也做个模糊到清晰的动画。 

双击背景图（记得先移开遮罩层），在弹出的窗口里点击CSS3动画页面。 

在这里，上面部分是改元素自身的动画，下面部分是交互产生的动画，如鼠标到它上面等。 

点击右上角的添加，参数如下图。 

动画选择【filiter-blur-in】，持续时间自定，时间单位是毫秒（ms），1秒＝1000ms，所以我这输入的5000也就是5秒。 

循环计次默认是-1，也就是无限循环，但我们这里动画只需要播放一次即可，所以改为1。 

参数修改好后点击确定即可。 

忘记说了，在WYSIWYG Web Builder里，按F5即可转跳浏览器查看网页效果，现在可以试试，按F5，看看刚才设置的动画效果如何。 

软件里还有很多预设动画都可以试试，如果这些动画都不能 满足你，还可以试试自制动画，操作起来也不难，有兴趣可以自己试试。 

软件的基本使用到这里就差不多了，稍微花点时间就能轻松把自己的主页做好了。 

个人网站其实并不需要很多内容，也并一不一定要做的很正式。希望能在评论区看到各位的个人网站成品模样。 

当你的网页最终成品做好后，即要导出html文件了。点击左上角文件→发布，在弹出的窗口里，发布地址即文件保存的位置。其他设置默认即可，点击确定就好了。

这样网页的制作就完成了，那么就到了最后一步，发布网页。 

回到最开始搞的阿里云OSS，进入Bucket，点击上传文件，可以直接把上图导出的这些文件拖动到上传文件的区域内。

不过要注意，images文件夹不能直接拖入，先上传零散文件。然后在OSS里新建名为images的文件夹，再把里面的文件进行上传。

然后OSS里新建文件夹

名字即刚刚网页导出目录的文件夹名字，images。

然后再上传文件夹里的文件，到这里。 

文件上传完毕后，再试试打开你的OSS链接看看主页如何，什么，你不知道你的OSS地址是什么？  在界面左侧栏，点击概览，右边就能找到链接地址。

这里就可以看到你的OSS地址（网站地址）了。通过这个地址访问就能看到刚刚的网页效果了。 

到这里差不多就结束教程了 

这种网站叫静态网页，制作简单成本低廉，适合非计算机行业的业外人士使用。 

可能会有“大佬”觉得这种不写代码的办法太“笨拙”了，但这也不应该这么想，并不是每一个人都需要学会代码，或者反过来说术业有专攻。

教程到这里就结束了，现在写完回头看感觉好像还是有点不够细致，不知道小白能不能看懂。------------------------------------------------------  ------------------------------------------------------ 

补充一些题外内容。 

可能你会觉得，这个OSS网址是不是太长了，作为网站地址来说，来说会不会过于牵强（记都记不住）？  没错是这样的，太长了，不过这个问题可以解决，但可能就要花钱了，那就是买域名。 

阿里云提供的OSS链接只是给你个能用的链接，如果你想要更加简单短小的一级域名网址，那就得去买域名。关于免费域名这些我不太了解，即便是有好像也是很偏僻的（我见过的免费域名大多是全数字的那种，那有什么网站的域名是全数字的呢？当然xx美铝澳门真人……那种网站就是） 

买域名的话，com域名就不要想了，这个价格不合适个人网站，几百上千一年，以及比较火的cn，net这些常用域名都比较贵。 

个人网址其实有没有域名都没啥问题，大不了把OSS链接做成二维码，或者网络生成短链接，也可以正常使用。 

但如果真的需要域名，可以去看看xyz域名，腾讯云里xyz域名首年8元，或者也可以去阿里云域名拍卖页面里买一个。  （前者全新的域名是可以自定义的，后者拍卖的域名是已经固定的） 

在阿里云域名交易处，你甚至可以花10块钱捡漏买一个10年有效期的域名

购买域名后，到阿里云OSS里绑定即可使用。具体使用方式可以在阿里云帮助中心搜索“域名绑定”即可。 

还有一个挺有意思的信息，OSS访问热点信息，在这里你可以看到访问最多次数的文件，以及访问地区信息，网络运营商比例，IP访问次数排行等。 

------------------ 

关于WYSIWYG Web Builder

下载地址：

备用地址：

这个软件bug很多的，那具体有多少呢？我随便用了半个小时，遇到的bug数量已经数不清了，在我看来，这软件开发的时候，大概是全公司就上下没有一个人Debug运行过，稍微点用一分钟体验一下，也能发现软件哪都是bug……

但在这个领域我的确没有找到替代品，可能真就只有这玩意稍微合适一些了。这软件也有个很不错的地方，就是动画制作很方便，效果都不错，甚至还能制作关键帧动画和缓入缓出等非线性动画，整体来说，也不是不能用。 

腾讯云COS和阿里云OSS的资费区别，腾讯云COS可能会更低一些，本图文方案可能更合适用腾讯云。据网友帖子了解，COS的收费规则是空间存储和上下载流量>50G/月时是完全免费的，而阿里云OSS并不是，只要有存量就算计费，但也高不出多少资费，我自己的OSS，存量30MB不到，月流量200~600MB，这三年期间消费也不到1毛，因此用阿里云也没什么问题的。

如果你觉得本帖对你有用，可以点赞或关注一下哦。最近还会有一篇关于服务器/网络/游戏的中篇图文。（两千字短篇，五千字中篇，八千字长篇）。