不务正业，捣鼓了一个破网站，全过程记录

这篇文章没有什么关于嵌入式的干货，仅仅是详细记录一下前段时间捣鼓的一个静态的个人网站。,最近都没有想到什么好的文章方向，下一阶段想把之前对Lua语言的学习心得总结一下，实现一个基于插件机制的物联网网关。,或者再稍微往工业领域上走一些，实现一个可以二次开发的工业网关。,目前只是有这个模糊的想法，具体做成什么样子还有待更详细的计划。,写这个网关的目的有两个:,通过Lua语言来深入的理解一门【语言】，而不仅仅是使用一门语言。,实现一个基本上可以在生产环节可用的代码模型。,这两个目的基本上符合我的定位：让有意思的事情变得更有意义。,言归正传，回到这篇文章的主题：从头开始，一步一步搭建一个静态的个人网站。,作为一个嵌入式软件开发者来说，搭一个网站有点是不务正业的。,但是作为一名广义上的程序员，又经常对互联网领域的一些技术心生向往，于是就有了这个破网站。,最主要的初衷是：,在工作的过程中，经常需要参考一些常用的工具，比如：,每次在遇到上面这些需求时，总是需要去麻烦搜索引擎；即使把一些工具站点保存在收藏夹中，还需要按照分类区点击、打开。,所以我就想：是否可以写一个简单的、静态的页面，把自己经常使用的工具、链接都放进去，每次需要使用的时候，就打开这个页面就可以了。,换句话说，这个网站的最大作用就是：工具导航。,市面上也有很多这样的工具导航网站的。,后来发现，我也会经常去翻一下自己写的文章，于是就把所有的文章进行分类，然后也放到网站上。,于是，我就开始用三脚猫的web技术捣鼓这个网站...,我们知道，现在已经有很多现成的一键建站工具了，就像黑盒测试一下，我们只需要把自己的资料按照指定的格式、流程输入进去，一个漂亮的页面就立刻出现在面前。,但是作为一名软件开发者，还是希望能够偷窥一下这里面的一些细节。,在互联网领域，我也是一名门外汉。所以就抛弃了很多现代的、方便的工具，从最基本的html、javascript、css开始，一步一个脚印的把一个静态的个人网站给攒起来。,如果要部署一个动态网站，那需要掌握的东西就多了去了：java、jsp、maven、mysql、mybatis、spring那一套。,当然，为了避免最后的结果太难看，我也充分地“借鉴”了bootstrap前端开发框架，因为它简洁、直观、强悍，并且提供了很多免费的、漂亮的主题框架。,网站的缺陷,在贴出页面之前，先说一下几个缺点：,我已经把所有的图片放在七牛的图床上了，也启用了CDN节点来缓存页面，但是其中有几个大图片影响了加载速度。,下面是PageSpeed Insights对网站的测试结果：,,,从测试结果中可以看到，主要还是图片惹的祸。,我已经把所有的图片换成.webp格式了，但是其中几张大的图片影响了加载速度。我也不准备优化了，因为下面第2个原因。,前文说过，这个网站的主要目的还是自用，所以会经常添加新的内容，比如：看到了特别棒的网站，需要把链接添加进去。,由于在网站导航布局中，为了美化一下，使用一个小图片放在站点上。,因此每次添加时，需要下面几个步骤才能完成：,以上这个步骤想想都觉得很烦，而且无法用自动化的脚本来实现。,基于以上这些原因，后面会重新部署一下，还是以实用主义为主。,不管怎样，这里还是把目前网站的页面贴几张截图，下个月可能就被撤掉了，以后也能偶尔回忆一下~~,,,,,,,,,,,,,如果把站点部署在公网上，肯定需要买一个服务器。,国内的话就那么三家，选择便宜、文档、使用人数多的买就行了。,我使用的服务器是之前一个项目中用来测试MQTT性能的，后来废弃不用了，第一年费用不到一百元。,,购买服务器的时候，需要选择操作系统，这里使用的是Ubuntu18.04。,为了便于记忆，最好注册一个域名。,现在的域名很便宜，普通的域名大概30元/年，主要就是域名备案需要花一些时间。,现在备案方便多了，直接在手机上就可以完成。,很久以前的备案，还需要邮寄一块背景幕布，专门用来拍照用。,域名备案完成之后，就可以绑定购买的服务器IP地址了，也就是域名解析。,,顺便把80端口也打开，因为下面需要通过这个端口来访问站点。,,因为目标是一个静态网站，所以基本上粗略的掌握上面这三部分的知识点就足够了。,另外，为了美化一下界面，使用了bootstrap这个前端框架，而且它还提供了很多漂亮的模板。,于是，在攒的过程中，我就把每一个模板中被我使用的部分摘抄出来，组装在一起，形成了最后的界面。,下面这张图是文件结构：,,在写代码的时候，使用的软件是WebStorm，我觉得挺好用！,很多网站使用的图片都是webp​格式，它的图像压缩算法比较好，有更小的文件体积，而且保持很高的图片质量，支持Alpha透明以及动画等特点。,这里主要贴一下如何是用谷歌转换工具，批量的把png​格式的图片转换成webp格式。,以下步骤是在MAC下操作,(1) 下载libwebp的库,(2) 下载转换工具，解压,libwebp-0.6.0-mac-10.12.tar.gz,下载地址：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html,(3) 转换单张图片,(4) 批量转换多张图片,可选的web​服务器有很多，常用的有tomcat、apache、nginx，当然还有很多其它的选择，都有各自的特点。,感兴趣的朋友可以去搜一下它们各自使用的场景，我最后选择的时nginx，安装命令很简单：,安装好的文件位置：,当然，如果要更清楚 Nginx​的配置项放在什么地方，可以打开文件/etc/nginx/nginx.conf 看一下。,如果想手动安装的话，步骤如下：,启动、停止服务的相关命令：,在启动nginx​之后，就可以在浏览器中测试一下安装是否成功，如果一切顺利的话，可以看到nginx的默认页面。,最简单的操作，就是直接把本地写好的站点代码直接推送到/var/www/html目录下即可。,为了更灵活的部署(比如：在一个服务器上部署多个站点)，最好创建站点独立的目录。,nginx​的配置文件位于：/etc/nginx，如下所示：,,比较重要的是目录sites-available和sites-enabled。,目录中包括：,,请忽略这里的 https，那是为了测试 ssl 访问而设置的。,配置文件：/etc/nginx/sites-available/linuxbar.net的内容是：,,也就是说：所有的文件是放在/var/www/linuxbar.net/html目录下。,因此创建这个文件，并且把步骤3中的所有文件推送到这个目录下即可，最终部署的所有文件如下：,,小结,完成以上步骤之后，就可以在本地浏览器中输入域名，然后就可以看到漂亮的网站了！,在上面的第6步中，把所有的文件都放在了站点中，包括图片文件。,当浏览器访问站点的时候，所有的文件(特别是图片)都直接从web服务器的链路里获取，浪费流量。,可以利用一些免费的图床来存放图片文件，浏览器获取html​文件之后，加载图片时，就从图床中获取图片文件，大大减少了web服务器的压力。,我使用的是七牛的图床，因此把所有图片上传到图床上，然后把html文件中对图片的链接全部修改一下就可以了。,当然了，也可以选择其他的图床工具，很多免费的(收费的也很便宜)。,在上面第二步：绑定域名和IP​地址的时候，使域名直接解析到对应的web​服务器所在的IP地址。,可以利用CDN域名加速功能，来提升访问速度，提高用户体验。设置如下：,,配置完成之后，会得到一个cname​，然后在域名解析设置中把域名指向这个cname即可：,,完成这个设置之后，在浏览器中输入域名，将会访问CDN节点。,当然了，如果节点中没有内容，将会访问web服务器，把最新的页面缓存起来，然后再返回给浏览器。,这篇文章从一个初学者的角度，来描述如何从零开始建一个静态页面的个人网站。