Hexo 是一个轻便的博客框架。根据官网的一些文档及网上的教程,尝试用 Hexo 搭建一个静态的博客站点。下面的操作在 win10 64 位家庭版中完成。bash 命令在 git bash 中操作。
基础
前提
首先需要安装 git 和 npm,git 已经安装好了。到 npm 官网 下载并安装 npm。
安装
1 | 安装 |
配置站点
打开 _config.yml
文件,修改一些基本配置
1 | # Site |
安装主题
选择了 Next 这一主题:
1 | git clone https://github.com/theme-next/hexo-theme-next themes/next |
将 _config.yml
中 theme
设置为 next。
生成
1 | hexo g |
部署
先在 GitHub 上建立了一个空的 repository,名字为 blog。然后修改 _config.yml
文件,注意这里设置的 branch 名字。第一个 branch 名字 为 gh-pages
,这样命名是默认的项目主页。利用新的 hexo-deployer-git
就可以很方便地将网站和源码同时放在 git 上,这样即便更换电脑也可以从源码拉取代码,重新生成网站。参考自: 使用hexo,如果换了电脑怎么更新博客?
1 | # Deployment |
首先需要配置 ssh 公钥
1 | # 生成 |
打开 git 网站,在设置部分添加 ssh keys,然后将 ~/.ssh/id_rsa.pub
中的内容复制到其中。
接下来就可以部署到 git 了。
1 | npm install hexo-deployer-git --save |
本地调试
可以在本地调试
1 | 安装 |
服务器默认运行在 0.0.0.0
,您可以覆盖默认的 IP 设置。默认端口为 4000,可以用 -p
设置端口。
1 | hexo server -i 192.168.1.1 |
高级
添加「标签」页面
新建「标签」页面,并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签,若你的所有文章都未包含标签,此页面将是空的。 底下代码是一篇包含标签的文章的例子:
1 | title: 标签测试文章 |
在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page
新建一个页面,命名为 tags
:
1 | hexo new page tags |
编辑刚新建的页面,将页面的 type
设置为 tags
,主题将自动为这个页面显示标签云。页面内容如下:
1 | --- |
添加「分类」页面
新建「分类」页面,并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类,若你的所有文章都未包含分类,此页面将是空的。 底下代码是一篇包含分类的文章的例子:
1 | title: 分类测试文章 |
在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page
新建一个页面,命名为 categories
:
1 | hexo new page categories |
编辑刚新建的页面,将页面的 type
设置为 categories
,主题将自动为这个页面显示分类。页面内容如下:
1 | --- |
设置页面文章的篇数
我想在首页及 archive/tag 页面展示不同的文章数,参考这里进行了设置:如何设置页面文章的篇数?
首先检查这几个插件是否安装上了:
1 | npm install --save hexo-generator-index |
然后打开站点的 _config.yml
添加下面的内容:
1 | index_generator: |
资源文件夹
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过打开 _config.yml
文件,修改 post_asset_folder
选项设为 true
,
1 | _config.yml |
当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title>
命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown
文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。
通过常规的 markdown
语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在 Hexo2
时代,社区创建了很多插件来解决这个问题。但是,随着 Hexo3
的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。
1 | {% asset_path slug %} |
比如:
1 | {% asset_img zotero_rna_1518862657_29629.png zotero_example %} |
注意:图片标题不能以下划线起始 _
,不知道为什么。
置顶文章
突然发现有时候有博客置顶的功能。参考这篇博客:解决Hexo置顶问题。
1 | npm uninstall hexo-generator-index --save |
然后在需要置顶的文章的 Front-matter
中加上 top: true
即可。
改变 Markdown 渲染器
由于使用 VNote 做笔记,顺便发布到博客上。VNote
默认的 Markdown 渲染器是 markdown-it
,而 Hexo
的渲染器是 GFM
。并且 GFM
不支持上标、下标、脚注等。为了二者能保持一致,所以我想更换 Hexo
默认的渲染器。
1 | npm un hexo-renderer-marked --save # 卸载原有渲染器 |
编辑站点的 _config.yml
,配置插件
1 | # hexo-renderer-markdown-it-plus config |
查看 hexo-renderer-markdown-it-plus 了解更多。
文章加密
当然,这种加密方式非常不安全,只能阻挡普通的浏览者。参考:hexo文章密码访问的"破解"方法。
既然是博客,加密其实也没有多大意义。所以这节内容是为了玩一玩。
安装 hexo-blog-encrypt
插件
1 | npm install hexo-blog-encrypt --save |
启用文章加密功能,修改站点的 _config.yml
文件:
1 | # Security |
然后在想要加密的文章头部加上对应字段,如 password, abstract, message 等:
1 | --- |
添加站点地图并提交到谷歌
配置站点地图,主要用于 SEO 优化。主要参考了这篇博客:next添加sitemap
安装 hexo-generator-sitemap
插件
1 | npm install hexo-generator-sitemap --save |
提交 sitemap 到 Google
这块在官方文档里面有提到(官方文档其实很容易上手,跟着官方走还是很容易的,有些地方可能不够详细,但是网上关于next的配置博客也不少,如|Hexo优化|如何向google提交sitemap(详细),这里给出傻瓜式详细步骤:
- 进入 Google Webmaster Central
- 点击骚红色的”ADD A PROPERTY”
- 在弹出来的小框中加入你的站点地址 http://yoursite.com ,然后点击”Continue”
- Tab栏选择”Alternate methods”,选中HTML tag可以看见
<meta name="google-site-verification" content="xxxxxxxxxxxxxxxxxx" /> #复制content的值
- 打开next主题的配置文件_config.yml,找到google_site_verification字段(找不到就新建):
1
2
3
4 >># Google Webmaster tools verification setting
>># See: https://www.google.com/webmasters/
>>google_site_verification: xxxxxxxxxxxxxxxxxx #4中content的值
>>
- 执行命令重新发布站点
hexo d -g
- 回到4中的 Google Webmaster Central 页面,点击骚红色的”VERIFY”,done!
添加蜘蛛协议
robots.txt
是搜索引擎中访问网站的时候要查看的第一个文件。robots.txt
文件告诉蜘蛛程序在服务器上什么文件是可以被查看的。
在站点 source
文件夹下新建 robots.txt
文件,文件内容如下:
1 | User-agent: * |
配置主题
下面的配置基于 Next v6.0.6
,不同版本可能会有一定差异。
下面如果需要修改配置文件,都是在 themes/next
下的 _config.yml
,这种站点配置和主题配置分离的方式非常灵活方便。
选择 Scheme
Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。
1 | # Scheme Settings |
侧栏菜单
打开 themes/next
下的 _config.yml
文件,搜索 menu
关键字
1 | menu: |
添加头像
打开 themes/next
下的 _config.yml
文件,搜索 Sidebar Avatar
关键字,去掉 avatar
前面的#
1 | # Sidebar Avatar |
侧边栏社交链接
侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在 主题配置文件 中。
链接放置在 social 字段下,一行一个链接。其键值格式是 显示文本: 链接地址。
1 | social: |
阅读更多
在文章中使用 < !--more-->
手动进行截断。这种方法可以根据文章的内容,自己在合适的位置添加 < !--more-->
标签,使用灵活,也是 Hexo
推荐的方法。
自动形成摘要,在主题配置文件中添加。默认截取的长度为 150 字符,可以根据需要自行设定
1 | # Automatically Excerpt. Not recommend. |
显示文章字数统计,阅读时长
在你站点的根目录下
1 | npm install hexo-symbols-count-time --save |
修改站点配置 _config.yml
,添加下面的内容:
1 | # word count |
修改主题配置 themes/next
下的 _config.yml
,搜索关键字 post_wordcount
1 | # Post wordcount display settings |
修改网页底部
在图标库中找到你自己喜欢的图标,打开 themes/next
下的 _config.yml
,搜索关键字 authoricon
,替换图标名。
1 | footer: |
开启版权声明
主题配置文件下,搜索关键字 creative_commons
1 | creative_commons: |
浏览进度
浏览页面的时候显示当前浏览进度
1 | # Scroll percent label in b2t button. |
评论系统 DISQUS
先到 Disqus 网站配置一下,在右上角有一个齿轮的标记 setting,在下拉列表中选择 add disqus to site,需要填写 Site URL,Site Name,Site Shortname,完事后就注册了一个账号。
编辑 主题配置文件, 将 disqus
下的 enable
设定为 true
,同时提供您的 shortname
。count
用于指定是否显示评论数量。
1 | disqus: |
内容分享
在网站 AddThis 上注册账号。 可以使用 Google/Facebook/Twitter 账号进行第三方登陆。从菜单获得 AddThis id:More… --> General --> ID。在 主题配置文件 中,把 #Share
下的 #add_this_id
取消注释, 改为 add_this_id: put_your_add_this_id_here
。
本地搜索
添加百度/谷歌/本地 自定义站点内容搜索
安装 hexo-generator-searchdb
,在站点的根目录下执行以下命令:
1 | npm install hexo-generator-searchdb --save |
编辑 站点配置文件,新增以下内容到任意位置:
1 | search: |
编辑 主题配置文件,启用本地搜索功能:
1 | Local search |
添加谷歌统计
注册 Google Analytics。
在主题下的 _config.yml
文件中添加:
1 | google_analytics: UA-[TrackingID]-1 |
阅读次数统计(LeanCloud)
安装插件
1 | npm install hexo-leancloud-counter-security --save |
配置站点文件
1 | leancloud_counter_security: |
配置主题文件
1 | # Show number of visitors to each article. |
参考了这篇博客:https://theme-next.org/docs/third-party-services/statistics-and-analytics。对 LeanCloud 进行配置。
1 | leancloud_visitors: |
修改超链接样式
Next 主题默认的超链接样式是下划线,纯白色,在网页中很不明显。我参考了这篇博客对超链接样式进行了修改: Hexo + Next 的优化
在 /theme/next/source/css/_custom/custom.styl
中修改,添加如下代码:
1 | .post-body a { |
其中 a
定义了超链接的基本样式,a:hover
定义了超链接在鼠标悬停时颜色的变化。.post-body
使得改变的样式只作用与文章内部,否则你会发现文章标题下面的分类等等样式都会被改变。
日常使用
创建新文章
1 | 创建新文章 |
更新 Next
主题
先备份 themes/next
下的 _config.yml
。
1 | cd themes/next |
再把 _config.yml
拷贝回去。
更新 hexo
及插件
更新 hexo
1 | npm update -g hexo |
更新插件
1 | npm update |
更换电脑
有哪些文件需要同步?
在尝试使用 git 同步博客的原始时,发现会遇到各种问题。觉得不如用坚果云选择性同步这几个文件夹。然后在另一台电脑上搭建博客环境、安装相关插件后。同步这些文件,然后重新生成、部署站点。如果遇到问题,参考这篇笔记。
最后……样式虽然重要,内容才是一切。
更新历史
- 20180207:创建笔记,记录了建站的过程
- 20180320:更新了
Next
主题,并修改相应内容 - 20180322:调整了笔记结构,增加了文章加密,站点地图等部分
- 20180324:增加了“改变 Markdown 渲染器”,更改了“更换电脑”部分
- 20180328:由于
hexo-neat
报错,移除了“静态资源压缩”部分 - 20180330:增加“设置页面文章的篇数”,"文章置顶"部分
- 20180404:将主题更新到了 6.1.0,更新了“修改网页底部”部分
- 20180710:添加了“添加谷歌统计”部分
- 20180815:添加了“修改超链接样式”部分
- 20181105:移除了“不蒜子”部分,增加了“leancloud”部分
- 20190714: 将 Next 主题更新到 7.2.0,修改了 “Leanclod” 部分