本博客是使用最原始的方式实现的，和别人的高端玩法不一样，最简单就是最好的。本博客是使用 Hexo 框架，按照FelicxFoster项目的教程部署生成的静态页面，并在生成的页面模板的基础上进行了修改，扔掉了 Hexo 框架，做成了原生 HTML + CSS + JS 的前端静态网站。使用 Service Workers 对所有静态文件进行缓存，使用 PWA 技术将博客网站“安装”到手机上，像使用 APP 一样流畅的浏览博客。
页面样式
本博客的所有页面可以分为左中右 3 个部分，在手机端查看网站时，左边部分和右边部分会收起来，只展示出中间的内容。
PC 浏览器上的样式
手机浏览器上的样式
左边部分的内容在所有页面都是一样的，已将这部分提取出来模块化了，页面只需要引用这个模块即可。
中间部分可细分为上中下 3 个部分，上面部分在 PC 端浏览器上是隐藏的，只在手机端浏览器上显示，此部分也模块化了；中间部分是博客的内容了，每个页面都不一样，写博客也就是主要写这一部分；下面部分是每篇博客固定的内容，同样也模块化了。
右边部分的内容的框架是固定的，没有目录的时候展示的是默认内容，有目录的时候展示的是目录，目录是自动生成的，此部分也模块化了，只需要按需引用即可。
开始写博客
1、可以先复制一个已有的博客的 html 文件
2、把多余的内容删掉，然后手动写新的内容
3、博客标题用的是 h1 标签，一级目录是 h2 标签，二级目录是 h3 标签，依此类推
4、正文内容用 p 标签写，一个 p 标签是一个段落，段落首行默认缩进 2 个字符，段前间距 1 行
5、如果段落不需要段间距，p 标签需要添加 class non-row md-indent
6、图片直接使用 img 标签，建议添加 loading="lazy" 属性以实现懒加载
7、无序列表使用 ul 和 li 标签
8、特殊字符、名字、变量等可使用 code 标签
9、代码、脚本等可使用 pre 和 code 标签
静态文件缓存
由于本博客网站是纯静态页面，静态资源文件都比较小，故可以通过缓存提高网站加载速度，优化用户体验。通过调研，选用 Service Workers 缓存方案把所有静态文件缓存到本地。
Service Workers 是一种由浏览器在后台独立运行的脚本，通过事件来处理网络请求、缓存资源和处理消息推送等任务。更重要的是 Service Workers 可以保证在断网的情况下仍可以正常浏览本地缓存的内容。
那如何触发缓存事件来缓存静态文件呢？你只需要浏览博客即可自动触发缓存，只会缓存已经浏览过的博客，缓存过的博客再次浏览不会消耗流量，所以博客网站的使用体验和有没有网、网络好不好没有任何关系。当然了，当网站更新了，会重新触发缓存，之前缓存的文件都将会失效。
PWA
渐进式 Web 应用（Progressive Web Apps, PWA）是一种 Web 应用，通过现代 Web 技术和标准，提供类似原生应用的体验。PWA 不仅可以在浏览器中运行，还可以在移动设备上像原生应用一样运行，无需通过应用商店安装。因为是在浏览器中运行，所以天生支持跨平台，不管是 Android、IOS、Windows、鸿蒙等系统，还是 PC、平板和手机，都可以运行 PWA，唯一的区别是不同的浏览器对 PWA 的支持不一样，经过有限的测试，发现 Chrome 浏览器对 PWA 支持最好，其次是 Edge 浏览器，然后是其他浏览器。
当你使用手机浏览器访问博客网站时，一般情况下会有类似下图的提示，这里的安装需要加个引号，因为它不是像手机 App 那种方式安装，它只是把网站添加到主屏幕上，只是看起来像一个 App 而已，运行时还是需要在浏览器中才能运行，所以“安装”它比安装任何 App 都要安全。
如果没有出现下图的提示，可以多刷新页面几次；刷新页面后还是没有提示，可以在手机网页设置里找到 添加到主屏幕 或 添加到桌面 即可。
若想获取比较好的 PWA 使用体验，可以在手机上安装 Chrome 或 Edge 浏览器，但是由于众所周知的原因，国内安装 Chrome 比较麻烦，所以这里推荐安装 Edge 浏览器。
“安装”完成后，打开浏览博客，页面会自动缓存，以后即使没网也可以正常浏览博客。
本地部署
1、克隆本项目
git clone https://github.com/leeyoshinari/myBlog.git2、选择你喜欢的 Web 服务器用于提供静态文件服务，这里推荐使用 Nginx，你也可以选择其他的工具或方法
3、在浏览器中打开本地服务链接即可
代码托管
有很多静态/动态代码托管网站，这里推荐使用 Vercel，它在国内访问速度还可以，唯一就是自动生成的域名国内无法访问，因此需要绑定一个域名，点我立即开始部署
也可在其他代码托管网站部署，可自行探索。
网站升级
修改 sw.js 文件中的第一行的版本号，网站加载时会自动验证版本，如果网站的版本和本地缓存的版本不一致，就会重新加载网页。