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。

相关文章