基于HEXO+Github+Git搭建的博客终于大功告成了,在我搭建这个博客的过程中,走了很多弯路,其中也看了很多的博文和教程,但众说纷纭,所以有必要尽快把我搭建博客的整个过程记录下来(免得忘记),一方面是为了让浏览到此篇文章的小伙伴少走一些弯路,另一方面是希望把整个过程记录下来,以至于下一次搭建博客,会节省一些时间。补充一下,整个搭建过程都是基于windows的。下面我们就开始吧!
1、环境搭建
1.1安装node框架
HEXO是基于node框架的,所以我们首先要下载安装node,下载地址[node.js官网]< https://nodejs.org/en/ >
推荐下载长期支持版(即LTS版),因为当前发布版虽然含新功能但不稳定,而且奇数版在当前版本发布之后六个月将变为不支持状态(node.js版本不得低于8.6建议10.0及以上版本)
安装完成后win+R启动命令行,输入node -v,来检测安装是否成功。如果返回如下图所示,证明你安装成功了
1.2注册Github账号
Github推出的Github Pages服务可以很方便的建立一个属于我们自己的个人博客
进入[Github 网站],按照提示进行注册然后登陆(已经注册过的大佬绕过)
点击右上角加号--->new repository,新建一个仓库,这个仓库就是用来存放博客的地方
接着进入到创建仓库界面,Repository name就是使用浏览器访问你的博客的地址
1.3安装Git
为了能够把自己所写的博客上传到github上面去,我们使用分布式版本控制工具——[git官网]< https://git-scm.com/ > 进入官网后,直接下载安装最新版就可以了。安装完成之后在桌面右键会有一个Git Bash。类似于Linux终端,可以模拟Linux下的终端进行操作。可以在命令提示符中输入git --version打开之后,像下图这样
1.4安装HEXO
HEXO的安装在它的[官方文档]< https://hexo.io/zh-cn/docs/ >中说的很详细,下面我就简单的介绍一下HEXO的安装
1.4.1新建一个用来存放博客的文件夹
在合适的位置新建一个用来存放今后所写博客的文件夹,比如我的存放在E:\my blog\目录下
创建成功后进入该文件夹,在该目录下右键打开Git Bash Here,启动Git控制台(后面所有的命令行操作都用Git,不用windows自带的命令提示符,即CMD),输入npm i hexo-cli-g安装HEXO,会出现几个报错,但是不用理会
安装完成后输入hexo -v,出现下图界面,表示安装成功
随后,初始化文件夹,仍然在该命令行窗口执行hexo init 新建的文件夹名
接着,输入npm install安装所需要的组件。在刚刚新创建的文件夹下就会产生文件目录
_config.yml文件是网站的配置文件,可以配置大部分参数,也是最重要的文件
package.json文件是应用程序的信息
source是资源文件夹,是用来存放用户的资源,如用户每次编写的博客、标签页面、分类页面
themes是主题文件夹,HEXO会根据主题生成不同的静态页面
scaffolds是模板文件夹,新建的文章会根据模板来建立文件
2、开始搭建
2.1部署到本地
其实在环境配置完成之后,就已经在本地生成了博客主页。仍然是在刚刚的Git命令行中执行hexo g(hexo generation,生成静态页面),然后执行hexo s(hexo server 启动本地服务,进行文章预览调试)。然后浏览器输入 http://localhost:4000 就可以看到你博客的效果啦,不过这是本地调试用,其他人是看不到的。(调试完毕后记得 control + C 关闭本地端口,不然下次是进不去的) 看下图:
这是安装HEXO的默认主题,在之后的博文中,我会分享如何更改主题
2.2部署到Github
2.2.1部署签名
先使用下面的命令对Git进行初始化配置,即设置签名,作用是区别不同开发人员身份。这里邮箱地址不一定非得是注册Github的邮箱地址,任意邮箱即可,作用不是很大。
$ git config --global user.name "your name"
$ git config --global user.email "your e-mail address"
2.2.2配置SSH
打开Git Bash,执行下面的命令生成SSH访问私钥及公钥
$ ssh-keygen -t rsa -C "email@email.com"
当提示输入的时候,不用管,一直回车就可以。
然后/c/users/你的电脑账户名/.ssh文件下会生成两个文件
然后打开你的Github,点击右上角头像-->Setting-->SSH keys。
然后点击New SSH Key新建一个SSH key。Tittle可以自己起。然后将id_rsa.pub
文件中的内容复制粘贴到Key下面。然后用下面的命令测试是否连接到Github
$ ssh -T git@github.com
如果出现下图所示内容则证明连接成功
2.2.3设置deploy参数
打开HEXO主文件夹下的_config.yml(鼠标移动到该文件上右键,选择opendlg打开),设置底部的deply参数,下面是我的设置。type和branch和我设置的一样就行
其中repo在Github中进行复制,如下图:
deploy:
type: git
repo: git@github.com:Jerenliu/jerenliu.github.io.git
branch: master
注意:配置的时候要严格注意格式,不然后面会出错(type,repo,branch后面的冒号统一用英文的,冒号后面必须有一个空格。type,repo,branch前面要有两个空格,并对齐)。后面进行配置文件都需要遵循这种格式
2.3验证
以上配置完成后保存 然后回到终端执行npm install hexo-deployer-git --save安装一个插件,这样才能将你写好的文章部署到github服务器上并让别人浏览到。安装完成后在终端中依次执行如下代码
hexo clean 作用:清理缓存
hexo generate 作用:进行渲染 简写: hexo g
调试完毕后使用 hexo deploy 作用:部署到git服务器 简写: hexo d
然后就能在浏览器输入地址访问博客页面了
2.4问题
当执行hexo d可能会出现如下错误
类似这样的错误,这个错误的原因是因为本地的博客版本与远程版本不一致
第一种解释:.deploy_git这个文件的内容是用于将自己所写的博客部署到github仓库中的内容
第二种解释:这个应该是git部署用的文件。比如你写好的博客想部署到 GitHub Pages上去的话,可以用git部署插件,那个插件会创建这个目录
那么如何解决这个问题呢?
第一步,删除自己博客目录下的.deploy_git文件
第二步,进入git,输入:hexo clean 清除缓存hexo g -d 渲染部署
执行完以上操作后打开浏览器地址栏输入你的博客地址,就可以看到效果了