Hexo&Github-Pages搭建个人博客

时间:2021-09-11 02:16:02

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.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、创建“标签”选项

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

Hexo&Github-Pages搭建个人博客

PS:熟练英语很重要!!!资源就摆在眼前就不要乱搜了!!!

注意:上传时候有没有 hexo clean就 hexo d -g 有时发生不一致错误

some problem

hexo本地预览和发布效果不一样(图标,头像,动画 ,字体)

一般原因:

  1. 你是不是网不好,没加载完?
  2. 站点下或主题下的_config.yml里配置错误

    比如路径写错
头像路径配置错了,应该写
avatar: "/img/headportrait.jpg"
而不是
avatar: "img/headportrait.jpg"
一个是相对根目录,一个是相对当前路径
  1. 我的错误是

Hexo&Github-Pages搭建个人博客

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(不同主题可能不同)

Hexo&Github-Pages搭建个人博客

修改完成。

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

Reference:

[1]样式更换

[2]博文&页面新建

[3]主题hexo-theme-yilia

[4]主题black-blue 实例

[5]博文插入图片

如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】

如果,您希望更容易地发现我的新博客,不妨点击一下,【关注我】

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

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

感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是kimsimple。