Hexo 博客搭建记录

说来惭愧,搭建博客这已经是第三次了,每次都是三分钟热度,一搭好就放那不管了。隔个一年半载,突然又心血来潮,回头一看,坟头草都长满了,当初怎么弄的,完全记不清了。如此往复,太耗心力,虽然再次搭建会比第一次快很多,但还是记录一下,万一~~~好吧,这次没有万一,仅仅记录,尽量精简。

Hexo 是什么?

一款快速、简洁且高效的博客框架,基于 Node.js
特点:速度快,支持 Markdown,一键部署,丰富的插件。
虽然相比 WordPress 主题偏少,但贵在简洁,毕竟是做博客的。折腾过 wp,个人感觉太臃肿。

安装 Hexo

准备

先安装 Node.js
我下的压缩包,解压后,将解压目录加入系统环境变量,以便全局可用 node 和 npm。
稍微配置下 npm:

1
2
npm config set prefix D:\Nodejs\node_global //在node主目录下配置 全局模块 安装路径
npm config set cache D:\Nodejs\node_cache //在node主目录下配置 cache缓存 路径

之后会在 C 盘用户主目录下生成 .npmrc 文件(不知道要不要将其移到 D:\Nodejs 目录下)

再安装 Git
这次下的安装包,全局安装,会自动配置环境变量

命令窗口看是否准备成功

1
2
3
node -v
npm -v
git --version

安装 Hexo

npm install -g hexo-cli

既然是用 npm 安装的,目录就在之前配置的 node_global 文件夹内
这时候去 hexo -v 会提示 command not found,需要将 node_global 文件夹路径加入环境变量(可能用安装包安装会自动配置吧)。

再次 hexo -v,会显示 hexo-cli 和相关依赖的版本。

安装完 Hexo 命令行,可以去生成一个博客站点了:

  • 进入自定义目录中,hexo init,或者在任意位置 hexo init <folder>
  • cd //进入站点目录
  • npm install //安装相关依赖

成功后,站点目录如下:

1
2
3
4
5
6
_config.yml —— 站点配置信息
package.json —— 程序信息
scaffolds —— 模板
source —— 资源文件夹,其中 Markdown 和 Html 文件会被解析到 public,其他文件被复制过去
└─ _posts 同上,但其它开头有下划线(_)的文件或文件夹都会被忽略
themes —— 主题

简单配置

需要配置的东西不多,主要有以下几项,其他配置具体看文档

1
2
3
4
language: zh-Hans
timezone: Asia/Shanghai
permalink: :year/:month/:id/ (暂时不知道对链接是否有影响)
render_drafts: true —— 开启渲染草稿预览

使用

常用命令

hexo -h 查看所有可用命令
常用命令:

1
2
3
4
5
6
hexo new [layout] <title>
—— 新建页面,默认为 post,其中格式以 scaffolds 为模板。已有的 layout: page、post、draft,也可以自定义
hexo server —— 启动服务器进入浏览器预览,默认网址:http://localhost:4000
hexo clean —— 清除缓存文件(db.json)和生成的静态文件(public)
hexo generate —— 生成静态文件,都放入 public 文件夹
hexo deploy —— 部署网站,推送到远程库

几乎所有命令都可以简写为首字母

新建页面

默认页面有 index、post、archive
一般我们博客还需要 categories、tags、about

都用 hexo new page <title> 生成
会在 source 中生成对应的文件夹,文件夹中都会有一个 index.md 文件,编辑文件的 Front-matter,去掉 title 字段,加上 type 字段,值为对应的类型:categories、tags、about(好像不起作用)

Writing

hexo new "title"
生成新的 md 文件在 source/_posts 中,以 scaffold/post.md 为模板
编辑完成后保存即可,生成静态文件时,此文件夹中的 md 文件都会被解析到 public

或者将已有的 md 文件直接放入 source/_posts,但要加上 Front-matter。

Front-matter

Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量
写文章时一般要加上分类和标签,其他可用参数请看文档

example:

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 标题
date: 时间
categories:(!注意,分类有层次性,标签没有)
- 技术
- 随笔(这里随笔会成技术的子类)
tags: [程序,学习](标签注意要用英文逗号)
photos: (!待检验)
- imgurl
- imgurl
---
正文……

另外,首页文章一般需要截断,在需要的位置添加<!-- more -->,这是官方推荐的方法

草稿
hexo new draft "title"
或者自己生成 md 文件放入 source/_draft 即可。
需要将草稿转为正式博文发布时,运行 hexo publish draft <"title"> 将会把草稿移动到 source/_posts 文件夹。

主题 Next

找了好几圈,还是 Next 简洁又小清新,以文章展示为主。其它也有几款有眼缘的,以后再试。

下载主题

1
2
cd your-hexo-site
git clone https://gitHub.com/theme-next/hexo-theme-next themes/next

然后在站点配置文件中启用主题:
theme: next

Next 提供了3种界面,我们选 Mist,在主题配置文件中:
scheme: Mist

主题设置
设置比较简单,另外还有第三方插件配置,具体请看官网文档

目前插件还未集成,需要:评论、统计、搜索、(音乐)

部署到 GitHub Pages

GitHub Pages 是一个静态网站托管服务,可以直接托管来自 GitHub 仓库的个人或项目页面。
GitHub Pages 的限制:1GB 的仓库空间、每月 100GB 的流量、每小时 10次 部署

前提,有 GitHub 账户,绑定过 SSH Key。(SSH Key 生成查看另一篇文章:Git 学习笔记)

GitHub 上新建一个空库,命名为 username.gitHub.io

站点配置文件中设置推送方式:

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

推送部署时,最好先清一下缓存

1
2
hexo clean
hexo g -d

成功后,就可以在浏览器中以 https://yixvan6.github.io 访问了。

买域名,解析到我们的仓库名

?疑问
之前搭建博客时,已绑定过 SSH Key,这次却连不上 GitHub,百思不得其解。
去账户一看,原来 SSH Key 是空的,以前绑定的“不翼而飞”?
我想可能有有效期限吧,但谷歌了一下还是没找到答案。

0%
Title - Artist
0:00