非速成,未使用任何建站平台,也谈不上教程,只是我在制作个人网站过程中的一些经验,也只是 100 种制作个人网站方法的其中之一。

正如标题说,如何拥有“自己的”个人网站,所以会聊到具体、可执行的路径,按照这个路径执行,下限是拥有自己的个人网站,上限就不知道了,想象空间很大。

为什么需要个人网站

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

dribbble 发布页面
站酷 发布页面
Behance 发布页面

比如对发布内容尺寸、大小、比例、格式(图片、视频、文本 …… )的限制,还有对布局、版式的限制等等,需要用户按照特定规则发布内容,种种限制一方面是为了降低应用自身的运营、维护成本,另一方面是方便用户操作,很多时候没有限制反而容易被搞晕。

这里提到的限制并无贬义,但它终究是限制,有些时候还是会受到影响,如果它们对你影响不大,后面的内容看一看也没坏处,就当看着玩,如果受到影响,那就要想想办法了,如何突破限制?

个人网站是个不错的选择,与其说 “突破限制”,更应该称为“拓宽限制的边界”,在这里,大多数控制权都掌握在自己手里,自由度极高,你可以自由控制页面布局、样式,甚至为每件作品制作不同布局,也不用为格式发愁,文本、图片、视频、gif …… 随意搭配。

这看起来很诱人,你一定要问,既然这么好,为什么使用它的人并不多?这正是使用外部应用和个人网站的核心差异:

  • 外部应用有一定的限制,但是可以非常方便地发布内容;
  • 个人网站自由度很高,但需要花更多时间、精力维护它。

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

需要做哪些工作

整个过程包含三块内容:

  1. 设计
  2. 实现
  3. 上传服务器

在上传到服务器之前,这一切都只能在你自己的电脑上运行,只有在上传到服务器后,才是能被所有人访问的网站。

设计和实现,这两项会不断循环迭代,低成本迭代是线上产品的重要特质之一,不像实体产品,要做到尽善尽美才能发布,否则修改、调试成本极高,发布后憋几个大招才能进行下一次迭代,线上产品在这方面有着天然优势,反而可以小步快跑,随着一次次迭代,慢慢接近理想状态。

设计

设计部分就不多说了,都是干这个的,大家随意发挥,需要注意的是第一版要尽量简单些,主要是把页面层级关系梳理清楚,不要花太多时间,后面大概率会回头修改。

实现

实现,也就是通过代码把设计稿转换成真实网站,需要用到 HTML(超文本标记语言)CSS(层叠样式表)JavaScript,排列顺序既是学习顺序。

代码编辑器

开始写代码前,你需要一个编辑器,HTML、CSS、JavaScript 都需要编辑器的支持,就像画图前先要安装 Figma、Sketch、Illustrator …… 一样,现阶段先别纠结选择哪款编辑器,就用 VS Code

HTML、CSS

mozilla 学习 Web 开发

HTML 和 CSS 可能要花掉 2 - 4 周的时间,它们并不算编程语言,从名字中也能看得出,分别是标记语言和样式表语言,暂时可以粗暴的理解成它们要比编程语言简单一些,网站的内容、布局、样式,全靠它们完成。

学习 HTML 和 CSS,不是学完 A 再学 B 的线性关系,而是在两者间辗转腾挪,学习 Web 开发 - MDN 这里可以帮你掌握这两个工具。

mozilla CSS 布局

HTML 先跟着教程熟悉标签的用法,注意页面结构,单看 HTML,体现不出页面结构的重要性,当你开始用 CSS 调整布局时,页面结构的重要性就体现出来了。

CSS 部分要特别留意 CSS 布局,后面使用频率极高,其它 CSS 样式可以随用随查,但布局不行,它有多种布局方式,并且影响着整个页面,有很多关联项,一定要在前期把它搞清楚。

刚开始会有一点头疼,毕竟第一步总是困难的,坚持一下,很快就能挺过去,你先这么骗自己,如果超过两周还特别头疼,就重头来一遍再试试,你可是要自己做网站的人啊,挺住。

挺过基础部分就可以行动了,做一些实际案例,边做边学,试着用 HTML + CSS 实现:

  1. 前面做好的简单视觉稿;
  2. 临摹几个自己喜欢的页面样式(由易到难);
  3. 2 - 5 页的设计稿,尽可能接近真实网站环境,比如要有页头、页尾,可以互相跳转。

当你可以完成这些的时候,就差不多了,还剩这部分的最后一步 —— 响应式设计,这是当前互联网环境下必须考虑的问题。响应式设计指的是页面在电脑、ipad、手机等等不同的屏幕尺寸下,布局和样式会做出相应调整。这不仅是 CSS 部分的工作,在设计初期就要充分考虑页面在不同尺寸屏幕下的布局和样式,实现响应式设计后,这部分学习告一段落,开始下一步。

JavaScript

mozilla JavaScript

JavaScript ( JS ) 是一门完备的动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。

到这一步才算真正开始“编程”,JavaScript 很强大,除了 Web 开发外还有很多用途,相比之下对新手还算友好,相比之下啊,很适合作为入门编程语言。

编程对于非专业的人来说本来就很陌生,即便是适合入门的 JavaScript 也会觉得很复杂,这是既定事实,我们改变不了什么,只能想一些办法,让学习过程平滑一些,我的办法是不要妄图 “学会” JavaScript,这东西挺难的,我也学不会,而且很多东西不知道用来干嘛,由此可以反过来想一想,我们学 JavaScript 是要用它干嘛?

相信前面 HTML + CSS 练习部分,你一定遇到一些 HTML、CSS 之外的问题,比如一模一样的页头、页尾,要把代码复制粘贴到每个页面中,如果有修改,所有页面都要跟着改一遍,确实每个页面都需要他们,但有没有什么办法能自动为每个页面添加页头、页尾?即便有修改,也只改一次就好。

正巧 JavaScript 很擅长干这种事,所以目前我们学 JavaScript,是需要它控制 HTML 中的某些内容,一个 JS 文件,就可以解决所有页面中的页头、页尾,再也不用笨笨地逐个粘贴了。你需要了解 DOM(文档对象模型),通过它才能将 JavaScript 和 HTML 连接。既然能控制 HTML 中的内容,是不是也可以控制 CSS?确实如此,你可以顺便了解一下。

无论怎样也要先把 JavaScript 基础 搞定,掌握基础后可以根据具体问题搜索相应解决方案,否则即便是找到解决方案也看不懂,更别提解决自己的实际问题了。

整个过程基本是先掌握基础,发现问题后搜索解决方案,学会这类问题的解决方法,大概率会由此引申出一些相关问题,再发现问题、再搜索、再学会、再发现问题 ……

刚开始可能无法准确找到解决方案,因为刚刚接触,对问题描述不够准确,耐心一点,随着对 JS 的深入了解,不仅技术能力提高,提问题的能力也会随之提高,提问是非常重要的技能,这样就能形成正向循环,遇到问题也能够从容地想办法解决。

JavaScript 部分,当你完成:

  • 为每个页面添加页头、页尾(HTML);
  • 调整页面样式(CSS)。

就可以停下来了,准备进入下一步。

完成阶段性任务

我们整理一下当前都做了哪些工作:

  • HTML + CSS(响应式设计)
    • 实现简单视觉稿;
    • 临摹几个自己喜欢的页面样式(由易到难);
    • 实现 2 - 5 页设计稿,尽可能接近真实网站环境,比如要有页头、页尾,可以互相跳转。
  • JavaScript(DOM)
    • 为每个页面添加页头、页尾(HTML);
    • 调整页面样式(CSS)。

对初学者来说完成这些并不容易,你可能花了很长时间,这很正常,再坚持一下,当你完成页面后,上传到服务器就可以通过域名访问了。

目前已经完成了 80%,虽然还有 20% 的工作要做,但无论是工作量,还是难易程度,都要比前面那些需要长时间学习、研究的 80% 简单很多。

除文中列出的教程链接外,建议你再找一些其它教程,无论文本还是视频,网络上这方面资源非常丰富,基础教程不会有太大的偏差,善用搜索,找适合自己的学习。

今天先到这里,后面会另起一篇,聊一聊服务器、域名相关的话题,希望你在这一步做好充分准备,下一步就该让网站上线了,祝你顺利:)