使用 Hexo 在 GitHub 上建立博客 · Utopia's Daily Note

时间:2022-10-17 13:56:35

使用 Hexo 在 GitHub 上建立博客

#

写在前面

其实我在一月份的就开始写了三篇博客文章,你没有看错,只是写了三篇,然后,就没有然后了。我还在其中一篇文章中写着,不知道自己能够坚持多久。事实是,为大约坚持了两天。于是,就停止了更新。这真的很让人汗颜。不过,现在想想。之前所用的框架可能确实也不如这个方便。之前用的是 jekyll ,其实就是通过 GitHub 自己生成静态页面。但是总是需要在提交代码后更新 gh-Pages 。感觉有点麻烦。而且有时候还是会有延时才能生成。总是感觉不那么痛快。于是在今天选了 Hexo 来写自己的博客网站。目前看来这个基于 node.js 的静态页面生成器还是不错的。不知道后续的表现会怎么样。反正可以直接配置部署,这点还是很好的。还有就是比较详细的中文文档,其实这点也还是很有诱惑力的。

不过在部署这个 Hexo 的过程中,还是会有一些不是问题的问题。我还是简单记录一下的比较好。防止以后我忘记了。其实写个博客的主要目的之一,就是把自己干过的事情能有个可以方便查阅的地方记录一下。不然和故事里狗熊掰棒子一样了。一边在努力的解决问题,一边就很及时的把解决过的问题忘记了。

在使用 GitHub 开设自己的免费文库的时候,请记住,GitHub 对于 Pages 页面是有相应的要求的,比如每小时提交不能超过 10 次,还有就是相关容量的限制。这些大家可以看他们的文档里,会有相关的介绍。不过,用于一般用途的博客类页面,应该是不会超过这类限制的。除非你真的是很牛了。

下面就开始正题吧,如何使用 Hexo 在 GitHub 上建立自己的博客。里面的内容基本都是收集自网络。因此,我会在文章的末尾把里面引用过的文章超链接都留下。这也是一种学术上的惯例。也就是你引用别人的内容本身是可以的,但是如果你不说出来,那就是抄袭。这个很多开源软件所使用的协议是类似的。你可以使用那些代码。但是代码里的协议和相关信息,你是需要保留的,同时,你要在自己的程序中声明使用了这些程序。

使用 Hexo 在 GitHub 上建立博客

首先你要有一个 GitHub 帐号

这个说起来感觉是笑话,请不要笑。真的会有人忽略这一步。不过具体步骤请参见相关的文档。这里不是我要叙述的重点。

在 GitHub 上建立相应的 Respositiry

在这里大部分文档都不会告诉你,其实在 GitHub 中的 Pages 功能是分为两种的。分别是 User Pages 和 Project Pages, 区别如下:

  User Page Project Page
是否多个 一个帐号只有一个 可以有多个, 每个repo都可以有对应的Project page
Repo and Branch Repo 名必须为 <username>.github.io , 页面在 master 上 Repo 名随意, 页面必须在分支gh-pages下
URL http(s)://<username>.github.io http(s)://<username>.github.io/<projectname>

使用 Hexo 在 GitHub 上建立博客 · Utopia's Daily Note

我之前建立的是使用的项目下的 Pages 页面,所以需要使用项目名称才能访问。现在这个使用的是用户级别的页面,只有这一个。不过确实路径短了很多。我是个特别懒的人,所以希望这些东西是越简单越好。

使用 Hexo 建立博客

后续的操作是按照我所是使用的 OpnSuse 所写的,在其他操作系统下是类似的。

安装 Hexo 的相关依赖准备

其实在 Linux 这类系统使用这种编译的东西是很方便的。命令行可以很快的解决很多问题。比如官方文档提出需要 Git 和 Node.js .其实这两样在连着网的 Linux 下安装简直是很爽的。我看了一下,需要 npm,于是只要安装 npm 就好了, node.js 会自动以 npm 依赖的方式自动安装上的。

sudo zypper install npm

至于 Git 本来是基本每个常规 Linux 都自带的。即使没有初始化安装也可以通过类似的命令行进行安装。

安装 Hexo

sudo npm install -g hexo-cli

等着终端里的字符不滚动了,就会提示你已经安装好了。

建站

这个名称是来自与官方文档的,总感觉怪怪的。

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>

配置

这个时候,进入刚才生成的那个文件夹。可以在 _config.yml 中修改大部份的配置。

网站

大专栏  使用 Hexo 在 GitHub 上建立博客 · Utopia's Daily Note
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言

其中,description 主要用于 SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。

网址

参数 描述 默认值
url 网址  
root 网站根目录 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值  

网站存放在子目录
如果您的网站存放在子目录中,例如 http://yoursite.com/blog ,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

我只是改了上面的两部分的内容,还有有别的内容,可以参考一下官方文档。

生成静态页

其实,在生成这个项目的时候,是自带了一个示例页面的。位置在 resourse/_post 下。格式是 markdown 的。基本上都是在写这个格式。不用担心排版的事情,还是很省心的。

hexo g

此时会生成静态页面,页面存放在项目下面的 public 文件夹下。

在这个时候其实你有两种选择发布这些页面,一种就是通过 Git 客户端,直接把这些页面放置在 master 分支下。还有一种选择,就是使用这个框架自带的发布工具。

使用 Hexo 自带工具发布

首先要执行的就是安装一个依赖工具。记住,不要偷懒,不要省略后面的 –sava 参数。我省略了,然后就不能正常工作。

sudo npm install hexo-deployer-git --save

然后回到 _config.yml 中修改参数。

参数 描述
repo 库(Repository)地址
branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。
message 自定义提交信息

在这个步骤上我也出现过错误。就是在啊设置仓库地址的时候。最好是从 github 上直接粘贴那个地址。而不是使用有些文章中所说的地址。

配置妥当以后,执行如下命令:

hexo d

这个命令会直接把本地的代码推送至你的 GitHub 仓库。

刷新浏览器就应该能够看到已经存在的示例页面了。

写篇文章

其实这个框架还有一个好处是可以直接通过命令生成一个空文章。之前我用的框架,我是没有发现有这个功能。虽然不复杂。但是很好用啊。

hexo new [layout] <title>

我还没有尝试这里使用中文的名字。我一般是先用英文,然后进入以后,把里面的 title 字段再改为中文的。

关于布局还是有3种的,这里用了默认的布局。默认布局也是可以随时通过调整配置文件来调整的,很方便。

至此,基本上就可以使用这个框架来写文章了。不过突然我想着要加个图片。这可以有两种方式。一种是通过七牛的云服务来实现的。这个载入速度会很快。而且还并不占用你的 GitHub 空间。很好。还有就是简单一些的。当 Hexo 项目中只用到少量图片时,可以将图片统一放在 source/images 文件夹中,通过 markdown 语法访问它们。

放置路径:

source/images/image.jpg

文章中的引用方法:

![](/images/image.jpg)

如果还有别的补充,我可能会写篇新的,或者干错在这后面接着写。

参考文档

  1. 利用 GitHub 写博客的几种方式

  2. 我的博客是如何搭建的(github pages + HEXO + 域名绑定)

  3. hexo 的官方文档

  4. Hexo博客搭建之在文章中插入图片

  5. 部署 Hexo 静态博客至七牛