本文章记录本人利用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 | hexo new test_my_site #新建一个名为***的文章 |
这些命令在后面作介绍,完成后,打开浏览器输入地址,即可查看本博客:
localhost:4000
5发布我的网站
将我们的Hexo与GitHub关联起来,我们打开blog根目录里的_config.yml文件(称为站点配置文件),翻到最后,找到deploy:其中type填写为git,repo项后添加我的git仓库位置,branch填写master;
之后,需要安装git部署插件,输入命令:
1 | npm install hexo-deployer-git --save |
这时,我们分别输入三条命令:
1 | hexo clean # 清理本地缓存 |
这时,访问你的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 | tags: /tags/ || tags |
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 | search: |
编辑主题配置文件,启用本地搜索功能: 找到 Local search local_search,将 enable的值改为true。
使用MathJax渲染LaTeX数学公式
hexo主题Next中已经集成了对mathjax的支持。在主题配置文件中,定位到math,将enable的值改为true,把per_page的值改为false。
添加google/baidu收录功能
网站地图
网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接(注:不是所有页面)。大多数人在网站上找不到自己所需要的信息时,可能会将网站地图作为一种补救措施。搜索引擎蜘蛛非常喜欢网站地图
Hexo博客生产站点地图
进入Hexo博客根目录,安装百度和Google的站点地图生成插件
1 | $ npm install hexo-generator-baidu-sitemap --save |
在博客根目录的_config.yml
中改url
为你的站点地址;
在博客根目录的_config.yml配置文件种添加一下代码
1 | # 自动生成sitemap |
编译完成后,你会发现你的博客编译完成的代码目录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 | TIPS:向搜索引擎提交站点链接的几种方式 |
验证百度网站
–>百度链接提交,提交你的域名,
–>验证站点,这里选择html文件验证,下载对应文件,将验证文件放在所应用的主题的source下/themes/主题/source/
;因为我是先验证的google,成功后再验证百度,提示失败;于是第二日继续验证,提示校正将在一天内完成,大概过了半个多小时,提示认证失败,原因是“您的站点有链接未通过https检验”;
点击数据引入汇总的链接提交,选择sitemap
提交方式,直接提交https://xxx/baidusitemap.xml 就行,因为我的https没有验证通过,所以无法访问该sitemap;
确认是否被收录
确认博客是否被搜索引擎收录,在百度或者谷歌输入下面格式来判断,如果能搜索到就说明被收录,否则就没有。
1 | site:写你要搜索的域名 # site:xxx.github.io |
参考
Hexo: 添加Valine评论(邮件通知、评论列表头像) ,
Hexo+Github+coding搭建个人博客 - 百度和Google收录篇,