Hexo+GitHub搭建个人网站全网最详细教程

前言

这个故事很长，还要从一只蝙蝠说起！

大二寒假在家闲来无事一直想做一个网站但是苦于没有门路，于是我去各大论坛搜索关于搭建网站的资料，这一搜还真给搜到了，于是这一套Hexo+GitHub搭建个人博客网站的方略就加入了我的项目。这是小弟第一次搭建网站，也是小弟第一次写文章，初出茅庐还有许多不备之处未曾完善，这里只讲搭建过程，内容日后完善。这篇教程算是一个搭建方法的汇总，首次搭建我也是一路坎坷遇到了各种奇葩的问题，但都一一被我克服了，这其中可能借鉴了别处大佬的资料，各位大佬，如有冒犯，还望饶恕，废话不多说我们这就开始。

关于Hexo

说道Hexo许多人或许都知道，这是一个基于Node.js的博客框架，它功能强大，适合轻量级的博客，主题更是丰富多达二百多种，文艺和简约的主题他应有尽有，只需改几个代码就可以换个主题，但Hexo是静态页面，不过作为个人博客来讲静态页面就足够了。Hexo对中文很友好但是GitHub就不一样了，所以我建议用Google浏览器（因为它有页面翻译功能~hhh），这是网址Hexo官网请自行浏览。

关于GitHub

再说GitHub，这个开源的社区可比hexo出名多了。GitHub是基于Git创建的一个免费的开源托管平台，如果你对Git感兴趣我建议你去学一下Git的知识廖雪峰老师讲的就很不错（Git学习）。这时候有同学就会问了，我们搭建个人博客和GitHub有什么关系呢，这里我给大家简单描述一下，众所周知搭建网站需要一个服务器，但是我们个人网站去搭建一个服务器未免过于繁琐，所以我们用GitHub作为我们的服务器来托管我们的博客，通过在hexo和GitHub之间建立关联来实现搭建，通过GitHub也不用我们定期去维护，很方便，接下来进入正题。

搭建步骤

安装Git
安装Node.js
安装Hexo
创建GitHub仓库
将本地与GitHub链接
将Hexo部署到GitHub

1.安装Git

Git是一个版本控制系统，可以更改修改的历史。比如说你今天这个文件改错了但你保存了，明天你发现了这个错误想要修改它，这时候你用Git就可以达到你的目的。先去官网下载一个Git（Git官网），默认下载就好（这里我只说Windows版本），安装好后用一个命令来确认是否安装成功，如下：

git --version

如果输出版本号就说明安装成功了。如图：
在这里插入图片描述
安装好之后直接快捷方式放到桌面，像这样子：

2.安装Node.js

Hexo基于Node.js所以必须安装，Node.js官网。安装好后需要检测一下是否安装成功，开始键+R输入cmd回车，再输入node -v和npm -v,如果都有返回值那就安装成功了。如图：
在这里插入图片描述

3.安装Hexo

首先在电脑合适位置新建一个文件夹姑且叫做“Bolg”，以后Hexo的框架和你发布的网页都放在这个文件夹下。进入新建的文件夹，右击git bash打开窗口，输入命令安装。

npm install -g hexo-cli

安装过程有点长感觉和卡了一样，请耐心等待。安装好后用hexo -v查看一下版本，看是否安装成功。
到这里关于安装的东西就基本完成了。
接下来我们需要初始化我们的博客，输入：

hexo init blog //叫什么名字都行

初始化完毕之后我们分别输入以下命令，

cd blog //进入刚建的“blog”文件夹中
hexo g  
hexo s

之后我们打开浏览器输入localhost:4000就可预览到你新建的博客页面了,大概就长这个样子，如图：
在这里插入图片描述
注：这是我改过主题的，如果成功的话肯定会进去一个页面，如果像是一直加载或者是404那就是有问题进不去页面，问题的可能性有很多，像端口占用，更改IP地址等，这个自行百度，百度上有很多完美的答案，我当时在这个上也逗留了将近两个小时才把问题解决，不要急躁，慢慢改

4.创建GitHub仓库

首先你需要创建一个GitHub账号，在这里我还是建议使用Google浏览器对于英文不好的同鞋来说。建好账户之后登陆，新建一个仓库命名为“你的GitHub名称.github.io”,点击创建就好了。

5.将本地与GitHub连接

打开桌面上的git -bash.exe运行Git，依次输入命令：

git config --global user.name "yourname" 
//这个yourname是你的GitHub名称
git config --global user.email "youremail"
//这个youremail是你创建GitHub的邮箱地址
ssh-keygen -t rsa -C "youremail"
//然后创建SSH密钥，email还是你的邮箱

然后一路回车，最后找到生成的.ssh的文件夹中的id_rsa.pub密钥，将里面的内容全部复制，在你的GitHub的设置里找到新建SSH Key，将复制的内容粘贴进去就行，然后点击添加就OK了。

6.将Hexo部署到GitHub

接下来就要将hexo与GitHub关联起来了。首先打开blog这个文件夹，在里面找到_config.yml文件，如图：
在这里插入图片描述
打开它我建议下一个软件，叫做EditPlus，编辑起来方便点，去百度搜索下载破解版，在下个汉化包就可以用了。
打开之后找到如下位置，直接搜索deploy就行。

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

把这里面的关于你的东西都改成能给你的，保存。
再输入命令npm install hexo-deployer-git，一切就绪后就到了激动人心的时刻了！依次输入以下命令：

hexo clean
hexo g
hexo d

至此，Hexo+GitHub网站搭建完毕，以后你就可以用你的用户名.github.io来登陆你的个人网站了。
你也可以购买域名来用一个更加炫酷的网址，这里就不一一介绍了，我会放几个关于设置Hexo主题的链接给你们，顺便推荐几个好的论坛网站，知乎,CSDN,简书,博客园 等。
以上就是我的第一篇CSDN文章，如果能帮到你们我很荣幸，如果帮不到你们我会继续努力，如果有任何意见和问题可以评论告诉我呦，谢谢您看到这里，好人一生平安！

附录

本文参考：https://blog.csdn.net/sinat_37781304/article/details/82729029
https://zhuanlan.zhihu.com/p/26625249
作者个人博客地址：
https://sjy1123.github.io/
作者GitHub地址：
https://github.com/Sjy1123
搭建个性博客学习地址：
个性主题和各种功能总结