站点优化小记

    2016-03-30

    重新整理了下个人小站，并把写过的文字统一迁移过来。本文记录下建设过程及应用到的技术栈。

    一、站点设计

    由于对造轮子的深深执念，以及出于个人的审美偏好，整个站点的元素是在原生 Jekyll-Bootstrap 上一点一点丰富出来的；设计上参考了 Hexo 的很多优秀主题 Hexo Themes，以及 Jekyll Themes.

    结构上大体沿袭了 Jekyll 的预定义布局，只是丰富了主页，加入了个人推销个人介绍，及每篇 post 的图文支持。

    二、关于静态站点

    1. Markdown

    Markdown 作为一种轻量级标记语言，允许撰写者专注于内容，而将样式表现交由解析器和 Web 发布框架处理；另外内容和样式的分离，也有利于文本的可读性以及版本管理。

    2. 静态网站 / 动态网站

    动态网站，即 WebServer 基于传入的 HTTP Requests，同服务端进程交互、并动态生成 Response. 静态站点的 WebServer 仅基于请求的 URL、返回文件系统上对应的静态资源。

    相对而言，动态网站缺点有：

    • 安全性（如易遭受注入攻击）
    • 性能
    • 缓存策略

    对于很多没有 WebAdmin 的个人站点及企业门户而言，快速进行内容生成和发布是最核心的需求；很多 Static Web Generators 已经成为商业化 Web 建站服务的流行方案了。

    像 Dreamweaver 和 FrontPage 这样的桌面应用程序，通过可见即可得编辑器、为构建以内容为驱动的网站提供了解决方案。网页被分成了导航栏、标题栏、页脚栏等可重用部分，某种程度上就是最早的静态网站生成器。但是无法满足现代网站构建中设计与内容分离的需求。于是 LAMP 技术栈及诸如 WordPress, Drupal 等 CMS 成为主流。

    参考阅读：

    3. 静态网站构建的核心

    • Markdown: 内容撰写，上文已经介绍
    • 模版: 将网站分解成可重用的布局组件和包含组件（Jekyll 工程的目录结构清晰看到：_Layout, _Include）
    • 元数据: 在各独立文档的顶部、通常采用 YAML 格式，以便加入一些额外数据
    • 工具链: 如 Jekyll CLI，可以方便完成资源编译、打包等工作
    • CSS 框架/主题资源: 为站点提供一些优秀设计和样式定义，减少 WebUI 定制化的工作
    • 网站托管服务: 如 Github Pages 等 Static Web Host 方案，或使用 VPS 部署

    三、环境依赖 / 工具索引

    1. Ruby / RubyGems

    2. 静态站点生成器

    Jekyll 3.0，可以选集成 Bootstrap 主题的 Jekyll-Bootstrap. 关于 Jekyll 定制及拓展：

    推荐使用 guard, guard-livereload 并配合 Chrome 插件 LiveReload 实现浏览器实时更新：

    3. Markdown 解析器

    kramdown，也是 Github Pages 当前仅支持的解析器

    此外，kramdown 支持自动生成 TOC（即内容摘要），在每篇 post 正文开始前加入

    * TOC
{:toc}

    可以修改 Rakefile 以便在 rake post 创建文章时自动插入 TOC 标记。

    4. 文本编辑器

    写作依赖于良好的编辑器支持，Vim 用户可选 plasticboy/vim-markdown 插件，图示为 Solarized Colorscheme + Light Background 效果。

    也可以使用在线的可见即可得的编辑器（如 StackEdit），或本地的 Mkd 编辑器软件（如 OS X 下可选 Mou）

    5. WebUI 定制

    • CSS 框架 选用了 Bootstrap，响应式的网格系统（Grid System）非常适用于文章类的页面排版
    • 页面代码段的 语法高亮支持，使用 Google-Code-Prettify，另有丰富的 配色主题 可选
    • jQuery / Boostrap 等资源加载可以使用 BootCDN
    • 评论服务 使用了 Disqus
    • 搜索服务 使用了 Simple-Jekyll-Search. 这里搜索是静态的，即预定义一个 JSON 结构、包含一些全站信息的模版标签（如各文章标题、分类等），Jekyll 构建时会自动替换模版变量；客户端 Ajax 请求下来并进行检索即可
    • 页面统计、访问跟踪 使用了 Google Analytics，使用 GA 的话推荐一个 Chrome 插件 Page Analytics (by Google)

    • 页面调试 Chrome DevTools 提供了很多丰富功能，比如查看页面请求优化情况、模拟移动设备访问、禁用缓存、模拟低速网络等。Safari 中的响应式设计查看功能也很不错，比如 Flexbox 布局在 Safari 下的 Bug 就是这么发现的（虽然弃用 Flexbox 解决的）
    • 前端代码构建 使用 Gulp 完成 静态代码检测 ( gulp-jshint )、JavaScript / CSS 合并压缩 ( gulp-uglify / gulp-concat / gulp-clean-css )、图片压缩 ( imagemin-pngquant ) 等。查看 gulpfile.js

    6. 站点托管 / CDN 加速

    Github Pages / Coding.net（国内线路）

    7. 域名配置

    通过 DNSPod 来解析域名。配置完成后，建议将 TTL 默认值增大（如 TTL=86400），以增加域名解析记录在 DNS 服务器上的缓存时间。更新域名解析时候（如站点 IP 更换），将 TTL 调整为可设定的最小值即可。

    通过 dig wyh.life 查询 NS 及域名解析耗时等。

    详细了解 DNS: http://wyh.life/article/2015/04/10/dns

    8. 图文内容

    图文大多来自 PEXELS: Best free stock photos in one place. 另使用了 jQuery-unveil 来进行图片的延迟加载，以优化访问体验。

    团床选择：七牛云存储

    9. 站点测试

    主要的测试项：

    • 站点可用性，页面结构的响应式呈现
    • 性能指标，首屏加载时间限定在4s内完成

    被测对象：

    • 站点的 JavaScript/CSS
    • 布局模版
    • 平台服务的可用性

    注，性能更多依赖于服务器和链路，比如 Github / Coding Pages CDN、Bootstrap / jQuery 等资源引用 CDN、DNSPod、图床、页面插件等；JavaScript / CSS 带来的性能下降的可能性相对较小，但也需一套持续的测试自动化系统检测潜在的 Performance Regressions.

    这里采用了工具 phantomas 以及一个 Grunt 插件 grunt-phantomas，支持生成可视化图表。phantomas 可以支持限定一些指标 ( budgets )，当实际性能没有达标时会抛出 Assertion Error，如下图为测试首图加载时间是否在2s内（未达标，标红告警）

    phantomas 对加载过程的截屏

    持续集成测试，尝试了通过 Travis CI 进行，并把 grunt-phantomas 跑出的产物上传回 Github Repo 的 gh-pages 分支。但鉴于主要的性能瓶颈点都是网络环境，Travis 容器（身在墙外）跑出来的 Benchmark 参考意义不是很大。更有效的策略是本地跑一个 cron job，实测水深火热的网络环境下的性能指标。

    另外也可以尝试 Google 的 Page Speed Insight，或者 Node 的命令行版本 psi；需要梯子。

    页面结构比对计划使用 CasperJS 实现，后续了解下。

    参考文章

    10. 功能展望

    在浏览学习一些优秀静态站点时，发现一些不错的 Feature，记录在此：

    • 从 Git 中提取文章对应的 Commit 信息，作为修订记录附注在文章页面
    • 根据文章字数，生成预估的阅读时长（如10分钟），随着向下滚动递减剩余阅读时长