注:
Hexo是一个快速、简洁且高效的博客框架。 Hexo使用Markdown解析文章,在几秒内,即可利用靓丽的主题(如NexT)生成静态网页。
****** 特别推荐 ******
Ⅰ: 搭建指南:
1. Hexo 博客搭建指南
2. 【Hexo搭建独立博客全纪录】(三)使用Hexo搭建博客
Ⅱ: 添加评论功能:
3. hexo - Next 主题添加评论功能
4. Next主题增加Gitment评论系统
5. 添加Gitment评论系统踩过的坑
6. Gitment评论功能接入踩坑教程
Ⅲ: 主题优化:
7. hexo的next主题个性化教程:打造炫酷网站
Ⅳ: 博客源备份:
8. GitHub + Hexo搭建自己博客(三) 多设备管理
****** 正文 ******
一、基础搭建
1. 注意事项:
每次新增或更新博客时,要注意执行以下命令:
$ hexo clean//清除缓存文件db.json和已生成的静态文件public$ hexo g//生成网站静态文件到默认设置的public文件夹$ hexo d//部署网站到设定的仓库
或把后两条命令合二为一:
$ hexo clean//清除缓存文件db.json和已生成的静态文件public$ hexo d -g//生成并上传
Hexo博客搭建全攻略【Hexo搭建独立博客全纪录】(三)使用Hexo搭建博客Hexo(2)-部署博客及更新博文Hexo博客的搭建及同步更新如何快速搭建自己的github.io博客持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析免费个人博客搭建详解Hexo搭建博客教程
2. 搭建过程中遇到的问题:
解决用Hexo和GitHub搭建博客时hexo d命令报错问题将本地 Hexo 仓库部署到 GitHub 上V.GitHub + Hexo (2):部署博客及更新博文3. 博客模板推荐:
使用hexo+github搭建免费个人博客详细教程博客搭建详细教程Github搭建个人博客(最新版,亲测)jekyll框架hexo框架hexo-theme-next——Elegant theme for Hexo.hexo-theme-yilia——一个简洁优雅的hexo主题hexo-theme-matery——一个Hexo主题模板博客4. 大神博客推荐:
韦阳的博客超详细Hexo+Github博客搭建小白教程——韦阳博客超详细Hexo+Github博客搭建小白教程——知乎二、Gitment:使用 GitHub Issues 搭建评论系统
Gitment:使用 GitHub Issues 搭建评论系统使用hexo搭建github博客hexo - Next 主题添加评论功能gitment——Github官网三、搭建评论系统时遇到的问题汇总
1. 添加评论时出现"[object ProgressEvent] "问题:
object ProgressEvent问题解决: 找到next主题中的gitment评论文件 next/layout/_third-party/comments/gitment.swig,更改以下代码:
<!-- 原代码 -->// gitment的英文版<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"><script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>// gitment的汉化版// 只需到模板里将原来定义CSS和JS的那两行改成:<!-- 请使用下面的替换 -06-30更新--><link rel="stylesheet" href="https://billts.site/extra_css/gitment.css"><script src="https://billts.site/js/gitment.js"></script>
完整代码如下:
<!-- LOCAL: You can save these files to your site and update links -->{% if theme.gitment.mint %}{% set CommentsClass = "Gitmint" %}<link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css"><script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>{% else %}{% set CommentsClass = "Gitment" %}<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css"><script src="https://billts.site/js/gitment.js"></script>{% endif %}<!-- END LOCAL -->
重新清理缓存,部署博客即可留言。
Next主题增加Gitment评论系统[object ProgressEvent] #170gitment评论模块接入hexo | 我的博客 #8hexo博客配置-添加评论系统-gitment和valine-需注册gitment评论模块接入hexohexo博客的gitment评论开启一直失败 #178GitHub Pages个人博客搭建流程
2. 使用Gitment遇到的问题: Error:validation failed
// 原配置id: '<%= page.title %>'// 修改后的配置id: '<%= page.date %>'
Gitment评论功能接入踩坑教程添加Gitment评论系统踩过的坑使用Gitment遇到的问题: Error:validation failedHexo+gitment的Error:validation failedgitalk Error: Validation FailedHexo添加gitalk评论插件及 Error: Validation Failed 报错解决处理Gitalk中由于文章URL过长导致的Validation Failed(422)所有文章一键初始化评论 #5JavaScript-MD5issue的Label有长度限制!把id留空可能导致 Error: Validation Failed #112Error: Validation Failed #118报错出现 Error: Validation Failed. #102
四、Hexo的Next主题详细配置
1. 整体配置:
hexo的next主题个性化教程:打造炫酷网站hexo的next主题个性化配置教程超详细Hexo+Github博客搭建小白教程Hexo的Next主题详细配置开始使用主题配置hexo+next 部署各种炫酷博客特效 - Hexo - Next - Mist 风格主题的美化(二)你见过的最棒的个人博客界面是什么样的?【12】2小时还你一个集打赏、评论、RSS功能于一身的个人博客Hexo+Next主题优化HEXO+NEXT主题个性化配置对NexT主题风格的修改Hexo-NexT配置超炫网页效果hexo指南使用next主题配置博客基本信息NexT的主题设定与配置Github+Hexo一站式部署个人博客 (原创)使用Hexo+Github一步步搭建属于自己的博客(进阶)hexo next主题优化,打造个人精致网站hexo的next主题个性化配置Hexo+Next个人博客主题优化GitHub + Hexo搭建自己博客(二) Next主题配置2. 局部配置:
Hexo博客NexT主题美化之顶部加载进度条Hexo Next 添加萌萌的宠物live2dHexo博客添加在线联系功能hexo next 配置 DaoVoice 实现在线聊天功能DaoVoice控制台设置文章打赏Hexo NexT主题添加点击爱心效果Hexo之在右上角或者左上角实现fork me on githubHexo + Next 的优化Hexo Next 主题中添加本地搜索功能为 Hexo 博客创建本地搜索引擎hexo博文压缩Next主题美化(持续更新)Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效动态title-网站标题崩溃欺骗五、GitHub + Hexo搭建自己博客:备份博客源文件
GitHub + Hexo搭建自己博客(三) 多设备管理超详细Hexo+Github博客搭建小白教程六、Hexo + Next 主题博客添加分享功能
首先在themes\next\layout\_partials\share中新建一个文件socialshare.swig,
编辑内容如下:
<script src="../lib/jquery/index.js"></script><link href="/social-share.js/1.0.16/css/share.min.css" rel="stylesheet"><script src="/social-share.js/1.0.16/js/jquery.share.min.js"></script><script> var $config = {url : window.location.href,// 网址,默认使用 window.location.hrefsource : '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />title: '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />description : '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />image: '', // 图片, 默认取网页中第一个img标签sites: ['qzone', 'qq', 'weibo','wechat'], // 启用的站点disabled : ['google', 'facebook', 'twitter'], // 禁用的站点wechatQrcodeTitle : '微信扫一扫:分享', // 微信二维码提示文字wechatQrcodeHelper : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',target : '_blank' //打开方式};$('.social-share').share($config);</script>
然后找到themes\next\layout_macro中的文件post.swig中的这部分代码
<footer class="post-footer">
之前贴上以下代码
{% if theme.social_share and not is_index %}{% include '../_partials/share/socialshare.swig' %}<div class="social-share"></div> {% endif %}
在主题配置文件,_config.yml文件中增加以下代码
social_share:enable: true
保存修改后,然后hexo clean ,hexo g ,hexo d即可看到点击效果。
参考
hexo 调用share.jsHexo + Next 主题博客分享功能基于Hexo搭建个人博客——进阶篇(从入门到入土)个性化hexo博客,添加评论系统,分享,友情链接功能Mob开发者后台使用指南ShareSDK-for-iOSHexo博客添加分享功能hexo next主题为博客添加分享功能hexo next主题为博客添加分享功能Hexo添加分享功能hexo+next博客进阶攻略Hexo NexT主题中添加百度分享功能百度分享不支持Https的解决方案Hexo博客NexT主题添加百度分享Hexo+Github搭建个人博客(二)——配置&主题Hexo+Github搭建个人博客(三)——百度分享集成七、Hexo博客 站内搜索 配置 (swiftype)
前言
随着博客的文章增多,添加一个博客站内搜索的功能就显得很有必要。
而第三方站内搜索的插件有:
google自定义搜索(免费的标准版貌似有广告而且要科学上网)
百度站内搜索(貌似不支持https并且只显示收录的页面)
swiftype站内搜索(我的选择)
swiftype网站配置
首先注册swiftype账号并登录,也可直接使用google账号登录
然后选择CREATE A NEW ENGINE
,再进行填入网址等一系列操作,设置默认就好
得到左边为各项设置的搜索引擎界面
点击install search
,进入安装代码
界面,并将这段代码复制 点击change configuration
,可以看到左边有设置选项 特别注意,search field
选项
如果博客本身就有搜索框,那么修改搜索框的
class
为st-default-search-input
就好了但是如果没有,则可以自行添加搜索框,并修改
class
;或者选择swiftype提供的搜索框即可由于我的博客(random主题)本身没有搜索框,所以直接选择了swiftype提供的搜索框
同时,可以在左侧的设置选项中查看搜索统计情况
、预览搜索结果
、设置搜索权重
、添加域名
、查看抓取的页面
等
注意:
swiftype的爬虫抓取页面需要一定的时间,所以可能需要等一会
到此为止,swiftype网站的配置就完成了
博客的配置
打开博客主题的配置文件_config.yml
,在最后添加# swiftype站内搜索 swift_search:enable: true
123
打开博客主题的themes\next\layout\_partials
文件夹,在其中找到footer.swig
文件(或者其他以footer命名的文件),把之前复制的脚本代码粘贴到其中
注意:要放在body标签
中
至此,博客站内搜索的工作就做完了,然后重新将博客deploy即可
搜索效果
原文地址