升级ghost博客系统

背景

最近把云服务器从阿里云迁移到了腾讯云,另外域名也是可以迁移的不用再做验证,所以把ghost的服务也迁移了。之前用的还是1.0版本之前的,一晃7年过去了,现在已经到了4.*版本,想了一下还是使用新的吧。

优点: 整体更像是一个产品了,插件完备,安装管理更简单;

不足:1)不能迁移旧的blog(只能中间找个1.0过渡),所以我只是手动copy了一些可能还会用到的过来。2)不再是之前那种能看到Markdown原文和预览的两层了,只能看到预览的结果不太方便。

服务部署

过程基本上是参考的这篇文章

手动搭建 Ghost 博客

然后mysql8的安装初始化密码比较麻烦,直接参考这个文章做的手动配置https://blog.csdn.net/haveqing/article/details/106469854

主题优化

选择了:https://github.com/xiaoluoboding/ghost-theme-kaldorei这个之前就一直在用的kaldorei的主题,看了一下作者现在在京东做前端了,主题很不错,几个月前还有一点改动说明在持续关注,感谢!

插件

在Settings -》Code injection中插入了下面的插件,包括了:代码显示行数、修改字体字号、支持公式、支持gittalk的css(js我直接改的代码中的partials/comments.hbs)


<!-- use solarized-light style 用来支持代码行 -->
<link rel="stylesheet" type="text/css" href="/assets/plugins/highlight-latest/styles/solarized-light.css" />
<script>
  var hljsSettings = {
    lineNumber: true,  // 可选值 flase / true, 默认为 false
    mode: 'dark'  // 可选值 dark / light,默认为 'dark'
  };
</script>


<!-- 下面这些是字体 -->
<style>
:root {
  --linenumber-dark-bg: #282c34;
  --linenumber-light-bg: #c5d2d9;
}
</style>

<style>
:root {
  /* Colours */
  --primary-color: #009a61;
  --primary-light-hover: #017e66;
  --primary-dark-hover: #004e31;
  --font-color: #2c3f51;
  --background-color: #F5F7F9;
  --border-color: #ebf2f6;
  --selection-color: #16a085;
  --post-meta: #9EABB3;


  --darkgrey: #15171A;
  --midgrey: #738a94;
  --lightgrey: #c5d2d9;
  --whitegrey: #e5eff5;
  --linenumber-dark-bg: #282c34;
  --linenumber-light-bg: #c5d2d9;

  /* font-family */
  --sans-serif: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --serif: "Mercury SSm A", "Mercury SSm B", Georgia, serif;
}
</style>

<!-- 用来支持公式 -->
<script type="text/javascript" async  
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">  
</script>  

<script type="text/x-mathjax-config">  
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
     processEscapes: true}          
   });
</script>



<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">


<section class="post comments">
    <div id="disqus_thread"></div>
     <!-- gitalk -->

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
      <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
      <div id="gitalk-container"></div>
      <script>
          var gitalk = new Gitalk({
              clientID: 'af*',
              clientSecret: 'a3*',
              repo: 'comments',
              owner: 'vicviz',
              admin: ['vicviz'], //owner或具有创建 issue 权限的用户
              id: '{{comment_id}}',
              distractionFreeMode: false // Facebook-like distraction free mode
          });
          gitalk.render('gitalk-container');
      </script>

</section>
其中的comments是我用vicviz这个github的帐号加的一个repo
  • github repository,用于保存评论(issues),没有可创建
  • github application授权,没有可创建