非速成，未使用任何建站平台，也谈不上教程，只是我在制作个人网站过程中的一些经验，也只是 100 种制作个人网站方法的其中之一。
正如标题说，如何拥有“自己的”个人网站，所以会聊到具体、可执行的路径，按照这个路径执行，下限是拥有自己的个人网站，上限就不知道了，想象空间很大。
当前互联网的基础建设已经很完善了，各个门类都有相应的应用，每个人都可以建立自己的页面，发布内容，尤其是设计行业。这些应用的出发点是为更多人提供服务，让大家专心创作，不用操心内容以外的东西，但也正是因为“为更多人提供服务”，这意味着需要种种限制。
比如对发布内容尺寸、大小、比例、格式（图片、视频、文本 …… ）的限制，还有对布局、版式的限制等等，需要用户按照特定规则发布内容，种种限制一方面是为了降低应用自身的运营、维护成本，另一方面是方便用户操作，很多时候没有限制反而容易被搞晕。
这里提到的限制并无贬义，但它终究是限制，有些时候还是会受到影响，如果它们对你影响不大，后面的内容看一看也没坏处，就当看着玩，如果受到影响，那就要想想办法了，如何突破限制？
个人网站是个不错的选择，与其说 “突破限制”，更应该称为“拓宽限制的边界”，在这里，大多数控制权都掌握在自己手里，自由度极高，你可以自由控制页面布局、样式，甚至为每件作品制作不同布局，也不用为格式发愁，文本、图片、视频、gif …… 随意搭配。
这看起来很诱人，你一定要问，既然这么好，为什么使用它的人并不多？这正是使用外部应用和个人网站的核心差异：
自由度与复杂程度成正比，越自由意味着需要越多背后的支持。以下是我做个人网站的过程，如果你已经打算做个人网站，接下来的内容可能对你有帮助，如果还在犹豫，正好可以看看整个流程，权衡一下要不要做。
整个过程包含三块内容：
在上传到服务器之前，这一切都只能在你自己的电脑上运行，只有在上传到服务器后，才是能被所有人访问的网站。
设计和实现，这两项会不断循环迭代，低成本迭代是线上产品的重要特质之一，不像实体产品，要做到尽善尽美才能发布，否则修改、调试成本极高，发布后憋几个大招才能进行下一次迭代，线上产品在这方面有着天然优势，反而可以小步快跑，随着一次次迭代，慢慢接近理想状态。
设计部分就不多说了，都是干这个的，大家随意发挥，需要注意的是第一版要尽量简单些，主要是把页面层级关系梳理清楚，不要花太多时间，后面大概率会回头修改。
实现，也就是通过代码把设计稿转换成真实网站，需要用到 HTML（超文本标记语言）、CSS（层叠样式表）、JavaScript，排列顺序既是学习顺序。
开始写代码前，你需要一个编辑器，HTML、CSS、JavaScript 都需要编辑器的支持，就像画图前先要安装 Figma、Sketch、Illustrator …… 一样，现阶段先别纠结选择哪款编辑器，就用 VS Code 。
HTML 和 CSS 可能要花掉 2 - 4 周的时间，它们并不算编程语言，从名字中也能看得出，分别是标记语言和样式表语言，暂时可以粗暴的理解成它们要比编程语言简单一些，网站的内容、布局、样式，全靠它们完成。
学习 HTML 和 CSS，不是学完 A 再学 B 的线性关系，而是在两者间辗转腾挪，学习 Web 开发 - MDN 这里可以帮你掌握这两个工具。
HTML 先跟着教程熟悉标签的用法，注意页面结构，单看 HTML，体现不出页面结构的重要性，当你开始用 CSS 调整布局时，页面结构的重要性就体现出来了。
CSS 部分要特别留意 CSS 布局，后面使用频率极高，其它 CSS 样式可以随用随查，但布局不行，它有多种布局方式，并且影响着整个页面，有很多关联项，一定要在前期把它搞清楚。
刚开始会有一点头疼，毕竟第一步总是困难的，坚持一下，很快就能挺过去，你先这么骗自己，如果超过两周还特别头疼，就重头来一遍再试试，你可是要自己做网站的人啊，挺住。
挺过基础部分就可以行动了，做一些实际案例，边做边学，试着用 HTML + CSS 实现：
当你可以完成这些的时候，就差不多了，还剩这部分的最后一步 —— 响应式设计，这是当前互联网环境下必须考虑的问题。响应式设计指的是页面在电脑、ipad、手机等等不同的屏幕尺寸下，布局和样式会做出相应调整。这不仅是 CSS 部分的工作，在设计初期就要充分考虑页面在不同尺寸屏幕下的布局和样式，实现响应式设计后，这部分学习告一段落，开始下一步。
JavaScript ( JS ) 是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。
到这一步才算真正开始“编程”，JavaScript 很强大，除了 Web 开发外还有很多用途，相比之下对新手还算友好，相比之下啊，很适合作为入门编程语言。
编程对于非专业的人来说本来就很陌生，即便是适合入门的 JavaScript 也会觉得很复杂，这是既定事实，我们改变不了什么，只能想一些办法，让学习过程平滑一些，我的办法是不要妄图 “学会” JavaScript，这东西挺难的，我也学不会，而且很多东西不知道用来干嘛，由此可以反过来想一想，我们学 JavaScript 是要用它干嘛？
相信前面 HTML + CSS 练习部分，你一定遇到一些 HTML、CSS 之外的问题，比如一模一样的页头、页尾，要把代码复制粘贴到每个页面中，如果有修改，所有页面都要跟着改一遍，确实每个页面都需要他们，但有没有什么办法能自动为每个页面添加页头、页尾？即便有修改，也只改一次就好。
正巧 JavaScript 很擅长干这种事，所以目前我们学 JavaScript，是需要它控制 HTML 中的某些内容，一个 JS 文件，就可以解决所有页面中的页头、页尾，再也不用笨笨地逐个粘贴了。你需要了解 DOM（文档对象模型），通过它才能将 JavaScript 和 HTML 连接。既然能控制 HTML 中的内容，是不是也可以控制 CSS？确实如此，你可以顺便了解一下。
无论怎样也要先把 JavaScript 基础 搞定，掌握基础后可以根据具体问题搜索相应解决方案，否则即便是找到解决方案也看不懂，更别提解决自己的实际问题了。
整个过程基本是先掌握基础，发现问题后搜索解决方案，学会这类问题的解决方法，大概率会由此引申出一些相关问题，再发现问题、再搜索、再学会、再发现问题 ……
刚开始可能无法准确找到解决方案，因为刚刚接触，对问题描述不够准确，耐心一点，随着对 JS 的深入了解，不仅技术能力提高，提问题的能力也会随之提高，提问是非常重要的技能，这样就能形成正向循环，遇到问题也能够从容地想办法解决。
JavaScript 部分，当你完成：
就可以停下来了，准备进入下一步。
我们整理一下当前都做了哪些工作：
对初学者来说完成这些并不容易，你可能花了很长时间，这很正常，再坚持一下，当你完成页面后，上传到服务器就可以通过域名访问了。
目前已经完成了 80%，虽然还有 20% 的工作要做，但无论是工作量，还是难易程度，都要比前面那些需要长时间学习、研究的 80% 简单很多。
除文中列出的教程链接外，建议你再找一些其它教程，无论文本还是视频，网络上这方面资源非常丰富，基础教程不会有太大的偏差，善用搜索，找适合自己的学习。
今天先到这里，后面会另起一篇，聊一聊服务器、域名相关的话题，希望你在这一步做好充分准备，下一步就该让网站上线了，祝你顺利：）
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。