HJM's Blog

博客升级(评论+动态标题+https+http2.0...)

2018年4月28日 13:59

正好最近有点时间,稍微把博客升级一下,支持一下基础功能评论(没有互动,写作确实很难坚持下去)以及服务端渲染动态标题(SEO),顺便将升级下协议,升级http2.0(多路复用,后续支持sw、pwa…),升级https(安全,小绿锁)……借此分享下~

支持disqus评论

之前一直纠结自己写评论系统还是使用第三方的,后续想了一下,评论的初衷是为了让用户更易于和我互动,让用户在我的网站再注册登录反而违背了这个初衷,所以放弃了写评论系统,开始选用三方评论,看了畅言、来比力等,虽然比较好地支持国内评论,但是尝试用起来不如人意,有可能也会成为下一个多说,所以最后还是选用了disqus评论,虽然需要翻墙,但是各方面支持都很好,接入也非常简单。

disqus接入单页应用

先引入disqus script
然后写个组件,需要注意的是,当我切换文章的时候,disqus需要重载切换(这个reset API不错~)

<template>
    <div class="comment-box">
        <div id="disqus_thread"></div>
    </div>
</template>

<script>
export default {
    name: 'comment-box',
    data() {
        return {
        };
    },
    props: {
        sourceId: {
            type: String,
            required: true,
        },
    },
    mounted() {
        if (typeof DISQUS !== 'undefined') {
            DISQUS.reset({
                reload: true,
                config: function () {
                    this.page.identifier = this.sourceId;
                    this.page.url = location.href;
                },
            });
        }
    },
};
</script>

<style lang="stylus" scoped>
  .comment-box
    min-height 80px
    margin-bottom 20px
</style>

to do

disqus还是被墙的,后续考虑下要不要支持下代理方式来处理

服务端渲染动态标题(SEO)

Vue服务端渲染文档:https://ssr.vuejs.org/zh/
这个之前忘记做了,最近发现需要做下,不然搜索引擎检索都是同一个标题
首先需要处理下html模板(注意里面的title)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>{{ title }}</title>
    <% for (var chunk of webpack.chunks) {
        for (var file of chunk.files) {
          if (file.match(/\.(js|css)$/)) { 
            if (file.indexOf('admin') == -1) {%>
              <link rel="<%= chunk.initial?'preload':'prefetch' %>"
                href="<%= htmlWebpackPlugin.files.publicPath + file %>"
                as="<%= file.match(/\.css$/)?'style':'script' %>">
            <% }}}} %>
    {{{ renderURLScript('disqus') }}}
    {{{ renderURLScript('baidu') }}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

这里title是怎么塞进去的呢,其实是服务器端渲染上下文(context)放进去的,所以我们对context操作即可,而在哪里我们可以取到数据拿到标题呢?
那就是entry-server.js了

import { createApp } from './app';

const isDev = process.env.NODE_ENV !== 'production';

export default context => {
    const s = isDev && Date.now();
    // 注意下面这句话要写在export函数里供服务端渲染调用,重新初始化那store、router
    const { app, router, store } = createApp();
    return new Promise((resolve, reject) => {
        router.push(context.url);
        router.onReady(() => {
            const matchedComponents = router.getMatchedComponents();
            if (!matchedComponents.length) {
                reject({ code: 404 });
            }
            Promise.all(matchedComponents.map(component => {
                if (component.preFetch) {
                    // 调用组件上的preFetch(这部分只能拿到router第一级别组件,子组件的preFetch拿不到)
                    return component.preFetch(store);
                }
            })).then(() => {
                isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`);
                // 暴露数据到HTMl,使得客户端渲染拿到数据,跟服务端渲染匹配
                context.state = store.state;
                context.state.posts.forEach((element, index) => {
                    context.state.posts[index].content = '';
                });
                if (/\/article\//g.test(context.url)) {
                    context.title = context.state.currentPost.title;
                }
                resolve(app);
            }).catch(reject);
        });
    });
};

取出重点

if (/\/article\//g.test(context.url)) {
    context.title = context.state.currentPost.title;
}

同样的,你要塞进html meta之类的也是一样的方式

http2.0以及https升级

http2.0增加二进制分帧层,复用了请求和响应的连接,头部压缩,服务端推送等,之前http1.x的雪碧图以及什么将资源合成一个资源减少http请求,还有内联小资源等等,这些将不再需要。。。简直perfect,不得不升级了。

具体就不详细阐述了,可以参考:

然而怎么升级呢?首先http2.0必须在https环境下,所以我们可以顺便为我们的网站左上角加个小绿锁,并且使我们的网站更加安全✌️

升级https

emmmm…..证书要钱?不可能出钱的,这辈子都不可能出钱的~~
用Let’s encrypt生成免费证书(有效期好像是三个月),然后我在github发现了神器https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E
直接从letsencrypt 生成免费的证书,这个非常好用贴心,还帮你检测自动更新证书,省得得自己写脚本更新或者手动更新

nginx配置http跳转https

当协议是http,则强制301跳转https

server {
    listen       443 ssl http2;
    listen       80;
    server_name  www.imhjm.com imhjm.com;
    ssl_certificate /etc/nginx/ssl/imhjm.fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/imhjm.key;
    set $protocol $scheme;

    if ($protocol = 'http') {
        return 301 https://$http_host$request_uri;
    }
    // ...
}

注意:左上角要变成小绿锁的话需要网站里面的资源都是https资源

升级http2

具体可以看https://www.nginx.com/blog/supporting-http2-google-chrome-users/
版本要求:OpenSSL 1.0.2 and later
nginx直接使用最新稳定版即可,加上–with-openssl编译版本高的OpenSSL

# nginx -V
nginx version: nginx/1.14.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC) 
built with OpenSSL 1.1.1-pre5 (beta) 17 Apr 2018
TLS SNI support enabled
configure arguments: ......

从configure可以看到两个关键点

  • --with-http_v2_module
  • --with-openssl=/root/openssl-OpenSSL_1_1_1-pre5

接着你nginx加上listen 443 ssl http2;即可

欢迎关注