这篇文章没有任何嵌入式干货，只是对前段时间鼓捣的一个静态个人网站的详细记录。最近想不出什么好的文章方向。下一阶段，我想总结一下之前学习Lua语言的经验，实现一个基于插件机制的物联网网关。或者再深入工业领域，实现一个可以二次开发的工业网关。目前我只有这个模糊的想法，具体会是什么样子还有待更详细的规划。写这个网关的目的有两个：通过Lua语言深入理解一种[语言]，而不仅仅是使用一种语言。实现一个基本上可以在生产中使用的代码模型。这两个目的基本符合我的定位：让有趣的事情变得更有意义。言归正传，回到本文的主题：从无到有，一步步搭建静态个人网站。为什么会有这个网站？作为一名嵌入式软件开发人员，建立一个网站有点扯淡。但是作为一个广义的程序员，经常向往互联网领域的一些技术，所以才有了这个破网站。主要的初衷是：在工作的过程中，经常需要参考一些常用的工具，比如：查找ASCII码；查询shell命令；时间戳转换；格式化Json/xml等文件；...每次遇到以上需求，总要麻烦搜索引擎；即使将一些工具站点保存在收藏夹中，仍然需要按分类区域点击打开。于是我想：有没有可能写一个简单的静态页面，把我经常用到的工具和链接放在里面，每次需要用的时候打开这个页面。也就是说，本站最大的功能就是：工具导航。市场上也有很多这样的网站导航工具。后来发现自己写的文章经常看，于是就把所有的文章归类放到了网站上。于是，我开始使用三足猫的web技术来鼓捣这个网站……我们知道现在已经有很多现成的一键式建站工具，就像黑盒测试一样，我们只需要把我们的数据以指定的格式，处理输入，一个漂亮的页面立刻呈现在你的面前。但是作为一个软件开发者，我还是希望能够偷窥其中的一些细节。在互联网领域，我也是门外汉。于是我舍弃了很多现代方便的工具，从最基本的html、javascript、css开始，一步步搭建起一个静态的个人网站。如果要部署动态网站，需要掌握很多东西：java、jsp、maven、mysql、mybatis、spring。当然，为了避免最后的结果太难看，我也充分“参考”了bootstrap前端开发框架，因为它简单、直观、强大，并且提供了很多免费、漂亮的主题框架。几个页面预览网站的缺陷在发页面之前，先说几个不足：图片太多，导致加载速度太慢。图片我已经全部放到七牛图床，并开启了CDN节点缓存页面，但是有几张大图影响加载速度。以下是PageSpeedInsights在网站上的测试结果：从测试结果我们可以看出主要是图片问题。我已将所有图像转换为.webp格式，但有几张大图像影响了加载速度。由于下面的第二个原因，我还没有准备好进行优化。添加新内容时，需要执行的步骤太多。前面说了，这个网站的主要目的还是个人使用，所以会经常添加新的内容，比如：看到特别好的网站，就需要加个链接。因为在网站导航布局中，为了美化，在网站上放了一张小图片。因此每次添加都需要通过以下步骤完成：对目标网站进行截图；将png格式的图像转换为.图片，上传）；修改静态html页面；上传到网络服务器；更新CDN缓存节点内容；以上步骤想想都烦，用自动化脚本无法实现。基于以上原因，我们后面会重新部署，以实用主义为主。反正这里是目前网站页面的几张截图，下个月可能会删掉，以后可以偶尔回忆一下~~建站流程1.如果服务器部署在公网的网站，那肯定是购买了服务器。在中国，只有三个公司，选择便宜的，有文档的，用户量大的。我用的服务器是之前一个项目用来测试MQTT性能的，后来放弃了，第一年的成本不到100元。购买服务器时需要选择操作系统，这里使用的是Ubuntu18.04。2.域名为了便于记忆，最好注册一个域名。现在的域名很便宜，普通域名30元/年左右。主要原因是域名的注册需要一些时间。现在备案方便多了，直接在手机上就可以了。很久以前的备案需要邮寄一个背景幕布，专门用来拍照的。域名备案完成后，就可以绑定所购买服务器的IP地址，即域名解析。对了，80端口也开放了，因为访问下面的站点需要这个端口。3.html+js+css因为目标是静态网站，基本上大致掌握以上三部分的知识点就可以了。另外为了美化界面，使用了bootstrap的前端框架，还提供了很多漂亮的模板。所以，在保存的过程中，我把每个模板中我用到的部分提取出来，组装在一起，形成了最终的界面。下图是文件结构：写代码的时候用的软件是WebStorm，我觉得很好用！4.图片转换很多网站使用的图片都是webp格式的。它的图像压缩算法更好，文件更小，图像质量更高。它支持alpha透明度和动画。这里主要贴一下如何使用谷歌转换工具将png格式的图片批量转换为webp格式。以下步骤为MAC下操作（1）下载libwebp库brewinstallwebp（2）下载转换工具，解压libwebp-0.6.0-mac-10.12.tar.gz下载地址：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html(3)转换单张图片./cwebp-无损输入图片路径-o输出图片路径(4)批量转换多张图片#!/bin/bashCMD=/<绝对路径>/libwebp-0.6.0-mac-10.12/bin/cwebpforfilein*.pngdo${CMD}-lossless"$file"-o"${file%.*}.webp"done5.安装web服务器有很多可选的web服务器。常用的有tomcat、apache、nginx。当然，还有很多其他的选择，都各有特色。感兴趣的朋友可以搜索各自的场景。我最终选择了nginx。安装命令很简单：sudoapt-getinstallnginx安装文件位置：/usr/sbin/nginx:主程序/etc/nginx:配置文件/usr/share/nginx:静态文件/var/log/nginx:log当然，如果你想更清楚Nginx的配置项放在哪里，可以打开/etc/nginx/nginx.conf这个文件看看。如果想手动安装，步骤如下：sudoapt-getinstalllibpcre3libpcre3-devapt-getinstallopensslapt-getinstallzlib1g-devwgethttp://nginx.org/download/nginx-1.11.3.tar。gzcdnginx-1.11.3/./configuremakemakeinstall启停服务相关命令：sudoservicenginx{start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}启动nginx后，可以测试是否安装成功。如果一切顺利，就可以看到nginx的默认页面了。6、站点部署最简单的操作就是将本地编写的站点代码直接推送到/var/www/html目录下。为了更灵活的部署（例如：在一台服务器上部署多个站点），最好创建与站点无关的目录。nginx的配置文件位于：/etc/nginx，如下图：比较重要的是目录sites-available和sites-enabled。包含目录：请忽略这里的https，那是为了测试ssl访问而设置的。配置文件：/etc/nginx/sites-available/linuxbar.net的内容是：也就是说：所有的文件都放在/var/www/linuxbar.net/html目录下。所以创建这个文件，把第3步的所有文件都push到这个目录下。最终部署的所有文件如下：总结完成以上步骤后，就可以在本地浏览器中输入域名，然后就可以看到漂亮的站点了！7.使用图片床在上面的第6步中，将网站中的所有文件，包括图片文件。浏览器访问站点时，所有文件（尤其是图片）都是直接从Web服务器的链接中获取的，浪费了流量。您可以使用一些免费的图像床来存储图像文件。浏览器拿到html文件后，在加载图片的时候，会从图片文件中获取图片文件，大大减轻了web服务器的压力。我用的是七牛的图床，所以把所有的图片都上传到图床，然后修改html文件中所有图片的链接。当然你也可以选择其他的图床工具，很多都是免费的（收费的也很便宜）。8、使用CDN加速上面第二步：在绑定域名和IP地址时，可以直接将域名解析到对应的web服务器所在的IP地址。您可以使用CDN域名加速功能，提高访问速度，提升用户体验。设置如下：配置完成后，会得到一个cname，然后在域名解析设置中将域名指向这个cname：完成此设置后，在浏览器中输入域名即可访问CDN节点。当然，如果节点中没有内容，就会访问web服务器，缓存最新的页面，然后返回给浏览器。小结本文从初学者的角度讲述了如何从零开始搭建一个静态页面的个人网站。
