Hexo框架之GitHub博客搭建及SEO站点收录

想做一个独立博客想了很久了,由于担心自己想法幼稚及其它种种原因,后来很长一段时间内没有将此事放上日程。虽然每天喊着意诚心正而后身修,身修而后家齐国治天下平,可到头来也摆脱不了自己庸人标签;虽然每天那么努力,忍受了那么多寂寞和痛苦,可也没见自己多么优秀啊!
在自己浏览别人的技术贴的过程中,渐渐打消了此种顾虑,妄自菲薄对于一个技术人员而言是万万不可取的,它就像一个束缚自身的牢笼,不飞你怎知天空的广阔,不做又怎知自己就真的一文不值呢?


hexo.png

下文为自己在GitHub上自建博客的经历,希望对大家有益。文章主要分为四个部分:

  • Hexo框架生成步骤流程;
  • 主题配置,本人博客采用的是NexT主题;
  • 三方服务集成,如多说评论、内容分享等;
  • 自建站点的百度/谷歌搜索引擎收录及验证

闲言少叙,先看下本人的博客效果:https://zonghongyan.github.io ,如果您从事iOS,还请在仁伯安的GitHub给个Star。

前言

markdown以其简洁易学的特点,已逐渐演变成了博客平台中一种通用的文字标记语言,而其影响力也不光在博客平台方面,GitHub、Wikipedia也都兼容markdown语法。现有博客框架中对markdown支持比较好的,大致有Ghost, Jekyll和Hexo等,本人采用的是Hexo框架。
Hexo是一个简洁高效的博客框架,对markdown文档渲染速度快,而且对中文支持较好,依赖少,支持Node就好。

Hexo框架生成

  • GitHub Page生成
    GitHub Page生成有个约定俗称的东西,在创建库时名字必须是:用户名.github.io,记住这一点即可,具体流程可参照下图。
    create repostitory.png
setting.png
githubpages.png
  • Hexo框架生成
    在生成Hexo框架之前,我们需要配置好Nodegit环境,可自行配置。配置好检测环境是否配置完成,在终端输入如下指令:
// 检测环境是否配置完成
npm --version
git --version
npmgit.png

如果配置好环境后,将GitHub的GitHub Page库Checkout到本地:

// 终端命令方式
git clone -o github git@github.com:zonghongyan/zonghongyan.github.io.git
openDesk.png

为了发布代码和源码分离,我使用分支框架源码在debug分支中,master为发布的代码。

// 终端命令方式
git branch debug
GitHub客户端创建分支.png

我们只需使用npm即可完成Hexo框架生成工作:

developer$ npm install -g hexo-cli
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
/usr/local/lib
└── hexo-cli@1.0.2 

安装Hexo之后,即可建站工作:

// 建站
hexo init zonghongyan.github.io
......
INFO  Start blogging with Hexo!
cd zonghongyan.github.io
npm install

将git文件拷贝到对应目录中,git add . 更新git文件-->git commit提交-->git push -u origin debug到分支debug中即可。


hexo init.png

此刻为止,Hexo框架生成完毕,我们可以进行debug,在站点目录输入如下指令:

hexo s -debug

debug.png

在浏览器中输入:http://localhost:4000 ,即可预览Hexo默认主题的效果。

hexo blank.png

有一点需注意,如果修改了站点目录,需要重新npm install。

NexT主题配置

Hexo有很多主题风格,我比较喜欢NexT,以黑白色为主色调,简洁明了,不花哨。

  • NexT主题安装
    首先,在终端中cd到你的站点目录,如:zonghongyan.github.io目录下,克隆next主题:
git clone https://github.com/iissnan/hexo-theme-next themes/next
next clone.png

clone成功后,可以看到在theme目录下多了个next目录,此即主题文件:


next theme.png
  • NexT主题配置
    在Hexo框架中,有两个较为重要的主题文件:站点目录下的_config.yml文件、主题目录下的_config.yml文件。

(1)启用主题
打开站点目录下的_config.yml文件,找到theme: landscape,修改为theme: next。

next theme.png

(2)主题验证
验证与上节landscape主题的预览方式类似,直接在站点目录下执行:hexo s或者hexo s -debug。


hexo next blank.png

到这里,基本的Hexo框架NexT主题的博客创建完毕。
(3)站点发布
打开站点目录下的_config.yml文件,找到deploy部分,配置如下:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:yousite/yousite.github.io.git
  branch: master

然后在终端中cd到站点目录,执行:

hexo clean // 清除上次publish文件
hexo g 或者 hexo generate // 生成publish文件
hexo d 或者 hexo deploy // 发布

如果执行hexo deploy 发布的时候遇到问题,可能是hexo框架的git工具包没安装的缘故,可在站点目录执行:

npm install hexo-deployer-git --save

然后commit文件到分支后,重新发布。
最后,直接在网站中输入:https://yousite.github.io ,就可以看到效果啦。

  • 主题配置
    以上创建的只是最简易的NexT主题站点,如果需要有访问量统计、站内搜索、打赏功能、公益404等,需额外配置_config.yml文件。其他配置自行到NexT主题配置 站点配置,由于官网提供的404配置有些问题(GitHub为Https安全协议,官网给出的是http的),我们这里单独说下公益404配置,也算是积德行善啦。
    先看下最终效果:https://zonghongyan.github.io/404.html
    配置步骤如下:
    (1)新建 404.html 页面,放到主题的 source 目录下,代码特别感谢songjinzhong
    (2)在主题配置文件中配置commonweal:
# .../themes/next/_config.yml文件中
  commonweal: /404.html

如果需要评价系统、内容分享等,还需要第三方支持。

三方服务集成

我的博客主要实配置的功能有:访问量统计、评价系统、站内搜索、~~多说热评 ~~ (现改为Gitment)、打赏、公益404等。下面我简单说明几点:

  • 评价系统
    NexT主题支持多说和Disqus评论系统,我使用的是多说评价。
    使用多说首先要在多说中创建一个站点。http://duoshuo.com ,登录后,在首页单击我要安装,创建站点,填写表单。站点名称:随便写,站点地址即:https://yousite.github.io ,多说域名:这一栏比较重要,多说域名中的内容要在主题目录下_config.yml文件中的duoshuo_shortname配置,记得这里是主题配置文件。

    duoshuo.png

  • 多说分享
    同样在主题配置文件中配置如下:

# .../themes/next/_config.yml文件中
# duoshuo_share
duoshuo_share: true
  • 多说热评
    在主题配置文件中配置如下:
# .../themes/next/_config.yml文件中
# duoshuo_hotartical
duoshuo_hotartical: true

由于多说停止服务,评价系统现已更新,使用Gitment。配置使用步骤,详见:Hexo博客框架下Gitment取代多说评论✨✨✨
其他的功能配置也类似
配置到此处,一个真正意义上的独立博客基本建成,很多人也就到此为止了,但我想我们写博客的目的是什么呢,肯定是想尽可能多的帮到别人,但遗憾的是貌似Github做了防爬虫处理,这样的话我们的博客一般不会被搜索引擎收录的,所以我们就要主动提交给搜索引擎。

独立博客SEO

  • 验证站点是否被收录
    要验证站点是否被收录,直接在百度或谷歌中输入:site:yousite,会有提示:


    site 收录验证.png
  • 站点收录提交
    我们单击下面的提交网址,会进入百度站长管理,单击站点管理,添加网站:
    百度站点添加.png

    输入自己要提交收录的网站,比如:https://yoursite.github.io,下一步,
    token配置.png

    我们使用HTML标签验证方式,这一点要在自己博客网站埋点验证,配置步骤如下:
    (1)在主题配置文件中,开启:
google_site_verification: true
baidu_site_verification: true

(2)在主题目录themes/next/layout/_partials/head.swig文件中,配置token配置图的token值:

{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="iZjCbg5MoG" />
{% endif %}

(3)配置好后,重新发布自己的站点:

hexo clean
hexo g
hexo d

(4)单击完成验证


done.png

验证完成后,自己的网站会被提交,如下图,过段时间在百度中验证站点是否收录即可,据说是一周。


验证完成.png
  • Google收录与百度类似
    Google收录网址添加所要提交的地址:
    google.png

    提交请求后,编辑站点-->添加属性,选择备用方法,其他流程和百度类似,验证通过后,立即就可以在Google中查到,不知是效率原因,还是百度故意为之啊!
    googlehtml.png

    google.png

本文已在版权印备案,如需转载请在版权印获取授权。
获取版权

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容