网站架构师的工作内容(非速成，未使用任何建站平台，也谈不上教程！)

　　网站架构师的工作内容(非速成，未使用任何建站平台，也谈不上教程！)

　　非崩溃，不使用建站平台，不教程，只是我在制作个人网站过程中的经验，并且只是制作个人网站的100种方法之一。

　　正如标题所说，如何拥有自己的个体网站，所以我就讲一个具体的可执行路径，沿着这条路径走。下限是拥有自己的个人网站，上限是我不知道，有很大的想象空间。

　　我为什么需要一个人网站

　　当前的互联网基础设施已经完善，每个类别都有相应的应用。每个人都可以创建自己的页面并发布内容，尤其是在设计行业。这些应用的出发点是为更多的人提供服务，让大家可以专心创作，不用担心内容以外的事情，但也正是因为“服务更多的人”，这意味着需要各种限制。

　　运球发布页面

　　张酷发布页面

　　Behance 发布页面

　　例如对发布内容的大小、大小、比例、格式（图片、视频、文字...）的限制，以及对版式、格式等的限制，要求用户在根据具体规则。各种限制一方面是为了降低应用本身的运维成本，另一方面是方便用户操作。在很多情况下，没有限制，但很容易混淆。

　　这里所说的限制并不是贬义，但毕竟是限制，有时候还是会受到影响。如果对你影响不大，后面的内容也没什么害处，就看玩玩吧。如果受到影响，就得想办法，怎么突破限制？

　　个人网站是不错的选择。与其说是“突破限制”，不如说是“拓宽限制的边界”。在这里，大部分控制权都掌握在自己手中，自由度极高。 ，您可以自由控制页面布局、样式，甚至可以为每件作品做出不同的布局，无需担心格式、文字、图片、视频、gif...随意混搭。

　　这看起来很诱人，你一定会问，如果它这么好，为什么没有多少人使用它？这就是使用外部应用和个人网站的核心区别：

　　自由度与复杂度成正比。越自由意味着背后需要越多的支持。以下是我个人的网站流程。如果你已经在计划做个人网站，下面的内容可能对你有帮助。如果你还在犹豫，你可以看看整个过程，权衡一下需求。不要这样做。

　　需要做什么

　　整个过程收录三块内容：

　　设计并实现上传服务器

　　在上传到服务器之前，所有这些只能在您自己的计算机上运行。上传到服务器后才能被所有人访问网站。

　　设计和实现，这两个会不断循环迭代。低成本迭代是线上产品的重要特征之一。与实体产品不同，它们必须完美无缺才能发布。否则，修改和调试的成本极高。进行下一次迭代需要几个大的动作。线上产品在这方面有着天然的优势。相反，它们可以小步运行，并在每次迭代中慢慢接近理想状态。

　　设计

　　设计部分我就不多说了。都是为了这个。让我们自由发挥吧。需要注意的是，第一个版本应该尽可能简单。主要目的是梳理页面层次结构。概率会被修正回来。

　　实现

　　实现，即通过代码将设计稿转化为真正的网站，需要HTML（超文本标记语言）、CSS（层叠样式表），排列顺序就是学习顺序。

　　代码编辑器

　　在开始编写代码之前，您需要一个编辑器。 HTML、CSS、JavaScript都需要编辑器的支持，就像Figma、Sketch、Illustrator……画图之前，现阶段不用纠结选哪一个。编辑器，使用 VS Code。

　　HTML、CSS

　　Mozilla 学习网页开发

　　HTML 和 CSS 可能需要 2-4 周时间。它们不是编程语言。从名字就可以看出来。它们是标记语言和样式表语言。暂时可以大致理解为他们要求比编程语言更简单，网站的内容、布局、风格都是他们做的。

　　学习 HTML 和 CSS 不是学习 A 和 B 之间的线性关系，而是在两者之间移动，学习 Web 开发-MDN 可以帮助您在这里掌握这两个工具。

　　mozilla CSS 布局

　　HTML 首先按照教程熟悉标签的使用。注意页面结构。看看HTML。页面结构的重要性不会体现出来。当你开始用 CSS 调整布局时，页面结构的重要性就会体现出来。

　　特别注意CSS部分的CSS布局。后期使用频率很高。其他CSS样式可以随时使用和检查，但布局不好。它有多种布局方式，影响整个页面。有很多相关的项目。前期说清楚。

　　刚开始会有点头疼。毕竟，第一步总是困难的。坚持下去，你很快就能度过难关。你先对自己撒谎。如果您头痛超过两周，请再试一次。 ，你必须是网站自己，坚持下去。

　　打通基础就可以行动了，做一些实际案例，边做边学，尝试用HTML+CSS来实现：

　　之前制作的简单视觉稿；复制一些你喜欢的页面样式（从易到难）； 2-5个页面设计稿，尽量接近真实的网站环境，比如页眉，页脚，可以互相跳转。

　　当你能完成这些时，你就差不多了，还有这个部分响应式设计的最后一步，这是当前互联网环境下必须考虑的问题。响应式设计是指在电脑、ipad、手机等不同的屏幕尺寸下，页面的布局和样式会进行相应的调整。这不仅仅是 CSS 部分的工作。在设计之初，必须充分考虑不同屏幕尺寸下页面的布局和风格。响应式设计实现后，这部分的学习就结束了，开始下一步。

　　JavaScript

　　mozilla JavaScript

　　是一种完整的动态编程语言。应用于HTML文档时，可以为网站提供动态交互功能。

　　只有在这一点上才是“编程”的真正开始。 JavaScript 非常强大，除了 Web 开发之外还有很多用途。相比之下，对新手比较友好。相比之下，它非常适合作为入门级的编程语言。

　　非专业人士对编程本质上是陌生的。即使是适合入门的 JavaScript 也会感觉很复杂。这是既定的事实。我们什么都改变不了。我们只能想一些办法，让学习过程更顺畅。我的解决方案不是尝试“学习”JavaScript。这东西很难，我学不会，也不知道有什么用。由此，我们可以反过来思考。我们必须使用它来学习 JavaScript。嗯？

　　相信在之前的HTML+CSS练习中，大家一定遇到过一些HTML和CSS以外的问题，比如header和footer一样。将代码复制并粘贴到每个页面中。如果有改动，所有的页面都得重新改动。确实每个页面都需要它们，但是有什么方法可以自动为每个页面添加页眉和页脚？即使有修改，也只需要修改一次即可。

　　正好JavaScript很擅长做这种事情，所以目前我们在学习JavaScript，需要它来控制HTML中的一些内容，一个JS文件可以解决所有页面的页眉页脚，不再需要傻傻的把它们一一粘贴。您需要了解 DOM（文档对象模型）才能连接 JavaScript 和 HTML。既然可以控制HTML中的内容，那么是否也可以控制CSS呢？是真的，你可以顺便查一下。

　　无论如何，你必须先完成它。掌握了基础之后，就可以根据具体问题寻找解决方案了。否则，即使你找到了解决方案，你也不会理解它，更别说解决你自己的实际问题了。

　　整个过程基本上是先掌握基础，发现问题后寻找解决方案，学习如何解决这样的问题，大概率会由此衍生出一些相关的问题，然后找到问题，再搜索，再学习，再发现问题...

　　一开始，你可能无法准确找到解决方案，因为你刚刚接触，问题描述不够准确。要有耐心。随着对JS的深入理解，不仅技术能力会提升，提问能力也会提升。提问题是很重要的技能，这样才能形成良性循环，从容解决问题。

　　JavaScript 部分，完成后：

　　你可以停下来，准备继续下一步。

　　完成阶段性任务

　　让我们梳理一下我们目前在做什么：

　　JavaScript (DOM)

　　初学者完成这个并不容易。你可能花了很长时间。这是正常的。再坚持一下。完成页面后，上传到服务器，即可通过域名访问。

　　目前已经完成了80%。虽然还有20%的工作要做，但无论是工作量还是难度，都比之前需要长时间学习和研究的80%要简单得多。

　　除了文中列出的教程链接，建议大家找一些其他的教程，不管是文字还是视频，网上这方面的资源非常丰富，基础教程不会太偏很好地使用搜索来找到适合您的。学习。

　　今天就到这里，稍后再开始讲服务器和域相关的话题。我希望你为这一步做好了充分的准备。下一步就是让网站上线，祝你一切顺利:)