2019-03-05-HTML手风琴布局和页面拨号

写一个HTML页面（地址是:https://gdougym.cn）用于展示加油站的分布位置和联系电话。
位置是高德地图的坐标URL，联系电话使用<a href="tel:xxxxx">xxxxx</a>标签的形式，
这样点击电话号码就会跳到系统电话拨号的操作。
页面布局采用了“手风琴菜单”布局，主要代码参考在这里：手风琴菜单
代码里用到font-awesome，相关的教程感觉菜鸟教程做得很不错。
这次也使用了个性化的Web字体，主要使用有字库，感觉还好的样子。
网页托管在一个VPS，这次尝试了使用Apache2的虚拟主机(virtualhost)设置。用一个域名指向VPS的一个主机，这样很方便，也提高了VPS的利用率。关于Apache2虚拟主机的配置主要参考了Apache虚拟主机指南，主要内容摘录如下：

• 先在/etc/apache2/sites-available目录创建一个网站的配置文件，名称不重要，但是扩展名必须是*.conf
• 在上一步创建的配置文件（我创建的文件名是stations.conf）中写入配置

<VirtualHost *:80>
ServerName gdougym.cn
ServerAdmin whatever@mail.gdougym.cn
DocumentRoot "/var/www/stations/"
ErrorLog "/var/log/apache2/edunuke_errors.log"
CustomLog "/var/log/apache2/edunuke_accesses.log" common    
</VirtualHost>

这样就是一个配置文件了。

• 接着使用命令sudo a2ensite stations启用站点
• 运行命令sudo service apache2 restart重启Apache服务器就会重新加载网站了
• 使用Let's Encrypt增加了https功能，命令是sudo certbot --apache -d gdougym.cn

总结

平时Web前端写得太少了，一个简单页面都花不少时间，希望未来几个月会写多些前端代码。Apache2的玩法还未非常熟悉，虽然也想去玩Nginx，不过还想先熟悉一种技术再去看同类替代品，这样应该也很快上手的。
最后修改过的代码放到了GitHub