Github相册博客搭建

时间：2022-11-05 14:34:25

前一段时间我看见一个问答，大概意思就是程序员都是怎么用自己的专业技能逗女朋友或表白的。

看了很多，有写定时关机脚本恶搞的，也有简单写个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的同级目录克隆一下自己的博客项目，这样做的目的是让后面的操作更加方便。

  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你会豁然开朗。

相关文章