Ghost

关于ghost:Ghost-博客-SSL-证书过期的解决办法

问题明天拜访我的 Ghost 博客的时候，发现进不去了：网上找的图，不过就是这个样子，过后忘了截图点击高级也没有进去的链接，而且页面地址后面写着”不平安“，证书显示也曾经过期一个月了。而且我本人部署的 flask 服务也拜访不了了。起因Ghost 自身其实会主动 renew 证书，可应用如下命令查看定时工作： $ sudo crontab -l14 0 * * * "/etc/letsencrypt"/acme.sh --cron --home "/etc/letsencrypt" > /dev/null有这个输入就示意会主动 renew。然而依据网上的说法，Ghost 没有及时降级 /etc/letsencrypt/acme.sh 版本，造成 renew 失败之类的。我看同目录下的 account.conf 中有一行是这样的： #AUTO_UPGRADE="1"主动降级默认是被正文掉的，不过我也不能百分比确定勾销正文就会主动降级。具体我也不是很懂，就不多说了，就提一嘴。解决所以总而言之，就是要降级 acme.sh 而后重启 Ghost。进入 acme.sh 目录： $ cd /etc/letsencrypt备份原文件： $ sudo cp acme.sh acme.sh.bk降级： $ sudo ./acme.sh --upgrade./acme.sh: line 6192: cd: /home/username/.acme.sh: No such file or directory[Fri Apr 30 09:47:22 CST 2021] Installing from online archive.[Fri Apr 30 09:47:22 CST 2021] Downloading https://github.com/Neilpang/acme.sh/archive/master.tar.gztouch: cannot touch '/home/username/.acme.sh/http.header': No such file or directory[Fri Apr 30 09:48:36 CST 2021] Extracting master.tar.gz[Fri Apr 30 09:48:36 CST 2021] It is recommended to install socat first.[Fri Apr 30 09:48:36 CST 2021] We use socat for standalone server if you use standalone mode.[Fri Apr 30 09:48:36 CST 2021] If you don't use standalone mode, just ignore this warning.[Fri Apr 30 09:48:36 CST 2021] Installing to /home/username/.acme.sh[Fri Apr 30 09:48:36 CST 2021] Installed to /home/username/.acme.sh/acme.sh[Fri Apr 30 09:48:36 CST 2021] Good, bash is found, so change the shebang to use bash as preferred.[Fri Apr 30 09:48:37 CST 2021] OK[Fri Apr 30 09:48:37 CST 2021] Install success![Fri Apr 30 09:48:37 CST 2021] Upgrade success!降级后的文件是放在 home 目录下的，所以要 cp 过去： ...

hostingranking.cn·基于ghost的轻量技术架构整理

本篇纯粹只讲hostingranking.cn网站的技术架构，也就是怎么做到的，达到什么效果。至于它是什么，为什么要做暂且不说，另篇会分享。技术组成首先hostingranking.cn是基于ghost博客平台而构建的，ghost最强大的部分就是可以最大限度的让你DIY网站，能力特别强。如下是技术组成图：技术讲解运行环境用途GhostNodejs博客平台，可供主题创作的环境，博客管理，SEO等一系列可插拔的功能JQueryJavascript前端js交互handlebar-网页模板spring bootjava提供后端服务，连接第三方服务typeform 第三方问卷调查服务mailchimp 第三方邮件服务主要功能ghost主题制作，呈现网站基本内容个性化主机推荐博客ghost主题制作ghost主题制作非常简单，只要你会写js+html+css即可制作，另外最好要学会handlebar模板语言，会让你制作主题事半功倍，入门制作教程参考我另一篇文章：https://cmlanche.com/2018/08/…个性化主机推荐基本流程如下采用typeform来制作表单开启typeform的webhook，意思就是当客户提交表单的时候，会往这个webhook url发送一个post请求，来告诉你有用户提交了，以及提交的数据。spring boot是我们的后端服务，专门用来制作webhook接口的，不要把webhook想的很神圣，没什么难的，webhook接口其实就是一个普通接口，只是它被用来处理webhook发送来的数据罢了。spring boot收到typeform提交的问卷信息后，去调用mailchimp的api，创建邮件，发送给客户。活动图如下我最终通过spring Boot接收webhook传递过来的不同数据，生成不同的推荐结果。你可以在hostingranking.cn的实现效果，看自己是否能收到邮件，收到的是什么。typeform强大的问卷调查产品，体验无与伦比，生成的文件简单简洁，完整的api支撑，对刚起步的新手产品免费支持，更重要的是，支持中文！在国内访问畅通无阻！下图是我hostingranking.cn产品涉及到的问卷设计：mailchimp世界上最常用的邮箱市场营销工具，好处如下：完全的开放，完整的api支持，支持用zapper连接上百款常用产品中国访问速度还可以，用api调用无碍诚意满满的新手产品扶助计划，帮助新产品达到足够规模再收费！按照上面说的个性化功能，当你提交问卷之后，我的mailchimp后台会看到发送状态，以及打开和点击的状态，如下图：一点吐槽：看到typeform和mailchimp，我想国外的东西做的真是开放，各种api都支持，反观国内，则各种保护，就比如知乎、博客园、segmentfault等都是不开放api的，这点让我觉得国内还不够开放。博客博客功能是ghost内置的核心功能，目前我没有在hostingranking.cn中开放，因为博客页面和详情页面的功能还没做好，等做好了再贴图了。先用我的个人博客网站代替了：https://cmlanche.com (托管在github pages上的)附hostingranking.cn网站托管在Vultr主机上，买的最低配的VPS，每个月5美金如果你要买它的主机并且你的主要客户在大陆的话，你一定要买日本的主机，不要买美国和新加坡的，因为日本的平均ping值是最低的，大约一百多，新加坡的主机会绕过日本再到中国，慢一些，而美国的大概两三百。

Ghost配置6——首页太阳系动画效果

最近在逛知乎时，意外发现了一组CSS效果，其中一个太阳系运行的动画吸引了我。于是我决定把这个效果加到个人博客的首页头部中来。修改首页首页对应的文件是index.hbs，找到其中的header内容，并修改为：<header class=“site-header outer”> <div class=‘solar-syst’> <div class=‘sun’></div> <div class=‘mercury’></div> <div class=‘venus’></div> <div class=‘earth’></div> <div class=‘mars’></div> <div class=‘jupiter’></div> <div class=‘saturn’></div> <div class=‘uranus’></div> <div class=‘neptune’></div> <div class=‘pluto’></div> <div class=‘asteroids-belt’></div> </div> <div class=“inner”> {{> “site-nav”}} </div></header>编写CSScss代码在作者的codepen上有说明，注意选择编译后的css进行查看。我个人写了一个solar.css保存其内容。.solar-syst以上的css代码都可以删除，并且在该类中加入背景属性：.solar-syst { background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%); margin: 0 auto; width: 100%; height: 600px; position: relative;}…添加CSS部署css编辑好的solar.css文件，放置在ghost/content/themes/casper/assets/css下面。引入css修改default.hbs，在header中加入css引用。…<head> … <link rel=“stylesheet” type=“text/css” href="{{asset “css/solar.css”}}" /> …</head><body …>…</body>以上工作完成后，重启Ghost即可查看博客的新动画效果。

Ghost配置5——添加归档页面

用了一个来月，总体来讲Ghost是令人满意的。虽然界面可配置化程度不如WordPress，但一些小的功能定制起来也非常容易。例如添加一个归档页面。添加静态页面在ghost博客中，每一个发表的文章都会有一个对应的URL地址。如果你不想让它出现在首页的文章列表中，仅希望使用自定义的链接去访问它，那么就需要用到Ghost的静态页面功能。如下图所示：将Turn this post into a page选中，这篇文章将不会出现在文章列表中。添加页面模板点击发布归档以后，使用指定的URL在浏览器中去访问，会出现404的错误。因为博客系统找不到对应的模板去显示页面内容。这个时候，需要手动在ghost目录下创建该页面的文件。以本文为例，为归档页面指定了访问URL为xxx/archives，所以在ghost/content/themes/casper下，要创建一个page-archives.hbs文件。关于生成页面元素的脚本，网络上大部分帖子都是在这个hbs中加入了相关jquery的处理。但这有一个不便之处：修改的是页面文件，所以每次修改都需要重启ghost。所以笔者决定使用code injection的功能，将相关脚本注入到页面中。添加元素脚本脚本分两部分：1.生成对应的HTML元素，2.元素CSS样式生成HTML这部分主要是参考了这篇帖子，使用Ghost的API取得对应文章的相关属性进行显示。这部分的脚本，要注入到归档这篇文章的code injection中（不是全局！）<!– 注入到Post Footer中 –><script type = “text/javascript”>/** * 调用ghost API，完成文章归档功能 * 所需组件：jQuery、moment.js * @ldsun.com */jQuery(document).ready(function() { //获取所有文章数据，按照发表时间排列 $.get(ghost.url.api(‘posts’, { limit: ‘all’, order: “published_at desc” })).done(function(data) { var posts = data.posts; var count = posts.length; for (var i = 0; i < count; i++) { //调用comentjs对时间戳进行操作 //由于ghost默认是CST时区，所以日期会有出入，这里消除时区差 var time = moment(posts[i].published_at).utcOffset("-08:00"); var year = time.get(‘y’); var month = time.get(‘M’)+1; var date = time.get(‘D’); if( date<10 ) date = “0”+date; var title = posts[i].title; var url = “{{@blog.url}}"+posts[i].url; var img = posts[i].feature_image; //首篇文章与其余文章分步操作 if (i > 0) { var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00”).get(‘month’)+1; //如果当前文章的发表月份与前篇文章发表月份相同，则在该月份ul下插入该文章 if (month == pre_month) { var html = “<li><time>"+ month + “/” + date +"</time><div style=‘background-image: url(” + img + “)’ /><a href=’"+url+”’>"+title+"</a></li>"; $(html).appendTo(".archives .list-"+year+"-"+month); } //当月份不同时，插入新的月份 else{ var html = “<div class=‘item’><h3><i class=‘fa fa-calendar fa-fw’ aria-hidden=‘true’></i> “+year+”-"+month+"</h3><ul class=‘archives-list list-"+year+”-"+month+"’><li><time>"+date+“日</time><a href=’"+url+”’>"+title+"</a></li></ul></div>"; $(html).appendTo(’.archives’); } }else{ var html = “<div class=‘item’><h3><i class=‘fa fa-calendar fa-fw’ aria-hidden=‘true’></i> “+year+”-"+month+"</h3><ul class=‘archives-list list-"+year+”-"+month+"’><li><time>"+month+"/"+date+"</time><div style=‘background-image: url(" + img + “)’ /><a href=’"+url+”’>"+title+"</a></li></ul></div>"; $(html).appendTo(’.archives’); } } }).fail(function(err) { console.log(err); });});</script>创建CSS样式以下内容注入到Post Header中<!– 脚本需要用到moment.js依赖 –><script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script><!– CSS样式定义 –><style type=“text/css”>ul.archives-list li { display: flex; margin-bottom: 8px; background-color: #FFEFEF; padding: 8px; border-radius: 4px;}ul.archives-list li time { margin-right: 16px;}ul.archives-list li a { flex: 1;}ul.archives-list li div { margin-right: 16px; width: 60px; height: 40px; background-size: cover; background-position: center;}</style>添加导航在Ghost后台的Design中，可以添加一条导航路径，点击保存即可看到在网站的导航中出现了对应的链接。重启Ghost以上简单4步完成后，重启Ghost即可查看效果。如果对CSS效果有自己的想法，可以随时修改注入的js和css代码。重新发布即可，无需重启Ghost! ...