Github + hexo 搭建个人网站教程

1.github创建个人仓库

(1)登录到github账号(如果没有github账号,可以用邮箱注册一个:github注册页面

(2)创建一个新的仓库repositories。
仓库名应该为:用户名.github.io,这个用户名可以使用你的github账号代替。
lC4LWV.png

2.安装Git

(1)想了解什么是github可以戳这里:廖雪峰老师讲解github

(2)从git官网上下载.
下载后安装,在命令行中输入git测试是否安装成功,若安装成功,则会出现以下图片:
lCINjO.png

(3)安装成功后,将git与github账号绑定,鼠标右击打开git bash,设置user.name 和 user.email配置信息:

1
2
git config --global user.name "github用户名"
git config --global user.email "github注册邮箱"

生成ssh密钥文件:

1
ssh-keygen -t rsa -C "github注册邮箱(我是QQ邮箱)"

lC778I.png

(4)默认不需要密码,找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容复制。(打不开就用记事本打开,然后全选,复制)
lCHkrT.png

(5)打开github_setting_keys页面,新建new SSH Key.
lCH0QP.png

title为标题,随便填。
将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH Key.

在git bash中检测github公钥设置是否成功,输入

1
ssh git@github.com

lCbI1I.png
如上则说明成功。这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

3.安装node.js

因为hexo基于node.js,下载地址:download | node.js
下载安装包,检测node.js是否成功,在命令行输入

1
node -v

lCqMDK.png
注意安装Node.js会包含环境变量及npm的安装,检测npm是否安装成功,在命令行中输入

1
npm -v

lCq1ED.png

到这里,安装hexo的环境已经全部搭建完成了。

4.安装hexo

Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,
Hexo框架与以后你自己发布的网页都在这个文件夹中。
创建好后,通过命令行进入文件夹中。

1
2
npm install -g hexo-cli //使用npm命令安装Hexo,这一步安装时间较长,耐心等待
hexo init blog //初始化我们的博客

注意,这里的命令都是作用在刚刚创建的Blog文件夹中。
为了检测我们的网站雏形,分别按顺序输入以下三条命令:

1
2
3
hexo new test_my_site
hexo g
hexo s

打开浏览器,输入地址:
localhost:4000
可以看出我们写出第一篇博客.

注意,如果访问不了“localhost:4000”,说明4000端口被占用了,换一个端口,如:

1
hexo s -p 5000

然后打开“localhost:5000”就可以了

5.推送网站

上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,如下图
lCL6oD.png

进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件,如下图
lCL2JH.png

(1)将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:
lCOFfJ.png
保存站点配置文件。
其实就是给hexo d 这个命令做相应的配置,让hexo知道你要把blog部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。

(2)最后安装Git部署插件,输入命令:

1
npm install hexo-deployer-git --save

(3)分别输入三个命令:

1
2
3
hexo clean 
hexo g
hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。