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

概述

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

下面记录我从小白到搭建博客的过程，没有写方法，由于网上已经不少方法了。

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

结论

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

1. 单页面web开发的流程。把要作的分为一个个模块，逐个实现，而后用webpack设置，开发并打包上线。

2. antd库的使用和一些组件的配置参数。

3. 相关知识：SPA, react, react-router4, antd, fetch, promise, es6等。

4. 怎么搜索？在github和相关社区搜索，一般能找到意想不到的惊喜。

5. 程序员怎么学习？必定要手打教程，并思考为何要这么作。

我碰到了哪些难点：

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

搜索参考博客

既然本身是小白，那么固然要去参考其余人的博客，寻找他们的优势而且学下来呀。

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

• 百度
• bing
• react中文社区
• github
• segmentfault
• 阮一峰的日志

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

• reminia
• cobish
• water

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

• 我本身的博客
• Brook's Blog
• 早起搬砖

学习react

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

思考博客架构

我要一个什么样的博客？

个人博客要有如下特色：

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

我还进行了以下思考：

1. 我不要首页和侧栏。由于显得太复杂了。

2. 我不要翻页。由于我有回到顶端功能，并且我如今写的文章还少，不须要翻页。并且阮一峰的日志也没有作翻页功能。

单页面软件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样式，我参考我本身在博客园的博客和其余人的博客，一下就设置好了，没什么难度。