Ghost博客搭建指南

Ghost是什么

Ghost 是基于 Node.js 的开源博客平台，由前 WordPress UI 部门主管 John O’Nolan 和 WordPress 高级工程师（女） Hannah Wolfe 创立，目的是为了给用户提供一种更加纯粹的内容写作与发布平台。

安装

npm install ghost-cli -g
ghost install

优化

代码高亮

Code syntax highlighting

解决图片超过文章宽度

主要参照Ghost 调教日志 - 解决图片超过文章宽度

Code injection加入

<style type="text/css">
.post-full-content img {
    max-width: none !important;
    width: 100% !important;
}
</style>

半透明floating header

Code injection加入

.site-nav-main {
    background-color: rgba(0,0,0,0.7);
}

阅读进度条

Ghost默认主题Casper颜值非常高，不过在最近的V3大更新中，阅读进度条的功能被暂时去除了,参照Make a progress bar的讨论：

partials/site-header.hbs:

<div class="outer site-nav-main">
    <div class="inner">
        {{> "site-nav"}}
    </div>
    {{#is "post"}}
        <div id="bottomHeader">
            <progress class="reading-progress-bar"></progress>
        </div>
    {{/is}}
</div>

assets/css/screen.css

#bottomHeader {
    height:2px;
    position: relative;
    top:0px;
    left: -5vw;
}

progress.reading-progress-bar {
    appearance: none;
    position: absolute;
    width: 100vw;
    height: 2px;
}

progress.reading-progress-bar[value]::-webkit-progress-bar {
background-color: rgba(0,0,0,0.5);
}

progress.reading-progress-bar[value]::-webkit-progress-value {
background-color: #3eb0ef;
}

post.hbs

<script>
    const readingProgress = (contentArea, progressBar) => {
    const content = document.querySelector(contentArea);
    const progress = document.querySelector(progressBar);
    const frameListening = () => {
        const contentBox = content.getBoundingClientRect();
        const midPoint = window.innerHeight / 2;
        const minsRemaining = Math.round(progress.max - progress.value);
        if (contentBox.top > midPoint) {
            progress.value = 0;
        }
        if (contentBox.top < midPoint) {
            progress.value = progress.max;
        }
        if (contentBox.top <= midPoint && contentBox.bottom >= midPoint) {
            progress.value =
                (progress.max * Math.abs(contentBox.top - midPoint)) /
                contentBox.height;
        }
        window.requestAnimationFrame(frameListening);
    };
    window.requestAnimationFrame(frameListening);
};
readingProgress(".post-full-content", ".reading-progress-bar");
</script>

托管到GitHub Pages

由于安全、成本方面的考虑，决定做成静态网站，使用工具ghost-static-site-generator生成静态网页，再push到github里，若发现有不能正常处理的链接，自己xed替换一下就行。

find . -type f -name '*.html' | xargs sed -i -e 's#https://olddomain.com#https://newdomain.com#g'

Update

在实际使用过程中，发现gssg不能正确爬取amp页面的feature image,经检查发现是因为该部分html是由js动态生成的，wget处理不了

暂时解决方案：

修改amp页面模板
Ghost/core/frontend/apps/amp/lib/views/amp.hbs

46            {{#if feature_image}}
47            <figure class="post-image">
48                <amp-img src="{{img_url feature_image absolute="true"}}" width="600" height="400" layout="responsive"></amp-img>
49            </figure>
50            {{/if}}

将其修改如下：

            {{#if feature_image}}
            <figure class="post-image">
                    <amp-img  srcset="{{img_url feature_image size="s"}} 300w,
                                      {{img_url feature_image size="m"}} 600w,
                                      {{img_url feature_image size="l"}} 1000w,
                                      {{img_url feature_image size="xl"}} 2000w"
                        src="{{img_url feature_image size="m" absolute="true"}}" width="600" height="400" layout="responsive"></amp-img>
            </figure>