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 #[email protected]
$ node -v       #[email protected]
$ npm -v        #[email protected]

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 [email protected]

若如果提示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: [email protected]: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 += '
\
                '" itemprop="contentUrl" data-size="1080x1080" data-type="' + type + '" data-target="' + src + '">\
                  '" data-src="' + minSrc + '" src="/assets/img/empty.png" itemprop="thumbnail" onload="lzld(this)">\
                \
                
' + data.text[i] + '
\
            
';
        }
        ulTmpl = ulTmpl + '
' + data.year + '年' + data.month + '月
\
        
' + liTmpl + '
\
        
';
        }
        document.querySelector('.instagram').innerHTML = '
' + ulTmpl + '
';
        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文件再进行重新上传文件即可。

效果图：