概述
本身是前端小白，学过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样式，我参考我自己在博客园的博客和其他人的博客，一下就设置好了，没什么难度。