Hexo-博客搭建
写在前面
关于我为什么使用 Hexo,其实还挺戏剧性的,一开始我使用的是 Halo 建站,相当傻瓜式,非常推荐大家使用,各种功能也非常全。但是最近服务器厂商应急把服务器关了,差点导致博客丢死,另一个租用的服务器也快到期了,于是我就产生了对文章存档的想法(虽然确实每几篇文章), 因为其实当今市面上的开源博客系统其实也蛮多的,常见的有:Hexo,Hexo、Hugo、Typecho、Wordpress 等。其中最著名的就是 Hexo,而且他有个特点就是:可以直接搭建在 github 仓库中。等于不需要服务器就能直接访问,而且甚至非常稳定且终身不丢,于是就想着搭建一个 Hexo 博客作为副站使用。
本篇文章就谈一谈我建站的过程吧,把一些搭建细节给保留下来,如果有人想要搭建,希望能靠这篇帮到访问的你。更多还是方便日后自己解决问题,本人使用的是 Windows 10,Mac 与 Liunx 系统请另寻其他文章
关于搭建 Hexo 博客前需要知道的事:
- 你需要有一个 github 账号
- 你需要大致明白 Markdown 的写法(一些语法)
- Hexo 每个页面都是一个静态的网页
- Hexo 不支持在线编写,只能在本地编写文章后上传
Hexo 官网:https://hexo.io/zh-cn/index.html
安装前的准备
- 安装
Node.js
Node.js: https://nodejs.org/en/
- 安装
git
git download for windows: https://git-scm.com/download/win
默认下一步,安装后右键会出现:
- Git GUI Here
- Git Bash Here
初次使用需要设定用户名及绑定邮箱。
设置用户名
1
git config --global user.name 用户名
绑定邮箱
1
git config --global user.email 邮箱地址
这两个设置对于轻度使用的用户来说按照喜好填写就行,不会有什么后续影响。
安装Hexo
Hexo 本身拥有的特点就是离线性,搭建的过程完全依赖于本地,后期就只是编写后上传仓库。所以我们需要先在本地搭建起 Hexo。
全局安装Hexo
打开
cmd
输入以下指令,全局安装Hexo
1
npm install hexo-cli -g
安装完全后,使用以下指令验证安装是否成功
1
hexo -v
创建本地Hexo项目
在本地新建一个文件夹作为 Hexo 项目的地址。在项目文件夹得目录下打开 cmd
:
初始化Hexo项目(得到博客系统文件)
1
hexo init hexoblog
初始化完成后会出现项目的基本结构,后续一些博客的基础设置修改根据根目录下的
_config.yml
文件来实现。安装npm(已安装可跳过)
1
npm install
启动Hexo
1
hexo server
本地启动后的地址为: http://localhost:4000/
正常来说会出现以下画面:
修改博客基础设置
site基础设置
进入Hexo项目文件夹(简称根目录),打开
_config.yml
(配置文件),找到如下内容1
2
3
4
5
6
7
8# Site
title: ''
subtitle: ''
description: ''
keywords: ''
author: ''
language: ''
timezone: ''这就是网站的基础设置项,这里只讲一些基础参数的修改:
- title:网站标题
- subtitle:网站副标题
- description:网站摘要
- author:博主昵称
- language:默认语言,默认是
en
(default)- 中文简体:
zh-CN
- 中文繁体为:
zh-TW
- 中文简体:
- timezone:时区
主题修改
这个在下面[安装博客主题](# 安装博客主题)时再讲。
安装博客主题
下载主题文件
hexo 一开始是 default 主题。如果不满意的话,肯定需要自己更换主题,可以直接到Hexo官方的主题仓库选择。
Hexo-theme:https://hexo.io/themes/
下载后的主题放入博客根目录的 themes 文件夹中,或者直接在 themes 文件中使用 git 的命令进行下载。
修改博客设置
修改博客根目录下
_config.yml
配置文件中的 theme 参数,修改为主题的名字(一般来说,如果出错可以直接去看各主题博主写的设置文章)以下以
butterfly
主题为例:1
2
3
4# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly启动博客
1
hexo serve
可以缩写为:
1
hexo s
将博客上传到Github或者Gitee
将 hexo 博客上传到个人的 github 仓库后,可以直接通过仓库名来访问博客,这就等于白嫖了 github 仓库作为服务器,可以零成本搭建博客且文件不会丢失,小代价是有时可能无法正常访问,这时候可以考虑搭建全站 CDN(Content Delivery Network)提高访问的速度(网上都推荐 jsDelivr),当然也不能保证 CDN 不会崩(jsDelivr 貌似崩了半年),所以看个人的需求吧。
放到 gitee 上也是一个好选择,访问速度有了保障,但是代价是 gitee 可能哪天就不支持静态页面托管了(有先例),因此还是首先推荐搭建到 github 仓库。
上传到Github仓库
生成SSH密匙
目录打开命令行,输入以下代码生成密匙:
1 | ssh-keygen -t rsa -C "xxxxx@xxxxx.com" |
其中xxxxx@xxxxx.com
输入你GitHub的邮箱,实际上这只是一个名称,不是最关键的。接下来的选项一路回车即可。
然后到C:\Users\用户名\.ssh
,其中之后便会生成id_rsa
和id_rsa.pub
。其中 SSH 密匙在id_rsa.pub
中。
登陆 github → 点击头像 → setting → SHH and GPG keys → New SSH key 把 id_rsa.pub 复制到其中即可。
输入一下代码进行确认绑定
1 | ssh -T git@github.com |
输入yes
后就会收到绑定成功邮件。
创建博客仓库
登陆 github → +号
(头像旁边) → New repository
仓库名字命名必须为:github用户名.github.io
, 然后将仓库设为Public,例如本网站的仓库名为:ldm0715.github.io
修改博客配置文件
打开博客根目录下的_config.yml
, 找到deploy
, 格式为:
1 | # Deployment |
上传文件到github仓库
输入上传代码(需要安装插件,详见:[生成和上传页面指令](# 生成与上传页面指令))
1 | hexo d |
刷新即可看到仓库中出现了博客文件(因为网络问题可能会失败,失败就多试几次)
上传到Gitee仓库
上传Gitee与上传Github只有一些不一样,下面只说说不一样的地方,具体流程和上传Github一样。
生成SSH密匙
跟Github不同,我们需要输入以下指令:
1 | ssh -T git@gitee.com |
输入yes
即可。
创建博客仓库
和github创建仓库的要点一样,要把仓库名设置为gitee用户名
,然后初次创建的时候是不能直接设置为Public
的,需要在创建了仓库之后去“管理”中更改为”开源“。
修改博客配置文件
在Gitee的仓库中,默认分支不再是main,而是master,因此修改如下:
1 | # Deployment |
上传文件到gitee仓库
1 | hexo d |
开启静态页面托管服务
跟Github不同,Gitee没有默认使用静态托管页面,因此我们需要手动开启静态托管页面的功能(此功能需要实名认证)
之后勾选强制https,然后点击更新。
(2023.4.23)家人们,谁懂啊,还是老老实实用Github吧。
Hexo系统基础命令
建立好博客之后,还需要学会一些 Hexo
的一些日常操作指令,这样才能方面后续使用。
新建文章
文章默认生成在.\source\_posts
文件夹下,且默认格式为 Markdown
1 | hexo new "文章名字" |
按照路径打开文章后内容如下:
这种方法不常用,不如直接右键生成.md
文件
生成和上传页面指令
因为 Hexo 是由一些静态的网页组成的,因此在编写完页面或者文章后,需要手动生成静态网页,也需要手动上传到指定的服务器。
生成静态页面和上传功能首先需要安装 hexo-deployer-git
插件。
1 | npm install hexo-deployer-git --save |
清除页面缓存(有些设置需要清除缓存之后才能显示)
1
hexo clean
缩写为:
1
hexo cl
生成静态页面(上传页面时才需要这么做)
1
hexo g
上传页面
1
hexo d
一键部署
1
hexo cl && hexo g --d
创建新的页面
1 | hexo new page “页面名” |
需要注意的是,生成的页面默认在项目的 source 文件夹下 (例如:F:\Hexo\source
),默认生成的网页地址为 你的网址/页面名/
,所以页面名要与_config.yml
文件中设置的页面名保持一致。
稍微总结一下生成的相关操作:
操作 | 路径 | 需要知道的 |
---|---|---|
hexo new “文章名” | .\source\_posts |
这种方法不常用 |
hexo new page “页面名” | .\source\页面名 |
默认生成的网页地址为网址/页面名/ ,所以页面名要与_config.yml 文件中设置的页面名保持一致。 |
hexo三连
如果你觉得一条条写命令麻烦,你可以使用&&
来连接这些命令,在更改了网页之后,我们一般要先清除缓存,生成界面,上传页面,一条一条敲的话很麻烦,这时候你就可以这样写:
1 | hexo cl && hexo g && hexo d |
文章属性快速设置
文章拥有很多属性,如:标题,摘要,tags,类别等。那么就需要学会如何在 md 文件中编写YAML格式
(文章头)让系统识别到这是设置的属性。
文章基础属性设置
在 md 文件开头写入如下格式(YAML):
1 |
|
写入后在相应的主题中打开相应设置就能看见这些设置。
给文章加密
有些人可能会拿博客写日记、账号密码等私密内容,这些内容肯定不能直接公开,最直接的保密方法就是给文章加密(当然会不会给轻松破解就不清楚了)
安装插件
1
npm install --save hexo-blog-encrypt
加密
YAML
格式YAML
写法为1
2
3
4
5
6
7
title: password
password: 自己设置的密码
message: 密码文本框提示 例如:您好, 这里需要密码.
wrong_pass_message: 错误信息提示 例如:抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 校验失败提示 例如:抱歉, 这个文章不能被校验加密成功提示
文章置顶(Butterfly主题)
hexo-generator-index
从 2.0.0 开始,已经支持文章置顶功能。你可以直接在文章的 front-matter
区域里添加 sticky: 1
属性来把这篇文章置顶。数值越大,置顶的优先级越大。
1 |
|
添加版权提醒
自己写的文章有时候不太希望随便给人 copy,这时候就需要添加版权信息提示,一般来说主题都包含这项功能(去主题配置文件打开即可),但有时候我们不一定全局都开启版权声明(比如搬运文章),这时候就需要单独给一些文章添加版权信息。
可以在YAML
中加入以下内容:
1 |
|
另外,你可以在主题设置中打开复制附加版权信息,这样或许更有作用。
插件推荐
Hexo拥有许多插件,并且有着自己的插件仓库,安装一些实用的插件可以让我们的体验大大提升。
Hexo插件仓库:https://hexo.io/plugins/
本地搜索插件
这个插件可以提供站内文章搜索功能,非常推荐安装
安装指令
1
npm install hexo-generator-search --save
修改配置
那么在博客配置文件
_config.yml
中新增以下配置项:1
2search: path: search.xml;
field: post;
文章字数统计
这个插件能在文章的标题下面显示文章字数
安装指令
1
npm i --save hexo-wordcount
修改配置
在博客配置文件
_config.yml
中新增以下配置项:1
2
3
4
5
6
7post_wordcount:
date: true # 发布日期
update: true # 更新日期
wordCount: true # 文章字数统计
totalCount: true # 站点总文章字数
min2read: true # 文章阅读时长
readCount: true # 文章阅读次数
中文链接转拼音
对于中文使用者来说,文章标题都是中文的,因为 hexo 会默认将文章标题作为网页链接的一部分,这就可能会出现一些不便。例如:
修改前:http://localhost:4000/2022/11/19/python 编程中遇到的一些问题 /
你会发现链接无法正常被识别完整,这可能导致一些场合无法直接点击跳转,因此网页链接中最好不要出现中文,这时候就可以安装此插件。
这个插件安装配置好后会生成拼音和”-“来代替连接中的中文
修改后:http://localhost:4000/2022/11/19/python-bian-cheng-zhong-yu-dao-de-yi-xie-wen-ti/
安装指令
1
npm i hexo-permalink-pinyin --save
修改配置
1
2
3permalink_pinyin:
enable: true
separator: '-' # default: '-'
文章加密插件
顾名思义,可以给文章加密。
安装指令
1
npm install --save hexo-blog-encrypt
用法
具体可见上文内容[给文章加密](# 给文章加密)
文章隐藏插件
顾名思义,可以将文章隐藏。
安装指令
1
npm install hexo-hide-posts --save
用法
在文章的
YAML
中加入1
2
3
4
title: hello world
hidden: true
RSS插件
安装插件
1
npm install hexo-generator-feed --save
在博客根目录
_config.yml
中添加如下配置1
2
3
4
5
6
7
8
9
10
11
12
13feed:
enable: true
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:其实默认即可,但是如果想改的话建议查看官网:
在主题的
_config.yml
中添加如下配置1
rss: /atom.xml
添加(或者修改)social处的配置
1
fas fa-rss: 你的博客地址/atom.xml
最终生成效果如下,地址为博客地址 + /atom.xml
:
ssh连接错误
2024年1月29日,我使用hexo指令上传博客时,出现了如下报错:
1 | Please make sure you have the correct access rights |
不明白是什么原因的我于是尝试重新生成ssh密匙进行连接,但是当进行到ssh -T git@github.com
时,出现如下问题:
1 | ssh: connect to host github.com port 22: Connection timed out |
我以为是网络问题,但是尝试了好几次都无法接上,搜索了相关问题后初步判断是端口22失效,于是找到了如下方法。
检查443端口是否可用
1
ssh -T -p 443 git@ssh.github.com
如果出现
Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.
那就证明端口可以连接,可以进行下一步。在
c\用户\用户名\.ssh
文件夹下创建一个config
文件,在文件中写入如下配置:1
2
3Host github.com
Hostname ssh.github.com
Port 443让ssh默认走443端口。
重新运行
ssh -T git@github.com
指令,得到回复为Hi xxxxx! You've successfully authenticated, but GitHub does not provide shell access.
之后再运行hexo三连正常上传。