从头搭建个人blog

前端采用nuxt

为了节省配置时间(主要我前端是幼儿园水平...),采用create-nuxt-app做开发.

鉴于yarn比较受追捧,采用yarn做包管理.

yarn create nuxt-app <my-project>

前端展示框架采用element-ui

SSR服务器选择koa

nuxt异步数据,采用axios

这个create-nuxt-app会帮助设置在nuxt.config.js里
异步数据加载,这个是blogFe直接调用blogApi,不是用户浏览器里Ajax请求

export default {
    // 这个ctx就是koa的ctx,奇怪的是cookies函数不能用,但是
    // ctx.req.headers.cookie这个可以拿到
ctx.request.cookie
    async asyncData(ctx) {
        //console.log(ctx)
        //console.log(ctx.req.headers.cookie)
        const msg = await ctx.app.$axios.$get('/articles/1')
        return { msg: msg }

    }
}

在用户浏览器里ajax的异步请求:
这个会有CORS的问题,初步打算对外用一个地址,通过nginx把前端/后端请求分发给blogFe/blogApi

<script>
export default {
    methods: {
        onSubmit(){
            let resp=this.$axios.$post(
                "http://<ip>:<port>/<blabla...>", 
                data
            )
        }
    }
}
</script>

一些组件直接使用社区推荐的module

markdown

markdown编译采用nuxt社区推荐的markdown-it
修改nuxt.config.js文件,增加markdown-it配置

//nuxt.config.js
  modules: [
    '@nuxtjs/markdownit',
  ],

比较有意思的是可以这么写,markdown文件直接import引入

<template>
<div>
  <!-- 不知道为啥总会访问amazonaws,加上#sonicMaster就不了 -->
  <div id="sonicMaster"></div>
  <!-- .markdown-body是github-markdown-css用的 -->
  <div class="markdown-body" v-html="testMd"></div>  
</div>
</template>

<script>
"use strict";
import testMd from '../../md/test.md'
export default {
//   data() {
//     return {
//         testMd: testMd,
//     }
//   },
    computed: {
      testMd() {
        return testMd
      }
    }
}
</script>

markdown css风格(highlight.js也挺好)

显示css使用类似github风格的github-markdown-css
我选择在nuxt.config.js里加上配置:

  css: [
    'github-markdown-css/github-markdown.css',
  ],

后端采用golang/gin框架

数据库暂时选择mysql, 后期可能换postgres

据说postgres比mysql更好,现在还不熟,等熟了换换试试

nginx做转发,为了绕过CORS,采用nginx配置,通过路径分别传给nuxt跟gin.

配置如下:

upstream blogApi{
    server <ip>:<port>;
}

upstream blogFe{
    server <ip>:<port>;
}

server {
    listen <port>;
    server_name localhost;
    location /api/ {
        proxy_pass http://blogApi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location / {
        proxy_pass http://blogFe;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}