Hexo同时部署GitHub 与 Coding

GitHub搭建Pages静态博客,并迁移Coding方便被百度爬虫抓取

Posted by Roylee on 2016-07-15

Hexo是基于Node.js开发的开源静态博客生成器,界面简洁优雅,阅读方便,作者是台湾大学生Tommy Chen。最开始使用Hexo时朋友介绍,使用后真是爱不释手。接下来,就来记述一下自己踩过的坑吧。

Hexo搭建静态博客

Hexo基于Node.js,同时依赖Git管理。所以,首先要安转Node.js,Node.js官网直接下载,一路安装到底就好了。git是Xcode自带的,不用说。同时,github的账号也是必须的,我的早就申请了。那么,直接开始正题:

安装Hexo

创建博客文件夹

首先,需要建一个文件夹,名字自己任意取就好了,比如我的是Hexo-blog,然后放在你喜欢的或者方便的位置(这也是随便放的),最后所有的东西就都是要安装在这个文件中的哦~

初始化

使用cd命令进入上面的文件夹(cd/文件夹路径),然后执行下面命令初始化

hexo init

也可以直接使用命令指定文件夹初始化hexo init folderfolder:是指定目录的文件路径。

安装依赖包

执行命令

sudo npm install -g hexo

到这里,安装工作已经完毕了,接下来的就是使用部分了。

生成静态页面

执行左右的Hexo的操作,都要在Hexo的根目录中进行,就是第一步创建的文件夹(Hexo-blog)。所以,执行接下来的操作的时候,要先cd到这个文件夹(cd/Hexo-blog)。

hexo generate (hexo g 也可以)

生成的静态文件是在Hexo-blog/public路径下,这个public文件就是最后对外公开的文件,也就是最后传到git上供博客数据源使用的文件所在,这个下面会将。

开启本地服务

启动本地服务,进行文章预览调试,执行命令:

hexo server

然后,在浏览器中输入本地地址http://localhost:4000,应该就能正常访问了(Hexo安装后,post里会有一个默认的博客文件,开启本地服务后进入的也是Hexo默认的界面)

  • 如果不能访问,试着先执行命令 sudo npm install hexo-server 活着 npm install hexo-server --save来安转server,再执行 hexo server(不过,最新的Hexo默认是已经安转了 hexo-server)
  • 关闭服务使用 Ctrl+C to 停止本地服务调试。

到此,Hexo的配置安装就完毕了。

配置GitHub

建立仓库

建立的仓库最好跟你的用户名对应,使用 your_user_name.github.io 的仓库名(公认的命名规则),这样最后在生成域名的时候,这个仓库名就是域名,否则其他的仓库名,域名后面会加上用户名的。

仓库建立好以后,就可以跟本地的Hexo关联了,在Hexo的根目录中(Hexo-blog),有个很重要的_config.yml文件,是对整个项目进行配置设置的,大部分的设置都是在这里。那么,就在这个文件中做一下GitHub的关联:

首先执行 vim_config.yml 来编辑编辑这个文件,不过,还是强烈推荐一款轻量级的强大的编辑器[Sublime Text](https://www.sublimetext.com/),十分好用。

在这个文件的最后,修改( 注意: 这里的:后面一定要有空格)

deploy:
type: git
repo:
git@github.com:Roylee-ML/Roylee-ML.github.io.git
branch: master

如果是多个分支的话,也可以采用下面的写法

deploy:
type: git
repo:
github: git@github.com:Roylee-ML/Roylee-ML.github.io.git,第一个分支名
github: git@github.com:Roylee-ML/Roylee-ML.github.io.git,第二个分支名

这里的repo添的地址就是你的仓库的地址,可以用https的,也可以用SSH的(需要秘钥,SSH的方式不用每次都输密码,配置SSH这里不做介绍了)

然后执行下面的命令,才可以进行部署

npm install hexo-deployer-git --save (安装hexo-deployer-git)

最后执行deploy,push到github完成部署

hexo deploy

这个时候在浏览器中输入你的博客仓库名,如username.github.io就能访问了(username换成你自己的用户名)。

部署流程总结

每次部署,要执行三个步骤

hexo clean
hexo generate
hexo deploy
  • hexo clean用于清除旧版本生成的静态文件(推送到远端的public文件)
  • hexo generate生成新的静态文件(public文件),生成这个文件是根据/source文件中的内容生成
  • hexo deploy推送github部署博客

在部署中,出现问题,通常是配置文件_config.yml格式不对,_config.yml文件中:符号后一定要有空格,该换行分级的一定要换行分级。

常用命令

hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy # 将静态博客页面部署到GitHub
hexo help # 查看帮助
hexo version # 查看Hexo的版本
  • hexo new创建新的文章,创建的文章会在source/_posts/目录下,文章格式.md(Markdown格式),每次就可以直接编辑博客直接编辑这个文件就可以了,也可以把写好.md的文件直接拖到这个文件夹中
  • hexo generate生成静态页面,生成的文件都是在public/文件下,这个文件就是最后推送到github的文件

Hexo的博客还可以修改主题,可以通过Hexo主题选择安装自己喜欢的主题,具体安装可以参考官方步骤。

迁移博客到Coding

之前,为了让自己GitHub的博客,能够被百度爬虫抓取,都会将自己的博客迁移到GitCafe中。不过,GitCafe的服务已经从 2016年3月2日 合并至Coding.net,并且于 2016年5月31日 正式关停了服务。所以,这里我将我的博客迁移到Coding上了。

Coding上创建仓库

与github创建仓库一样,在Coding中也创建一个自己与自己用户名一直的项目,然后点击进入自己的仓库,开启Pages服务(点击边栏Pages服务)。这里有个注意事项,在开启Pages服务的时候,会要求选择分支。这里,分支的选择要与接下来``文件配置的分支要保持一致,最后通过域名访问才能有效。

Pages服务

关联Coding与本地Hexo

建好coding的仓库后,同样要配置Hexo的_config.yml文件,配置格式如下

deploy:
type: git
repo:
github: git@github.com:Roylee-ML/Roylee-ML.github.io.git,master
coding: git@git.coding.net:roylee/roylee.git,master

注意: 这里的格式要保证正确,分级关系要明确。同时,我的coding的博客是直接放在master分支上的,所以命令写的是master,有的是放在coding-pages分支,命令也是要对应的分支。

好了,最后执行hexo deploy -g(generate & deploy 一起执行),来部署博客到coding。

到这里,就可以通过上图中coding给的域名访问自己的博客了(比如: http://roylee.coding.me/roylee, http://roylee.coding.me是一样的)。

如果,自己有自己的域名的话,还可以在coding中绑定自己的自定义域名,就可以同样通过这个域名访问你的coding上部署的博客了。我的域名是在万网买的,已经隶属于阿里云。大家可以根据自己的情况购买域名。

搞定百度爬虫

GitHub的内容百度爬虫是访问不了的,因为GitHub把百度给屏蔽了、屏蔽了、屏蔽了。所以,为了让国内的用户也能通过百度搜索到我们的博客,我们才需要把博客 迁移到coding上的。当然,通过上面的步骤,百度爬虫已经能够搜到自己在coding上部署的博客了,不过是需要一段时间来让百度收录的。为了让百度更快的收录自己的博客网站,我们可以通过百度站长主动提交我们的站点地图sitemap。

配置sitemap文件

为了让百度尽快收录我们的网站,我们需要主动提交一个sitemap文件,这里我们需要在本地Hexo中安装百度sitemap插件,进入Hexo根目录,执行下面的命令:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

第一个是生成站长地图,第二个是专门生成百度的站长地图。( 注: 所有hexo-generator-sitemap等的插件都是在node_modules/目录下)

接下来需要配置_config.yml文件,设置路径

sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置robots.txt文件

按正规的来说,每个搜索引擎都要遵守robots协议的(部分不遵守的就无视robots协议文件,任意抓取用户的内容了),而这个文件就是定义了搜索引擎爬虫可以抓取的内容范围。在这个文件中,可以指定哪些路径的内容可以被爬虫抓取,哪些内容不允许被抓取。我们这里在source/目录下创建一个robots.txt文件,内容如下:

# robots.txt
User-agent: *
Disallow:

默认是所有的搜索引擎(User-agent控制),可以抓取所有的路径内容(Disallow:没有指定,就是默认所有都允许)。

生成sitemap & robots文件

最后我们就可以重新生成静态博客页面推送远程了,进行三步操作:

hexo clean
hexo generate
hexo deploy

之后,重新打开自己的博客,进入baidusitemap.xml,就是自己博客的链接后面加上/baidusitemap.xml,如http://roylee.coding.me/roylee/baidusitemap.xml,就会发现baidusitemap.xml文件已经生成了。同时baidusitemap.xml文件也生成在本地Hexo博客public/文件中了(同样,robots.txt文件也是同样的方式查看)

提交sitemap文件到百度站长

打开百度站长,登陆后,进入工具在边栏站点管理中添加自己的站点,这里最好要验证自己的站点(验证是为了证实所有权),以便百度更好的收录

添加站点



添加完站点后,就可以手动提交自己的sitemap了,选择边栏链接提交,然后提交一个文件地址这个地址就是百度站长获取你的sitemap的地址,我这里用的是http://roylee.coding.me/roylee/baidusitemap.xml 用的必须是coding的地址 ,否则会抓取失败 )。手动提交后,如果显示了抓取的URL的数量,最后状态正常,就说明提交成功了,接下来的就是等待了。(注:为了验证自己生成的baidusitemap文件是否可用,可以打开文件,在xml标签中找到URL,通过浏览器打开能正常访问你的博客,说明baidusitemap文件就是有效的)

手动提交

总结

这样,同时部署Hexo到GitHub与Coding就完成了,同时Coding部署的博客也能被百度爬虫访问到了。

在实际操作中,我们都会遇到各式各样的问题,耐着心都会一一解决的。有个重要的原则是,一定要关注人家的官网,因为Hexo什么的也是会改动的,只有官网中才会有最及时的更新介绍。

Hexo官网

Hexo github地址

Hexo主题

GitHub Pages