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: gitrepository: git@github.com:hoyuhub/hoyuhub.github.io.gitbranch: 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你会豁然开朗。
Github相册博客搭建相关推荐
- hexo+gitHub 个人博客搭建及更换主题历程(特适合入门小白)
内容涵盖 hexo+gitHub 个人博客搭建 搭建过程中遇到的问题及解决方案 更换主题 1. gitHub 创建博客仓库 (1) 注册Github(如果已注册可以忽略次此步骤) 详细注册步骤请参考: ...
- github的博客搭建以及标签的自动化
github博客搭建以及标签的自动化 引子 没有github的程序员,不是好程序员! BUT 如果有一个*.github.io的blog,会不会更酷? 基于以上原因,本拐也折腾了一下自己的github ...
- 【效率为王】超详细 Hexo + Github Pages 博客搭建教程
前言 现在市面上已经有许多博客了,比如 CSDN.掘金.博客园.简书等等.我们可以直接在上面发表内容,而且交互比较人性化,而且也能被搜索引擎检索到.但是总归是别人的平台,经常会受限,因此我们就希望能有 ...
- GitHub个人博客搭建
实现思路来自(这个博客) 我的第一个博客(这里) 我的GitHub(GitHub主页) 需要学习的知识: GitHub基础: Windows cmd :(cmd基操) (cmd更换目录) Mark ...
- Hexo+GitHub静态博客系列1——三步快速搭建
前言 Hexo+GitHub静态博客搭建姿势千千万,各种教程也写烂 那么此搭建姿势就非主流些,侧重图形化操作,减少代码配置,适合新手快速搭建 说来本人也是臭毛病,wordpress.emlog等博客系 ...
- 基于github和hexo搭建博客 本地hexo博客搭建
正常都应该讲一讲为什么搭建博客,不过既然您能看见这篇文章,就说明你想搭建一个自己的博客,无论自己记录自己的东西,或是为了显得高大上.那就不废话了,进入正题. 其实教大家搭建博客的文章很多,讲的都不错, ...
- 搭建自己的github.io博客
搭建自己的github.io博客 github.io是基于github的repo管理,这意味着咱们对其是有觉得的控制,这个跟放在第三方的平台比,可控性要好太多.下面咱们将详细讲述如何基于github. ...
- hexo+GitHub博客搭建实战
我的个人博客链接:wangwlj.com 想要搭建类似的博客吗? 如果是,那就赶快点进来吧-- 手把手教学,现在开始!! PS: 将会在个人博客持续更新,本文链接:hexo+GitHub博客搭建实战. ...
- 【Hexo博客搭建】将其部署到GitHub Pages(二):如何初始化并部署?
简介: 本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 应该怎么做,跟着此系列文章最终可以获得自己的静态博客网站.流程很长,分成不同的篇幅,此为本系列 ...
最新文章
- python语言入门pdf-Python编程从入门到精通.pdf
- java的Serialization 机制
- 模拟浏览器自动化测试工具Selenium之一eclipse集成开发部署篇
- CelebA数据集在Linux下解压
- oracle ha节点,oracle linux ha配置
- WBLoadingIndicatorView(加载等待动画)
- 爬虫中 Selenium-Requets-模拟登陆cookie-代理proxy 的简单总结
- php管理nginx虚拟主机shell脚本
- mysql运算中max计算_MySQL 聚合函数、运算符操作、约束
- mysql or 速度_mysql中or和in的效率问题
- VS2013 工具包修复记录
- jacob将WORD转换成PDF文件(要装有Word另存为PDF文件的插件)
- 什么是收缩压和舒张压?
- Jmeter线程组之jp@gc - Stepping Thread Group
- 元界快讯|中手游去年营收微增净利下滑,“仙剑”元宇宙今夏开测
- 优秀互联网面试题总结
- JetBrains DataGrip安装和使用的详细教程
- 软件工程——Alpha(2/3)
- OLTP、OLAP与HTAP
- APP如何变现?主流变现方式有这些
热门文章
- matlab legend对齐,MATLAB中不正确的图例框大小?(Improper legend box size in MATLAB?)
- 音乐播放器(4)--Mp3歌曲播放与控制
- 一个“断更就封号”的高冷习惯养成类App「念」
- Java架构师岗位的基本职责
- 20-GLOBECOM-Wi-Fi-CSI-based_Fall_Detection_by_Spectrogram_Analysis_with_CNN
- 软件工程第一次作业 - 针对“天天向上”团队的采访
- 获取硬盘和卷或分区相关信息(容量,ID,卷标名字等)
- 英特尔cpu支持Linux,第12 代酷睿,英特尔向 Linux 添加 Alder Lake-S 处理器的支持代码...
- 错,易错,容易错的地方:fopen的r+,malloc连续内存,net start mysql与netstat -ano,GetCurrentProcess和malloc的头文件
- 数据分析常被应用于哪些领域?数据分析最常应用的4大场景