Hexo + yilia + github 搭建个人博客

2020-8-16

之前看到一个连接，类似这样的https://username.github.io的网站，当然是某某大神的博客地址，然后就疑惑，哇瑟，居然可以在github上博客，So Cool!,我也要，安排！

一、环境配置

node
有了，没有的同学戳这里（安装node）
git
有了，没有的同学戳这里（安装git）
github账号
有的，没有的同学…

二、安装Hexo

全局安装hexo,最好要全局安装的，想要官方pick的可以Hexo

1 2	$ npm install -g hexo

新建项目文件夹，进入该项目路径，初始化hexo

1	$ hexo init

安装启动服务，并更新package.json文件中的依赖

1	$ npm install hexo-server --save

好了，可以启动服务预览一下

$ hexo s

Tips1: 默认是4000的端口，可能有不少人运行了之后发现无法访问，通常这种情况是4000端口被占用，比如电脑上安装了福析阅读器的人。

可以更改端口

1	$ hexo s -p 5000

如果不想每次都更改这个文件这么麻烦的话，可以在hexo的配置文件_config.yml中修改或增加这段代码

# Server
server:
  port: 4000
  compress: true
  header: true

打开连接，你看到的是这样的

Control +C 结束服务

其他配置可参考（Hexo配置）

觉得风格不太好看，不要担心，有很多主题开源的，有哪些精美主题（主题大全），r如果官网的不满足你的审美，可以去github搜索，知乎（有哪些好看的Hexo主题），都不满意，那就自己造车吧！

我一开始选用的是Yilia的主题，下面主要分享一下使用主题的过程。

三.使用Yilia模板

示例网址（http://litten.me/）
1.安装
进入项目路径，执行以下代码

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

如果下载的太慢，直接去github下载code,在themes目录下新建yilia,将解压的代码放在themes/yilia下就好了

2.运行构建

1
2

hexo g

3.运行服务

1
2

hexo s

会看到初始效果，即上图中没有头像、只有一篇已发文章、标签文章列表不能使用、博主名和签名默认值、文章没有评论功能的样子。

新建文章和页面

hexo new <layout>

hexo new page xxx

改头像

在主题配置文件下，配置

1 2	avatar: /img/xxxxx.jpg

设置标签

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

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

1	$ hexo new page categories

成功后会提示：

1	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属性。

---
---
title: 小篮子的博客
categories: 
- note
---
Welcome to [Callanna](https://github.com/Callanna)!  
这个是第一次建站记录，后面会更新首页内容

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

2、创建“标签”选项

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

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

1	$ hexo new page tags

成功后会提示：

1	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属性。

---
---
title: 博客搭建
date: 2020-08-16 10:31:36
categories: 
- develop
tags: 
- Web前端
- work
---
最近看到一个很不错的博客网站，学习了他的开源代码，了解了很多知识，接下来会把掌握到的知识笔记记录下来

配置主题标签引导

在主题配置文件中，添加菜单

menu:
  主页: /
  技术: /categories/develop
  随笔: /categories/note
  标签: /tags/work

然后再次 hexo g,和hexo s以后

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

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

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。

怎么删除文章

一开始尝试写了很多test文章和page,想要删除，发现删文件夹是不够的，解决步骤是：删除.deploy_git文件夹并且执行hexo clean后，重新执行hexo g -d 即可。

四、部署博客

好了，最后push到github上，新建一个
项目，命名为username.github.io,我就以我的用户名新建了一个项目Callanna.github.io，然后再项目setting 里添加 deploy key，就是将本地
.ssh/id_rsa.pub的ssh添加就好了，

没有ssh的，就是使用

1	$ssh-keygen -t rsa -C "你的git登录邮箱"

生成ssh公私钥

设置config1中的deploy属性

deploy:
  type: git
  repository: git@github.com:Callanna/Callanna.github.io.git
  branch: master

repository就是着这个博客所在仓库的地址

然后在终端里运行下列命令即可。

1
2
3

hexo clean
hexo g
hexo deploy

hexo执行 hexo deploy 后,出现 ERROR Deployer not found: git
解决办法执行 npm install hexo-deployer-git –save

然后输入密码，

通过以后，就上传了代码了

最后看看打开https://callanna.github.io，

BingGo!,就成功建立了自己的blog啦！开心！