Solo 生成导出静态站点

本贴最后更新于 1759 天前,其中的信息可能已经时移世异

本文是《Solo 从设计到实现》的一个章节,该系列文章将介绍 Solo 这款 Java 博客系统是如何从无到有的,希望大家能通过它对 Solo 从设计到实现有个直观地了解、能为想参与贡献的人介绍清楚项目,也希望能为给重复发明重新定义博客系统的人做个参考 ❤️

自 v3.9.0 开始,Solo 开始支持生成并导出静态站点,以方便用户部署 GitHub Pages 这类静态网站托管服务。实例可见于此:

换句话说,Solo 可以支持在本地 localhost 上写作,然后用户自行部署 Pages 托管站点,这样就不用搭建服务器运维了。Solo 静态部署同样支持浏览量计数和社区评论互动,让静态博客也能和动态博客一样充满生机。

使用流程

  1. 功能入口:管理后台 - 工具 - 静态站点
  2. 输入待生成的静态站点地址,比如 https://88250.github.io
  3. 点击“生成”按钮触发静态站点页面资源生成
  4. 生成完毕后界面会返回导出的目录路径

技术实现

Solos.GEN_STATIC_SITE = true;

genURI("/tags.html");
genURI("/archives.html");
genURI("/links.html");
genURI("/categories.html");
genURI("/index.html");
genURI("/blog/info");
genURI("/manifest.json");
genURI("/rss.xml");

genArticles();
genTags();
genArchives();
genCategories();
genSkins();
genJS();
genImages();
genPlugins();
genFile("sw.js");
genFile("robots.txt");
genFile("CHANGE_LOGS.md");

Solos.GEN_STATIC_SITE = false;
  • genURI :用于生成独立的动态模板页面
  • genArticlesegenTagsgenArchives 等:分别用于生成文章、标签、存档等
  • genJSgenImagesgenPlugins :分别用于生成 JS、图片、插件
  • genFile :用于生产单个的静态文件

对于文章,仅导出:

  • 状态为发布状态的,即不导出草稿夹
  • 没有密码的文章,即公开文章

除了页面相关资源的生成,静态博客站点还需要浏览计数统计和评论功能,为此我们做了两个组件来进行支持:

  • uvstat:博客总浏览数、文章浏览数的计数组件
  • vcomment:提供社区评论,将社区端回帖相关交互特性共享给博客端节点

UVStat

引入 uvstat.js 后将需要统计的计数项用 span 包裹:

<span data-uvstaturl="${servePath}${article.articlePermalink}">${article.articleViewCount}</span>

然后调用 addStat 进行计数请求, renderStat 进行计数结果渲染,细节请参考项目文档。

uvstat 部署在社区服务器上,是 B3log 分布式社区的重要基础设施,Solo 已经全部切换到该服务上实现浏览计数了。

VComment

引入 vcomment.js 后在评论列表处引入:

<div id="vcomment" data-name="${article.authorName}" data-postId="${article.oId}"></div>
<div id="soloComments" class="fn__none">
  <@comments commentList=articleComments article=article></@comments>
</div>

Solo 本地的评论列表依然保留,只是默认不展现,当通过 vcomment “加载为空”后才展现本地评论列表。“加载为空”只有一种情况:该文章没有同步到社区,所以不存在和该文章关联的回帖。

这样用户如果不想推送文章到社区,也可以使用本地的评论系统,如果推送过了,就优先走社区评论系统。走社区评论系统的优势是能够最大限度共享社区交互功能,比如回帖回复、二级评论、感谢、通知等。

技术实现方面主要用到了 CORS,接口完全由社区提供,本地直接加载社区服务端渲染的 HTML,提交时带 CSRF Token 避免跨站脚本攻击。

1 操作
88250 在 2020-02-27 16:45:20 更新了该帖

相关帖子

优质回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Adrift001 1 评论

    感觉有点麻烦...

    1 回复
    我也觉得 😂
    YLongo
  • hjljy

    手动点赞

  • JssDream

    👍

  • CodingOX

    厉害,辛苦了!

  • AlgerFan

    想实现静态站点必须得把计数和评论抽离出来

    1 回复
  • @88250 我发现一个问题,生产的静态文件,url 还是原来博客页面里面的,会跳到原来的网站

    1 回复
  • 88250

    生成前需要指定目标域名,这样就会用指定域名作为链接前缀了。

    1 回复
  • liunian-zy

    生成静态文件的时候,填写的域名是无效的,只有 http 和 https 有效

    1 回复
  • 88250

    是的,需要带协议部分填。

    1 回复
  • liunian-zy

    不是 ,我的意思是,假设我填写 https://blog.liunian.io 是无效的,不会按照我填的来生成 而是使用的我启动容器时指定的域名,但是会使用 https 协议,如果我填 http://blog.liunian.io 会对应生成 http 协议的启动容器时指定的域名。

    1 回复
  • 88250

    我这里没能重现哦。URL 仅校验了格式,不会使用其他参数覆盖的。要不你再仔细试试,打开 F12 看下网络请求参数。

    2 回复
  • iTanken

    我也遇到这种问题了,生成静态站点前指定了目标域名:

    image.png

    生成后查看源码还是原博客的链接:

    image.png

  • liunian-zy

    我又试了几遍 都是这样 docker 容器也删除重新运行了 还是一样

  • 88250 1 赞同

    @iTanken @liunian-zy 感谢两位反馈,我再排查一下看看。

  • 88250 1

    @iTanken @liunian-zy 问题已经修复,请拉取最新镜像重启,辛苦了 😅

    1 回复
  • liunian-zy

    好的~

  • tlbcc

    我也有相同的问题,本地编辑完静态导出后,所有的资源都是 localhost 开头的

    1 回复
  • 88250

    谢谢反馈,v4 将修复,过几天发布。

  • Deecyn

    导出静态文件后,所有的资源都是 localhost 开头的。请问这个问题有修复吗?

    1 回复
  • 88250

    最新的 master 分支上已经修复,正式发布还要再过几天,可能下周发布 v4。

    1 回复
  • Deecyn

    期待。Waiting for you ~

  • PeterChu 1 评论

    image.png

    😆 码云 gitee 部署好啦,开心哈哈哈,就差个好看的皮肤了

    F*** gitee 上的 Pages 每次更新修改后需要重新人肉手动更新一下才能生效。github 上自动生效。
    PeterChu
  • Deecyn

    你好,现在 Solo 的静态站点还不支持搜索功能吗?感觉这个功能挺重要的

    1 回复
  • 88250

    嗯,Solo 导出的静态站点不支持搜索

    1 回复
  • Deecyn

    有考虑在未来增加这个功能吗

    1 回复
  • 88250

    这块暂时没研究如何解决,欢迎提 issue 记录一下。

  • emmith 1

    发现一个 bug,生成静态站点时(win10),要是路径名中有空格,会失败,因为空格变成了占位符 %20,没有空格则不报错

    1 回复
  • 88250

    感谢反馈,请关注 Issue #132 · 88250/solo

  • WuJingcheng

    你好,我这边遇到一个问题,我的 github 用户名格式是 a-bc。但是我第一次导出静态站点的时候不小心输成了 https://a_bc.github.io(-打成了_),之后尽管我修改成了 a-bc,但是我看代码中的各种地址和链接依旧是 a_bc 的。产生的静态页面似乎就比较拉垮,请问这个应该如何解决呢。

    1 回复
  • 88250

    手动删一下 ~/.solo/static-cache 再点生成,这个问题在最新代码上已经修复,后面发布版本就不用手动操作了,谢谢反馈。

  • haoker

    生成静态站点的时候样式失效了,只有首页的可以,然后图标什么的也失效了,要怎么解决呢image.png

    image.png

    1 回复
  • 88250

    F12 看下网络请求

    1 回复
  • haoker

    谢谢哈,已解决,站点导出的时候,没改成 https,导致的请求问题,后面改回来,清空缓存就好了

  • muxiao237

    请问生成之后如何能在网页上访问呢?

    1 回复
  • 88250

    部署到静态网站托管服务上,比如 GitHub Pages 或者 Gitee Pages。

  • muxiao237

    想知道如何部署啊?

    1 回复
  • 88250

    看下他们的帮助文档,或者网络搜索,有非常多的教程可以参考。

  • muxiao237

    哦哦,我弄出来了,谢谢!

  • muxiao237

    请问这该怎么搞啊?我确实是按着 github page 上面的站点生成的啊捕获.JPG 捕获 2.JPG

  • 本来想把 static-site 直接当成仓库的,结果发现会覆盖.git

请输入回帖内容 ...