hexo+github驱动个人博客

序言

体验了一些大大小小的博客框架,最终还是回归到hexo来了。一年多以前,刚接触的博客圈子的时候总是喜欢一些浮夸的主题和功能,总是花时间去装饰页面,却忽略了内容。体验过一些CMS,使用过WordPress和Typeho,现在觉得,还是快速、简洁且高效最重要。

相比于简书、CSDN天生的环境限制、杂乱的页面布局和无处不在的广告,WordPress的臃肿、Typecho的PHP环境和域名限制,hexo就显得简单、高效的多。

而这篇文章主要就是介绍如何用hexo去搭建属于自己的个人博客,分享一下我的经验。

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

GithubPages和GiteePages区别

在正式介绍之前,我需要来说明一下GithubPages和GiteePages区别,GithubPages和GiteePages分别由Github和Gitee提供,除了名字不同,其内在原理基本是相同的。都是一个免费的静态网页托管服务,可以使用其托管博客、项目官网等静态网页。

区别主要在于,GiteePage普通版是不支持自定义域名,也不支持推送后自动部署,意思就是,如果你是Gitee的免费版用户,你只能使用他分发给你的二级域名,且当你博客在本地做出修改并推送到gitee上后,你必须手动登录gitee点击更新按钮更新GiteePages,这样你的网页才算是更新了。如何解决?

氪金

而GithubPages,支持自定义域名,也支持推送后自动部署,但是唯一也是致命的缺点就是在中国大陆的某些地区可能会访问失败或访问非常慢。当然,本博客也是部署于Github上,无他只是因为我每次都懒得手动更新。

受托于朋友、也借此机会,我将使用gitee来完成演示,同时也会给出github的设置。

工具列表

  • Node.js
  • Git
  • Gitee/Github账户
  • Typora
  • 图床

工具安装

安装Node.js

  1. 访问Node.js官网,选择 Windows 安装包 (.msi) 64位即可。
  2. 下载完毕后双击安装
  3. 一路Next即可
  4. 安装完毕后打开CMD,输入npm -v检验是否安装正确

安装Git

  1. 访问Git官网,点击Windows版本下载即可
  2. 下载完毕后双击安装
  3. 一路Next即可
  4. 安装完毕后可使用git clone来clone某个仓库来判断是否安装正确【在开始菜单能看到git图标一般都能正常使用】

Gitee/Github账户

使用邮箱正常注册即可,注意到时候博客的域名格式将会是 用户名.gitee.io,因此起名慎重哦!

安装Typora

hexo是使用Markdown格式解析文章的,如果不熟悉Markdown语法,和便于文章预览,可以使用Typora来编辑你的Markdown文件,同样一路next即可。

注意:安装完毕后,请打开 偏好设置->图像,设置成这样

图像设置

图床

图床就是一个在网络上存储图片的地方,目的是为了节省本地服务器空间,加快图片打开速度。你上传一个图片,图床就会返回给你一个链接,通过这个链接,你就从网络上可以访问这个图片。

本身hexo本身是可以放置图片的,但是使用起来不是很方便,而且如果使用github的话可能使网站访问更加慢,所以推荐使用图床。有关选择图床的可以看这个知乎专栏,推荐使用路过图床https://imgchr.com或者SM.MShttps://sm.ms。我现在使用的是遇见图床https://www.hualigs.cn/

创建Gitee/Github仓库

按照下图填写即可:

新建仓库

注意,仓库名称可以随意,但是仓库路径必须和你的用户名一致,只有这样,网站的地址才是 用户名.gitee.io,否则将会是 用户名.gitee.io/仓库路径。官方解释如下,

如果你想你的 pages 首页访问地址不带二级目录,如ipvb.gitee.io,你需要建立一个与自己个性地址同名的仓库,如 https://gitee.com/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后,就可以以 https://ipvb.gitee.io 进行访问了。

github有所不同,创建仓库时,仓库路径应该写 用户名.github.io,其他随意。

仓库公开或私有随意,做博客的仓库这个无所谓,没有什么区别。

注意,请勿勾选 使用readme文件初始化这个仓库,否则上传提交时可能会因为文件差异过大而无法提交。

本地NPM安装hexo

打开cmd,输入

1
npm install -g hexo

等待系统自动下载,如果安装不成功,可以尝试更换npm镜像源。

初始化hexo

在本地某个磁盘中新建一个文件夹,名称任意,建议如下格式,这样在本地磁盘有多个hexo博客的时候能够做到有效的区分。

/hexo/username.gitee.io

随后通过cmd进入该文件夹,通过init命令初始化这个文件夹。若初始化卡住,可尝试重新初始化或者挂梯子初始化。

1
hexo init

随后,这个本地文件夹就是你博客的本地源码。hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下:【不包括public文件夹和db.json文件】

hexo本地目录结构

  • node_modules:是依赖包
  • public:存放的是生成的页面 #hexo g编译生成后才有
  • scaffolds:命令生成文章等的模板
  • source:用命令创建的各种文章
  • themes:主题
  • _config.yml:整个博客的配置
  • db.json:source解析所得到的 #hexo g编译生成后才有
  • package.json:项目所需模块项目的配置信息

尝试启动

打开cmd,进入博客的文件夹中,通过hexo g生成静态博客文件

1
hexo g

再输入hexo s启动本地服务预览。

1
hexo s

打开浏览器,访问http://localhost:4000即可预览。

hexo初始主题

当然,现在的hexo还是很简陋的,让我们通过配置_config.yml文件和下载主题来个性化我们的博客

配置_config.yml

_config.yml位于根目录下,是整个博客的配置文件。你可以通过修改该文件来修改网站的一些相关项。

注意,每个冒号之后都是有一个半角空格的,如果省略之后编译的时候会报错

必要配置

1
2
3
4
5
6
7
8
9
10
11
url: https://oxywen.github.io/  #此处填写你的仓库pages地址
root: / #如果你的博客位于二级目录,请将所在的二级目录填写在此处


theme: melody #此处填写你需要启用的hexo主题,主题名字见你下载的主题文档,

#非常重要非常重要非常重要
deploy:
type: 'git' #我们通过git提交,选择填写git即可
repo: https://github.com/oxywen/oxywen.github.io.git #此处填写你的仓库地址
branch: master #提交的分支

常用配置

1
2
3
4
5
6
7
8
# Site
title: 不闻星河须臾 #博客标题
subtitle: '' #博客副标题
description: '' #博客的描述
keywords: #关键字
author: Oxywen #作者,将会显示在首页页眉页脚,文章的末尾等
language: zh-Hans #语言,不同主题支持的语言不同,修改时请查看主题文档
timezone: 'Asia/Shanghai' #时区,同上

更多配置可以前往hexo官网查看官方文档。

下载主题

你可以通过hexo官方主题站 https://hexo.io/themes/ 来寻找你喜爱的主题,也可以通过其他网站获取到其他用户分享的主题信息。

通常hexo主题都会发布在github上,找到你喜爱的主题,进入其github仓库,一般其readme.md自述文件中都会给出安装方法,例如这样

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

也可以复制主题仓库的git地址,例如这样 https://github.com/Fechin/hexo-theme-diaspora.git ,然后手动修改为上述格式。

打开Git Bash,进入hexo本地源码文件夹[username.gitee.io],将上述代码粘贴进去,回车执行。

安装主题

修改Hexo配置文件 _config.yml 主题项设置为diaspora

1
theme: diaspora

更新主题

如果你使用的主题作者更新了主题版本,你可以同步更新主题。

注意:请在更时主题时备份_config.yml配置文件

1
2
cd themes/diaspora
git pull

配置主题

主题安装完毕后,我们还需要对其进行配置

不同主题文章可以显示的东西是不一样的,一般是由文章的头部标签来控制,例如我上面使用的主题,在头部加上mp3标签后,该文章在浏览时就有背景音乐。

1
mp3: http://domain.com/awesome.mp3

我们可以通过修改 scaffolds/post.md 文件来修改文章模板,这样每次我们通过hexo new 命令创建文章的时候都可以自动帮我们填充头文件。每种主题支持的标签是不一样的,注意翻阅主题文档。

创建分类页

1 新建一个页面,命名为 categories 。命令如下:

1
hexo new page categories

2 编辑刚新建的页面,将页面的类型设置为 categories

1
2
3
4
5
---
title: categories
date: 2014-12-22 12:39:04
type: "categories"
---

主题将自动为这个页面显示所有分类。

创建标签页

1 新建一个页面,命名为 tags 。命令如下:

1
hexo new page tags

2 编辑刚新建的页面,将页面的类型设置为 tags

1
2
3
4
5
---
title: tags
date: 2014-12-22 12:39:04
type: "tags"
---

主题将自动为这个页面显示所有标签。

以上命令都需要进入hexo本地源码文件夹目录

修改主题配置文件

根据主题官方文档和自己的个性化需要修改主题的 _config.yml 即可。注意是主题的配置文件,非hexo。

预览和推送

通过

1
2
hexo g
hexo s

来进行预览你的个性化成果!

推送之前,我们需要安装一个hexo git插件来帮助我们推送到gitee/github上去。

1
npm install hexo-deployer-git --save

然后,使用hexo d将我们本地生成的静态博客推送到gitee/github仓库。

1
hexo d

注意,第一次推送时会要求输入gitee/github的账户和密码

开启gitee/github pages

Gitee来到仓库页面,选择服务,点击Gitee Pages。

Github是在设置中。

直接点击启动即可。注意,Gitee免费版请在每次推送后手动点击更新。

hexo命令

好了,通过上面的操作,你应该已经熟悉了一些hexo的命令,那么下面让我们一起来看看还有哪些命令吧。

常用命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

命令缩写

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

其他

SSH key

直接使用github/gitee的账户和密码来提交代码比较不安全,使用仓库ssh key来解决本地和服务器的连接问题,避免接触账户和密码。

自定义域名

你可以通过在阿里云、腾讯云等云服务厂商购买你自己的域名,将域名cname解析到你的github仓库域名地址,并在仓库设置中启用输入你购买的域名,这样你就可以通过自己的域名来访问博客了。

文章作者: Oxywen
文章链接: https://oxywen.cn/post/hexo/1/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 不闻星河须臾