徒步网站

忘记从什么时候开始，忽然喜欢户外徒步，在组织了几次徒步活动后，慢慢的有了一个小圈子，后来觉得应该把每一次徒步过程记录下来，包括徒步线路、照片、和一些想法，然后就开始了这个项目。

路线记录

既然是记录徒步过程，那第一个事情就是保存徒步线路。网上能找到很多徒步专业设备，考虑到我们是初级入门水平，就不用特别专业的了，最终选择用Garmin的instinct系列手表记录线路。它记录的路线可以导出到本地，是一个gpx文件，里面包含徒步路线、海拔、心率等信息。目前网站上只用到了经纬度信息。

gpx文件是一个xml文件，可以用xml解析器解析，然后把解析的结果保存到数据库中。这里用的是togeojson，解析出来的结果是一个json对象，然后使用mapshaper优化了一下节点信息，主要是减小文件体积，最后存入数据库供mapbox使用。

Mapbox

准备好了线路数据，接下来就是展示了。这里使用了mapbox，项目用是使用的react-map-gl库，它是基于react封装的mapbox库。结合上面之前保存的路线数据，就可以在地图上展示徒步线路了。

云服务

然后就是服务，这里分API服务和数据库服务，我都选择了云服务产品，主要从成本和便捷性上考虑。现在很多云产品对于流量不大的用户都是免费的，这点正好符合我的预期。

vercel

我的nodejs服务放托管在Vercel上，配合Github仓库，可以很方便的实现自动部署。 Vercel在国内访问有时候会有点慢，可以使用自定义域名解决次问题。

云数据库

数据使用的是supabase，它可以创建两个免费项目，虽然有访问上限的限制，但是对于我这种小项目来说，完全够用了。它提供了一个可视化的界面，可以方便的管理数据，配合Vercel的自动部署，可以很方便的实现数据的获取和更新。

OSS

徒步网站有大量的图片，所以需要有个合理的图片存储方案，考虑到访问速度问题，最终选择了阿里云OSS，对与小站而言，它的费用相当于免费，而且它通过API支持了很多很有用的功能，比如图片格式转换、图片大小、图片主题色等。

PWA

registerRoute(
  ({ url }) => url.origin === "https://image-url", 
  
  new CacheFirst({    cacheName: "images",    plugins: [new ExpirationPlugin({ maxEntries: 100 })],  }));

registerRoute(
  ({ url }) =>
    url.origin === "https://api-url" &&
    url.pathname.startsWith("/api/"),
  new NetworkFirst({    cacheName: "api-cache",    plugins: [      new CacheableResponsePlugin({        statuses: [0, 200],      }),    ],  }));

网站添加了PWA支持，它可以让访问者离线访问，也可以添加到手机桌面，方便访问。PWA的实现主要是通过workbox实现的。

我针对不同的资源选择了不同的缓存策略，对于数据请求，我选择了NetworkFirst的策略，这样可以保证数据是最新的，而对于图片资源，我则选择了CacheFirst的策略，因为同名图片不会发生改变，所以直接从缓存中获取就可以了。

添加PWA后访问者可能出现缓存问题，需要监听serviceWorker的updatefound事件，当有新的缓存时，就可以提示用户更新了。

Editor

编辑器我纠结了很久，我原来使用过Draft.js，也使用过TinyMCE，但是都不是很满意，项目之初，我选择了slate，它的高度自定义让我觉得很舒服，但可能因为还处于测试阶段，深入使用后发现对我而言的一些定制需求实现起来比较痛苦，最终选择了TipTap，在看了很多文档后总算是实现了我的需求，但代码还是很不优雅，不确定是我的使用问题，还是本身对React不友好，可能在下个版本中还是要换掉这个库。

Deploy

最后就是部署了，因为项目维护在Github上，所以这次直接使用Github Action，当有新的提交时，Github Action会把编译好的产物部署到我指定的机器上去，从而实现自动部署，整套流程下来真的很方便，强烈推荐。

写在最后

我的徒步网站目前已经完成了第一个版本，可以在上面查看我的徒步记录。目前还有很多功能没有实现，比如评论，点赞，分享等等，后续会陆续实现。

Watcher