网页制作与网站建设实战（网页制作与网站建设如何开始）

　　开篇

　　为什么是个人网站?

　　一个是自己平时需要用，另一方面之前写过，也有一些经验和思考，如果写其它类型的网站，自己又要兼顾学习和使用新技术，可能会比较累。

　　所以就写个人网站吧，如果这个项目写完了，后面再考虑写个电商网站或者自己一些创意idea的flutter APP。

　　会用到哪些资源?

　　会用到一台阿里云的服务器，大概1核CPU, 1G, 1M的最小配置款。

　　域名也是在阿里云上万网申请和备案的。因为备案比较麻烦，所以我打算沿用自己之前的域名yasinshaw.com。因为开发过程还要继续使用自己的个人网站，所以www, admin，file这些二级域名不会动。新的应用在开发阶段会使用newPortal、newAdmin等带有new的二级域名。等开发完成后再切换过去。

　　存储会用OSS，因为需要CDN，特别是图片。之前用的七牛云的，感觉还不错，现在也打算继续沿用。

　　SSL证书，用阿里云和七牛的免费证书。缺点是必须一个二级域名就要申请一个证书，而且要每年更新一次。但优点是免费的，还是挺香的。

　　所以严格来说并不是真正的“从0到1”，云平台的一些资源还是会用现成的。这部分也不会单独写文章介绍，毕竟跟技术关系不大，去云平台花钱买资源，然后简单设置一下就行了。

　　会用到哪些技术?

　　前端

　　前端的话，会用「Vue3」了。但我也很久没有关注前端了，Vue3的一些新特性我也不是特别了解，只能一边做一边看看了。TypeScript其实比较纠结要不要用，因为目前感觉ES已经能够满足自己项目的需求了，且目前没有学习过TS，不知道有没有足够的时间去学习TS。不过TS是趋势，看情况是否使用吧。

　　UI库

　　UI库，之前用的是vuetify，感觉也挺不错的。但这次想尝试一下「拟物风格」，不知道vuetify支不支持。如果不支持的话，到时候再去搜一下有没有合适的UI库。

　　后端

　　后端主要用「Kotlin」，因为想学习一下这门语言，听说挺香的。结合最新版的SpringBoot。应该会用到DDD结合整洁架构，之前有写过一些文章，趁这次机会实践一下。不打算用SpringCloud，因为机器资源太少，项目也比较简单，目前也没有深入学习的打算，用不太上。

　　DB

　　DB还是用「MySQL」了。这块暂时没有特别的需求，也没有时间和精力去学习其它DB。等以后再说吧。

　　搜索

　　搜索还是用ElasticSearch，单机部署，加个中文分词插件。这块之前做过，有经验。

　　缓存

　　缓存目前的个人网站是用的Redis，但是目前来看其实用不上。就单机的情况，其实用「内存缓存」会更好一点。

　　容器

　　Docker会用。不过之前用Docker用得比较简单，是用命令手动去启动的一些服务或中间件。这次打算用上Dockerfile，结合CI来更好地做「DevOps」。不用用到K8s和ServiceMesh，因为没有必要……

　　项目会写多久?

　　这个真不太好估算。大概期望能够在年前完成目前已有的基本功能吧。尽量保证每天都写一点，但是如果要同时更新系列文章的话，可能会有点忙不过来，但肯定是会经常更新代码的。

　　这篇文章主要描述我要做的这个网站的功能，以及我对这些功能的拆分，然后使用事件风暴的方式，归纳出主要的领域模型和领域事件。

　　需求描述

　　整个网站应该分为管理端和门户端。管理端用于我自己在后台管理整个网站，包括发布文章、管理评论等等。管理端需要登录，但不需要做太复杂的权限管理，因为只有我一个用户。

　　门户端是给其它人用的，也就是大家现在看到的我的个人网站的样子，可以在上面看到我发布的文章，也可以对文章进行评论，对网站留言等等。

　　管理端

　　我用思维导图归纳了管理端的主要功能：

　　主要核心的还是文章。但我把标签和素材单独拿了出来，是想到以后网站可能会继续开发新的功能，比如类似于朋友圈、相册、电商等功能。那这样信息分类、文件素材等等能力其实是可以通用的。

　　除此之外，还对网站版本、公告、邮件订阅等等小功能也有一定的支持。

　　门户端

　　门户端会相对简单一些，因为很多东西都是只读的，少了很多操作。门户端全程是不需要登录的，包括留言操作。所以这里可能要注意一下安全性的问题，包括防刷和幂等。

　　在最初设计的时候，我认为有些文章可能是需要密码的，有些页面也可能是需要密码的，比如我们可以把求职简历放在上面。

　　事件风暴

　　我使用了事件风暴对整个需求进行了分析，试图寻找可以用于实现这些需求的领域模型、领域行为和领域事件。

　　我用三种颜色的便利贴来标识它们：

　　最终，我得到了下面9张图：

　　其中，页面配置是想把网站上的一些东西做成配置化的，包括一些页面的背景图和文案等，现在也实现了这个功能：

　　按道理说，标签、素材、密码其实也可以放在文章里面，成为文章这个聚合的一部分。但是这里单独拿了出来，是考虑到以后可能会有其它场景也会用到标签、素材、密码。

　　理论上来说，它们也可以成为单独的领域模型，对外提供服务。事实上很多公司也是这么做的，所谓业务中台，其实就是业务能力的复用。比如标签这个东西，它其实是一个信息管理的能力，既可以用在文章上，也可以用在商品上，还可以用在客户上。

　　但后来我想了一下，这样做是方便扩展了，但对于现在来说可能会加大开发成本。尤其是在找“标签”和“密码”的时候，我是非常纠结的。

　　于是，我砍掉了一些不那么核心的领域模型，更聚焦在核心的领域模型上面。最终剩下这么6个领域模型：

　　那标签和素材怎么办?

　　还是简单粗暴的处理方式，放在文章内部。因为其实现在也主要是文章会用到这两个东西，完全可以把它们作为文章这个领域模型的一个值对象。其实我现在线上这个版本也是这么做的：

　　当然了，从实现上来讲，可能底层的存储会和现在的实现有些不一样，因为之前就是在信息分类这块没做好，所以产生了“文集”、“主题”、“标签”等等一堆概念。但其实只需要标签就可以了，基于标签来做分类、搜索、推荐的功能。所以标签可能在DB层面是一个单独的表，但如何实现不是在这个阶段需要思考的，现在我们只需要关心领域模型就行了。

　　密码这个东西，现在看起来不是非要不可，而且想设计一个对多种资源加密的密码管理，开发成本较大，尤其是前端。所以我直接去掉了密码这个领域模型，也砍掉了与之相关的需求。以后如果有文章加密的需求，也可以作为文章的一个值对象来处理。

　　所谓DDD，最后一个D就是Design，没有绝对正确和标准的领域模型，只有合适的领域模型。设计总会有所权衡和取舍。在设计过程中，也会发现有些需求可能不合理或者实现成本比较大，可以做适当的调整。

　　没有再细分子域和限界上下文。因为目前来看，个人网站的功能还是比较简单的，没有必要再细分。真要细分的话，我觉得可以分为“文章域”、“网站管理域”和评论域，其中文章、订阅等属于文章域的，页面配置、公告、版本介绍等属于网站管理域。评论单独拿了出来，因为它是一个通用的子域，它既可以用于文章评论，也可以用于网站留言板。

　　为什么评论不拆开，一个是“文章评论”，一个是“留言板”?因为我认为两者其实是一个东西，都是用户在网站上留下一段话，也可以回复别人。只是评论的主体不同而已，一个是文章，一个是网站本身。所以我认为它是一个独立的领域模型。

　　整个网站的需求拆分、模型设计都已经搞好了，下一步需要做的就是开始搭建开发环境啦，敬请期待!

　　这篇文章主要介绍基于云服务器的生产环境的搭建，以及CI/CD等其它工具的搭建。

　　云服务器

　　要想做一个网站，首先你得有一台服务器。感谢我们来到了云时代，现在在云平台上搭建一台云服务器非常方便，不用自己去折腾硬件搭建一台服务器了。

　　我自己是用的阿里云。用什么平台取决于你自己喜好，以及去哪能薅到羊毛。AWS和GCP好像都是用信用卡可以薅，而国内的云平台一般是可以用学生身份比较便宜地薅到。偶尔也会搞双十一之类的活动，价格也比较便宜，一年就一两百块左右。

　　买云服务器要注意的主机所在的机房。国外或者香港地区所在的机房的服务器一般会贵一点，但是可以顺便搭个梯子自己用。国内的机房，尽量选自己的目标用户更近的机房，这样网络访问延迟能够稍微低一些。

　　个人网站的话，一般最低配置就行了。我的个人网站现在就是用的阿里云的1核2G，1M带宽的最低配版服务器。但低配的话，需要在性能上和开发过程中多下一些功夫。因为带宽低，前端资源需要尽量放在CDN加速;CPU和内存低，尽量使用本地机器来做CI/CD的runner机器。这些小技巧会在后面的文章慢慢介绍。

　　域名

　　云服务器给我们的是一个固定的公网IP。有了公网IP，别人就能够访问到我们的服务了。但是ip不太容易记，而且有些场景是需要域名的(比如做微信公众号的时候、使用HTTPS等)，所以申请一个域名还是很有必要的。

　　域名申请比较简单，在很多云平台上也可以直接购买域名和配置ip到域名的映射关系。域名后缀无所谓，看自己喜欢。.com是用得最广泛、最多的。国内也有一些.com.cn，自己的个人网站的话，也可以使用.me、.site等。一年大概几十块钱，首次购买一般有优惠。

　　但域名备案比较耗时，如果是国内申请的域名或者用了国内的服务器，就需要备案(在阿里云上买域名可以在上面直接上传资料备案)，建议尽早申请。

　　安装docker

　　操作系统只要是Linux就行，具体哪个发行版影响不大。

　　服务器搞定后，先把自己本地ssh生成的公钥放到服务器的authorized_keys里面，方便以后可以不需要密码直接登录服务器。

　　然后下载安装docker，推荐自带的yum/apt安装就行了，安装docker完成后，可以用启动一个nginx实例，在本地用浏览器，看能不能访问到。这里如果有域名的就可以配置一下域名了，看是否能正常解析。

　　sudo apt-get install docker

　　可以启动一个portainer，它是一个管理docker的web界面工具，轻量级。特别适合对docker命令不太熟悉或者不喜欢使用docker命令的同学。使用下面这个命令可以轻松创建一个portainer容器：

　　docker run -d -p 9000:9000 \

　　--privileged --restart=always \

　　-v /var/run/docker.sock:/var/run/docker.sock \

　　--name portainer portainer/portainer

　　安装gogs

　　gogs是一个代码托管平台，类似于Github、Gitlab等。但是Github网速较慢，而Gitlab比较耗资源，如果服务器资源很少的话，就不适合了。

　　gogs非常轻量，而且可以使用docker快速部署。

　　启动后，在浏览器访问服务器的10080端口，就可以打开gogs了，第一次打开需要进行初始化设置，这里注意端口和url的设置：

　　安装完成后，去个人信息里面配置一下ssh的公钥，然后创建自己的项目，这个就不详细介绍了。

　　安装drone

　　drone是一个轻量级的CI/CD工具。使用docker可以快速部署一个drone服务，并自动与gogs连接：

　　它也可以支持Github、Gitlab、Gitea、Bitbucket等平台，需要在创建时传入不同的环境变量。具体用法可以参考官方文档：https://docs.drone.io/

　　用浏览器打开服务器的20080端口，会出现一个登录界面。需要使用gogs的管理员账号密码登录。

　　这里需要加上DRONE_USER_CREATE配置，username的值为你的管理员用户名，这样才能开启项目的Trusted Mode，才能在构建项目过程中挂主机的volume。具体参考：

　　https://docs.drone.io/quickstart/cli/#trusted-mode

　　登录以后，会自动同步gogs的项目，并且会在gogs那边自动创建一个webhook。

　　在我们的项目根目录创建一个.drone.yml文件，即可配置drone的CI/CD流程，然后提交代码就可以自动触发CI/CD了，是不是非常简单?

　　但是这个时候我们只有drone server，没有drone runner，所以触发后没有runner去执行任务，会一直卡在那。drone支持多种类型的runner，包括docker、ssh等。我们可以创建一个docker runner用来执行build等任务，创建一个ssh runner用来远程登录到我们的服务器重启部署服务。

　　我们可以在服务器或者我们本机创建runner。个人更推荐用本机的，因为服务器比较垃圾，本机资源更多。

　　这里需要设置一下DOCKER_API_VERSION，即使用的docker API的版本。默认是使用的drone支持的最高的版本，但如果机器的docker版本更低，drone会提示，docker api不能高于xx版本，这里启动runner的时候设置一下DOCKER_API_VERSION就好。

　　配置drone

　　具体的配置后面可以在开源的项目代码中找到。这里可以先给大家看一下之前配置的一个前端项目。大概的流程就是在本地build，build完成后打包镜像，然后上传到阿里云镜像仓库。然后上服务器拉取最新的镜像，再重启docker。仅供参考：

　　这里的secret需要去drone的界面上配置。secret的具体用法可以参考官方文档：

　　https://docs.drone.io/secret/

　　至此，一个基于docker的简单的CI/CD流程就搭建完成，下一步就可以创建项目开始开发啦~

　　如何搭建个人网站，网站建设入门教程?

　　搭建个人网站是一个很有成就感的事情。以下是个人网站建设入门教程：

　　1. 选择合适的域名和主机：域名是网站的标识符，主机是网站存放的地方。可以选择一些常见的域名注册商和主机服务提供商，例如GoDaddy、Bluehost、HostGator等。

　　2. 选择网站平台：网站平台是指搭建个人网站的构建工具。目前比较流行的网站平台有WordPress、Wix、Squarespace等。其中，WordPress是市场占有率最高的网站平台。

　　3. 安装并配置网站平台：选择一个好的网站平台后，需要在主机上安装和配置它。这些网站平台都有详细的安装和配置指南，按照指南操作即可。

　　4. 设计网站主题：网站主题是网站的外观样式。可以选择现成的网站主题模板，也可以通过自定义CSS代码来设计自己的网站主题。

　　5. 添加内容：在网站上添加内容，例如个人介绍、博客文章、作品集和项目介绍等。这些内容可以通过网站平台自带的编辑器编辑和上传。

　　6. 优化SEO和社交媒体：优化SEO可以提升网站在搜索引擎中的排名，通过社交媒体分享也可以增加网站流量和关注度。

　　以上是个人网站建设的大致流程。对于初学者来说，可以通过自己动手尝试来掌握这些技能。同时，也可以查看网上的相关资源和视频教程，加深对网站建设的理解。

　　网站建设流程共计7步，分别是购买域名、服务器或虚拟主机、建站系统或定制开发、网站模板或定制设计、域名备案、网站测试、最后一步网站上线。

　　1、域名/网址

　　购买域名是企业网站建设流程的第一步，这里的域名是什么?域名就是网址，比如top域名。一般能满足企业的需求和使用。

　　2、服务器/虚拟主机

　　我们做完网站后需要一个存放文字、图片、视频、源码的空间，服务器就像是一个商场，虚拟主机就像是商场里的一家店铺。个人建议 如果你的网站是纯展示型的，用虚拟主机就可以，如果网站里面的内容 图片、视频、需要让客户下载的文件非常多的情况下，建议用独立的服务器。选择虚拟主机，不需要搭建运行环境，购买服务器则需要搭建网站运行环境。

　　3、建站系统/定制开发

　　建站系统分为普通建站系统和智能建站系统：

　　(1)普通建站系统指的就是一个建站程序，需要下载它，并且把它安装到服务器或者虚拟主机上，才能搭建并使用网站，需要你另外购买域名和服务器或虚拟主机。

　　(2)智能建站系统重点是智能，不需要你安装，你只需要在建站平台注册账号就行了，都是包含服务器的，还送二级域名，也就是说使用这种智能建站系统，你不需要另外购买域名和服务器或者虚拟主机，如果你想拥有独特的域名网址，可以自行购买。

　　(3)定制开发，就是网站的后端和前端，是单独为企业的建站需求而开发的，这套系统只属于你自己的企业，只有你自己的企业可以使用，当然，如果是找的第三方网站建设公司，你需要说明这一点;如果有程序员团队就不用担心这个问题了。

　　4、网站模板/定制设计

　　关于企业网站建设流程的第4步，如果是定制设计的就可以省去这一步，因为网站定制开发的，一般都是包含这一步的，不需要企业担心，但是在谈合作的时候，一定要说明白。

　　(1)如果企业使用普通建站系统，需要另外下载并安装模板，模板有免费有收费的，免费的BUG多，适合个人或者懂代码的，能修改。付费的功能完善，而且BUG少，而且还支持更新和修改等。

　　(2)如果企业使用智能建站系统，就不需要考虑网站模板的问题，模板是包含在你购买的版本里面的，而且随时可以任意更换，也不需要懂代码，企业没有程序员也完全可以搭建网站。

　　(3)如果企业是自己开发或者找网站建设公司定制开发的，就不需要考虑网站模板的问题了，甚至不用考虑域名、服务器或者虚拟主机的问题。

　　5、域名备案

　　如果你是购买的国内的服务器或者虚拟主机，域名需要备案，如果是海外的，就不需要进行域名备案了。部分企业和个人，只要是国内的必须备案，但是如果是企业，建议使用国内的服务器或者虚拟主机，然后进行备案。域名备案是企业网站建设流程中不可或缺的一部分。

　　6、网站测试

　　不论企业选择了那种网站建设方式，在网站上线之前，都是需要测试的，比如整个网站的色调、架构布局、首页、栏目页、详情页、各项功能是否完善和正常

　　7、正式上线

　　第7步是企业网站建设流程的最后一步，顾名思义，也就是现在这个网站是企业的了，可以使用了，可以让顾客访问了，可以放到互联网上了，可以对外展示了。