Github相册博客搭建
跨越美利坚面试创业技术培训 2018-05-28
前一段时间我看见一个问答，大概意思就是程序员都是怎么用自己的专业技能逗女朋友或表白的。
看了很多，有写定时关机脚本恶搞的，也有简单写个html展示的，其中最著名的就是几年前有个人写了个网页记录他们在一起时间的。
我决定也做一件类似的事情，但是写一个关机脚本恶搞这种事情简直太直男了，灵光乍现，我想是不是可以在github博客上做一些文章呢。
Bing了一下发现这件事情是可行的，github是可以展示图片的，以此原理实现一个相册应该是可以的。
知识点
- github git
- node npm
- hexo
- python
- windows(我用的是windows系统)
这几个东西除了github之外我基本上都可以说是不认识，一点点来吧。
github的ssh key早在上古时代我就已经添加完了，所以这个就不用管了。剩下的所有软件我下载的统统是最新版，node已经包含了npm（个人感觉npm应该是一个很好用的包管理工具，如果没有npm想要安装的话，应该也不难）
看了很多博客，hexo是搭建博客的主要工具类似于jeyll，但是好像又不能直接克隆hexo-theme使用。所以hexo和hexo-theme应该区分概念。
hexo环境准备
安装node就比较简单了，一直下一步就好了。
安装hexo需要用命令行执行如下命令：
npm install -g hexo
安装了hexo后，创建一个项目文件夹，然后在项目文件夹中打开命令行。
初始化
hexo init
如果不出意外的话，执行完次命令之后文件夹内会多了很多文件。
生成
hexo g
这个命令就是单纯的生成项目，没有什么需要注意的。
启动服务
hexo s
执行这个服务之后应该会有如下提示：
INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
访问localhost:4000应该就可以在本地浏览初始化后的博客了。
hexo-theme
在网上看了一下，使用率很高的是一款叫做hexo-theme-yilia的主题，于是我也就顺应潮流选择了这个。其实用这个主题有一个小小的私心，就是如果遇到问题的话，bing一下应该很快就能解决。
还是在之前的项目文件夹中执行：
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
执行此命令后在themes文件夹下应该多出了对应的主题。
绑定这个主题需要修改项目文件夹内的_config.yml里的theme属性为yilia：
theme: yilia
修改了这个配置之后重新真实性hexo g和hexo s应该可以在本地看到新的主题了。
同步到github
其实这个功能很方便，但是我感觉并不是很实用。
同样修改项目文件夹下的_config.yml
deploy: type: git repository: [email protected]:hoyuhub/hoyuhub.github.io.git branch: master
然后在项目文件夹下执行如下命令，才可以同步到github。
npm install hexo-deployer-git --save
接着就可以执行同步命令了：
hexo d
执行完次命令后就可以在自己的github上浏览了。
添加相册功能
现在说一下这个功能的大概思路：其实很简单，就是把照片传到github上然后通过网络路径访问这些照片。
其实在网上早已有大神实现了这个功能，我也是拜读他的博客才得以实现的。
首先要做的任务就是fork一下Blog-Back-Up
这个项目的主要工作就是图片的切割和存储，fork好了之后把项目克隆下来，然后在Blog-Back-Up的同级目录克隆一下自己的博客项目，这样做的目的是让后面的操作更加方便。
在hexo项目文件夹source下创建一个photos文件夹。
把Blog-Back-Up项目blog_photos_copy文件夹里的文件复制到上面创建好的photos里面。
打开ins.js文件修改里面的render方法,把里面github的地址改成自己的。
var minSrc = 'https://github.com/hoyuhub/Blog-Back-Up/tree/master/min_photos/' var src = 'https://github.com/hoyuhub/Blog-Back-Up/tree/master/photos/'
把照片放到Blog-Back-Up项目的photos文件夹里，命名方式为：2018-05-28_名字.jpg
打开tool.py文件，修改里面大概131行的路径
with open("../hoyuhub.github.io/photos/data.json","w") as fp:安装python，记得勾选将python添加到环境变量的选项。
在Blog-Back-Up目录下用命令行执行python：
python tool.py
如果上面执行的都没有问题的话，此时在本地github博客项目的photos文件夹下应该会多了一个data.json文件，或者原来的data.json被更新。（可以用git status查看一下）将内容push到github就行了。
遇到问题
1. 执行python文件的时候有可能会报错，原因是没有导入对应的库，python还不是太懂，可能需要按照对应的报错搜索一下了。 2. 图片不显示，看一下ins.js里的路径是不是配置争取，F12看一下img的src是否可以访问到。 3. 可能会出现缩略图不展示的情况，F12浏览器调试一下，看看是不是缺少一个叫empy.png的图片。如果是的话，可以去我的项目里找一个然后创建对应的文件夹，推送到github就行了。 4. 如果检查检查了路径配置正确，empty.png也添加正确，可还是有缩略图不展示的问题，恭喜，你已经完成了，ctrl+f5你会豁然开朗。
