上一篇《设计师如何拥有自己的个人网站（一）》，我们完成了网站的基本内容，下面就准备上线吧。
如果你是从上一篇文章开始的，那现在多半还没准备好，毕竟相隔不到一周的时间，我担心有的朋友会想「这人写了一半，谁知道后面什么时候更新，还是先等等吧」，所以我先写了，你根据自己的进度，后面慢慢看。
服务器是互联网中的一个个站点，当前我们完成的内容只能在本地运行，也就是你自己的电脑上，当我们把网站文件放到服务器上，才能被每个人通过网络访问，这样才算真正意义的“网站”。
注：我们用到的叫「云虚拟主机」，也是服务器的一种。
域名帮我们在浩如烟海的互联网中找到自己的服务器，它具有唯一性，先注册先得，准备过程中如果想到适合自己的域名，可以提前购买。
名字有点怪，暂时可以理解成云端硬盘。你的网站文件夹中除了代码，一定还有大量图片、视频文件，这些媒体资源会占用大量空间，把它们全部上传到服务器上不是个好办法，因为服务器本身有内存和带宽的限制，所以要想办法减轻服务器压力。
可以把代码和媒体资源分别储存，服务器只保存代码，媒体资源储存到 OSS 中，这样每一份资源都可以通过链接访问。OSS 还具备很多功能，比如最常用的图片修改格式、尺寸等等，这些功能在后期可以帮我们减少很多麻烦。
这里需要调整一下代码，先把所有媒体资源储存到 OSS 中，再把 HTML 文件中的本地链接更换成 OSS 链接。
<img src="本地图片地址" alt="">` -> <img src="OSS 链接" alt="">
此刻所有引用媒体资源的部分都指向 OSS，彻底删掉网站文件夹中的媒体资源，让网站文件夹中只包含代码，这时的文件夹可能还没一张图片大。
这是我用到的配置，也建议你这么用，先买价格最低的，后期有必要再升级。它们价格合适、文档清晰，对新手很友好，当然还有一大堆同类产品，但我都没用过，如果你初次尝试，就别在这浪费太多时间了，先按这个配置来。
准备好服务器、域名、对象储存 OSS 后，还有最后两步：
然后，你就变成一个拥有个人网站的人了。
看起来还没等开始就已经完成了，实际上每一步中间还包含一些细节问题，不用太担心，跟着文档操作就好，完全不会像上一阶段那样，以周为单位计算时间，这部分最多以天为单位计算，甚至是小时。
正如上一篇文章结尾所说，这部分会很容易，也没什么可说的。我们已经把「拥有个人网站」的整个流程走了一遍，这可以让你拥有它，并且熟悉整个过程，但不足以让你满意，所以从现在开始，你的个人网站项目正式启动了，请回到第一步，抛开之前对于未知的恐惧，把所有精力投入到「设计」和「实现」中吧。
很大声 Web 2.0 这是我的尝试，目前是第二个版本，依然还在迭代、优化的过程中，欢迎你来游玩。
下面我们聊一聊，基础部分之外的事情。
它们是帮我们储存、管理代码的好朋友，相当于云端仓库（GitHub）和后悔药（Git），命令行的作用是操作 Git 和 Github。当然它们还有其他用处，现阶段我们只需要「储存」（仓库）和「版本控制」（后悔药）这两项功能，用过的都说好。
我还没有足够的能力分阶段、按步骤讲解，所以推荐两份对我帮助很大的课程，比我讲的好一万倍。
作者：soulhacker
介绍目录和文件，尤其是在命令行界面里相关的重要概念。讲解以 Windows 为例，但概念对其他系统也是一样的。
《目录，文件和命令行》面向零基础，把计算机文件目录 / 路径这件事讲的清清楚楚，看起来很基础，甚至会出现可以跳过这一段的幻觉，建议你放弃幻觉，花二十多分钟的时间看一下，为接下来的学习、工作打下夯实基础，顺便还能打消对命令行操作的的恐惧。
作者：soulhacker
作者：表严肃
两份关于 Git 和 GitHub 的教程，第一份「soulhacker」的讲解更宏观，从原理讲起，也会涉及到具体操作；第二份「表严肃」的讲解直接从实际操作入手，看完就可以直接上手了。
两份都是非常好的教程，建议按顺序浏览，从此告别手动记录版本，甚至找到全新的工作流程，省时、省力、省心，把有限的精力投入到更核心的工作中。
「第三方库」指的是他人对特定功能进行封装，当我们需要实现某些功能时，直接调用第三方库就可以，这会节省很多时间，就像是站在巨人的肩膀上工作。我的描述并不严谨，从使用角度讲暂时可以这样理解。
「第三方库」是非常宽泛的概念，不同编程语言、不同用处有各种各样的库，在个人网站项目中，用到的多数是 CSS 库和 JavaScript 库，下面介绍两个我在项目中用到的库，大家了解一下，后面可以应用在自己的项目中。
图片懒加载几乎是每个应用必备的功能，如果没有懒加载设置（默认状态），当页面打开时，浏览器会自动加载页面中的所有图片，这对浏览器和用户流量都造成一定压力。懒加载的工作机制是，当用户需要看到某张图片时才加载，也就是说当 HTML 中的 <img> 标签出现在窗口中才加载，在这之前先用一张低分辨率的占位图代替。
lazySizes 是一款实现图片懒加载的 JS 库，使用非常简单：
src 和 data-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 属性：src 属性：
说起瀑布流布局，多半会想到 Pinterest，这是非常适合同时展示多个内容的布局方式。
「很大声周刊」是我每周分享生活、工作见闻的系列文章，每期都会搭配不同的封面（多数是动态封面）为文章助兴，我想用瀑布流布局展示它们，所以用到了 bricklayer.js，它是专门用于实现瀑布流布局的第三方库。
配置依然简单：
基础用法在 bricklayer.js 配置测试 中，更多用法仍然是查看 bricklayer.js 官方文档。
在上面两个例子中多次出现 「官方文档」的身影，它非常重要，里面包含关于这个库的一切，如何使用、需要注意什么等等。我们在使用的时候要留意，不是每个库都有清晰的文档，选择使用某个库时，是否有清晰的文档是最重要的判断标准。
这里「清晰」一方面指的是对功能、用法的描述（多数都能做到），另一方面是以我们当前的积累是否能看懂，有很多库的文档我也看不懂，这个问题无解，只能从中按图索骥，慢慢积累。这种问题并不是短期能解决的，不要恋战，当前目标是完成网站，如果这条路走不通果断更换方案，或者选择类似功能、文档「清晰」的其它第三方库。
在使用库的过程中，遇到问题很正常，官方文档可以解决大多数问题，另外一部分问题可以通过「官方 Issues」解决，每个库都有自己的 Issues 页面（以 bricklayer.js 为例），用户会在这里提出问题，你遇到的问题很有可能在这里找到答案，如果没有，就把问题提出来，解决自己问题的同时，还能帮到下一个遇到同样问题的人。提问是个技术活儿，提问的智慧 这个你一定用得上。
「功能」+「搜索」+「文档」，每个功能都不止有一个库，并不是说这些库都一模一样，而是功能相同，但侧重点不同，比如我在用 bricklayer.js 实现瀑布流布局之前，用到的是另一个叫做 masonry.js 的瀑布流布局库。
也挺好用的，可是后来发现它不支持 Flex 布局，而我用的偏偏就是 Flex 布局，还不是完全不支持，经过测试发现，Masonry + Flex 只在 Firefox 浏览器上无法正常显示，那时已经做到一半了，但也没办法，总不能盼着所有访问者都不用 Firefox 浏览器吧，很狼狈，只能换方案，最后才选定 bricklayer.js。
总之，接下来的工作多半会用到第三方库，除了「功能」+「搜索」+「文档」之外，在正式使用前先单独测试一下，也就是说新开一个页面，专门测试某个库中你所需要的功能，测试没问题后再应用到项目中。
除了本地测试，线上调试也是不错的办法，可以节省一点时间，基础代码和环境都已经准备好了，直接写核心代码就可以，JSFiddle 和 CodePen 都是不错的选择。
以上是我不成熟的个人经验，它们不能让你变成三头六臂、头上长角那种很厉害的样子，只希望这一点点经验，能帮你消除对编程的恐惧，以更轻松的心态面对它。个人网站远不是学习编程的终点，只是开始编程的一个可执行的小目标，也是踏入新世界的第一步。
编程只是众多技能点中的其中之一，不是必选项，如果你对这事儿没兴趣，还是把精力投入到自己感兴趣的事情上吧。如果感兴趣，真的很希望你能勇敢迈出这一步，虽然它是漫长的、辛苦的，但新世界会带给你超多意想不到的惊喜，祝你顺利：）
欢迎大家在评论中留言、讨论。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。