使用hexo+github搭建个人博客

​ 首先,作为一名不合格的程序猿的我,发表一下个人看法。当别人都使用博客的时候,我是非常羡慕嫉妒恨的,所以我就在搜集了相关资料以及在我大神室友的帮助下,搭建起了个人博客。但是由于长时间荒废,导致之前的博客不翼而飞,遂现在重新搭建,并且决定痛改前非,发表此文,以表决心。

​ 当然为表我对我舍友的衷心感谢,先把他的链接放在这儿Sweet、汤圆儿,他的博客里面有许多可以学习的地方,大家可以积极查阅翻看。

​ 现在回归正题,用hexo+github搭建博客应该是最近兴起的一种风潮,hexo的搭建较为简洁,对新手也不仇视。本篇博客的搭建是在windows10系统下进行,至于mac,由于本小编一穷二白、捉襟见肘、家徒四壁……所以我不清楚mac具体如何搭建。不多赘述,具体步骤如下:

  • 安装环境。具体需要:node.js git hexo ;
  • 注册github账号,配置ssh,创建仓库;

  • 申请域名及解析域名。可以去阿里云,或者是godaddy购买域名。在阿里云上购买域名可以直接解析,在godaddy上购买的域名,需要在其他平台解析(因为godaddy是新加坡的公司),我是用的是腾讯云解析。

接下来详细说明步骤:

安装node.js

下载node.js

官网下载:https://nodejs.org/en/

选择合适的版本下载,上图展示安装过程。

安装node.js

选择合适的位置安装

直接next

点击安装

安装完成

安装完之后,可以通过 win+r 唤出命令输入框,输入 cmd,回车,调出命令行,输入 node –version,查看是否安装成功。成功字样将会显示你的nodejs的版本号,我的版本号如下:

至此,nodejs安装完毕。

安装git

下载git

官网下载:https://git-scm.com/download

选择合适版本下载,上图展示安装过程。

安装git

点击安装

安装完成后,有两种方式验证是否安装成功:

  • 方式一:鼠标右键,是否有 Git Bash Here字样,点击将会调出命令行,如下图:

点击Git Bash Here调出命令行

  • 方式二:通过 win+r 唤出命令输入框,输入 cmd,回车,调出命令行,输入 git –version,查看是否安装成功。成功字样将会显示你的 git 的版本号,我的版本号如下:

既然我们已经安装好了Git,我们不妨先创建github的仓库。

搭建github

注册github账号:

github网址:https://github.com

Sign up 是注册,输入账号、邮箱、密码,然后点击注册按钮,之后进入你填写的邮箱,进行验证邮箱

Sign in 是登录,如果你已经有了账号,直接登录即可。

创建仓库,步骤如下:

点击Start project,创建仓库

这里有几点注意:

1.仓库名,需要严格遵守命名规则,就是你的 账户名.github.io,这里我已经创建好了博客,所以这里有报错,读者自动忽略就好;由此可见,每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库,将来你的网站可以通过 https://用户名.github.io访问。

2.仓库公开还是私有的选择,一般情况下仓库公开就好,选择私有的话,如果你是学生,将有5个免费私有仓库的优惠(没记错的话是5个),如果你不是学生,将需要支付一定的费用使用私有仓库;

3.建议初始化一下README。

最后点击Create repository创建仓库,创建好仓库后,可以通过点击Setting更改一些设置,之后的一些设置,将会在这里进行修改,之后将会讲解,至此github仓库创建完成。

配置SSH KEY

github仓库已经准备好了,但是你需要确定你的SSH key也配置好了,这会在后面的hexo配置中使用到。

小编推荐git的使用教程是廖雪峰的教程,讲解清楚,可以较为系统的学习一下git,对自己以后的工作或许会很有帮助。

这里就简单讲解一下,如何添加SSH key。

首先明确,向github远程仓库传文件有两种方法,一是使用https,这种方法每次都需要输入用户名和密码,较为麻烦;另一种就是使用SSH key,只要填写好了key,之后的操作就非常的简单。

读者可以先查看一下自己的用户目录下是否有.ssh文件夹,如果已经有了,它必然会有如下两个文件:

id_rsa是你的私有秘钥,不可泄露;id_rsa.pub中的内容则是需要放进github中。

如果你没有这个文件夹,可以使用下面命令进行创建:

$ ssh-keygen -t rsa -C “你的邮箱”

连续3次回车,最终会生成上面提到的文件,之后打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key,给key起个名字,在使用记事本或者Notepad++打开id_rsa.pub,将所有内容复制粘贴进去,需要保证内容完全一致方可:

测试是否成功

$ ssh -T git@github.com 这里不需要改邮箱

如果提示

Are you sure you want to continue connecting (yes/no)?

输入yes,然后会看到:

这表示你的SSH配置已经成功!

如果你没有配置你的user.nameuser.email,建议可以继续配置:

$ git config –global user.name “liuxianan” // 你的github用户名,非昵称
$ git config –global user.email “xxx@qq.com“ // 填写你的github注册邮箱

安装hexo

你可以参考官方文档进行安装,这是官方文档:https://hexo.io/zh-cn/docs/

首先在本地创建一个Hexo文件夹,用于存储本地文件(做本地文件保存以及测试使用),我在本地拥有一个github的仓库,我会将涉及到的github版本库放在这个gitrepo的文件夹下,便于管理,也较为美观。并且在Hexo的所有目录(父目录与子目录)中尽量不要有中文,可能会出现不可知的问题。我的目录如下:

声明几点:

1.很多命令可以使用win的cmd完成,但是部分命令会有问题,所以建议使用git bash;

2.本篇文章使用的hexo版本是3.x,网上有许多版本是2.x,将会有许多不同之处,参考时需注意;

3.hexo有两个_config.yml文件,一个是根目录下,称之为站点配置文件;另一个是theme主题下的,称之为主题配置文件

现在开始安装,首先你需要进入该目录,建议使用Git Bash Here,可以在该目录下右键,然后进入命令行:

当然你也可以先进入git bash命令行,使用cd进入你设置的目录。如果你秒懂,不用我多说;如果你不懂,那就需要学习一下Linux命令,暂时可以使用上一种方法进入git bash。

安装

$ npm install -g hexo

等待一段时间,将会安装完成,如图:

初始化

$ hexo init

初始化之后你的目录将会发生一些改变,hexo下载了一些文件到你的目录中,如图:

之后的部署,hexo将会把public文件夹中的内容生成相关的html文件,然后提交到github上去。

启动服务

$ npm install

$ hexo server 输入完这行命令后,在浏览器中输入http://localhost:4000/,将会看到你的hexo页面。Ctrl+C退出该命令,浏览器页面也将不能访问。

无需困惑你的页面和我的不同,这是我切换主体后的页面。第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,之后会讲解如何切换主题。当你能够查看hexo的界面时,就表示,你的hexo已经搭建成功了。现在我们将他部署到github上。

部署

$ hexo clean 清理本地缓存

$ hexo generate 生成网页

$ hexo deploy 部署到github

这三个命令是你每发一篇文章都会用到的命令,放在开头以示提醒

现在进行首次部署:

​ 先运行 $ hexo clean 和 $ hexo generate 命令,运行$ hexo deploy命令前,需要先进行以下几个任务,不然可能会报ERROR Deployer not found: git错误:

  1. 运行命令

    $ npm install hexo-deployer-git –save save前是两个-

  2. 确定两点

    1.ssh key配置完成

    2.修改站点配置文件,也就是_config.yml文件内容。找到deploy部分,进行如下修改:

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

    记住修改repository部分。细心的同学会发现这里多了一个 ‘-’ 这是因为我之后的主题修改中会添加相应的功能,需要修改deploy部分,在这里不多说,你也可以直接这样:

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

    但是不能这样:

    deploy:
    type: git
    repository: https://github.com/wyprun/wyprun.github.io.git
    branch: master

    后面一种写法是hexo2.x的写法,3.x已经不行了。

到这里你的配置就基本完成,现在看一下命令运行结果图:

hexo 命令

hexo-deployer-git

hexo deploy

至此,你的hexo安装完毕,你可以通过浏览器输入http://用户名.github.io访问你的博客了。

域名

​ 可以去阿里云,或者是godaddy购买域名。在阿里云上购买域名可以直接解析,在godaddy上购买的域名,需要在其他平台解析(因为godaddy是新加坡的公司)。

​ 在这里至于怎么个买法,就不详细说明,对于购物,我想大家都是行家里手。只强调一点,只买域名就可以,至于其他什么全家桶啊,各类服务啥的,都不需要购买。接下来着重讲一下如何解析域名,以及如何使用域名,在解析过程中,可能需要你先去进行域名的备案,这里也不多说,按照要求办事儿就行。

godaddy域名解析

​ 我用的是腾讯云去解析godaddy的域名,首先你需要注册腾讯云的账号,这里不多赘述,现在直奔主题,先上图:

​ 在图中我标识出了几处注意点,上面那个注意提示我们需要修改godaddy处的DNS解析,下面的主机记录记录类型记录值这三处是我们需要修改的地方。现在先去godaddy处修改DNS。

首先找到 账户–>我的产品,查看你的域名,点击DNS

之后在DNS页面找到域名服务,点击添加,或者更改,将腾讯云中提供的两个dns添加进入,更改成如下:

​ 现在回到腾讯云,进行解析域名。绑定域名分2种情况:带www和不带www的。域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以先ping一下你的用户名.github.io的IP,然后将A记录指向ping出来的IP,将CNAME指向你的用户名.github.io,这样可以保证无论是否添加www都可以访问。点击添加记录,记录主要添加如下:

主机记录 记录类型 线路类型 记录值
@ A 默认(这里添加默认就可以) 你的github仓库IP
www CNAME 默认(这里添加默认就可以) 用户名.github.io

获取github仓库IP:

$ ping 用户名.github.io

这样你的域名就解析完成了。

阿里域名解析

​ 阿里的域名解析更为简单,先看一下阿里域名管理页面:

​ 可以看到这里就有解析按钮,点击进行解析就可以,格式和上面所说的格式相同,不多赘述。

使用域名

​ 有了域名自然要去使用域名。

CNAME文件

​ 现在你的Hexo目录下找到source文件夹,在其中新建一个CNAME文件。

​ 右键新建txt文本–>输入你购买的域名–>保存关闭–>快捷键F2或右键该文本重命名–>CNAME并去掉txt–>会提示文件不可用,忽视,点击确定即可。这里有几点需要注意:

绑定域名

进入你的github仓库的setting设置中,

找到最后一项,GitHub Pages,起初的页面显示如下:

在Custom domain处填入你的域名,点击保存,绑定成功后,结果如下:

​ 最后说明,绑定了新域名之后,原来的http://用户名.github.io并没有失效,而是会自动跳转到你的新域名。


结语

​ 到这里,你的博客已经搭建完毕,在之后的博客中,我会陆续介绍如何使用Hexo、如何修改Hexo主题、如何修改主题的配置等,敬请期待!


谢谢您的鼓励!