build-blog-with-github-hexo

本文章记录本人利用hexo搭建博客并发布到github的全过程。

配置流程:

1安装Node.js

命令行中输入 node -v,查看是否正确安装;

2安装Hexo:

命令行输入:

1
npm install -g hexo-cli

3初始化blog

安装完成后,在blog文件夹中初始化我们的博客,输入:

1
hexo init blog

4小试牛刀

cd到blog文件夹中,执行以下命令:

1
2
3
hexo new test_my_site #新建一个名为***的文章
hexo g # 编译
hexo s # 在本地部署,默认本地服务端口为4000

这些命令在后面作介绍,完成后,打开浏览器输入地址,即可查看本博客:

localhost:4000

5发布我的网站

将我们的Hexo与GitHub关联起来,我们打开blog根目录里的_config.yml文件(称为站点配置文件),翻到最后,找到deploy:其中type填写为git,repo项后添加我的git仓库位置,branch填写master;

之后,需要安装git部署插件,输入命令:

1
npm install hexo-deployer-git --save

这时,我们分别输入三条命令:

1
2
3
hexo clean # 清理本地缓存
hexo g #编译文件
hexo d # 发布网站

这时,访问你的github个人主页(https://XXX.github.io),就能看到本网页了。

给网页舔砖加瓦

网站基本配置

在站点配置文件_config.yml中,在site的配置中,可以对是网站标题、副标题、网站描述、作者、网站头像外部链接、网站语言等做修改。

添加图床

简单说图床就是一个在网络上存储图片的地方,目的是为了节省本地服务器空间,加快图片打开速度。个人用户一般不会使用,主要是个人博客和小网站使用。常见的简易的图床网站有:贴图库图片外链七牛云

修改网页主题

如果你不喜欢Hexo默认的主题,可以更换不同的主题,主题传送门:Themes 我自己使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。
在blog根目录,输入命令,将Next主题下载到blog目录的themes主题下的next文件夹中:

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

打开站点的_config.yml配置文件,修改主题为next。

打开主题的_config.yml配置文件,找到Scheme Settings,我选择的是Pisces。

增加侧栏菜单

默认的侧栏菜单条目有:首页、归档、标签、关于、搜索等。如果你想要增加其他的菜单条目,修改主题(theme)配置文件_config.yml里的Menu Settings中的menu和menu_icons两个地方。

比如你要添加菜单项love,则需要在menu配置中增加love:/love设置好后,在命令行里输入:

1
hexo new page "你所要增加的菜单项名称(比如,love)"

这时会在博客根目录下的source文件里新建一个love文件夹,并生成初始化的index.md文件,你可以双击md文件对新建的页面自定义设计。

添加分类和标签

如果写了很多文章,不同文章有相应的类别和标签,我们想要在菜单栏中展现它们,并索引到具体的文章,就需要利用该主题的自动给生成类别和标签的功能。注意哦,该功能只能对附加有对应标前的文章起作用。

首先在主题配置文件中,找到菜单栏,添加分类以及标签这两项:

1
2
tags: /tags/ || tags
categories: /categories/ || th

1、创建“分类”选项

生成“分类”页并添加tpye属性

1
$ hexo new page categories

找到categories中index.md这个文件,添加type: "categories"到内容中。

2、创建“标签”选项

生成“标签”页并添加tpye属性

1
$ hexo new page tags

打开tags目录下的index.md文件,添加type: "tags"到内容中。

添加标签云

在主题配置文件中,找到tagcloud配置,把enable改为true。

另外,还需要再安装标签云的插件:hexo-tag-cloud。该插件针对Hexo博客的标签云插件,旨在直观的展示标签的种类,美观大方且非常优雅。
插件的GitHub地址说明地址

安装插件

进入到 hexo 的根目录,在 package.json 中添加依赖: "hexo-tag-cloud": "2.0.*"

打开命令行,输入以下命令安装插件:

1
npm install hexo-tag-cloud@^2.0.* --save

使用命令行安装插件包的过程中可能会出现问题,安装失败,安装不完全。可以直接克隆插件到博客的插件文件夹blog/node_modules里。或者克隆到桌面,复制到博客的插件文件夹blog/node_modules里。

1
git clone https://github.com/MikeCoder/hexo-tag-cloud

配置插件

swig 用户 (Next主题在列)

在主题文件夹找到文件 theme/next/layout/_macro/sidebar.swig, 在倒数第三行以上的间隙,添加如下代码:

1
{% if site.tags.length > 1 %}<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script><script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script><div class="widget-wrap">    <h3 class="widget-title">Tag Cloud</h3>    <div id="myCanvasContainer" class="widget tagcloud">        <canvas width="250" height="250" id="resCanvas" style="width=100%">            {{ list_tags() }}        </canvas>    </div></div>{% endif %}

添加评论功能

配置LeanCloud

进入LeanCloud官网,进入注册页面注册。完成邮箱激活,实名认证后,点击头像,进入控制台页面。创建应用,并获得你的appid和appkey;

配置主题配置文件

打开主题配置文件搜索 valine,填入appid 和 appkey。

最后!记得在Leancloud -> 设置 -> 安全中心 -> Web 安全域名把你的域名加进去 ;

某页面拒绝评论的设置方式

在页面的front matter中添加

comments: false

删除不必要的评论

进入你之前创建的应用,点击存储,再点击Comment,你就可以看到所有评论了。你可以选择你想要删除的评论。

使用不蒜子计数

我使用的主题是NexT,可以很方便的进行不蒜子的访客统计设置,仅仅只需要一步,打开主题的配置文件/theme/next/_config.yml,找到busuanzi_count,仅需要将enable的值改为true即可;

添加本地搜索功能

在博客根目录下执行以下命令:

1
$ npm install hexo-generator-searchdb --save

安装完成,编辑博客配置文件_config.yml :

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

编辑主题配置文件,启用本地搜索功能: 找到 Local search local_search,将 enable的值改为true。

使用MathJax渲染LaTeX数学公式

hexo主题Next中已经集成了对mathjax的支持。在主题配置文件中,定位到math,将enable的值改为true,把per_page的值改为false。

添加google/baidu收录功能

网站地图

网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接(注:不是所有页面)。大多数人在网站上找不到自己所需要的信息时,可能会将网站地图作为一种补救措施。搜索引擎蜘蛛非常喜欢网站地图

Hexo博客生产站点地图

进入Hexo博客根目录,安装百度和Google的站点地图生成插件

1
2
$ npm install hexo-generator-baidu-sitemap --save
$ npm install hexo-generator-sitemap --save

在博客根目录的_config.yml中改url为你的站点地址;

在博客根目录的_config.yml配置文件种添加一下代码

1
2
3
4
5
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

编译完成后,你会发现你的博客编译完成的代码目录public种生成了baidusitemap.xml和sitemap.xml;

这时,你可以通过访问这两个文件:你的网址//sitemap.xml、你的网址//baidusitemap.xml;这也是百度或google爬虫抓取的文件;

验证google网站

–>进入Google站点提交入口,添加你的站点…,

–>验证站点…,这里选择html文件验证,下载对应文件,将验证文件放在所应用的主题的source下/themes/主题/source/;google可以说是秒验证;

–>提交站点地图,google search console的在索引中点击站点地图,添加你的站点地图;(本处使用sitemap提交方法)

google收录的速度很快,隔天就能收录;(0701验证通过,0702收录成功)

1
2
3
4
5
TIPS:向搜索引擎提交站点链接的几种方式
1、主动推送:最为快速的提交方式,推荐您将站点当天新产出链接立即通过此方式推送给百度,以保证新链接可以及时被百度收录。
2、自动推送:最为便捷的提交方式,请将自动推送的JS代码部署在站点的每一个页面源代码中,部署代码的页面在每次被浏览时,链接会被自动推送给百度。可以与主动推送配合使用。
3、sitemap:您可以定期将网站链接放到sitemap中,然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap,对其中的链接进行处理,但收录速度慢于主动推送。
4、手动提交:一次性提交链接给百度,可以使用此种方式。

验证百度网站

–>百度链接提交,提交你的域名,

–>验证站点,这里选择html文件验证,下载对应文件,将验证文件放在所应用的主题的source下/themes/主题/source/;因为我是先验证的google,成功后再验证百度,提示失败;于是第二日继续验证,提示校正将在一天内完成,大概过了半个多小时,提示认证失败,原因是“您的站点有链接未通过https检验”;

点击数据引入汇总的链接提交,选择sitemap提交方式,直接提交https://xxx/baidusitemap.xml 就行,因为我的https没有验证通过,所以无法访问该sitemap;

确认是否被收录

确认博客是否被搜索引擎收录,在百度或者谷歌输入下面格式来判断,如果能搜索到就说明被收录,否则就没有。

1
site:写你要搜索的域名 # site:xxx.github.io

参考

Hexo博客建立标签云及效果展示

GitHub+Hexo 搭建个人网站详细教程

Hexo使用攻略-添加分类及标签

为你的Hexo加上评论系统-Valine

Hexo: 添加Valine评论(邮件通知、评论列表头像)

Hexo+Github+coding搭建个人博客 - 百度和Google收录篇

Hexo + GitHub (Coding) Pages 搭建博客

GitHub Pages 禁止百度蜘蛛爬取的问题