Hexo&Github-Pages搭建我的博客

some基础知识

hexo

• hexo是一款基于Node.js的静态博客框架

github-pages说明

• github有两种主页,一种是github-page(我的主页),一种是项目主页,本教程针对我的主页
• github-page须要将hexo博客发布到repository的master(主干)便可
• github的我的主页要求repository的名称和username一致，加入username是tom，则repository的名称为tom.github.io

准备

1.注册github帐号，如kk,新建一个仓库kk.github.io

2.安装git , NodeJS,配置ssh私钥

3.安装hexo

在准备安装hexo的目录启动git Bush

• 安装npm install hexo -g
• 查看版本hexo -v
• hexo init 初始化hexo
• 修改站点配置文件，翻到最后

deploy:
     type: git
     repo: https://github.com/kk/kk.github.io.git
     branch: master

4.选择并更换主题

• 打开git Bash，定位到博客的位置
• 选择主题，找到主题地址，如next主题
• 下载主题：git中继续输入git clone https://github.com/iissnan/hexo-theme-next themes/next
• 注意有两个配置文件_config.yml（整个blog的和主题的，约定为站点配置文件和主题配置文件），将站点配置文件中的theme: xx改成theme: next。一个主题还有不一样模板，在主题配置文件中找到scheme,开启你喜欢的一个，其余#注释
  注意：“:”后有空格
• 本地测试一下看主题是否完备(hexo s --debug)
• 更新操做

hexo clean  
hexo genarate
hexo deploy

• 应该能够经过kk.github.io访问了

5.完善

菜单设定

主题配置文件中
menu:
  #主页: /archives/
  全部文章: /archives/
  分类&标签: /tags
  留言板&关于我: /about/
  建站日志: /build-log/

菜单语言设置

站点配置文件
# Site
title: kimsimple's Blog
subtitle:
description: 
author: kimsimple
language:zh-Hans #可将菜单设置为简体中文
timezone:

添加评论框

写博文

1.新建博文

• 进入Hexo文件夹，启动git Bush
• 新建文章hexo new "文章题目",在source_posts下找到文档，在此目录直接新建.md文件也可

2.新建页面

• hexo new page "页面名称"，如新建test页面
• 发现source\test文件夹下有index.md
• 见后文两实例（分类标签页面）

分类&标签

一、建立“分类”选项

1.1 生成“分类”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

$ hexo new page categories
成功后会提示：

INFO Created: ~/Documents/blog/source/categories/index.md
根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

1.2 给文章添加“categories”属性

打开须要添加分类的文章，为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意：hexo一篇文章只能属于一个分类，也就是说若是在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

---
title: jQuery对表单的操做及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
---

至此，成功给文章添加分类，点击首页的“分类”能够看到该分类下的全部文章。固然，只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

二、建立“标签”选项

2.1 生成“标签”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

$ hexo new page tags
成功后会提示：

INFO Created: ~/Documents/blog/source/tags/index.md
根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: 标签
date: 2017-05-27 14:22:08
---

添加type: "tags"到内容中，添加后是这样的：

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

保存并关闭文件。

2.2 给文章添加“tags”属性

打开须要添加标签的文章，为其添加tags属性。下方的tags:下方的- jQuery - 表格

• 表单验证就是这篇文章的标签了

---
title: jQuery对表单的操做及更多应用
date: 2017-05-26 12:12:57
categories: 
\- web前端
tags:
\- jQuery
\- 表格
\- 表单验证
---

至此，成功给文章添加分类，点击首页的“标签”能够看到该标签下的全部文章。固然，只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

细心的朋友可能已经发现，这两个的设置几乎如出一辙！是的，没错，思路都是同样的。因此咱们能够打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，以后执行hexo new 文章名命令生成的文件，页面里就有categories:项了。

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，因此能够在这里根据你本身的需求添加一些默认值。

3.写博文,md文件

实例：

---
title: 如何利用Github Pages和Hexo快速搭建我的博客 #标题
date: 2017-5-7 18:02:00 #建立时间
tegs: [Hexo,Github] #标签
categories: Hexo #分类
---
正文

Markdown编辑器

本地编辑器：Haroopad，很是小众的一款Markdown编辑器，左边编辑右边实时预览效果，很是轻便；
在线编辑器：MaHua，也是比较小众的一款Markdown编辑器，但效果确实很棒，个人这篇博文就是用MaHua写的。

为博文插入图片

绝对引用

当Hexo项目中只用到少许图片时，能够将图片统一放在source/images文件夹中，经过markdown语法访问它们。

source/images/image.jpg
![](/images/image.jpg)

图片既能够在首页内容中访问到，也能够在文章正文中访问到。

相对引用

图片除了能够放在统一的images文件夹中，还能够放在文章本身的目录中。
文章的目录能够经过配置_config.yml来生成。
post_asset_folder: truepost_asset_folder设为true后，执行命令$ hexo new post_name，
在source/_posts中会生成文章post_name.md和同名文件夹post_name。
将图片资源放在post_name中，文章就可使用相对路径引用图片资源了。

_posts/post_name/image.jpg
![](image.jpg)

上述是markdown的引用方式，图片只能在文章中显示，但没法在首页中正常显示。
若是但愿图片在文章和首页中同时显示，可使用标签插件语法。

_posts/post_name/image.jpg
{% asset_img image.jpg This is an image %}

CDN引用

除了在本地存储图片，还能够将图片上传到一些免费的CDN服务中。好比Cloudinary提供的图片CDN服务，在Cloudinary中上传图片后，会生成对应的url地址，将地址直接拿来引用便可。

4.发博文

hexo clean
hexo generate
(若要本地预览就先执行 hexo server，本地查看)
hexo deploy(发布了)

hexo 使用

hexo clean 清除缓存, 删除public文件夹
快捷命令
hexo g == hexo generate 生成待发布的文件,即生成静态页面至public目录
hexo s == hexo server 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo d == hexo deploy 将.deploy目录部署到GitHub
hexo n == hexo new
hexo help # 查看帮助
hexo v == hexo version #查看Hexo的版本
组合使用
hexo d -g

PS：熟练英语很重要！！！资源就摆在眼前就不要乱搜了！！！
注意：上传时候有没有 hexo clean就 hexo d -g 有时发生不一致错误

some problem

hexo本地预览和发布效果不同(图标，头像，动画 ，字体)
通常缘由：

1. 你是否是网很差，没加载完？
2. 站点下或主题下的_config.yml里配置错误
   好比路径写错

头像路径配置错了，应该写
avatar: "/img/headportrait.jpg"
而不是
avatar: "img/headportrait.jpg"
一个是相对根目录，一个是相对当前路径

1. 个人错误是

https不能用http的资源
要不你用下载好的js，要不把外链的js换成https
直接打开连接https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js
复制新建文件require-2.1.6,jquery-1.9.1.min.js
放入public的JS文件夹，改一下index.html中此连接发现问题解决,就用这种方法解决。
将require-2.1.6,jquery-1.9.1.min.js放入主题的source/js目录下，为使以后生成的html页面连接为下载好的JS文件，需修改模板

EJS是一个简单高效的模板语言，经过数据和模板，能够生成HTML标记文本。能够说EJS是一个JavaScript库，
EJS能够同时运行在客户端和服务器端，客户端安装直接引入文件便可，服务器端用npm包安装

找到模板left-col.ejs（不一样主题可能不一样）

修改完成。
PS：想了好长时间也没解决的问题，问了一个学长，立马看控制台有错没有，有时候习惯于偷懒，但愿找到现成的答案，缺忘记最直接的错误提示。

Reference:

[1]样式更换
[2]博文&页面新建
[3]主题hexo-theme-yilia
[4]主题black-blue 实例
[5]博文插入图片

若是，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】。

若是，您但愿更容易地发现个人新博客，不妨点击一下，【关注我】

博文是本身对学习成果的总结,学习总结知识-》分析问题-》解决问题。

文中存在的观点/描述不正确的地方，欢迎指正。

感谢您的阅读，若是您对个人博客所讲述的内容有兴趣，请继续关注个人后续博客，我是kimsimple。