利用github和hexo搭建个人博客的简单教程

欢迎你来到我的博客


写在前面的话:

   这是一篇教你使用github和Hexo搭建自己独立博客的教程,里面介绍了如何使用和配置Hexo框架。如何将Hexo部署到自己的Github项目中等等。

   首先,我要说明一下我是一名在校大学生,虽然我是计算机专业,但是在我搭这个网站之前对网站开发和前端等等这些方面都是零基础。

   有可能我写的文章中有一些错误,也希望大家能够在评论区指出来,谢谢理解。

   如果你也想搭建一个自己的博客,希望你做好准备,因为过程可能有些复杂,必须要经得折腾。好了,废话不多说,我们开始吧。


NO.1

首先我们要做一些准备工作(搭建之前最好阅读一下官方文档):

   以上必须全部准备好!github账户注册我就不多说了。我们先在自己喜欢的磁盘里面创建一个文件夹,文件夹名称随你自己取,最好是英文,例如dog啊,pig啊,blog啊等等。将另外两个工具都安装到我们创建的文件夹中,这样以便于之后的管理。

   安装Node.js非常简单,只要选择对应版本安装即可,不需要配置环境变量。安装Git的话,也是在官网选择对应版本安装,安装完成后在命令行输入 git version 有输出版本号说明安装成功。

   安装成功后在该文件夹目录下单击鼠标右键,我们就会发现右键菜单里就多了两个选项 Git GUI Here和Git Bash Here 两个按钮,一个是图形界面的Git操作,一个是命令行,我们选择Git Bash Here。


NO.2

然后就是安装Hexo:

  • Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
点击Git Bash Here之后,输入npm命令即可安装。

   第一句是安装 Hexo,第二句是安装hexo部署到git page的deployer,两个都需要安装。(注意粘贴代码时不要用Ctrl+C,否则会停止命令)

npm install hexo-cli -g
npm install hexo-deployer-git –save


N0.3

安装完成我们要开始建站了:

在我们刚刚创建的文件夹里面新建一个文件夹Hexo,然后在Hexo文件夹里单击鼠标右键,选择
Git Bash Here,输入命令:

hexo init

  安装 Hexo 完成后,Hexo 将会在 Hexo 文件夹中新建所需要的文件(初始化)。

接下来安装Hexo其他插件(如果不想之后出错的话,最好全装上把。):

npm install hexo-generator-index –save
npm install hexo-generator-archive –save
npm install hexo-generator-category –save
npm install hexo-generator-tag –save
npm install hexo-server –save
npm install hexo-deployer-git –save
npm install hexo-deployer-heroku –save
npm install hexo-deployer-rsync –save
npm install hexo-deployer-openshift –save
npm install hexo-renderer-marked@0.2 –save
npm install hexo-renderer-stylus@0.2 –save
npm install hexo-generator-feed@1 –save
npm install hexo-generator-sitemap@1 –save

然后再执行以下语句:

hexo generate( hexo g )
hexo server ( hexo s )

大功告成,现在我们就可以在浏览器地址栏输入: localhost:4000 在本地预览最初的效果啦。

N0.4

将博客部署到Github上:

   我们现在需要做的就是把本地的博客发布到服务器上,让别人也可以连接我们的博客。而 Github Pages 就帮我完成了这件事情。

   但是 Github Pages 的代码就是寄存在Github上面的。那么接下来我们需要在Github上面创建一个新的项目。

   前面我们已经注册了github账户,现在我们登录github

   然后点击右上角的个人中心

First
First

   选择 Your repositories

   单击绿色的新建按钮

Second
Second

   最后按照如下图所示填写信息:

Third
Third

   注意:yourname改成你自己自定义的名称(例如:wangergou.github.io)

欢迎 follow 我的github


N0.5

配置SSH密钥:

   配置Github的SSH密钥可以让本地git项目与远程的github建立联系,让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步。

   操作如下:

第一步、看看是否存在SSH密钥(keys)

首先,我们需要看看是否看看本机是否存在SSH keys,打开Git Bash,并输入命令:

cd ~/. ssh

这是检查你本机用户home目录下是否存在.ssh目录。

如果不存在此目录,则进行第二步操作,否则,你本机已经存在ssh公钥和私钥。(可以略过第二步,直接进入第三步操作。

第二步、创建一对新的SSH密钥(keys)

输入命令

ssh-keygen -t rsa -C “your_email@example.com
这里将按照你提供的邮箱地址,创建一对密钥。

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

   直接回车,将密钥按默认文件进行存储。此时也可以输入特定的文件名,比如:

   /C/Users/you/.ssh/github_rsa(随便你啦)。

   接着,根据提示,你需要输入密码和确认密码。说到这里,如果你很放心,其实可以不用密码。这样到输密码的时候,都直接回车,所以每次push就只管回车就行了,以后提交什么的多方便啊。所谓的最安全的密码,就是没有密码哈哈哈~~~

   相关提示如下:

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

输入完成之后,屏幕会显示如下信息:

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

第三步、在GitHub账户中添加你的公钥

运行如下命令,将公钥的内容复制到系统粘贴板(clipboard)中(手动复制也是可以的,就是你邮箱账户前面的那一串)。

clip < ~/.ssh/id_rsa.pub

现在登陆我们的github
  1. 进入你的Settings,点Account。

  2. 选择SSH Keys。

  3. 粘贴密钥,添加即可。

第四步、测试

   可以输入下面的命令,看看设置是否成功:

ssh -T git@github.com

如果是下面的反馈:

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

   不要紧张,输入yes就好,然后会显示成功(successful)。

第五步、设置用户信息

   现在你已经可以通过 SSH 链接到GitHub了,还有一些个人信息需要完善的。Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理。

   输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字根据自己的喜好自己取,而不是GitHub的昵称。

git config –global user.name “yonhuming”//用户名
git config –global user.email “wangergou@163.com//填写自己的邮箱

到这里SSH Key已经配置成功,本机已成功连接到github。

N0.6

将本地的Hexo文件更新到Github仓库:

  • 登录Github打开自己的项目(我们之前创建的) yourname.github.io

点击绿色的按钮选择SSH方式(use SSH),然后点击链接右边的按钮复制。
点击绿色的按钮选择SSH方式(use SSH),然后点击链接右边的按钮复制。

  • 打开你一开始创建的Hexo文件夹(如F:\Blog\Hexo),用记事本(或者下载一个Sublime Text)打开刚文件夹下的_config.yml文件。在配置文件里作如下修改,保存。

如图所示
如图所示

  • 最后执行以下语句

hexo g
hexo d

或者直接执行:

hexo g -d

   执行完之后会让你输入github的账号和密码,输入完后就可以登录我们自己的部署在Github Pages服务器上的博客了。对应的网址是 youname.github.io 例如:(pandaoh.github.io)。

   假如这时候,报错:ERROR Deployer not found: git,那么就是你的deployer没有安装成功,你需要执行如下命令再安装一次:

npm install hexo-deployer-git –save

   之后,你再执行 hexo g -d ,你的博客就部署到Github上了。

到这里的话,恭喜你。我们的博客已经基本搭好啦!


最后我们就可以在浏览器中输入自己的博客地址来访问啦,地址是 yourname.github.io 。

博客地址:( https://yourname(你自定义的用户名).github.io )

所有人都可以通过这个地址访问到你的博客,快去试试吧。

谢谢你的阅读,快去折腾你的博客吧!bye~~~

参考文档