0%

Hexo 搭建个人博客

发表于 分类于 阅读次数： Valine：

概述

Hexo 搭建博客的主要流程

文档参考：

Hexo + GitHub 搭建

安装 Hexo 之前，你的电脑上需要有

  • Node.js
  • Git

如果是 Mac 用户， 您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具

安装 Hexo

全局安装 hexo-cli :

1
npm install -g hexo-cli

如果遇到权限的问题，可以使用如下命令：

1
sudo chown -R $(whoami) /usr/local/lib/node_modules/

设置 /usr/local/lib/node_modules/ 文件夹属于当前用户。

此外，如果你要使用 root 权限安装的话，可以使用 sudo -s 切为 root 用户进行相关操作。这么做的话，会将一些文件夹的默认属组设置为 root 了，不推荐。

npm 权限问题：

建站

1
2
hexo init
npm install

执行完毕之后，博客其实已经 OK 了：

1
2
3
4
hexo g
hexo s
or
hexo g && hexo s

执行上面命令即可本地预览博客内容了。

部署

官宣-站点配置文件
内容中介绍了很多字段的用途

Hexo 提供快速一键部署，将博客部署到 GIthub Pages。

安装 hexo-deployer-git：

1
npm install hexo-deployer-git --save

修改站点配置文件_config.yml中的配置：

1
2
3
4
deploy:
- type: git
  repo: git@github.com:Michael728/michael728.github.io.git
  branch: master

执行部署：

1
hexo d

常用命令

Hexo 常用命令

1
2
3
4
5
6
7
hexo version # 显示hexo版本
hexo new <title> # 创建新文章
hexo g/generate # 生成静态文件
hexo clean # 清除缓存文件和已生成的静态文件（public）
hexo server # 启动本地服务器
hexo d/deploy # 部署网站
hexo list <type> # 列出网站资料

npm 常用命令

1
2
3
4
5
6
7
8
npm install 模块名 -g --save # g全局安装 save安装包信息将加入到dependencies（生产阶段的依赖）
npm install gulp@3.9.1 # 指定版本
npm install # 该命令可以根据dependencies配置安装所有的依赖包
npm update [-g] 模块名
npm outdated 模块名 # 检查模块是否过时
npm ls -g # 查看全局安装的模块
npm uninstall 模块名
npm info hexo-cli # 查看hexo-cli模块的信息

Hexo 写作技巧

参考

你可以执行下列命令来创建一篇新文章或者新的页面。

1
hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

草稿(Layout draft)

draft 布局用于创建草稿，生成的文档存在于 source\_drafts\ 目录中，默认配置下将不会把该目录下的文档渲染到网站中。

1
hexo new drafts hellow

通过以下命令将草稿发布为正式文章：

1
hexo publish <title>

主页显示文章摘要

  • 在文章中使用进行手动截断
1
2
3
4
5
6
7
8
9
10
11
---
title: Hexo 搭建个人博客
tags: Hexo Markdown
categories:
  - 博客
---

## 概述

本文总结一下 Hexo 搭建博客的主要流程，能够在日后快速恢复博客环境
<!--more-->

文本居中的引用

  • HTML 方式: 使用这种方式时，给 img 添加属性 class=”blockquote-center” 即可。
  • 标签方式: 使用 centerquote 或者简写 cq。
1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

示例：

1
2
3
4
5
6
7
8
9
<blockquote class="blockquote-center">
<p>你要记住,有些鸟儿是关不住的</p>
<p><b>肖申克的救赎</b></p>
</blockquote>

{% cq %}
人的一切痛苦 本质上是对自己无能的愤怒
**王小波**
{% endcq %}

效果:

你要记住,有些鸟儿是关不住的

肖申克的救赎

人的一切痛苦 本质上是对自己无能的愤怒

王小波

代码添加改动标记

只需将代码块的语言指定为 diff，同时每行行首使用 + 和 - 来控制代码增减。

示例：

1
2
3
4
{% codeblock lang:diff %}
- print("Woops! I'll be deleted!")
+ print("Hey! I'll be add!")
{% endcodeblock %}

效果：

1
2
3
- print("Woops! I'll be deleted!")
+ print("Hey! I'll be add!")

标签效果

选项卡名称自定义

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡 2 %}
<!-- tab 自定义名称1 -->
这是选项卡 1
<!-- endtab -->
<!-- tab 自定义名称2 -->
这是选项卡 2
<!-- endtab -->
<!-- tab 自定义名称3 -->
这是选项卡 3
<!-- endtab -->
{% endtabs %}

这是选项卡 1

这是选项卡 2

这是选项卡 3

Button 标签

1
2
3
4
<!-- 标签 方式 -->
{% button /path/to/url/, text, icon [class], title %}
<!-- 标签别名 -->
{% btn /path/to/url/, text, icon [class], title %}

示例:

1
{% btn #, Text %}{% btn #, Text & Title, home, Title %}

效果:

Text Text & Title

引用站内链接

可以通过如下语法引入站内文章的地址或链接：

1
2
{% post_path slug %}
{% post_link slug [title] %}

其中，slug 表示 _post 目录下的 Markdown 文件名。

post_path 标签将会渲染为文章的地址，即 permalink；而 post_link 标签将会渲染为链接，可以通过 title 指定链接标题。

以下标签则会生成 链接标题

链接标题

这种站内引用方式比直接使用 url 引用的形式更为可靠，因为即使修改了 permalink 格式，或者修改了文章的路由地址，只要 Markdown 文件名没有发生改变，引用链接都不会失效。

文章分类

根据文章目录自动分类

Next 主题

安装 Next

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

Next 扩展都安装在themes/next/source/lib文件夹下

启动 Next 主题

编辑站点配置文件 _config.yml：

1
theme: next # 启用next主题

主题设置

设置语言

站点配置文件：

1
language: zh-CN # 最新版中，不再使用zh-Hans

设置菜单

编辑主题配置文件：

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

菜单内容的设置格式是：item name: link || icon。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

icon 使用的是 fontawesome 图标，严格区分大小写。

创建 Page 目录

1
hexo new page about

设置头像

将准备好的头像放置在主题目录下的 source/images/ 中。
主题站点文件中配置

1
2
3
4
5
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/logo.jpg

阅读次数

使用 LeanCloud
参考

// TODO 文章待完成

文章参考