36. 基于 next.js 的 Blog 上线了

博客终于上线了，well，页面简简单单，嗯，能上就好了。原本是想要去年年底构建自己的线上博客的，后觉得还差很多，虽放弃了。如今想要在服务端多进行些尝试，可是苦于没有自己的网站，于是想通过构建一个线上博客来体验技术，刚好也是时候搭建了。

摸索

首先技术栈，必须是 react（工作中用 vue，自己的线下作品就用 react），再考虑服务端渲染，出现在眼前的就是 next.js，以及和 next.js 类似如阿里的 beidou.js。虽然是打算采用服务端渲染，但是博客，静态页面就够了，结合 react.js，去年很火的静态网站的 gatsby.js 也是首选。next.js 和 gatsby.js 吸引力都很大，都想尝试一下，鉴于 next.js 有服务端渲染能力，于是还是先选 next.js，后面再玩玩 gatsby.js。

其次是不是要上 github pages，既然是要做更多的服务端事情，那 github pages 就没有必要了，也不能多学习一下 linux 操作。只是第一版的还是想要试试 github pages，毕竟都没有试过。

最后是页面设计，苦于没有 UI 指点，所以想要参考别人怎么做的。国内的个人技术博客，大部分都是起于 15/16 年 hexo 风潮，看多了以后，最后选择 Hux Blog 为模板。再稍微改造一下。

搭建

next.js 里约定了，页面要放在工程 pages 文件里面，其中文件的路径就是浏览器访问路径，比如 pages/Index/Index.js 文件，对应的在浏览地址就是 http://localhost:3000/index。这里并不需要类似 expres 或者 koa 里面的路由，来分发模板文件给到浏览器。这一切 next.js 都帮你做好了，只要和平时一样写 react 页面就好了，后端模板渲染就不需要你操心。约定习俗自然是尤其好的，只是对于一个只有后端系统的我就不适合了，搭建的后端里面是需要接口访问的，于是在 next.js 里面使用 koa，以及 koa-router。

页面数据的获取，在服务端侧，next.js 提供了 getInitialProps 静态方法，该方法会在服务端渲染的时候执行，而不会在客户端执行，另外 getInitialProps 只支持顶层路由页面，不适用于子组件。于是可以在 getInitialProps fetch 数据返回，然后在客户端，将数据传递到组件，渲染出 DOM。

只是在 fetch 的过程中，自己的电脑出现问题，每当在 node 端 fetch 数据的时候，都会报错，提示 fetchError，具体为 'HPE_INVALID_CONSTANT'，查看了死月大佬的一篇博客，推测可能是请求头/响应头的问题，只是怎么样都看不到具体请求的 rawPacket。由于涉及到 node.js C 以及 C++ 部分，想要调试 node.js 源码，下载了 clion，采用狼叔的 [node.js 源码执行])(https://www.zhihu.com/lives/878296775587409920) 的方式。发现 win 10 下执行配置文件的执行，不友好，首先要执行通过 pythone ./configure，只是接下来会提示文件缺失。。。。。。。后来随着时间过去，不知不觉 fetchError 的问题已经折腾了一周多了，严重耽误。其他电脑都是正常的，就是自己的电脑不行，于是放弃 fech 的形式，改用 koa 里渲染页面的时候，直接返回对应的数据。效果还是挺不错的，

主要页面为首页/博客内容/关于我，后面觉得关于我还是以后再写了。组件主要是 Banner/Head/Nav，其中 Head 组件的作用是切换浏览器 tab 页的标题。具体实现就不详细说了。

服务端的接口处理，则实现了两个 Home.indexList 和 Home.postContent 来获取数据。md 文件转换为 html 则采用了 markdown-it 以及 highlight.js 来实现博客的解析。要注意的是，由于 markdown-it 里面链接默认是在本窗口打开的，需要单独配置为 _blank 的形式。

less/css 配置

正常而言，采用官方的 @zeit/next-less，再实现 css 模块化就能满足开发要求了，如下：

const withLess = require('@zeit/next-less');
module.exports = withLess({
  cssModules: true,
  cssLoaderOptions: {
    localIdentName: "[local]___[hash:base64:5]"
  }
})

只是当需要在页面中 import global.css 全局样式文件，却无法得到正确的加载，尤其是使用 highlight.js 来高亮博客中的代码，需要导入特定的 css 样式。采用 @zeit/next-css 可以搭配普通的标签的样式规则，但是对于类以及 id 选择器，一点效果都没有。后来看了 @zeit/next-less 以及 @zeit/next-css 源码才发现，原来在 less 中配置的 css 模块化字段，同样在 @zeit/next-less 生效了，怪不得，没有起作用，最后通过 Object.assign 来覆盖之前设置的规则。

部署

之前对 github pages 的部署一窍不通，看了官方 wiki 后，却发现还有很多内容没有介绍到，比如具体要如何推送呢？

打算在 funfish.github.io 仓库上直接搭建，作为博客首页地址的。通过 next.js 的 issue 发现了几个例子(其实官方也有例子，叫做 gh-pages，直接用就好了。只是为何要缩写 github 呢。。。。。一我开始查不到 github 开头的例子，就走人了)。例子上介绍到部署的命令如下：

 rm -rf node_modules/.cache 
  && next build && next export 
  && touch out/.nojekyll 
  && git add out/ 
  && git commit -m \"Deploy Next.js to gh-pages\" 
  && git subtree push --prefix out origin gh-pages

构建然后导出，最后将 out 文件 push 到 gh-pages 分支。这个分支是专门用来给到 github pages 的。比如仓库 blog，其属于 Project Pages site，若要将该仓库展示到自己的 github pages 上面的话，其访问路径为 https://{username}.github.com/blog。该路径访问的内容就是 blog 仓库下的 gh-pages 分支的 index.html 文件，可以参考。

可以发现通过仓库来实现 github pages，其访问路径始终会在尾部多一个目录。而对于 funfish.github.io 这个仓库，为 User and Organization Pages site，是不需要设置 gh-pages 分支的。只是初次部署提交后，发现 https://funfish.github.io 页面 404 了。如何是好？再次设置 gh-pages 也没有用，funfish.github.io 仓库是不支持 gh-pages 分支的，只有 master。后来发现 https://funfish.github.io 访问的是 funfish.github.io 仓库根目录下的 index.html 文件。无奈，只有创建别的项目仓库。采用 https://{username}.github.com/blog 访问 gp-pages 分支的形式，也就是目前的方式了。

采用 github pages 的方式，就需要在 next.config.js 里面配置 exportPathMap 了，对应不同的页面注入不同的数据，从而生成静态文件。

总结

线上 blog 的部署，也算是完成了小小的心愿吧，能够在 2018 年圣诞节前完成，也很是满意。当然 github pages 页面的访问速度，也是差强人意，明明是静态博客，首页的 DOMContentLoaded 居然要 1.4s，还是很简单的首页，免费的东西，果然质量一般般，只是还好至少是 http/2；

还是有很多功能没有上，静态博客这个也是后面会废弃掉的，会购买域名服务器等来配置自己的的后端系统。于是就有一下任务需要做的：

gatsby.js 对静态博客访问的提升；
数据库保存博客等数据；
日志、监控、进程守护等；
https/http 2 的加持作用；
GraphQL 使用；
站点桌面 PWA 化；
站点采用 WebGL 增加互动；
评论模块添加；

funfish / blog

36. 基于 next.js 的 Blog 上线了 #36

摸索

搭建

less/css 配置

部署

总结