博客 | Memory

大多数的静态博客会使用 Markdown 进行写作，因为它的格式简单，但是 Markdown 也有它的不足之处。当我们想要将图片或者视频等加入到文章内容中时，Markdown 本身并不能提供很好的支持，因此不得不将一些 HTML 片段加入到 Markdown 内容中。尽管在一些简单的场景中这样做能够解决问题，但是却破坏了 Markdown 文件的简洁性质。另外如果想对一些内容进行装饰也变得非常麻烦，而且不能起到复用的效果。为此，Hugo 引入了 shortcodes，允许我们在 Markdown 文件中以一种简洁的形式书写 HTML。本文记录了此博客中实现和使用到的一些 shortcodes。图片在博客内容中插入图片是一个常见的需求，Markdown 语法本身也支持图片的插入。但是如果要对图像的大小，图像的位置进行修改就需要在 Markdown 文件中直接使用 HTML 进行控制，如果更进一步对图像添加描述，或者使用 CSS 对图像进行修饰就变得比较麻烦，为此本博客中针对图像显示问题实现了多个 shortcodes，用于增强博客的图像显示功能。下面是实现的用于插入图片的 shortcodes 的实际效果：样式一： <!DOCTYPE html> 图1. 通过 Hugo shortcode 插入图片，并在图片底部加入图片描述样式二： <!DOCTYPE html> Youtube 为了进一步丰富博客的内容，本博客还添加了对视频的支持，在博客内容中对 Youtube 的视频内容进行嵌入，并支持播放和调转到官方网站进行播放，下面是实际效果： Youtube 视频 (由于国内无法直接播放 Youtube 视频，这里采用图片的方式对最终的效果进行了展示) Podcast / Music Markdown 本身并不支持对音频的插入，使用 HTML 虽然能够简单的完成音频的插入，但是其显示效果并不美观，并且仅仅支持播放、暂停。为了让博客支持插入播客等音频内容，本博客实现了一个播放器，效果如下: <!DOCTYPE html> Hold My Hand Lady Gaga Your browser does not support the audio tag. ...

技术选型与可替代方案在搭建博客的过程中涉及到很多的选择，例如我们会考虑博客的类型，是使用静态博客还是动态博客。之后又涉及到博客框架的选择，当前有很多的框架可供我们选择，如果所有的选择都不满意甚至可以考虑自己从头设计一个或者基于一个框架或者主题等进行个性化的修改。我们的博客最终是需要通过互联网可访问的，这又涉及到我们将其部署在哪里，采用何种方式进行部署。下表展示了本站的技术选型以及其他一些可替代的方案。在本文的剩余内容中，我也将从这几个方面对本站的建设进行说明。技术选型替代方案类型静态博客 WordPress 等动态博客框架 Hugo Hexo, Jekyll 评论 Twikoo Valine 等第三方评论系统部署平台腾讯云 GitHubPages，阿里云 / 华为云 / AWS / Azure / Digital Ocean 等主流云平台存储腾讯云 COS 阿里云OSS，七牛云等持续集成 Github Actions Travis CI，Gitlab CI 等主题 PaperMode 博客类型选择目前个人搭建博客通常会有两种选择：静态博客和动态博客。静态博客其格式一般为静态网页。动态博客则是通过与后端数据库交互，再动态渲染而成的。每当用户访问博客时浏览器会发送 HTTP 请求到后端服务，后端服务查询数据库，渲染页面返回给用户的浏览器。因此，动态博客需要更多计算资源和存储资源。相比而言，静态博客的资源占用更少，访问速度也更快，同时安全性更高。因此本站选择的是静态博客这种类型。框架选择目前有很多的博客框架可供我们进行选择，那么我们该如何进行选择呢？通常而言我认为需要从以下几个方面进行考虑：框架的使用者数量要多。选择一个大家都在使用的框架在后面遇到问题的时候能够更好的寻找解决方案。同时，一个使用者数量多的博客生成框架通常也意味着会有更多的主题可供选择。框架的文档完善。在考虑各个框架的时候我们还要看它的文档是否是完善的。一般而言，文档通常都是英文的，对于英文不好的人还可以考虑是否有完善的中文文档。框架的性能。由于我们最终部署的是静态网页，因此我认为对于一个框架的性能不是我们主要需要考虑的。在综合考虑了上面的几个方面后，我最终选择了Hugo 作为本站的构建框架。Hugo 是最流行的开源静态站点生成器之一，有着丰富的主题可供选择，而且其构建过程简单灵活。评论系统为了在博客上提供一个交流平台，通常都需要建设一个评论系统。动态博客其服务器上通常有评论相关的数据库可以非常方便的实现评论功能，但是对于静态博客，通常就需要一些第三方的评论系统来进行支持。这方面的选择非常多，但是很多都不是一个完美的方案。对于本站最终选择的是Twikoo，一个简洁、安全、免费的静态网站评论系统，是基于腾讯云开发的。该评论系统的文档是中文的，并且比较完善，参考起文档可以非常方便的进行部署。部署平台与存储在网站的部署平台上可分为两大类，一类是使用 GitHub Pages 这样的服务，部署非常的简单，但是问题是访问速度可能比较慢。另外一类方案就是借助一些云平台提供的服务进行部署。国内可供选择的有阿里云、腾讯云、华为云等，但是在部署网站的时候需要进行备案。国外也有很多云平台可供选择，甚至价格更低，但是通常访问速度可能偏慢。对于一些内容的存储如图片等，我们可以直接选择使用服务器进行存储，但是如果数量比较大的话可能加重服务器的存储负担，因此另外一种选择就是使用一些云厂商提供的对象存储服务。本站采用了腾讯云的 COS 服务作为图像等内容的存储。持续集成我们搭建了博客之后通常是需要时常进行更新的，这就涉及到网站的部署与集成，如果每次进行更新之后都手动进行服务器的上传就显得比较麻烦，因此我们可以考虑采用持续集成的方案。如果你使用 Github 托管静态博客的代码，那么 Github Actions 更是你自动化部署的不二选择！使用 GitHub Actions 之后每次我们只用在内容上进行更新，然后将其 Push 到远程仓库的对应仓库就能实现对应的自动化部署，非常方便。当然也有其他非常好的 CI/CD 工具可以选择，如 Travis CI 等。 ...

博客

Hugo Shortcodes 示例

个人博客技术选型与实践