Github相册博客搭建
前一段时间我看见一个问答,大概意思就是程序员都是怎么用自己的专业技能逗女朋友或表白的。
看了很多,有写定时关机脚本恶搞的,也有简单写个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: git@github.com: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你会豁然开朗。