GitHub上搭建博客&增加相册功能

目标

在github上成功搭建Hexo博客

实现在博客上浏览图片，添加图片功能

最终效果:https://wonderxiao.github.io/

说明

使用主题：hexo-theme-yilia来搭建Hexo博客

使用lawlite来增加相册功能，其中必须的样式文件点击必需文件

在photos中包含四个文件

index.ejs

ins.css

ins.js

lazyload.min.js

搭建博客

申请github账号

windows系统下使用腾讯管家安装git

安装nodejs

验证软件安装成功

$ git --version #git@2.13.0
$ node -v       #node@8.6.0
$ npm -v        #npm@5.3.0

git与github互联实现远程控制

创建repository，新建一个版本库

创建的版本库名字设置注意事项如图中所示，即xxx/xxx.github.io



配置SSH key

$ cd ~/.ssh #查看本机是否已存在ssh密钥

若提示：No such file or directory 说明你是第一次使用git

$ ssh-keygen -t rsa -C "邮件地址"

一直回车，若需yes请输入，这是给权限，最终会生成文件在用户目录下，找到.ssh/id_rsa.pub文件，复制文件里的内容。

- 打开setting，建立本地系统的git bash与github连接权限，具体设置如下图所示：

测试是否成功

$ ssh git@github.com

若如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access.

使用Hexo博客

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。

原理

github page存放的都是静态文件，博客不仅存放文章内容，还存放文章列表、分类、标签、分类等动态文件。若每次写文章都去更新博文目录及其相关链接，那会很复杂。故每次写完博客，通过使用hexo来批量处理相关页面的生成，将有改动的内容更新到github上。

安装

$ npm install -g hexo

初始化

在电脑上某处新建hexo的文件夹，此文件夹为你存放，如F:\workBlog\hexo，然后使用hexo命令进行初始化。

$ cd /f/workBlog/hexo/
$ hexo init

这样，hexo会自动下载hexo所需文件，如node_modules等。

$ hexo clean #清除之前产生的内容，如hexo g产生的
$ hexo generate #生成
$ hexo server #启动服务

hexo server是开启本地预览服务，打开浏览器访问http://localhost:4000，即可看到加载的hexo博客

此阶段遇到的问题

本地浏览器加载时出现一直转圈，不能访问

此处一般为端口占用，解决方法:

- 查看电脑中占用端口4000的进程，关闭即可

- 打开hexo文件夹下_config.yml,将配置中端口port改成未占用的端口即可

上传到github

若一切配置到之后，使用hexo deploy发布即可。

但需满足:

- ssh key配置正确

- 配置hexo目录下_config.yml文件

在_config.yml最后面添加:

deploy:
type: git
repository: git@github.com:xxx/xxx.github.io.git
branch: master

在此之后，一般出现：

Deployer not found: github 或者 Deployer not found: git

这是需要安装插件:

$ npm install hexo-deployer-git --save

之后，进行发布博客后，点击所有文章会出现模块缺失

解决方法：

- node版本升级

- npm i hexo-generator-json-content –save

- 在hexo文件下的_config.yml下添加：

jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true

常用hexo命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

写博客

$ hexo new 'my-first-blog'

这时我们新建了my-first-blog.md文件，一般完整格式如下：

title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---
以下是正文

添加相册

github

建立一个用于存储相册的版本库，这里建立BlogPicture

和hexo同目录下，将github下新建的BlogPicture克隆到本地文件夹下

在BlogPicture下新建photos，将样式文件放在photos文件夹下，样式文件放在github上： https://github.com/wonderxiao/BlogPicture/tree/master/four

修改ins.js文件，主要是更改render函数

其中url对应你放在github上图片的地址，主要是更改src和minSrc

var render = function render(res) {
var ulTmpl = "";
for (var j = 0, len2 = res.list.length; j < len2; j++) {
var data = res.list[j].arr;
var liTmpl = "";
for (var i = 0, len = data.link.length; i < len; i++) {
var minSrc = 'https://raw.githubusercontent.com/wonderxiao/BlogPicture/master/min_photos/' + data.link[i];

var src = 'https://raw.githubusercontent.com/wonderxiao/BlogPicture/master/photos/' + data.link[i];

var type = data.type[i];
var target = src + (type === 'video' ? '.mp4' : '.jpg');
src += '';

liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\
<a href="' + src + '" itemprop="contentUrl" data-size="1080x1080" data-type="' + type + '" data-target="' + src + '">\
<img class="reward-img" data-type="' + type + '" data-src="' + minSrc + '" src="/assets/img/empty.png" itemprop="thumbnail" onload="lzld(this)">\
</a>\
<figcaption style="display:none" itemprop="caption description">' + data.text[i] + '</figcaption>\
</figure>';
}
ulTmpl = ulTmpl + '<section class="archives album"><h1 class="year">' + data.year + '年<em>' + data.month + '月</em></h1>\
<ul class="img-box-ul">' + liTmpl + '</ul>\
</section>';
}
document.querySelector('.instagram').innerHTML = '<div class="photos" itemscope="" itemtype="http://schema.org/ImageGallery">' + ulTmpl + '</div>';
createVideoIncon();
_view2.default.init();
};

python脚本文件

下载python脚本文件按照我的这种目录进行构建

+-

BlogPicture

+- hexo

+- BlogPicture

+-four ##四个样式文件

+-photos ##存放相册中的相片与python文件

相片文件命名格式——json转换

2017-10-12_时钟.png

最前面的是日期，然后用_分割

后面信息为描述图片信息

注意data.json存储位置及tool.py中src_dir和des_dir路径信息

最后

若缩略图不显示，下载empty.png文件再进行重新上传文件即可。

效果图：