github+git+hexo-matery博客搭建(详细教程)

我的个性化博客： http://xiaolan1.icu

一、创建github账号

有github账号和使用经历的可直接跳过

首先进入github官网 https://github.com/

注意：github可能需要梯子进入，要不然可能进不去

Sign up 创建账号，跟着步骤注册即可，注册完登陆，登陆后，进入第二个，你的仓库，

NEW 一个新的存储库

注意：名称填写： 你的用户名.github.io

填写完在最下面点创建即可

接下来你就可以输入 你的用户名.github.io来访问你的页面啦，虽然这网址有点怪，我们后续可以给他匹配域名

二、安装git并绑定github账号

1、安装git

进入git官网https://git-scm.com/下载git，默认安装

安装完成后，在桌面右击出现红色框内表示安装成功

2、绑定github账号

绑定git与github账号，方便以后往github账号中上传文件更简单

1.添加ssh key

进入settings，点击再点击 打开前面下载的git，在里面输入

ssh-keygen -t rsa -C "xxxx@xxx.com" 

双引号中为你的github账号邮箱，执行完成后，打开生成的ssh key文件 id_rsa.pub,仿照我的文件目录

复制id_rsa.pub文件中的内容，为你的秘钥，把内容粘贴到前面打开的New SSH key中的 key中，Title随便填

2.验证ssh key是否添加成功

输入

在下面提示的消息中输入前面设置的密码，输入的时候你看不到，出现下面这种消息表示添加成功

3.设置username和email

在git 中输入

git config --global user.name "你的用户名"
git config --global user.email "你的用户名邮箱"

就好了，这里提交文件用下面hexo的命令，如需git命令提交文件，则请看git标签中，git提交文章

三、使用hexo来进行博客搭建

1、安装node

进入node官网下载https://nodejs.org/en/ ，然后默认安装

安装完成后，打开cmd检验是否安装成功，win+R 输入图片内容

则安装成功

2、安装hexo并初始化hexo

在D盘中新建一个文件夹为Blog,打开Blog,右键打开Git Bash Here ,输入

npm install -g hexo cli

安装完成后，输入以下命令初始化博客

hexo init

输入下列命令进行静态部署：

hexo g

部署完成后，输入以下命令可以查看到：

按住Ctrl 点击localhost：4000可以打开这个网站，此时出现以下这个界面，表示hexo初始化成功

想要关闭命令按： ctrl + c 为停止运行

3、将hexo部署到GitHub

此时你生成的文件只能在你的电脑中运行，其他用户看不到，需要把Blog中的文件上传的github上。

在Blog中找到_config.yml右击 在打开方式中用 记事本打开，拉到文件底部，填写以下内容：

deploy:
  type: git
  repository: https://github.com/1417847538/1417847538.github.io.git  #你的仓库地址
  branch: master

注意空格！冒号后面有一个空格 你的仓库地址为code下面的第一行网址，复制下来，粘上去即可

回到Blog文件中，右击打开Git Bash 输入命令：

npm install hexo-deployer-git --save

等待安装完成后，分别输入：

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成后，输入你的 你的用户名.github.io 就可以打开你的网页看到以下这个界面了

四、配置hexo主题（matery）

hexo中有很多的主题样式，我们在github中搜索hexo主题，或者进入hexo主题官网 https://hexo.io/themes/ 都能选择一款自己喜欢的主题作为自己的博客框架

这里我选择的matery主题 首先进入https://github.com/blinkfox/hexo-theme-matery/tree/master 下载这个主题，下载完成后解压到文件夹

在自己Blog文件夹中建一个名为theme的文件夹把刚刚解压的hexo-theme-matery文件复制到theme文件夹中，打开Blog下的_config.yml文件夹，更改#Site下的内容，例如

注意：冒号后有一个空格！

然后换上你的主题，找到如下内容

在theme中换上你前面解压的主题名，我这里为hexo-theme-matery,填写完成后保存，打开Git Bash ，输入

hexo clean  #清除缓存文件 db.json 和已生成的静态文件 public
hexo g      #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d      #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

就将自己当前更换的主题文件上传到自己的github中了。

一个调试技巧：在更改Blog内容时，可以在Git Bash 中输入 hexo s 打开http：后的网址，进行实时页面更改后的查看
以后每次更改完Blog文件中的内容以及确认后，都可以输入hexo clean && hexo g -d 进行文件上传。

五、个性化matery主题，以及我在配置中出现的问题—进阶

1、个性化matery主题

具体可以参考hexo-theme-matery文件夹下的这两个文件，上面为英文版，下面为中文版[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传里面的内容在这里遍不过多介绍，照着做就好

2、我在配置中出现的问题

1.主题下的_config.yml

首先要浏览主题下的（也就是hexo-theme-matery）的_config.yml文件，里面都有相应的中文内容介绍，一开始最好浏览一遍，进行你想要的更改

2.二级菜单的使用

如果你想要使用二级菜单，你可以在想用的一级标签下按如下方式输入children里的内容注意children以及里面内容放的位置

3.music的使用

这里配置完music里的内容后，有一点要注意[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

id必须为自己创建的歌单的id，不能是例如 网易云中我喜欢的音乐的id，这个id好像通常为10位，而我喜欢的音乐id为9位，就这个原因，我折腾近3个小时，希望大家避雷

4.valine留言模块

这是个所有人都可以留言的评论模块，具体可参考 https://valine.js.org/quickstart.html

关于leanCloud的使用

目前我掌握的是管理所有人的留言，在对应的以下选择中可以看见评论内容，然后可以进行选择性删除。

5.gitalk留言模块

gitalk和gitment，我在网上查阅，大家建议使用gitalk评论模块，使用建议参考

https://segmentfault.com/a/1190000018072952

注意：找到gitalk.ejs文件，其中id必须填写，这就要你先前往github中使用issue，避雷！

这里必须给issue设置标签，第一个默认必须为Gitalk，第二个为你设置的id名，跟gitalk.ejs文件中id名匹配，才能在页面中显示gitalk留言模块，这里大概折腾2小时。

疑问望大佬给予回答：关于github登陆443问题

这个评论目前只能进入github找到我的github.io仓库下具体issue内容中进行评论，而不能在页面中直接进行评论。

6.新建文章以及推荐文章设置

我们所写的文章都在_posts文件夹下

如果想要新建文章，可以在这个文件夹下新建 xxx.md文件，xxx为英文名，内容随便写，建议语义化文章标题，以后方便修改。

里面的内容配置具体参考 主题文档中的
按示例可进行配置