上一篇《设计师如何拥有自己的个人网站(一)》,我们完成了网站的基本内容,下面就准备上线吧。

如果你是从上一篇文章开始的,那现在多半还没准备好,毕竟相隔不到一周的时间,我担心有的朋友会想「这人写了一半,谁知道后面什么时候更新,还是先等等吧」,所以我先写了,你根据自己的进度,后面慢慢看。

预备

服务器

服务器是互联网中的一个个站点,当前我们完成的内容只能在本地运行,也就是你自己的电脑上,当我们把网站文件放到服务器上,才能被每个人通过网络访问,这样才算真正意义的“网站”。

注:我们用到的叫「云虚拟主机」,也是服务器的一种。

域名

域名帮我们在浩如烟海的互联网中找到自己的服务器,它具有唯一性,先注册先得,准备过程中如果想到适合自己的域名,可以提前购买。

对象储存 OSS

名字有点怪,暂时可以理解成云端硬盘。你的网站文件夹中除了代码,一定还有大量图片、视频文件,这些媒体资源会占用大量空间,把它们全部上传到服务器上不是个好办法,因为服务器本身有内存和带宽的限制,所以要想办法减轻服务器压力。

可以把代码和媒体资源分别储存,服务器只保存代码,媒体资源储存到 OSS 中,这样每一份资源都可以通过链接访问。OSS 还具备很多功能,比如最常用的图片修改格式、尺寸等等,这些功能在后期可以帮我们减少很多麻烦。

阿里云 OSS 产品功能

这里需要调整一下代码,先把所有媒体资源储存到 OSS 中,再把 HTML 文件中的本地链接更换成 OSS 链接。

<img src="本地图片地址" alt="">`  -> <img src="OSS 链接" alt="">

此刻所有引用媒体资源的部分都指向 OSS,彻底删掉网站文件夹中的媒体资源,让网站文件夹中只包含代码,这时的文件夹可能还没一张图片大。

很大声 Web 文件夹

配置

  • 服务器
    • 云虚拟主机
    • 大陆地区服务器需要备案,建议购买香港地区服务器,无需备案,即买即用。
    • 不需要备案不代表脱离监管,踏踏实实发布自己的作品就好,别搞乱七八糟的东西。
  • 域名
  • 对象储存 OSS

这是我用到的配置,也建议你这么用,先买价格最低的,后期有必要再升级。它们价格合适、文档清晰,对新手很友好,当然还有一大堆同类产品,但我都没用过,如果你初次尝试,就别在这浪费太多时间了,先按这个配置来。

开始

准备好服务器、域名、对象储存 OSS 后,还有最后两步:

然后,你就变成一个拥有个人网站的人了。

看起来还没等开始就已经完成了,实际上每一步中间还包含一些细节问题,不用太担心,跟着文档操作就好,完全不会像上一阶段那样,以周为单位计算时间,这部分最多以天为单位计算,甚至是小时。

正如上一篇文章结尾所说,这部分会很容易,也没什么可说的。我们已经把「拥有个人网站」的整个流程走了一遍,这可以让你拥有它,并且熟悉整个过程,但不足以让你满意,所以从现在开始,你的个人网站项目正式启动了,请回到第一步,抛开之前对于未知的恐惧,把所有精力投入到「设计」和「实现」中吧。

还有一些

很大声 Web 2.0 这是我的尝试,目前是第二个版本,依然还在迭代、优化的过程中,欢迎你来游玩。

下面我们聊一聊,基础部分之外的事情。

Git / GitHub 和命令行

Git
GitHub About

它们是帮我们储存、管理代码的好朋友,相当于云端仓库(GitHub)和后悔药(Git),命令行的作用是操作 Git 和 Github。当然它们还有其他用处,现阶段我们只需要「储存」(仓库)和「版本控制」(后悔药)这两项功能,用过的都说好。

我还没有足够的能力分阶段、按步骤讲解,所以推荐两份对我帮助很大的课程,比我讲的好一万倍。

目录,文件和命令行

作者:soulhacker

介绍目录和文件,尤其是在命令行界面里相关的重要概念。讲解以 Windows 为例,但概念对其他系统也是一样的。

《目录,文件和命令行》面向零基础,把计算机文件目录 / 路径这件事讲的清清楚楚,看起来很基础,甚至会出现可以跳过这一段的幻觉,建议你放弃幻觉,花二十多分钟的时间看一下,为接下来的学习、工作打下夯实基础,顺便还能打消对命令行操作的的恐惧。

Git 和 GitHub 简明入门

作者:soulhacker

《Git 和 GitHub 简明入门》

表严肃讲Git - Git教程

作者:表严肃

《表严肃讲Git - Git教程》

两份关于 Git 和 GitHub 的教程,第一份「soulhacker」的讲解更宏观,从原理讲起,也会涉及到具体操作;第二份「表严肃」的讲解直接从实际操作入手,看完就可以直接上手了。

两份都是非常好的教程,建议按顺序浏览,从此告别手动记录版本,甚至找到全新的工作流程,省时、省力、省心,把有限的精力投入到更核心的工作中。

第三方库(Library)

「第三方库」指的是他人对特定功能进行封装,当我们需要实现某些功能时,直接调用第三方库就可以,这会节省很多时间,就像是站在巨人的肩膀上工作。我的描述并不严谨,从使用角度讲暂时可以这样理解。

「第三方库」是非常宽泛的概念,不同编程语言、不同用处有各种各样的库,在个人网站项目中,用到的多数是 CSS 库和 JavaScript 库,下面介绍两个我在项目中用到的库,大家了解一下,后面可以应用在自己的项目中。

lazySizes - 用于实现图片懒加载

lazySizes

图片懒加载几乎是每个应用必备的功能,如果没有懒加载设置(默认状态),当页面打开时,浏览器会自动加载页面中的所有图片,这对浏览器和用户流量都造成一定压力。懒加载的工作机制是,当用户需要看到某张图片时才加载,也就是说当 HTML 中的 <img> 标签出现在窗口中才加载,在这之前先用一张低分辨率的占位图代替。

lazySizes 是一款实现图片懒加载的 JS 库,使用非常简单:

  1. 先在 <head> 中加载 lazySize.js 标签;
  2. 为 <img> 添加 「.lazyload」 类名;
  3. 为 <img> 的 srcdata-src 属性添加对应图片地址。

只需要三个步骤,就完成了懒加载配置。这里有一份 LazySizes 配置测试,可以看到 LazySizes 的基础用法,更多用法在 LazySizes 官方文档 中查看。

  <img class="lazyload"
       data-src="https://source.unsplash.com/random/2048x2048/?city" 
       src="https://dummyimage.com/800x600/e0e9ff/888dbd" 
       alt="">
  • data-src 属性:
    • 填写需要显示的图片;
    • 示例中的链接是图库网站 Unsplash 提供的 API,可以通过链接随机显示图片,更多用法请查看 Unsplash Source
  • src 属性:
    • 填写占位图;
    • 示例中链接用到的是 Dummy Image,它可以自定义颜色 / 尺寸生成图片,并且可以通过链接访问,很适合做占位图。

bricklayer.js - 瀑布流布局

说起瀑布流布局,多半会想到 Pinterest,这是非常适合同时展示多个内容的布局方式。

很大声周刊

「很大声周刊」是我每周分享生活、工作见闻的系列文章,每期都会搭配不同的封面(多数是动态封面)为文章助兴,我想用瀑布流布局展示它们,所以用到了 bricklayer.js,它是专门用于实现瀑布流布局的第三方库。

配置依然简单:

  1. 在 <head> 标签中添加 bricklayer.css 和 bricklayer.js;
  2. 为瀑布流布局父级添加 「.bricklayer」类名;
  3. 在 css 文件中,通过 「 .bricklayer-column-sizer 」设置瀑布流中每个元素的宽度。

基础用法在 bricklayer.js 配置测试 中,更多用法仍然是查看 bricklayer.js 官方文档

关于第三方库的问题

官方文档

在上面两个例子中多次出现 「官方文档」的身影,它非常重要,里面包含关于这个库的一切,如何使用、需要注意什么等等。我们在使用的时候要留意,不是每个库都有清晰的文档,选择使用某个库时,是否有清晰的文档是最重要的判断标准。

这里「清晰」一方面指的是对功能、用法的描述(多数都能做到),另一方面是以我们当前的积累是否能看懂,有很多库的文档我也看不懂,这个问题无解,只能从中按图索骥,慢慢积累。这种问题并不是短期能解决的,不要恋战,当前目标是完成网站,如果这条路走不通果断更换方案,或者选择类似功能、文档「清晰」的其它第三方库。

bricklayer.js Issues

在使用库的过程中,遇到问题很正常,官方文档可以解决大多数问题,另外一部分问题可以通过「官方 Issues」解决,每个库都有自己的 Issues 页面(以 bricklayer.js 为例),用户会在这里提出问题,你遇到的问题很有可能在这里找到答案,如果没有,就把问题提出来,解决自己问题的同时,还能帮到下一个遇到同样问题的人。提问是个技术活儿,提问的智慧 这个你一定用得上。

如何找到自己需要的库

「功能」+「搜索」+「文档」,每个功能都不止有一个库,并不是说这些库都一模一样,而是功能相同,但侧重点不同,比如我在用 bricklayer.js 实现瀑布流布局之前,用到的是另一个叫做 masonry.js 的瀑布流布局库。

Masonry 不支持 Flex Box CSS

也挺好用的,可是后来发现它不支持 Flex 布局,而我用的偏偏就是 Flex 布局,还不是完全不支持,经过测试发现,Masonry + Flex 只在 Firefox 浏览器上无法正常显示,那时已经做到一半了,但也没办法,总不能盼着所有访问者都不用 Firefox 浏览器吧,很狼狈,只能换方案,最后才选定 bricklayer.js。

总之,接下来的工作多半会用到第三方库,除了「功能」+「搜索」+「文档」之外,在正式使用前先单独测试一下,也就是说新开一个页面,专门测试某个库中你所需要的功能,测试没问题后再应用到项目中。

除了本地测试,线上调试也是不错的办法,可以节省一点时间,基础代码和环境都已经准备好了,直接写核心代码就可以,JSFiddleCodePen 都是不错的选择。

最后

以上是我不成熟的个人经验,它们不能让你变成三头六臂、头上长角那种很厉害的样子,只希望这一点点经验,能帮你消除对编程的恐惧,以更轻松的心态面对它。个人网站远不是学习编程的终点,只是开始编程的一个可执行的小目标,也是踏入新世界的第一步。

编程只是众多技能点中的其中之一,不是必选项,如果你对这事儿没兴趣,还是把精力投入到自己感兴趣的事情上吧。如果感兴趣,真的很希望你能勇敢迈出这一步,虽然它是漫长的、辛苦的,但新世界会带给你超多意想不到的惊喜,祝你顺利:)

欢迎大家在评论中留言、讨论。