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 ghexo 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的同级目录克隆一下自己的博客项目,这样做的目的是让后面的操作更加方便。

  1. 在hexo项目文件夹source下创建一个photos文件夹。

  2. 把Blog-Back-Up项目blog_photos_copy文件夹里的文件复制到上面创建好的photos里面。

  3. 打开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/'
    
  4. 把照片放到Blog-Back-Up项目的photos文件夹里,命名方式为:2018-05-28_名字.jpg

  5. 打开tool.py文件,修改里面大概131行的路径

        with open("../hoyuhub.github.io/photos/data.json","w") as fp:
    
  6. 安装python,记得勾选将python添加到环境变量的选项。

  7. 在Blog-Back-Up目录下用命令行执行python:

    python tool.py
    
  8. 如果上面执行的都没有问题的话,此时在本地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你会豁然开朗。
posted @ 2018-05-28 13:03  HOYU_Z  阅读(425)  评论(0编辑  收藏  举报