不务正业,捣鼓了一个破网站,全过程记录
文章目录
- 为什么会有这个网站
- 预览几个页面
- 网站的缺陷
- 网站搭建过程
- 1. 服务器
- 2. 域名
- 3. html + js + css
- 4. 图片转换
- 5. 安装 web 服务器
- 6. 站点部署
- 小结
- 7. 使用图床
- 8. 使用 CDN 加速
- 总结
别人的经验,我们的阶梯!
这篇文章没有什么关于嵌入式的干货,仅仅是详细记录一下前段时间捣鼓的一个静态的个人网站。
最近都没有想到什么好的文章方向,下一阶段想把之前对Lua
语言的学习心得总结一下,实现一个基于插件机制的物联网网关。
或者再稍微往工业领域上走一些,实现一个可以二次开发的工业网关。
目前只是有这个模糊的想法,具体做成什么样子还有待更详细的计划。
写这个网关的目的有两个:
通过
Lua
语言来深入的理解一门【语言】,而不仅仅是使用一门语言。实现一个基本上可以在生产环节可用的代码模型。
这两个目的基本上符合我的定位:让有意思的事情变得更有意义。
言归正传,回到这篇文章的主题:从头开始,一步一步搭建一个静态的个人网站。
为什么会有这个网站
http://www.linuxbar.net/index.html
作为一个嵌入式软件开发者来说,搭一个网站有点是不务正业的。
但是作为一名广义上的程序员,又经常对互联网领域的一些技术心生向往,于是就有了这个破网站。
最主要的初衷是:
在工作的过程中,经常需要参考一些常用的工具,比如:
查找ASCII码;
查询 shell 指令;
时间戳转换;
格式化 Json/xml 等文档;
。。。
每次在遇到上面这些需求时,总是需要去麻烦搜索引擎;即使把一些工具站点保存在收藏夹中,还需要按照分类区点击、打开。
所以我就想:是否可以写一个简单的、静态的页面,把自己经常使用的工具、链接都放进去,每次需要使用的时候,就打开这个页面就可以了。
换句话说,这个网站的最大作用就是:工具导航。
市面上也有很多这样的工具导航网站的。
后来发现,我也会经常去翻一下自己写的文章,于是就把所有的文章进行分类,然后也放到网站上。
于是,我就开始用三脚猫的web
技术捣鼓这个网站…
我们知道,现在已经有很多现成的一键建站工具了,就像黑盒测试一下,我们只需要把自己的资料按照指定的格式、流程输入进去,一个漂亮的页面就立刻出现在面前。
但是作为一名软件开发者,还是希望能够偷窥一下这里面的一些细节。
在互联网领域,我也是一名门外汉。所以就抛弃了很多现代的、方便的工具,从最基本的html、javascript、css
开始,一步一个脚印的把一个静态的个人网站给攒起来。
如果要部署一个动态网站,那需要掌握的东西就多了去了:
java、jsp、maven、mysql、mybatis、spring
那一套。
当然,为了避免最后的结果太难看,我也充分地“借鉴”了bootstrap
前端开发框架,因为它简洁、直观、强悍,并且提供了很多免费的、漂亮的主题框架。
预览几个页面
网站的缺陷
在贴出页面之前,先说一下几个缺点:
- 图片太多,导致加载的速度太慢。
我已经把所有的图片放在七牛的图床上了,也启用了CDN
节点来缓存页面,但是其中有几个大图片影响了加载速度。
下面是PageSpeed Insights
对网站的测试结果:
从测试结果中可以看到,主要还是图片惹的祸。
我已经把所有的图片换成.webp
格式了,但是其中几张大的图片影响了加载速度。我也不准备优化了,因为下面第2个原因。
- 添加新的内容时,操作步骤太多。
前文说过,这个网站的主要目的还是自用,所以会经常添加新的内容,比如:看到了特别棒的网站,需要把链接添加进去。
由于在网站导航布局中,为了美化一下,使用一个小图片放在站点上。
因此每次添加时,需要下面几个步骤才能完成:
对目标网站进行截图;
把
png
格式的图片转成 .webp 格式;把图片传入到七牛的图床上(需要登录、打开目标位置、选图片、上传);
修改静态的
html
页面;上传到
web
服务器;更新
CDN
缓存节点内容;
以上这个步骤想想都觉得很烦,而且无法用自动化的脚本来实现。
基于以上这些原因,后面会重新部署一下,还是以实用主义为主。
不管怎样,这里还是把目前网站的页面贴几张截图,下个月可能就被撤掉了,以后也能偶尔回忆一下~~
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSSNAxAM-1659878606431)(http://iottown.sewain100.cn/2022/iot714_linuxbar4.png)]
网站搭建过程
1. 服务器
如果把站点部署在公网上,肯定需要买一个服务器。
国内的话就那么三家,选择便宜、文档、使用人数多的买就行了。
我使用的服务器是之前一个项目中用来测试MQTT
性能的,后来废弃不用了,第一年费用不到一百元。
购买服务器的时候,需要选择操作系统,这里使用的是Ubuntu18.04
。
2. 域名
为了便于记忆,最好注册一个域名。
现在的域名很便宜,普通的域名大概30
元/年,主要就是域名备案需要花一些时间。
现在备案方便多了,直接在手机上就可以完成。
很久以前的备案,还需要邮寄一块背景幕布,专门用来拍照用。
域名备案完成之后,就可以绑定购买的服务器IP地址了,也就是域名解析。
顺便把80
端口也打开,因为下面需要通过这个端口来访问站点。
3. html + js + css
因为目标是一个静态网站,所以基本上粗略的掌握上面这三部分的知识点就足够了。
另外,为了美化一下界面,使用了bootstrap
这个前端框架,而且它还提供了很多漂亮的模板。
于是,在攒的过程中,我就把每一个模板中被我使用的部分摘抄出来,组装在一起,形成了最后的界面。
下面这张图是文件结构:
在写代码的时候,使用的软件是WebStorm
,我觉得挺好用!
4. 图片转换
很多网站使用的图片都是webp
格式,它的图像压缩算法比较好,有更小的文件体积,而且保持很高的图片质量,支持Alpha
透明以及动画等特点。
这里主要贴一下如何是用谷歌转换工具,批量的把png
格式的图片转换成webp
格式。
以下步骤是在MAC
下操作
(1) 下载libwebp
的库
brew install webp
(2) 下载转换工具,解压
libwebp-0.6.0-mac-10.12.tar.gz
下载地址:https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
(3) 转换单张图片
./cwebp -lossless 输入图像路径 -o 输出图像路径
(4) 批量转换多张图片
#!/bin/bashCMD=/<绝对路径>/libwebp-0.6.0-mac-10.12/bin/cwebpfor file in *.png
do
${CMD} -lossless "$file" -o "${file%.*}.webp"
done
5. 安装 web 服务器
可选的web
服务器有很多,常用的有tomcat
、apache
、nginx
,当然还有很多其它的选择,都有各自的特点。
感兴趣的朋友可以去搜一下它们各自使用的场景,我最后选择的时nginx
,安装命令很简单:
sudo apt-get install nginx
安装好的文件位置:
/usr/sbin/nginx:主程序
/etc/nginx: 配置文件
/usr/share/nginx:静态文件
/var/log/nginx: 日志
当然,如果要更清楚 Nginx
的配置项放在什么地方,可以打开文件/etc/nginx/nginx.conf
看一下。
如果想手动安装的话,步骤如下:
sudo apt-get install libpcre3 libpcre3-dev
apt-get install openssl
apt-get install zlib1g-dev
wget http://nginx.org/download/nginx-1.11.3.tar.gz
cd nginx-1.11.3/
./configure
make
make install
启动、停止服务的相关命令:
sudo service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}
在启动nginx
之后,就可以在浏览器中测试一下安装是否成功,如果一切顺利的话,可以看到nginx
的默认页面。
6. 站点部署
最简单的操作,就是直接把本地写好的站点代码直接推送到/var/www/html
目录下即可。
为了更灵活的部署(比如:在一个服务器上部署多个站点),最好创建站点独立的目录。
nginx
的配置文件位于:/etc/nginx
,如下所示:
比较重要的是目录sites-available
和sites-enabled
。
目录中包括:
配置文件:/etc/nginx/sites-available/linuxbar.net
的内容是:
也就是说:所有的文件是放在/var/www/linuxbar.net/html
目录下。
因此创建这个文件,并且把步骤3中的所有文件推送到这个目录下即可,最终部署的所有文件如下:
小结
完成以上步骤之后,就可以在本地浏览器中输入域名,然后就可以看到漂亮的网站了!
7. 使用图床
在上面的第6步
中,把所有的文件都放在了站点中,包括图片文件。
当浏览器访问站点的时候,所有的文件(特别是图片)都直接从web
服务器的链路里获取,浪费流量。
可以利用一些免费的图床来存放图片文件,浏览器获取html
文件之后,加载图片时,就从图床中获取图片文件,大大减少了web
服务器的压力。
我使用的是七牛的图床,因此把所有图片上传到图床上,然后把html
文件中对图片的链接全部修改一下就可以了。
当然了,也可以选择其他的图床工具,很多免费的(收费的也很便宜)。
8. 使用 CDN 加速
在上面第二步:绑定域名和IP
地址的时候,使域名直接解析到对应的web
服务器所在的IP
地址。
可以利用CDN
域名加速功能,来提升访问速度,提高用户体验。设置如下:
配置完成之后,会得到一个cname
,然后在域名解析设置中把域名指向这个cname
即可:
完成这个设置之后,在浏览器中输入域名,将会访问CDN
节点。
当然了,如果节点中没有内容,将会访问web
服务器,把最新的页面缓存起来,然后再返回给浏览器。
总结
这篇文章从一个初学者的角度,来描述如何从零开始建一个静态页面的个人网站。
如果文中有描述错误,请不吝赐教!感谢!
------ End ------
推荐阅读
【1】C语言指针-从底层原理到花式技巧,用图文和代码讲解透彻
【2】GCC 链接过程中的【重定位】过程分析
【3】Linux 动态链接过程中的【重定位】底层原理
【4】原来gdb的底层调试原理这么简单
【5】gcc编译时,链接器安排的【虚拟地址】是如何计算出来的?
【6】Linux中对【库函数】的调用进行跟踪的3种【插桩】技巧
不务正业,捣鼓了一个破网站,全过程记录相关推荐
- 捣鼓了一个月的SharePoint
从7月底到现在,对SharePoint有了比较大概的理解.除了文档管理.搜索功能,它的整合能力很强. 由于我们缺少人手.理解有限,有没有这方面的专家愿意兼职有关SharePoint开发?请联系 tow ...
- 捣鼓 Subversion
开始捣鼓Subversion了,准备明天将它用于项目的版本控制. SVN真是个复杂的东西,我又没用过CVS的经验,单单是安装和访问就搞了好长时间. 现在把过程记下来,首先呢,让后来者少走弯路. ...
- 看我是怎样捣鼓Linux的
酝酿了半个月,捣鼓(允许我使用这个词语,因为我非常这个新造的词)了差不多20天,写下我从window倒戈转向Linux 的整个过程. 并不是我不喜欢window,当然也不会是讨厌,从接触PC机开始就别 ...
- 记录一下利用手机捣鼓的一些东西吧
手机排版将就看吧,具体操作自己研究这里只提供思路方向 前言:因为一些事情,所以回家了,电脑也没带,暂时回不去学校,新买的电脑也还没到 就只能用手机捣鼓和总结一些东西了,这里写一些出来,给大家提供一些思 ...
- 一个完美网站的101项指标.第一部分.概述
前言 世 界上最有趣的职业是网站设计师,有人为自己的作品喊价5000美金,有人129美金就行,而很多人根本看不出这两者的差别,我见过一个加拿大 Freelancer 设计师,他的网站上有个报价系统,你 ...
- 捣鼓PlantUML(三、时序图)
简单介绍 时序图(Sequence Diagram),又名序列图.循序图.顺序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作.它可以表示用例的行为顺序,当执行一 ...
- 捣鼓车间 | 学生获奖作品:戒烟帽
全文约3000字,阅读时间8分钟 作者:陈朔(杭州拱墅区新城实验小学) 指导老师:铁熊(捣鼓车间) 本作品曾获得过 2018 年杭州市第三届青少年创客大赛最佳作品奖.2018 年浙江省中小学信息技术创 ...
- 第0节为啥捣鼓Busybox-Vi
一.Busybox是啥? Busybox是嵌入式系统中用于制作根文件系统的主流工具软件.既然是根文件系统,那么,在根文件系统中具备编辑文本的功能将是非常有必要的. 二.什么是Busybox-vi 在嵌 ...
- 在Centos7下捣鼓邮件发送软件sendmail与postfix
虽然只是在整GITLAB过程中的一个小插曲,却意外的难搞, 花了我很多时间,网络上的各种教程与排错众说纷纭,看似简单的功能变得异常复杂. 邮件发送功能, 即MTA做为许多系统的必备,最常用的有send ...
最新文章
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
- Reactor实例解析
- 阿里巴巴硅谷 Istio 专家解读Istio 1.0 发布
- python3中文手册-Python3.4中文手册 chm版
- Android开发 ----------怎样真机调试?
- python分类算法报告_Python机器学习(1)——决策树分类算法
- 直播预告 | 高效视频理解模型的设计及ICCV比赛冠军方案解读
- 无法识别的属性“targetFramework”。请注意属性名称区分大写和小写。错误解决的方法...
- LeetCode 1879. 两个数组最小的异或值之和(状态压缩DP)
- 分布式数据库拆分常用之法
- @程序员,为什么选择 Racket 语言?
- 目标检测(十九)--SoftNMS
- 掌握这4个Word小技巧, 助您论文排版事半功倍~
- 现在才知道,菊花茶可不能随便喝!
- php剪切透明圆,php把图片处理成圆形透明的图片,做圆形透明头像,圆形头像_编程资料分享...
- 【雷达信号处理】脉冲多普勒PD及其MATLAB实现
- 线性表的基本操作实现
- Dubbo配置加载问题
- ssh远程出错Add correct host key in /home/xxx/.ssh/known_hosts to get rid of this message
- CUDA内联汇编和PTX ISA入门指南
热门文章
- cuda学习笔记(4)
- 中英对照的网络游戏术语
- 将谷歌插件打包给别人使用
- WebStorm 支持微信小程序的 rpx 单位
- latex表格横向、纵向合并问题
- C语言编程>第二十周 ② 下列给定程序中,函数fun的功能是:求出数组中最大数和次最大数,并把最大数和b[0]中的数对调、次最大数和b[1]中的数对调。
- linux内部网关协议igp,OSPF基础知识概述
- skewx 字体模糊_Pixelmator:从此修图不再叫做 “PS”
- XCODE性能测试方法
- 物联网常见通信模块介绍