这篇文章主要讲解怎么利用Hexo和github来搭建自己的博客!如果你正想搭建一个属于自己的博客,那么就不妨动手跟我一起来搭建 !
一. 环境搭建
在搭建之前我们首先要搭建环境,首先要做的是安装Git和Node.js(最好翻墙后打开),先去这两个网站官网下载并安装好,安装的过程很简单,就是一路下一步即可!其次要做的是打开你的git Bash窗口,输入如下命令:$ npm install -g hexo-cli
。完成以上操作后,你就算将Hexo也安装好了,安装Hexo也可以参看Hexo的官网。
至此,环境搭建已经完成!
二. 创建本地博客
在本地磁盘新建一个文件夹,我这里命名为:MyBlog,然后鼠标右击该文件夹,打开:Git Bash Here。在弹出的命令窗口中输入以下命令:$ hexo init yourname.github.io
,需要注意的是:这里需要将命令中的yourname替换成你的github的账户名,必须要是和账户名一致!
执行完这条命令后就会在你刚才新建的文件夹下生成一个名字为:yourname.github.io的文件夹。然后,又执行如下几条命令:
$ cd yourname.github.io //cd到刚才自动创建的目录下
$ npm install
$ hexo g
$ hexo s
执行完以上命令后,不要关闭Git Bash窗口,用浏览器打开:http://localhost:4000/ 你就会看见自己的本地博客页面了,如图:
三. 将本地博客部署到github上
-
在github上创建一个仓库
按照下图创建:
填写完成,点解Create repository完成创建即可! 将刚创建的远程仓库更新下来
步骤如下:
依然是鼠标右击:yourname.github.io打开Git Bash Here,执行如下命令:
$ git init //初始化git仓库
$ git remote add origin git@github.com:yourname/yourname.github.io.git //将yourname替换//给远程仓库添加一个名为:origin 的引用
$ git fetch origin //获取远程仓库的内容
$ git merge origin/master //将获取的内容合并到master分支
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master
以下两步是有自己域名的看:
如果你有自己的域名,可以将上面修改如下:
deploy:
type: git
repo: git@github.com:tiandawu/tiandawu.github.io.git
branch: master
plugins: -hexo-generator-cname
另外还需要修改的是这里:
url: http://tiandawu.com //这里改成自己的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
好了,至此配置文件修改完毕。
- 部署到github
依然来到刚才的Git Bash窗口,执行如下命令:
有自己域名的需要先执行这条命令:
$ npm install hexo-generator-cname --save //这条命令执行过程较慢,耐心等待!(需要翻墙快)
下面的命令都需要执行:
$ git add .
$ git commit -m "输入自己的描述信息"
$ git push origin master
执行完上面的命令,没有配置自己域名的再执行下面两条命令就可访问自己的博客了:(在浏览器中输入:yourname.github.io
访问)
$ hexo g
$ npm install hexo-deployer-git --save //要是不先执行这条命令,有可能会出现下面的错误!
$ hexo d
注意:
在执行:$ hexo d
的时候会出现下面的错误:
这时候只需要先执行这条命令(
$ npm install hexo-deployer-git --save
)后再执行刚才的命令($ hexo d
)就行了!配置了自己域名的还需要执行完下面的命令:
$ git fetch origin
$ git merge origin/master
配置了自己域名的还需要修改CNAME文件,public文件夹下的CNAME也要修改,都填写上自己的域名即可!可以参考我填写的CNAME文件。
配置了自己域名的最后执行下面命令也能访问了:(可以通过:yourname.github.io
或你的域名
访问)
$ git add .
$ git commit -m "输入自己的描述信息"
$ git push origin master
$ hexo g
$ hexo d
不管你有没有自己的域名,现在如果你能通过以上两种方式看到这个页面就算你搭建成功了(恭喜!):
四. 配置Next主题
Hexo提供了很多的主题,可以参考丰富多彩的Hexo主题,这里我选用的是配置Next主题,我的博客样式。具体配置详情,请参考:Next主题官方文档。
五. 搭建遇到的坑
我在将主题设置成Next后,在将仓库向github提交了一遍,结果就收到一封这样的邮件:
于是我就按照这个方法做,结果出现下面的错误:
经过几番尝试,我将之前更新下来的主题全删掉,然后输入下面的命令去下载主题:
git submodule add https://github.com/iissnan/hexo-theme-next
如图:
这样更新下主题后,发现在:
yourname.github.io
文件夹下会多出一个.gitmodules的文件,然后我在按照之前的方法尝试,结果就不出现那个错误,将文件push到远程仓库也不会收到刚才那邮件了,这个坑就这样被填上了!