从小白到使用antd+react+react-router+issue+es6搭建博客

概述

本身是前端小白，学过html,css,js的各种书，各种视屏，就是没有接触web开发的内容。偶然看见一个朋友用react搭建了一个博客，于是本着程序员无所不能的精神，也尝试着用react搭建博客。

下面记录我从小白到搭建博客的过程，没有写方法，因为网上已经很多方法了。

这是我搭建的博客地址：馒头加梨子

结论

先说结论，我学到了什么：

单页面web开发的流程。把要做的分为一个个模块，逐个实现，然后用webpack设置，开发并打包上线。
antd库的使用和一些组件的配置参数。
相关知识：SPA, react, react-router4, antd, fetch, promise, es6等。
怎么搜索？在github和相关社区搜索，通常能找到意想不到的惊喜。
程序员怎么学习？一定要手打教程，并思考为什么要这么做。

我碰到了哪些难点：

webpack配置。一开始我没有使用脚手架，以前只打过webpack的demo但是忘了，看了很多资料才学会webpck的实际使用。
antd库组件配置。以前没用过这种库，完全不知道怎么下手，后来在官网看见每个例子都有代码demo，才慢慢熟悉的。
router4中的路由赋值。为了把博客打造成SPA的形式，我思考了很多。
fetch内容报错。我看了很多遍关于promise和生命周期的内容，最后通过添加loading解决。
添加目录。给文章加上锚点和通过锚点跳转，为了更优雅的编程，我遇到了很多坑。

搜索参考博客

既然自己是小白，那么当然要去参考其他人的博客，寻找他们的优点并且学下来呀。

那怎么搜呢？我主要通过这些渠道搜索：

经过一番搜索，我最后定下来参考这几个大神的博客，他们都是用react搭建的，并且都能在github上找到源码。

然后样式参考这几个大神的博客，他们不是用react搭建的，但是样式很好看。

学习react

作为一个小白，肯定要先学习react，那么去react中文官网把文档看一遍，并且把教程手打一遍啦。

思考博客架构

我要一个什么样的博客？

我的博客要有以下特点：

一个好看时髦的导航栏。
一个自动生成的目录(文章界面)。
一个回到顶端的功能。
要有代码高亮。
一个分类的功能。(没做)
一个加载的时候的进度条。(没做)
要简洁，扁平化。
要响应式。
要速度快。

我还进行了如下思考：

我不要首页和侧栏。因为显得太复杂了。
我不要翻页。因为我有回到顶端功能，而且我现在写的文章还少，不需要翻页。而且阮一峰的日志也没有做翻页功能。

单页面软件SPA

我之前没有接触SPA，但是在搜索的过程中偶然碰到了，觉得很有必要学习一下，因为这是当代web开发的分水岭。于是去看了一本书《单页Web应用:JavaScript从前端到后端》。

这是我学完SPA之后写的一篇感想博客：当我们说前端，我们在说什么。

SPA让我了解到了模块化开发的思想，也解决了我的一个需求：速度快。

路由

路由是SPA，也是react中很重要的一个功能。

于是我去学习了react-router4，并且把react-router-tutorial自己手打了一遍。并且查资料补充了redirect等内容。

antd

在学习water博客的时候接触了一个很有意思的ui库：antd。我以前也没有用过这种类型的库，于是本着好奇的精神，也打算用这个库。

我学习了这个库里面的这些组件：Button, Icon, Layout, Affix, Dropdown, Menu, Card, Collapse, List, Tag, BackTop。在学习的时候踩了很多坑，也懂了这些组件的一些配置参数。

antd也解决了我的一个需求：响应式。

es6

虽然我在react中文官网的教程里面学习了部分es6语法，但是在学习别人博客的时候碰到了很多es6语法，我自己也有强迫症，能用es6语法的地方尽量用es6语法。比如我就很不喜欢用if-else，能用map+箭头函数的地方我就用map+箭头函数。

于是我学习并实践了如下es6的知识：模板对象，箭头函数，解构赋值，类，promise，let和const。

路由赋值

路由路由，还是路由。

学过SPA之后，我觉得有必要把博客打造成SPA的形式。于是各种思考和查资料。最后打造成了目前这种形式：只在打开博客的时候发送http请求，其余操作不发送http请求，直接由浏览器完成。

其实还有另一种实现方法，就是利用redux，真的是与我的想法不谋而合，由于我还没有学，而且redux文档不建议小型网站使用redux，所以我没有用这种方法。

这个时候我总结了一篇博文：react在router中传递数据的2种方法。

fetch

怎么获取博客内容呢？

我一开始打算用老办法：写完markdown文件就上传至github，然后一个个解析md文件。但是这个方案有个缺点，就是每次写完都要build上传非常麻烦。强迫症迫使我寻找更好的方法。偶然我发现用issue写博客是真的好，于是最后改用从issue获取博客内容。

那么怎么获取呢？在别人博客中找了三种方案：

用es5原生的fetch方法。
用isomorphic-fetch库的fetch方法。
用axios库的相关方法。

最后我决定用用isomorphic-fetch库的fetch。

代码高亮

一开始我还不知到什么是代码高亮，只是看资料各种说代码高亮。代码写着写着才发现，文章页面的代码区很单调啊，所以这才醒悟原来是代码区的代码高亮。

我最后用的别人现成的方案：marked结合highlight.js设置代码高亮。

fetch报错

由于fetch方法返回的是promise对象，有一定的延迟，所以模块的render函数开始渲染的时候并不能取到数据，然后marked库各种报错。

于是我去看了又看promise的文档和组件生命周期的文档。

最后通过在模块的state属性里面添加一个loading属性成功解决。

目录和锚点

由于antd没有在文章界面自动生成目录的组件，于是我自己动手写了自动生成目录的组件。

目录要不要跳转功能？我的目录必须要与众不同啊，强迫症需要我添加这个功能。

在用js写跳转功能的时候，我才发现react的锚是个巨坑，因为react的路由，es5的#锚点不能正确被解析，于是我又去查资料，最后用scrollIntoView解决了。本来以为解决方法超麻烦的，最后一看真的超简单。

路由污染

对，路由路由，还是路由。

搭建快完成了，搬上github可以看了，但是我发现，我github上的其它githubPage都变成了我的博客了。

为了解决这个问题，我只好把博客放在我的github的一个分目录下面。又要改路由。

改好路由之后我又发现，刷新键不能用了。网上查资料，最后看大牛router4的原理解析里面说，需要在服务端解决。但是我是github博客，没有服务端。也不能不支持刷新键啊，而且不解决的话，收藏文章也不支持了，只能收藏首页。

由于强迫症，我只好又把博客放在github小号上面，来让别人体验完整的功能。

收尾阶段

这个时候有2个问题。

一个是导航栏太单调了，需要加入一些其它的模块，经过考虑，我加入了作品和关于模块。这个没有什么难度。

另一个是css样式，我参考我自己在博客园的博客和其他人的博客，一下就设置好了，没什么难度。