Hexo+github搭建个人博客

这篇文章主要讲解怎么利用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/ 你就会看见自己的本地博客页面了,如图:

Hexo+github搭建个人博客_第1张图片
本地博客页面.png

三. 将本地博客部署到github上

  1. 在github上创建一个仓库
    按照下图创建:

    Hexo+github搭建个人博客_第2张图片
    github上创建仓库.png

    填写完成,点解Create repository完成创建即可!

  2. 将刚创建的远程仓库更新下来
    步骤如下:
    依然是鼠标右击:yourname.github.io打开Git Bash Here,执行如下命令:

$ git init    //初始化git仓库
$ git remote add origin [email protected]:yourname/yourname.github.io.git  //将yourname替换//给远程仓库添加一个名为:origin 的引用
$ git fetch origin   //获取远程仓库的内容
$ git merge origin/master //将获取的内容合并到master分支
  1. 修改配置文件
    接着用sublime或者notepad++打开:yourname.github.io文件夹下的这个文件:_config.yml,在文件最后做如下修改:
deploy:
  type: git
  repo: [email protected]:yourname/yourname.github.io.git
  branch: master

以下两步是有自己域名的看:
如果你有自己的域名,可以将上面修改如下:

deploy:
  type: git
  repo: [email protected]:tiandawu/tiandawu.github.io.git
  branch: master
  plugins: -hexo-generator-cname

另外还需要修改的是这里:

url: http://tiandawu.com       //这里改成自己的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

好了,至此配置文件修改完毕。

  1. 部署到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的时候会出现下面的错误:

发布出错.png

这时候只需要先执行这条命令( $ 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

不管你有没有自己的域名,现在如果你能通过以上两种方式看到这个页面就算你搭建成功了(恭喜!):

Hexo+github搭建个人博客_第3张图片
Ok.png

四. 配置Next主题
Hexo提供了很多的主题,可以参考丰富多彩的Hexo主题,这里我选用的是配置Next主题,我的博客样式。具体配置详情,请参考:Next主题官方文档。

五. 搭建遇到的坑
我在将主题设置成Next后,在将仓库向github提交了一遍,结果就收到一封这样的邮件:

Hexo+github搭建个人博客_第4张图片
erro info.png
于是我就点了链接,看到给的解决方案是这样的:

Hexo+github搭建个人博客_第5张图片
解决方案.png

于是我就按照这个方法做,结果出现下面的错误:


submodule error.png

经过几番尝试,我将之前更新下来的主题全删掉,然后输入下面的命令去下载主题:

git submodule add https://github.com/iissnan/hexo-theme-next

如图:

Hexo+github搭建个人博客_第6张图片
添加submodule.png

这样更新下主题后,发现在: yourname.github.io文件夹下会多出一个 .gitmodules的文件,然后我在按照之前的方法尝试,结果就不出现那个错误,将文件push到远程仓库也不会收到刚才那邮件了,这个坑就这样被填上了!

你可能感兴趣的:(Hexo+github搭建个人博客)