• 写在前面
• 缘起
• 博文转移
• 搭建新博客
  • Jekyll
  • 本地Ruby开发环境搭建
  • prose.io
  • 集成React

写在前面

在这篇文章日期之前都是从CSDN搬过来的，虽然我都仔细核对了一次，但是仍然可能有数据错乱的问题，如果有发现，请按照页面最下方的联系方式告诉我，首推github

缘起

我自大学写代码开始就一直在CSDN写博文，但是近几个月登陆发现，CSDN除了偶尔打不开这个老问题外，还乱改我的主题，这让我不禁害怕自己的博客一直放在那里有没有问题，想起以前死党推荐我用github pages自己搭建博客，我决定调查一下，结果发现github pages空间是免费的，这可比自己租用VPS来的好，我自己之前租用腾讯云主机搭建过一个小博客(flask/mongodb)，先不论要月租，而且服务器也要维护，系统的update,防火墙设置，服务的配置，一个VPS租下来，还要配置一轮才能开始使用，阮一峰老师不是说过:

喜欢写Blog的人，会经历三个阶段:
第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。
第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。 Ref:http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

第一阶段我用CSDN,第二阶段用腾讯云搭了一个，第三阶段就是现在了，事不宜迟，赶紧搬家

搬家的任务有下面两个:
1.博文转移
2.搭建新博客

博文转移

数据转移需要注意的就一点——导出格式，因为现在这个新博客是基于jekyll的，而jekyll只识别markdown/textile文件类型，所以最好原来博文导出的时候也是这两种格式之一，不过好在CSDN可以导出markdown格式。可是导出的时候还是遇到一点小问题，就是有一篇博文导出的时候内容少了一半，而页面却显示正常，已经向CSDN客服反馈，反馈是博文中含有了特殊字符，然后就没有然后了，３天没有下文…如果不是这篇博文有很多手工写的图片，我直接把显示正常的页面内容直接复制粘贴过来了。

搭建新博客

我先把我这个博客的代码丢出来～当前博客repo地址

搭建新博客由于很多后端的东西都不需要我去弄了(比如数据库，数据接口什么的)，所以我大Python就暂时没有用武之地，根据github pages里面教程，初步setup起来一个，但是仅仅只是个模板，你要调整你的博客，你还得去找jekyll的文档来看。

为了让你上手更有条理性，我稍微说明一下查看顺序:
1.首先是github pages教程里面，只是说明了如果在github里面建立一个基于github pages的网站，这个是有规范的，建议如果不了解，直接按照它给的步骤来

2.按照上面的配置好以后，你应该就一个https://username.github.io这样的域名，这个是github给你的免费的，当然你要用自己买的域名，那是后话，当前先用着这个，然后拉到github pages教程最后，有三个扩展阅读，分别是Learn how to set up Jekyll，Custom URLs和Guides，建议先点开后面那两个过一遍，看个大概，记住就只是过一遍，看得犯迷糊的直接跳过，别深究，浪费时间

3.最后就是Jekyll本身的学习，Jekyll是我们的核心之一，内容规范很多，得耐心认真地去深究

Jekyll

Jekyll是一个Ruby写的静态博客生成器，和我之前用腾讯云主机搭建的不一样的是，我之前用的是数据库，而这里Jekyll直接用文本存储数据，我们写的一篇篇markdown格式的博文直接存放在_posts/文件夹下面，Jekyll就会自动把里面的这些博文渲染，当然前提是你要遵循Jekyll的规范，这和现在很多Web框架都是一样的嘛，没有自己的一套规则，它怎么知道用的是自己的功能　　

当然这种用纯文本方式存储数据的确是方便，但是每次你有更新，都要commit一次到你的github repo，然后github自动地又构建一次项目，这种导致的后果就是，repo提交频繁，而且都是因为数据而产生的提交，更加重要的是，页面显示更新内容不及时，不像数据库，数据库中的更新，可以马上反应到页面输出，不用经历构造时间，所以Jekyll这种对于个人博客或者是项目主页这种对实时数据要求不高的页面来说是足够的，而现在一般的商业App则是肯定不能忍受的　　

我们来讲讲Jekyll的项目结构:

blog/
    _config.yml
    Gemfile
    README.md
    index.html
    .gitignore
    _posts/
        2018-01-02-post.md
    _includes/
        head.html
        header.html
        footer.html
    _layouts/
        default.html
        post.html
    _sass/
    assets/
        css/
        images/
        js/

当然这不是最简的目录结构，但是我觉得是比较好的目录结构，但是好的来又刚刚好，仅仅只是提供了一些对未来扩展有帮助的可能性，但是又不至于弄复杂，可以这么理解

1._config.yml:这个文件是最核心的文件，Jekyll构建时候都会先读这个文件的配置来构建的

2.Gemfile:Jekyll本身就是用Ruby写的，而Gem是Ruby的包管理工具，类似Python的Pip，所以Gemfile就是记录依赖包的，有点像pip里面的requirements.txt

3.README.md和index.html:为什么这两个要同时说呢?因为如果没有index.html，那么默认地就用README.md的内容充当首页，除非你在_config.yml里面设置，如果没有设置，而index.html存在，那么index.html就会取代README.md作为首页。我们有时候需要给项目本身留一个README.md，就不能让他作为首页，所以就得另外开一个index.html取代README.md作为首页，而README.md完成项目描述职责就好了

4._posts/:这个目录下面，就是的一篇篇的博文，可以看成是你的数据库

5._layouts/:这个目录下存放这供给其他页面用的模板，一般都会有一个default.html作为base模板，而post则是专门给博文详情页留的，至于其他页面可以根据自己需要再行增加

6._includes/:这个目录下存放的则是供_layouts/里面模板调用的比如header.html这种页头，footer.html页脚还有head.html页面元信息等可复用的模块

7._sass/:这个目录则是存放css用到一些文件,我一开始只知道有css，但是我不知道css已经有了它自己的一些进步，现在竟然有了像python那种程序语言一样的特性,sass就是当中一种，详情可以查看SASS用法指南

8.assets/css/:这个目录存放的是css文件，我的repo代码里面这个文件下只有一个文件，而且这个文件只有一个作用，就是@import _sass/的样式…

9.assets/images/:可以存放一些博客图标或者是背景图之类的资源，不过后面如果整合了图床以后，或者可以不用把图片这种二进制一起上传到github上

10.assets/js/:这里存放的则是javascript脚本，除此以外也和后面集成webpack，进一步集成React也有关系

本地Ruby开发环境搭建

什么，你不是说不用搞后端的么?现在看来又得搞后端，如果不懂ruby还得学ruby?

不用担心，不用专门去学习ruby，也不用搞后端。那为什么要搭建本地的Ruby开发环境?我们需要本地先调试的吧，那如果本地不搭建一套，那我们改完代码怎么看效果?所以我们需要一套本地的开发环境

如果你机子里面没有ruby，先安装一个ruby,而至于gem，ruby 1.9.2及其以上就已经默认安装了ruby gem的，所以无需再次手动安装

1.安装bundler
gem install bundler
2.使用bundler安装Gemfile中的依赖(在Gemfile所在目录中)
bundle install
3.install好会产生一个Gemfile.lock文件
4.启动jekyll服务(在_config.yml所在目录中)
jekyll server
或者
bundle exec jekyll server
5.默认服务在127.0.0.1:4000上，打开这个地址测试是否启动成功

Jekyll跑起来后，你会发现会多一个文件夹_site/，这个文件夹就是Jekyll最后生成出来的站点文件，这个文件不用放到github上，直接在gitignore里面忽略掉它

prose.io

如果想像以前那样(比如在CSDN上)完全地线上写博客，不用本地git pull/commit/push，那就要借道，只要你的github账号授权给他，他就可以替你完成git的一些操作，让你专心写作，我的这边博文就是在prose.io写的

而且在prose.io写还有其他的好处，我稍微说几点:
1.比如新建一篇文章的时候，默认就带上了当前日期作为标题，就省去自己又去看日期然后把日期写上去;
2.在编辑页面按Ctrl+s直接就commit到github，稍等一会就可以在博客上面看到更新，非常方便和符合平时文本编辑习惯;
3.它有在线预览功能，如果在_config.yml配置了siteurl，那么预览功能就可以直接按照siteurl样式生成页面预览，而不用用默认的预览页面，这样更加贴近发布后的显示状况

prose:
    rooturl: '_posts'
    siteurl: 'https://silbertmonaphia.github.io/'

上面这是我在_config.yml里面关于prose.io的设置，rooturl是让你打开prose.io里面你的pages项目的时候，能够直接进去_posts/这个目录，相当于省了一次点击吧，然后siteurl上面也说了，我就不重复了

更多配置请查阅prose官方wiki

当然，prose.io建议用来写博文还是挺好的，但是对于博客版面修改和功能开发，还是git来pull/commit/push吧,毕竟开发的时候用的还是命令行

集成React

集成React的想法来源于两方面:
1.自己想学学js，可以乘机用这个博客练练手;
2.Using Webpack and React with Jekyll这篇博文给了一个可以集成的可能性;　　

根据上面第2点，要集成React我们就必须先把webpack集成先，一开始我是不理解为什么要先把webpack集成，后来我懂了，然后我就感叹，还是得了解一下javascript的世界啊

javascript现在作为唯一一个独霸浏览器的语言，在后端各种什么Java,Ruby,Python百花齐放的情况下，js在前端领域几乎是一支独放，虽然说前端还有什么html,css，但是这只是占了10%不到，其余都是javascript，主要内容都是在处理js脚本问题。