Windows:利用Hexo搭建个人博客

发表于 | 更新于: | 分类于 ，

本文介绍利用Hexo搭建个人博客，并将该博客部署至git。以及对于Hexo主题，页面等的设置方法。

需要安装git和nodejs

安装完成后，git bash中使用以下命令检查是否安装成功。

1
2
node -v 
npm -v

git安装成功后，就可以使用git bash敲命令了，不再用windowscmd了。

安装hexo

在安装好git和nodejs后，继续安装hexo。

  • 创建一个文件夹，如命名为blog
  • git bash中, cd到这个文件夹下(或在这个文件夹下右键git bash打开)
  • 输入npm install -g hexo-cli 安装
  • 使用hexo -v检查是否安装成功

至此，hexo安装结束

初始化hexo

使用以下命令初始化hexo。hexo init [subdirname]

新建博客文章(post)

使用以下命令新建博客文章。

1
2
hexo new post_name
hexo n post_name

之后就可以在.md中尽情写文章了。

生成静态网页

文章写完后，使用以下命令生成静态网页。

1
2
hexo generate 
hexo g

启动预览服务

使用以下命令，本地预览。localhost:4000中打开。

1
2
hexo server 
hexo s

或本地测试

1
hexo debug

发布网站

站点配置文件中部署blog位置

blog文件夹下 _config.yml为站点配置文件。打开该文件，新增部署语句如下：

1
2
3
4
deploy:
	type: git 
	repo: https://github.com/username/username.github.io.git
	branch: master

安装git部署插件

1
npm install hexo-deployer-git --save

部署

1
2
hexo deploy
hexo d

至此，blog上线。 如果是内容重新更新，则在deploy之前先clean。 

1
hexo clean

Hexo个性化设置

更换theme

cd到blog文件夹，git bash中继续输入

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

找到站点配置文件中的theme: landscape 修改为theme: next

导航栏设置

分类和标签设置

添加”分类”

  • cd 到blog下，执行命令hexo new page categories
  • 成功后会提示INFO Created: d:/blog/source/tags/index.md
  • 找到index.md,添加type: "tags"
  • 注意主题配置文件配置以下内容。打开首页categories
1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  • 打开需要添加标签的文章，为其添加categories属性。

下方的categories:tools表示添加这篇文章到”tools”这个分类下。注意：hexo中一篇文章只能属于一个分类，也就是说如果在”-tools”下方添加”-xxx”,hexo不会产生两个分类，而是把分类嵌套，即该文章属于”-tools”下的”-xxx”分类

1
2
3
4
5
6
7
---
title: 利用Hexo搭建个人博客
date: 
categories:
- web 前端
- xxx
---

至此，成功给文章添加分类，点击首页的”分类”可以看到该分类下的所有文章。

添加”标签”

  • cd 到blog下，执行命令hexo new page tags
  • 成功后会提示INFO Created: d:/blog/source/categories/index.md
  • 找到index.md, 添加type: "categories"

打开需要添加标签的文章，为其添加tags属性。下方的tags: blog -hexo 就是这篇文章的标签了

1
2
3
4
5
6
7
8
9
---
title: 利用Hexo搭建个人博客
date: 
categories:
- tools
tags:
- blog 
- hexo 
---

至此，成功给文章添加标签，点击首页的”标签”可以看到该标签下的所有文章。

添加”about”并添加想说的话

  • cd 到blog下，执行命令hexo new page about
  • 成功后会提示INFO Created: d:/blog/source/categories/index.md
  • 找到index.md,写上你想说的话

至此，成功给文章添加标签，点击首页的”标签”可以看到该标签下的所有文章。

添加搜索功能：LocalSearch搜索

安装hexo-generator-searchdb. cd到blog下，执行以下命令npm install hexo-generator-searchdb --save

编辑站点配置文件，新增以下内容到任意位置

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html 
  limit: 10000

编辑主题配置文件，启用本地搜索功能

1
2
3
# local
local_search:
  enable: ture

首页设置

不显示全文

Hexo的Next主题默认首页显示每篇文章的全文内容，下面将其修改为只显示部分内容。

方法1: 修改主题配置文件

主题配置文件，找到以下代码：

1
2
3
4
5
# Automatically Excerpft. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable的false改成true即可。length设定文章预览的文本长度。 修改后重启hexo即可。

方法2: 在文章内容后加上<!--more-->

在.md文章内容后加上<!--more-->,首页和列表页显示的文章内容就是<!--more-->之前的文字，之后的不会显示

第一种会格式化文章的样式，直接把文章挤在一起显示，最后会有...。第二种不会有

文章设置

置顶

安装node插件

1
2
npm uninstall hexo-generator-index --save 
npm install hexo-generator-index-pin-top --save

在需要置顶的文章的Front-matter中加上top:true即可。 也可以指定top: 数字。 数字越大排序越靠前。

1
2
3
4
5
6
title: 
date:
tags:
categories:
description:
top: true

显示版权信息

主题配置文件，修改以下部分：

1
2
3
4
5
# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

将其中的enable: false 改为enable: true。 同时，在站点配置文件中，修改URL为自己的站点的域名地址。

访问统计功能

添加博客的访问量。不蒜子统计显示文章的访客数，浏览量等信息

主题配置文件, 找到busuanzi_count，将enable: false改为enable: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 访客数 <i class="fa fa-user"></i>
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 浏览量 <i class="fa fa-eye"></i>
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 阅读量 <i class="fa fa-file-o"></i>
  page_pv_footer: 次
  • 当enable: true时，代表开启全局开关；
  • 当site_uv: true时，代表页面底部显示站点UV
  • 当site_pv: true时，代表页面底部显示站点PV
  • 当page_uv: true时，代表文章页面标题下显示该页面的PV

显示文章更新时间

主题配置文件，post_meta部分:

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: true

将updated_at: false改为updated_at: true即可。

网站底部

去掉底部hexo强力驱动

主题配置文件，修改

1
2
3
4
5
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: false

添加博客运行时间

themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span class="footer__copyright">
<div><span id="span_dt_dt"> </span>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("8/25/2016 00:00:00");//这个日期是可以修改的
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());//其实仅仅改了这里
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML="博客已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒 🐼 ";
}
show_date_time();
</script></div>
</span>

底部的心跳动

主题配置文件

1
2
footer:
  icon: heart

~/blog/themes/next/layout/_partials/footer.swig,编辑

1
<span class="with-love" id="heart">

~/blog/themes/next/source/css/_custom/custom.styl, 添加

1
2
3
4
5
6
7
8
9
10
11
12
13
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}

代码块

代码块样式

1
2
```[language][title][url][link-text]
code

说明 + [language] 是代码语言的名称，用来设置代码块颜色高亮，非必须； + [title] 是顶部左边的说明，非必须； + [url] 是顶部右边的超链接地址，非必须； + [link text] 如它的字面意思，超链接的名称，非必须。

PythonPython
1
print("Hello,world!")

设置代码高亮主题

主题配置文件，修改highlight_theme

1
2
3
4
# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

Next各种样式

文本块内容样式

note default

default

note info

info

note success

success

note warning

warnig

note danger

danger

note primary

使用html标签写法primary

1
2
3
4
5
6
7
8
9
{%note default%}
### note default
default 
{%endnote%}

<div class="note primary">
  <h4>note primary</h4>
  <p>使用html标签写法primary</p>
</div>

如果想用包含图标的，到主题配置文件，修改为icons: true

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note tag (bs-callout).
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

文字内容样式

复道行空, 不霁何虹。 长桥卧波,未云何龙。 
1
{%label @复道%}{%label primary@行空%}, {%label default@不霁%}{%label success@何虹%}。

文字增加背景色块

打开themes/next/source/css/_custom下custom.styl文件,添加属性样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 颜色块-红
span#inline-red {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #E34018;
}
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}

在你需要编辑的文章地方。放置如下代码：

1
2
3
4
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>

改变文字颜色

使用html语法直接写即可。

我可以设置这一句的颜色哈哈

<font color="#FF0000"> 我可以设置这一句的颜色哈哈 </font>

我还可以设置这一句的大小嘻嘻

<font size=6> 我还可以设置这一句的大小嘻嘻 </font>

我甚至可以设置这一句的颜色和大小呵呵

<font size=5 color="#FF0000"> 我甚至可以设置这一句的颜色和大小呵呵</font>

文字居中

<center>这一行需要居中</center>

tabs标签

这是选项卡 1

这是选项卡 2

这是选项卡 3

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab, 1 %} 
<!-- tab ID3 -->
**这是选项卡 1**
<!-- endtab -->
<!-- tab C4.5-->
**这是选项卡 2**
<!-- endtab -->
<!-- tab C5.0-->
**这是选项卡 3**
<!-- endtab -->
{% endtabs %}

按钮

Botton
NexT进度条加载

1
{% btn url,test_tile,,title %}

Botton with Icon
NexT主题设置

1
{%btn url,showlabel,hand-o-right%}

Botton with Fix-width
NexT个性化设置

1
{%btn url, Next样式, hand-o-right fa-fw %}

Center 

1
2
<div class="text-center"><span>{% btn url,,google%}{%btn url,,edge %}{% btn url,,chrome %}</span>
<span>{% btn url,,terminal %}{% btn url,,diamond fa-rotate-270 %}</span></div>

酷绚效果

点击发射桃心效果

  • /themes/next/source/js/src下新建文件clicklove.js。 把下面代码贴到该文件中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
! function (e, t, a) {
  function n() {
    c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
  }

  function r() {
    for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
    requestAnimationFrame(r)
  }

  function o() {
    var t = "function" == typeof e.onclick && e.onclick;
    e.onclick = function (e) {
      t && t(), i(e)
    }
  }

  function i(e) {
    var a = t.createElement("div");
    a.className = "heart", d.push({
      el: a,
      x: e.clientX - 5,
      y: e.clientY - 5,
      scale: 1,
      alpha: 1,
      color: s()
    }), t.body.appendChild(a)
  }

  function c(e) {
    var a = t.createElement("style");
    a.type = "text/css";
    try {
      a.appendChild(t.createTextNode(e))
    } catch (t) {
      a.styleSheet.cssText = e
    }
    t.getElementsByTagName("head")[0].appendChild(a)
  }

  function s() {
    return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
  }
  var d = [];
  e.requestAnimationFrame = function () {
    return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
      setTimeout(e, 1e3 / 60)
    }
  }(), n()
}(window, document);
  • \themes\next\layout_layout.swig, </body> 上方，添加
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

插件

字数与时间统计

1
npm install hexo-symbols-count-time --save

绘制图mermaid

安装

1
npm i hexo-filter-mermaid-diagrams

主题配置文件, 增加

1
2
3
4
5
6
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

1
2
3
4
5
6

{% note danger %}
注意set `external_link: false`
{% endnote %}

<span id="inline-purple">themes/next/layout/_partials/footer.swig</span>, 添加
1
2
3
4
5
6
7
8
{% btn, https://stazhenggy.github.io/2019/04/20/mermaid/ , 更多mermaid内容, % }

### 无响应问题

在国内可能会出现`npm`无响应的情况，这时可以换用`cnpm`

```bash 
npm install cnpm -g --registry=https://registry.npm.taobao.org

之后使用cnpm install [name]

CERT_NOT_VALID_YET

先运行

1
npm config set strict-ssl false

即可。

.Rmd直接导入hexo

有大量的建模使用R实现; 日后查看整个建模流程或查阅一些常用命令。
具体查看需求的内容包含两点：

  • 代码以及代码的执行结果，包含图片
  • 以上需同步到博客

针对以上两个需求的实现

  • 用rmarkdown直接实现
  • 借助hexo <- 将.rmd转成.md, 放到_post文件夹下即可。

可能有bug的点，是图片以及公式能否显示成功。(已解决)

已有方案

Xie yihui(谢益辉),谢大大已经有新的package: blogdown可以实现在RStudio中生成博客, 支持Hugo主题。 但自己，已经有基于Hexo搭建的博客，且现阶段基于sublime text + markdown + git bash 写博客的流程已经比较顺手且暂时不想再转换。所以，准备鼓捣利用rmarkdown，生成.md文档。还保持之前写博客的方法。

从网上查了一些资料写了以下方案，亲测代码，代码结果输出，图片，公式，网页链接引用均没有问题。 流程不算复杂，基本满足我个人需求。

解决方案

.rmd -> .md -> hexo

在.rmd文件yaml head里加入以下代码：

1
2
3
4
5
--- 
output:
    md_document 
        variant: markdown_github
---

直接knit即可生成.md，然后将这个.md移到_post文件夹下即可。

需要注意的一点是，如果.rmd中包含的了图片，在knit的时候，会创建名为rmdname_files的文件夹，存放该.md中对应的图。 .md引用该图使用的是markdown语法的相对路径，即![](rmdname_files/figure-markdown_github/chunkname-1.png)。为了保证能正确显示图片，建议使用以下流程：

  • 在站点配置文件中, 将post_asset_folder: false 改为 true。 修改后，每次执行hexo n(new) post_name 将不只在_post下生成post_name.md, 同时新建一个与post_name`同名的文件夹。

  • 在Rstudio中, setwd()到post_name文件夹下。新建.rmd并保存到该文件夹下，注意.rmd命名为post_name.rmd

  • 开始写.rmd文档。写好后，点击knit, 将会在post_name文件夹中生成post_name.md以及新文件夹:post_name_files

  • 将post_name文件夹中的post_name.md替换_post文件夹下的同名.md即可。

其他方案

参见BaoDuGe_飽蠹閣的博文：如何将我的R项目更好地展示在Hexo博客上

参考

0%