当前标签 / Hexo / 总共14篇

想继续使用Valine或LeanClound存储的快绑定域名

在开始前先做一个简单科普,很多朋友在使用评论功能的时候可能留意到了 Valine 这个插件,它是一个很好用的评论插件,但是可能有一部分人并不知道这个插件实现评论的原理,其实它的评论存储服务是依赖于 LeanClound 的,这个 LeanClound 实际上是一个云服务器提供商,只不过它比较人道的是提供了一个开发版环境(虽然资源很小,云引擎只有 0.5CPU 256MB,但是数据库却是够用的),我们实际上是使用了它提供的数据存储服务,而且 LeanClound 为我们提供了一套 JavaScript SDK 来操作数据库,也就是我们要引入的一个 js 文件:

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js"></script>

实际上 Valine 就是基于这套 api 来实现数据的插入和查询,然后展现到我们的博客,这样我们就很透彻的理解了它们之间的关系了,接下来进入我们今天的正题。

阅读更多

如何搭建你自己的博客

因为本站来来回回折腾了好多次,所以也积攒了不少网站建设方面的文章,这些文章都是从实践入手进行讲解的,看到有这么多小伙伴都在询问我如何实现这个,如何实现那个的问题,因此我特意将网站建设归纳到一个版块,希望这个版块可以解决你的建站问题,同时我也在努力完善这个版块的内容。

静态博客生成

目前主流的静态博客生成器有三个: jekyll, hexo, hugo.

静态博客生成器是一种将 markdown 格式的文档生成静态网站页面文件的工具,我们通过几个简单的命令就可以实现个人博客的搭建。上面的 3 中博客生成器我没有用过 jekyll 而且今后也不打算用,所以接下来我们就围绕 hexohugo 的博客搭建来展开,而且如果你具有前端编程能力我推荐你一开始就是用 hugo 来搭建自己的博客,如果你不熟悉前端知识建议你使用 hexo 实现,因为 hexo 的优势就是有很多现成的插件, 而且可选的主题样式比较多。 我现在为什么从 hexo 更换到 hugo 是因为生成静态页面的速度考虑,可以参考我的博文 《我为什么要从 Hexo 更换到 Hugo》

阅读更多

我为什么要从 Hexo 更换到 Hugo

前言

最近比较烦的是我的博客本以为很完美了,不用再折腾了,没想到 Hexo 有一个很大的弊端。我忍痛割爱的计划将 Hexo 引擎更换为基于 Go 语言的 Hugo 模板引擎。Hexo 优点很多,缺点就是生成静态文件 (hexo g) 速度真的是太慢了。Hexo 是基于 Nodejs 的,有很多插件,而 Hugo 没有插件,使用自带的 Go html 模板实现, 这个速度真的是牛,基本上在 Hexo 上面十几分钟,使用 Hugo 只需要几秒钟。

在更换过程中我想保留我原来博客的主题风格,所以很多东西都是逐渐仿照实现过去的,但是最让人头疼的并不是去实现这些功能,而是迁移过程中为了防止路径不同(大小写)和 keywords description 的不同导致的 SEO 问题。 其实目前我已经完全实现模板复制,但是我还是计划花一两个月慢慢迁移过去,这样对本站的影响可以尽量做到最小。

阅读更多

博客更换ICARUS主题

前言

最近无意间留意到一个比较符合我口味的主题,也许是因为Next主题被我看腻了,于是就换了icarus然后接下来当然是各种折腾,总算是告一段落可以安心的做别的事情了。

主题介绍

主题地址:https://github.com/ppoffice/hexo-theme-icarus

这个主题可以完全替代Next主题,比较让我喜欢的是简洁大气的界面风格,另外还有细致的侧边栏以及订制功能,总结一下特点如下:

  1. 整体的界面美观大方。
  2. Icarus包含常用的搜索,评论,分享和其他插件。
  3. 可设置文章头图片。
  4. 超过70种highlight.js样式可选。
  5. 可以自定义侧边栏。
  6. 字体风格漂亮。
  7. 可在文章内自定义菜单。
  8. 响应式布局。

阅读更多

Hexo主题(Next)美化、配置、优化这一篇就够了

前言

最近一段时间把我的博客重新美化了一番,今天就对这些工作做一个总结,并把方法归纳出来分享给大家,希望大家也能把自己的博客做成自己想要的样子,大概工作如下:

  • 实时更新Next主题
  • 添加可爱的小猫挂件
  • 添加Chat聊天挂件
  • 添加分享挂件
  • 添加音乐界面
  • 添加Valine评论邮件通知
  • 添加相册界面

这些美化功能大部分只需要你花费半个小时左右就可以搞定了,我们马上开始吧!

阅读更多

Hexo使用PythonSDK整站静态发布七牛云

前言

最近因GitLab的国内访问速度问题将本站静态化到了七牛云存储,但是带来的问题也是很明显的。之前在GitLab使用Page来发布工程只需要提交代码即可,会自动静态化并部署项目,于是乎我就想让静态化并同步到七牛对象存储自动化一些,这也是这篇文章的初衷。

其实在用Python做自动同步之前,我使用的官方提供的一个Window上面的同步工具QSunSync,但是使用起来也不是很方便,最主要的原因是不太符合我整站同步的需求,而且速度极慢。

Python SDK

官网为我们提供了基础的对象存储操作SDK, 点击查看

安装Python SDK

pip install qiniu

整个同步过程如下:

  1. 拉取七牛云文件列表。
  2. 获取本地文件列表。
  3. 对比远程文件是否有增量(多余的),进行删除。
  4. 对比本地文件是否有增量(新增的)或者有变化(hash不同),进行上传。

阅读更多

Python做Hexo博客编辑和发布工具

这几天发生了一些意外,我的固态硬盘奇迹般的坏了,上周四倒腾了一天最终还是丢失了很多文件和我之前写的很多工具脚步,后来又忍痛买了一个新的固态盘。这件事让我对文件备份有了新的认识,也是通过这件事我琢磨准备做一个博客自动备份、编辑和发布的工具。

这个是我做的一个雏形,基本上已经能满足我大部分需求了,但是还不足以让大家使用,我慢慢抽时间修改和迭代吧,中间还有一些技术问题现在还未解决。

阅读更多

Hexo主题开发手记(1)

最近抽空学习了一下前端的基础知识,在之前我也抽空看了相关知识,但是发现没有实践而且不够系统,所以索性这次借着hexo博客搭建来巩固和实践一下所学。

准备

虽然我们是开发hexo的博客主题,但是为了方便我们开发中调试和预览,所以我们还是首先得安装hexo到我们本地目录。

hexo init 搭建hexo主题

注意,上面的“搭建hexo主题”是我本地的一个目录。

然后发布,http://localhost:4000 查看

cd 搭建hexo主题
hexo server

hexo主题

阅读更多

Hexo博客七牛图床最优做法

就在昨天,我的新域名备案成功并正式上线了,于是就想到了去七牛做一个图片图床来加速网站访问速度。

令人欣喜的是七牛有10GB的免费存储和20GB下载流量,而且还享有20元/月配额的音视频处理。

七牛免费配额

所以我果断从七牛和又拍云之间选择了七牛来做图床。

搜了一下关于七牛图床相关的文章,结果发现都不是自己想要的效果,我想要达到的效果有:

  1. 不能破坏本地markdown书写和预览图片的方便性。
  2. 不能破坏迁移和修改的方便性。
  3. 不影响之前发布的文章,并且能快速切换到七牛图床和其他图床。
  4. 无感知的自动完成,不需要关心这层操作。

基于上面这些想法,我就有了一个基本思路,首先复制备份,然后通过qshell来实现批量上传和同步图片,接着批量替换文章中的<img src=” 字符串后面追加七牛存储的自定义域名。

阅读更多

Hexo打造可以自由配置的网站通知和页面通知

最近本站要更换域名,所以我就想做一个首页和文章内通知,于是就有了这篇文章。

首先打开 theme/next/layout/_layout.swig 文件找到如下代码中的 content-wrap 节点。

 <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            {% block content %}{% endblock %}
          </div>
          {% include '_third-party/duoshuo-hot-articles.swig' %}
          {% include '_partials/comments.swig' %}
        </div>
        {% if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {% endif %}
      </div>
    </main>

content-wrap 节点中添加下面代码

{% if theme.main_notify.enable%}
      {% if theme.main_notify.pageshow %}
         {% if page.notify === '' %}
           <p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
         {% else %}
          <p class="content-notify marquee">{{ page.notify }}</p> 
         {% endif %}
       {% elseif page.notify !== '' %}
         <p class="content-notify marquee">{{ page.notify }}</p>
       {% elseif page.title === ''%}
         <p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
       {% endif %}
{% endif %}

上面这段代码的逻辑是判断是否要显示通知,我们实际的通知布局只就是 <p> 标签。

<p class="content-notify marquee">通知的内容</p>

阅读更多

Hexo Next博客配置和SEO优化

SEO优化

在Gitlab上面搭建的博客,最近又买了域名给搭建了起来,文章有了,但是发现百度和Google的索引量比较少,乘着国庆假期抽空又折腾了一番,添加了百度和google收录,更换了静态资源cdn地址,对静态资源进行了压缩。

静态资源压缩

百度收录

在搜索引擎中输入site:<域名>, 如果没有被收录可以点击“网址提交”来提交网站。百度链接提交

生成站点地图

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎。

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

阅读更多