个人博客搭建Hexo-H2O

0x00 前言

之前本想使用博客园的博客，无奈个性化设置方面遇到了阻碍：我对前端设计不是非常了解，只能从网上复制他人写好的CSS，但是界面甚是难看。于是有了这次使用Github+Jekyll Theme H2O搭建个人博客的过程。

0x01 New repository

这一步的前提是你已经有了一个Github帐号。

image

Repository name一栏中填入：username.github.io.

注意：这里的username最好与你的Github帐号名称相同。

image

注意：勾选“Initialize this repository with a README”

0x02 Jekyll Theme H2O个性化

直接从廖柯宇师傅的Github上下载的Jekyll Theme在几经尝试后无法更换博客主页的封面。后来在Issues 下面发现了这个：

image

于是找到aqingxin师傅的Github 及Blog ，看了看，发现他实现了我想要的效果：

image

于是将aqingxin师傅的Github上的repository下载到本地进行个性化设置。

0x02.1 封面图片修改

image

将你想展示的封面放在assets/img/文件夹下（放到其他文件夹下的情况没有尝试）。

0x02.2 home-title及description修改

• home-title的效果可以从上面aqingxin师傅的博客封面上看到，另一方面它也是浏览器标签页的标题。

• description展示在home-title下面，效果等同于个性签名。

0x02.3 _config.yml修改

• 配置站点

    # Site settings 配置站点
    title: ''#depend yourself
    description: ''#depend yourself
    keyword: ''#depend yourself
    url: 'https://username.github.io'   # your host
  

title、description、keyword这三个参数根据自身情况填写，url中的username则是0x01中你创建respoitory时填写的username。

• Footer

    # Footer
    footer:
      since: 2018
  

Footer的年份将展示在页面底端。

image

• 配置博主信息

   # Author 配置博主信息
   author: 'aqingxin'
   nickname: 'aqingxin'
   bio: '前端开发者，热爱技术，简单乐观爱创造'
   avatar: '/assets/img/profile.png'
  

author与nickname通常相同，是你的ID。bio是展示在你的ID下面的个人介绍。avatar是你的头像图片的路径。

image

• Share

    # Share
    social-share: true
    social-share-items: ['wechat', 'weibo']
  

Share代表你想在文章底部设置的分享网站。可用的站点有： 'qzone', 'qq', 'weibo','wechat', 'douban','google', 'facebook', 'twitter'。这个取决于你自己的喜好。

image

• 配置社交网站

    # SNS settings 配置社交网站
    # url: email, weibo, zhihu, twitter, instagram, juejin, github, douban, facebook, dribble, uicn, jianshu, medium, linkedin
    sns:
      weibo: '//weibo.com/3187835755/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1'
      github: '//github.com/aqingxin'
  

这个在侧边栏展示，你可以将你平时使用的社交网站放到这里，方便其他人查看。

image

• Tags

    # Tags 设置标签
    recommend-tags: true # whether or not display recommend-tags on the sidebar
    recommend-condition-size: 12 # a tag will be recommended if the size of it is more than this value
  

recommed-tags代表是否展示标签，recommed-conditiion-size代表最多展示的标签数。

• ico

这个ico是展示在浏览器标签页上面的：

image

如果想要修改这个ico图标的话，用你自己的ico图标替换掉原来的ico图标即可。

image

这里推荐一个在线制作ico图标的网站 。

其他的修改可以参考廖柯宇师傅的README.md文档。修改完成后可以去yaml-validator检查你修改的yml文件是否有格式错误，如果存在格式上的错误，那么当你访问你的博客会无法得到你要的效果。

0x03 上传博文

• 博文头部格式

    ---
    layout: post
    title: ''
    subtitle: ''
    date: xxxx-xx-xx
    categories: 
    cover: ''
    tags: tag1 tag2 ...
    ---
  

1. layout：post；
2. title：文章的标题；
3. subtitle：文章的子标题；
4. date：文章上传日期，4位year，2位month，2位day；
5. categories：文章的分类；
6. cover：文章的封面图片链接（下面会有提及）；
7. tags：标签。

• 博文封面图片

在这里我一开始使用的Github作为图片托放处，但是将cover设置为图片链接后发现没有效果。于是使用了微博相册作为图片托放处，需在相册内“查看大图”后右击图片“图片复制图片链接”，如果有大量图片的话效率会非常低下，所以后期会找一个云服务提供网站来存放图片。

image

推荐几个免费下载的图片网站：

• https://unsplash.com/
• http://imcreator.com/free
• http://cupcake.nilssonlee.se/
• http://gratisography.com/
• https://pixabay.com/images/search/wallpaper/
• https://www.pexels.com/zh-tw/(这个网站支持中文搜索)

• 博文文件名

4位year-2位month-2位day-title.md，例如：

2019-05-09-明月清泉自在怀.md

按照上述格式写好博文后上传到_posts目录下即可。

0x04 搭建博客目的

1. 作为记录自己平时学习经历，成长，心得的一个地方。

2. 平时看各位师傅的博客总是收获颇丰，所以希望自己的博客能够以精美排版、满满干货的一种姿态展现在每一位看到此博客的人面前，如果有幸自己的博客能够帮助到他人，那更是意外的收获。文章内如有错误，请各位师傅指正，笔者定虚心接受，感激不尽。

3.分享是一种美德。

0x05 总结及参考链接

0x05.1 总结

这次搭建博客虽然遇到了不少坑，但是其中的过程还是很有意思的，而且静态网站相对来说比较安全。暂时没钱购买域名，如果购买了域名，就可以参考年华师傅的博客来进行域名绑定。

0x05.2 参考链接

• https://wei-xun.github.io/2019/github-build-blog/
• http://nianhua.in/github-build-blog.html
• https://github.com/aqingxin/aqingxin.github.io

0x06 2019-08-11更新

之前Tags的header-img折腾好久没有加载出来，今天心血来潮，折腾了一下，遂有此更新。将tags.html中第一个

标签修改为如下内容：

     
TAGS

然后在header-img:后放上你的图片路径即可。