hexo简介
hexo是一个开源的博客系统,其完美支持Markdown的语法,是使用node.js生成静态页面,非常快,官网是https://hexo.io/zh-cn/,其部署非常简单,先安装好Node.js 等之后,再运行以下命令:
1 | npm install hexo-cli -g |
上述init完成之后,就会自动生成很多目录,内容如下:
1 | . |
如果hexo server
运行没有问题的话,就可以在浏览器中输入 http://localhost 回车就可以预览效果了。
配置github
看到这一步,就是要去注册github了,这里只说明一点,其他的如配置ssh key,初始化git等损人和,请参考下面的链接即可。
如果你手上没有域名,需要使用github提供的域名的话,在新建仓库时,其仓库名称必须是以github的登陆名开头,以.github.io结尾的名字。
如下图,登陆名是webw3c,那仓库名必须设置为webw3c.github.io
。
推送到github
第一步:打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾,填上如下配置:
最后面要填写如上字段,注意repo要修改为自己的。
第二步:要安装一个部署插件 hexo-deployer-git。
1 | npm install hexo-deployer-git --save |
推送成功之后,就可以在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客了。
常用hexo命令
新建一个页面是使用hexo new “”
1 | hexo new "postName" #新建文章,文件生成在在 /source/_posts 下看到一个“文章标题.md” |
站点配置文件
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml
。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
先来看站点配置文件,其配置文件含义参考官方链接:https://hexo.io/docs/configuration,其中文的实例可以参考:http://www.mashangxue123.com/Hexo/982564298.html
一般只需要修改site部分,以及theme部分,当然还有deploy,这里给出我的配置:
1 | # Site |
注意,next主题要设置中文,网上大部分都是说要配置为zh-Hans
,但我没有成功,后面使用zh-cn
就成功了。这是跟主题相关的,如next主题是要查看themes\next\languages
这个目录下的文件名。
主题设置
启用主题
hexo是有大量的主题,我选择了next这个主题,样式选择了Gemini scheme。
目前next的最新版本已经是7.1.1了,其官方链接为:https://theme-next.org/,旧的官司链接:http://theme-next.iissnan.com
首先下载主题
1
2$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next设置hexo站点配置文件,打开
_config.yml
将theme设置为next。如上的站点配置文件。设置next主题配置文件,找到Scheme Settings,将你需用启用的 scheme 前面注释
#
去除即可。1
2
3
4
5
6
7
8
9# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini重新发布。
1
2hexo clean
hexo g -d
next主题设置
这部分内容直接查看以下链接即可。目前我使用的是版本为v7.1.1
- 旧文档(中文):http://theme-next.iissnan.com/getting-started.html
- 新文档(英文):https://theme-next.org/docs/getting-started/
- 新文档(中文):https://github.com/theme-next/hexo-theme-next/tree/master/docs/zh-CN
菜单栏设置
1)首先,增加页面:
1 | $ cd your-hexo-site |
2)再设置页面类型:comments: false
表示取消评论;type为页面类型
tags设置
1
2
3
4
5
6
title: tags
date: 2019-05-19 09:38:38
type: "tags"
comments: false目录页设置
1
2
3
4
5
title: tags
date: 2019-05-19 09:38:38
type: "categories"自我简介页设置,自我发挥即可。
3)最后修改主题的配置文件_config.yaml
1 | menu: |
注意,|| 后面的名字表示图标名,而这个名字是在https://fontawesome.com/icons?d=gallery&m=free这里面查到的。
我们知道,categories代表分类,但是分类下面的内容是不会显示的,但可以一个分类一个栏目,如下是本博客的设置:
1 | menu: |
404页面设置
打开hexo/source目录,手工新建404.md的文件,使用腾讯公益404页面,内容如下:
1 | --- |
然后修改主题配置文件,将menu下面的commonweal修改为commonweal: /404.html || heartbeat
,然后重新发布即可。
设置「阅读全文」
如果不设置的话,打开首页,会出现文章内容全部展示的情况。有三个方法可以设置:
在文章中使用
<!-- more -->
手动进行截断,推荐使用在文章的 front-matter 中添加
description
,并提供文章摘录自动形成摘要,在 主题配置文件 中添加:
1
2
3auto_excerpt:
enable: true
length: 150
图片设置
图片上传一般有三种方法,一是使用微博图床,二是使用七牛云储存,但听说已经翻车了,三是手工上传图片。微博图床我是有使用过的,使用起来还是很满意的,只需要在chrome安装这个插件,登陆之后就可以使用了,很方便,具体可以参考https://github.com/Semibold/Weibo-Picture-Store,但我还是怕翻车,所以只使用第三种方法。这里介绍typora的教程:
1)在typora 偏好设置里面,图片插入的选择如下:
2)在hexo/source/_post
的目录下面新建assets目录,然后打开cmd,进入hexo/source
目录,使用mklink来创建一个目录链接,如下:
1 | E:\hexo\source>mklink /D assets _posts\assets |
3)在typora,编辑,图片工具,设置图片根目录,把hexo\source\_posts
设置为根目录,如下图:
这样三步之后,使用typora可以很方便地贴图,远离图床吧,翻车太容易~
插件设置
字数统计及阅读时长
安装hexo-symbols-count-time
只需要在hexo下安装此插件即可。
1 | npm install hexo-symbols-count-time --save |
站点配置文件修改
修改hexo目录下面的_config.yaml,在最后面添加以下行即可。
1 | symbols_count_time: |
主题配置文件修改
由于选用的主题是next,其配置文件是里面有这个配置了,就不需要重新添加了。如果没有,可以添加如下行:
1 | # Post wordcount display settings |
全英文链接
默认的文章页链接是跟title相关的,如果文章标题是中文,那链接也是中文的,不太友好,第一次我是使用了hexo-abbrlink
这个插件,但是生成的链接都是随机的,也不是友好的。参考了http://yangq.me/post/19acb239这篇文章,将文章页的链接自定义,比较麻烦,但可以实现自己想要的链接。以下是配置方法:
文章页全英文
在md文件的Front-matter
区域,增加一个urlname
属性,用来放文章的英文名字。
1 | title: hexo链接持久化终极解决之道 |
然后修改_config.yml
里的配置:
1 | permalink: :category/:year:month:day-:urlname.html |
这里设的是index
,也就是说如果md里面没有这个urlname
属性,则就显示index。
目录全英文
打开站点配置文件,找到category_map
,给分类设置一个英文的名字:
1 | default_category: uncategorized |
这样在Front-matter
里,分类该写中文写中文,最终的链接会翻译成英文。
本站的设置如下:
1 | category_map: |
阅读量统计
参考链接:https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/LEANCLOUD-COUNTER-SECURITY.md,未成功,弃用,我使用了busuanzi_count,只需要将enable修改为true即可。
valine留言系统
参考链接:https://vonsdite.cn/posts/c7d98860.html
图片放大
使用fancybox来让博文里面的图片能够点击放大查看。但我在网上找了很多资料,都没有成功,估计都是比较老的资料了吧。还是找官方的资料比较靠谱:https://github.com/theme-next/theme-next-fancybox3
1)进入hexo\themes/next
下载fancybox:
1 | E:\hexo>cd themes/next |
2)配置一下主题配置文件
将fancybox设置成true即可。
还有一个方法,不需要git,只需要设置next主题配置文件就可以了。如下:
1 | fancybox: //cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js |
加载进度条
其官网是https://github.com/theme-next/theme-next-pace,里面有安装的方法,跟fancybox是方法。
各主题样式的效果图,请查看:https://juejin.im/post/5c7d4700e51d4541d82d8b6b
添加版权说明
查找creative_commons,将post修改为true
1 | creative_commons: |
如果想修改声明,打开hexo\themes\next\languages\zh-CN.yml
修改如下:
1 | copyright: |
再修改./themes/next/layout/_partials/post/post-copyright.swig
,这里面的代码主要是参考了 3.16. 16、自定义文章底部版权
1 | <li class="post-copyright-title"> |
这样就会显示本文作者、本文链接、本文主题、版权声明这四项了。默认是没有本文主题这一项的,是不太友好的。
文章置顶
先安装hexo-generator-index-pin-top:
1 | npm uninstall hexo-generator-index --save |
然后在需要置顶的文章的Front-matter
中加上top: true
即可,也可配置为数字,top: 11
,数字越大,优先级越高。参考链接:http://wangwlj.com/2018/01/09/blog_pin_post/
配置私有域名
首先得先注册一个域名。然后再推送到github。但由于github太慢,对百度收录也不好,还是找一个国内的代码托管的网站,之前有考虑过gitee,但是绑定自己的域名是需要收费的,就找了coding了。
1)先注册。打开https://coding.net/register,这里面有个坑,必须注册个人版的,这样才会有Page服务,另外,coding个人版应该是跟腾讯云团体有合并了,现在注册coding个人版,就必须 先删除腾讯云才可以。注意:不要注册企业版,我在企业版花了大量的时间。
2)注册好了之后,登陆https://dev.tencent.com/user后台,再设置一下个人信息,如用户名、密码、邮箱。等于重新注册了一下,感觉整合的不是太好~
3)创建一个新的仓库,注意点就是新建项目的时候命名规则和 Github 上的一样,就是 用户名.coding.me 可以看下图,还有记得别忘了添加 SSH key。
4)仓库建好后进入仓库,选左侧的 Page 服务,在点击 设置,在设置中绑定新的域名,输入后点击绑定就可以了。然后再解析一下域名
5)推送代码到coding,在站点配置文件,修改deploy选项,修改如下:
1 | deploy: |
推送成功之后即可访问了。
参考资料
http://blog.haoji.me/build-blog-website-by-hexo-github.html
超详细 的搭建教程:https://segmentfault.com/a/1190000017986794
hexo插件用法:https://vonsdite.cn/categories/Hexo/
hexo常用功能设置:https://yunhao.space/2018/06/29/hexo-next-function-setting/