岁虚山

行由不得,反求诸己

0%

Hexo搭建Github博客

前言

  • Home

本文介绍利用Github及Hexo搭建个人免费博客。

环境配置

Github

GitHub是通过Git进行版本控制的软件源代码托管服务,由GitHub公司(曾称Logical Awesome)的开发者Chris Wanstrath、PJ Hyett和Tom Preston-Werner使用Ruby on Rails编写而成。

GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开或私有的代码仓库,但付费用户支持更多功能。根据在2009年的Git用户调查,GitHub是最流行的Git访问站点。

—引自维基百科

2018年6月4日晚上,美国科技公司微软宣布以75亿美元的股票收购GitHub,并宣布支持无限制数量的私人代码仓库。利用Github Pages,我们可以很轻松地搭建属于自己的个人博客。

注册

前往Github官网:https://github.com/注册属于自己的Github账户(本文以example作为示例用户名,读者在自己实践的时候将本文中所有出现example的地方替换成自己相应的名称即可)。

创建仓库

注册成功后登录Github,点击右上角的New repository来创建我们博客使用的代码仓库。

创建仓库

创建仓库

注意:在填写仓库名称的时候,格式是:用户名+.github.io,如上图所示(例:假设用户名为example,那么,仓库的名称就是:example.github.io,由于本人的用户名为xudapengarh,因此,上图中的仓库名为xudapengarh.github.io,读者可根据自己的用户名进行更改)。

因为是个人博客,无需其他参与者共同维护,所以下面最好选择Private(Github被微软收购后,免费用户已经取消了以前只能创建5个私有仓库的限制,所以现在无需考虑个数限制问题)。

创建好代码仓库之后,回到个人主页,找到刚刚创建的仓库,点击进入:

创建仓库

选择Settings选项,在下面找到Pages选项:

创建仓库

当你的仓库名为:用户名.github.io 时,Github Pages是默认开启的,我们可以点击上面的链接(或https://example.github.io),进入到我们的主页中。

这时,我们的仓库就已经创建完成了。

Hexo

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

—引自Hexo官网

读者可转至Hexo官网:https://hexo.io/zh-cn/了解更多关于Hexo的信息及用法。

安装

安装前提

安装Hexo需要先确保电脑上已安装有以下环境:

  • Git
  • Node.js
安装Git

前往Git官网:https://git-scm.com/downloads选择相应的版本进行安装,选择默认安装即可。

安装完成后,在开始菜单中可以看到Git的工具目录:

Node.js

或者在任意文件夹下空白处点击右键,会在选项中出现Git选项:

Node.js

点击Git Bash后会出现类似于控制台一样的窗口:

Node.js

说明Git安装成功。

安装Node.js

前往Node.js官网:https://nodejs.org/en/download/选择相应的电脑版本进行下载安装(若使用安装工具.msi安装,则需要在安装时选择将软件添加至系统环境变量中。若选择.zip进行安装,则需要手动将bin目录添加至系统Path环境变量中)。

安装Hexo

Node.js安装成功后,默认的软件源是国外的,因此在安装软件的时候速度很慢,甚至出现卡死的情况。因此,建议将Node.js的软件源切换为国内的阿里源比较好。使用命令行执行以下命令:

切换阿里源:

npm config set registry https://registry.npm.taobao.org

验证:

npm config get registry

返回https://registry.npm.taobao.org ,说明镜像配置成功。

安装cnpm:

npm install -g cnpm —registry=https://registry.npm.taobao.org

安装Hexo:

首先,我们需要先创建安装Hexo的目录。当然,也可以在创建博客的目录中安装Hexo,不过,为了Hexo能在以后更加方便地使用,建议创建单独的Hexo安装目录(由于我已经在C:\Program Files\Hexo安装完成,因此以下图片都是在d:\test文件夹下作演示)。

首先,在C:\Program Files文件夹下创建Hexo文件夹,进入到Hexo文件夹下:右键空白处,在右键菜单中选择Git Bash Here,打开Git Bash命令行,输入:

cnpm install hexo

Hexo

安装完成后,将C:\Program Files\Hexo\node_modules.bin添加至系统Path环境变量中。

输入:

hexo -v

Hexo

查看Hexo版本。

至此,前期的准备工作已全部完成。

创建博客

搭建博客

选择我们想要保存博客站点的文件夹,如我想在D盘下的Blog下保存我的站点信息(读者可自行选择),则使用文件管理器打开D盘,在空白处右键,在右键菜单中选择Git Bash Here,打开Git Bash命令行,输入:

hexo init Blog

Hexo

等待初始化完成(需要一点时间,请耐心等待)。

初始化完成后,D盘中已经出现了Blog文件夹,进入到Blog文件夹,可以看到如下目录及文件:

Hexo

文件夹下目录及文件的作用稍后会提到,现在,我们先把我们的博客跑起来看下效果。

在Blog文件夹中空白处右键,在右键菜单中选择Git Bash Here,打开Git Bash命令行,输入:

hexo s

Hexo

打开浏览器,在网址栏中输入:

http://localhost:4000

Hexo

若能正常打开,说明我们的博客已经成功创建。

现在,我们要做的事情就是将我们的博客部署到Github上。

打开D:\Blog下的_config.yml文件:

Hexo

title字段的值是我们的博客标题,也可理解成我们的博客名称,可更改为自定义的值,如:

title: 桃花源

注意:title后的冒号必须使用英文输入法进行输入,且冒号与后面的名字之间又一个英文符的空格(以下字段值的更改同理)。

author字段的值是博客的作者名,可随意更改。

language字段的值是博客所使用的语言,若要改成中文,请进入到博客的主题目录下的languages文件夹下,查看语言文件名称后更改。

例:Hexo的默认主题是landscape,所以我们进入到D:\Blog\themes\landscape\languages文件夹:

Hexo

可以看到,简体中文的语言文件名称为zh-CN.yml,我们将D:\Blog下的_config.yml文件中的language字段的值改为:

langeage: zh-CN

更改后如下:

Hexo

接下来,我们需要配置我们的Git信息。

打开D:\Blog下的_config.yml文件,在文件的最下面,我们可以看到:

Hexo更改deploy下字段值如下:

deploy:

type: git

repo: https://github.com/example/example.github.io.git

branch: master

其中repo字段中的两个example值应替换为自己的Github同户名。

保存更改后回到D:\Blog,空白处右键打开Git Bash,输入以下命令:

安装Git插件:

cnpm install https://github.com/CodeFalling/hexo-asset-image — save

清理工程:

hexo c

编译工程:

hexo g

上传至Github:

hexo d

等待上传完成后(可能会弹出Github的登录窗口,在登录窗口输入用户名密码登录即可),在浏览器中打开:https://example.github.io.git,即可在浏览器中看到创建的博客了。

Hexo

新建文章

在D:\Blog下空白处右键打开Git Bash,输入以下命令:

hexo new example

Hexo

其中,example是文章名称,最好使用英文命名。可以看到博文文件已经成功创建在D:\Blog\source_posts下。

打开D:\Blog\source\_posts文件夹,可以看到我们的文件:

Hexo

其中,hello-world.md文件是Hexo初始化时自动创建的一篇文章,而example.md便是刚刚创建的example文章文件了。

编辑博文

Hexo是将使用Markdown语法的md文件编译成静态html,以达到可以在浏览器中访问的效果。因此,我们在编辑文章的时候,只要编辑相应的md文件,再编译即可。

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。读者可自行了解学习其语法,因为在日后的文章编辑中,都是直接编辑md文件,所以读者必须有一定的Markdown使用知识。

市面上有很多的Markdown编辑器,用户可自行挑选,本文中使用的Typora,用户可转至其官网安装下载:https://www.typora.io/

安装完成后,打开example.md文件:

Hexo

其中title字段的值是文章标题,可自行更改,注意title的冒号后面有一个英文符的空格,不可缺少。

在编辑器中输入我们的文章内容:

Hexo

注:文章中使用了Hexo的文章截断功能:

<!—more—>

其作用是当我们访问博客首页时,该篇文章只显示<!—more—>处以上的内容,只有当点击文章或者点击阅读全文后,才显示全部内容。

保存编辑的文件,在D:\Blog下空白处右键打开Git Bash,输入以下命令:

清理工程:

hexo c

编译工程:

hexo g

打开本地服务:

hexo s

打开浏览器,在网址栏中输入:

http://localhost:4000

即可在首页看到新建的文章:

Hexo

可以看到,新建的文章并未全部显示在首页上,这便是文章截断功能。

点击文章标题或Read More,即可看到文章全部内容:

Hexo

在D:\Blog文件夹下,空白处右键打开Git Bash,输入以下命令,上传至Github:

hexo d

等待上传完成后(可能会弹出Github的登录窗口,在登录窗口输入用户名密码登录即可),在浏览器中打开:https://example.github.io.git(example替换为自己的用户名),即可在浏览器中看到创建的博客了。

进阶使用

更换主题

Hexo提供了主题管理功能,通过更换主题,可以实现不同的主页及文章排版样式。Hexo的默认主题是landscape,下文将介绍更换Next主题的方法,读者也可以自行选择主题下载使用,使用方法大致相同。

Next主题

读者可转至Next主题官网:http://theme-next.iissnan.com/进行下载使用及学习更多用法。

下载主题

主题的下载可以通过Git命令下载,也可以通过浏览器下载,为了更直观地展示,本文将通过第二种方法进行下载。

转至https://github.com/iissnan/hexo-theme-next

Hexo

点击右边的Clone or download按钮,选择Download ZIP

Hexo

下载完成后将压缩包中的hexo-theme-next-master文件夹整个解压到D:\Blog\themes目录下:

Hexo

重命名hexo-theme-next-master文件夹为next:

Hexo

打开站点目录(D:\Blog)下的_config.yml文件,找到theme字段:

Hexo

将theme字段的值改为next(注意冒号后的英文空格)

theme: next

Hexo

找到language字段,更改为D:\Blog\themes\next\languages下的中文文件名:

Hexo

Hexo

保存编辑的文件,在D:\Blog下空白处右键打开Git Bash,输入以下命令:

清理工程:

hexo c

编译工程:

hexo g

打开本地服务:

hexo s

打开浏览器,在网址栏中输入:

http://localhost:4000

Hexo

可以看到,博客主页已经与之前不同。

创建带有图片的文章

打开站点目录(D:\Blog)下的_config.yml文件,找到post_asset_folder字段:

Hexo

将字段值更改为True(注意冒号后的英文空格)

post_asset_folder: true

Hexo

保存更改。

在D:\Blog下空白处右键打开Git Bash,输入以下命令:

cnpm install hexo-asset-image --save

新建文章:

hexo new image

打开D:\Blog\source\_posts:

Hexo

可以看到,在D:\Blog\source\_posts文件夹下,有一个image.md文件以及image文件夹(以后每次创建新的文章的时候,都会与一个同名文件夹)。

将要插入文章的图片文件放入到image文件夹下:

Hexo

打开D:\Blog\source\_posts文件夹下的image.md文件,输入以下内容:

![图片](image/image.jpg)

其中,方括号里的内容是在图片未能正确加载时的提示(可随意更改),括号里是图片的路径(可根据不同文章名与图片名进行更改)。

Hexo

可以看到,Typora已经提供了实时的预览。

保存编辑,在D:\Blog下空白处右键打开Git Bash,输入以下命令:

清理工程:

hexo c

编译工程:

hexo g

打开本地服务:

hexo s

打开浏览器,在网址栏中输入:

http://localhost:4000

Hexo

本地预览效果如上。

将文章更新至Github:

在D:\Blog下空白处右键打开Git Bash,输入以下命令:

hexo d

等待上传完成后(可能会弹出Github的登录窗口,在登录窗口输入用户名密码登录即可),在浏览器中打开:https://example.github.io.git(example替换为自己的用户名),即可在浏览器中看到创建的博客了。

添加分类、归档、标签

添加分类

在D:\Blog下空白处右键打开Git Bash,输入以下命令:

hexo new page categories

Hexo

打开D:\Blog\source\categories文件夹:

Hexo

删除index文件夹(创建标签、归档时也将相应目录下index文件夹删除)。

编辑index.md文件如下(注意冒号后有英文符的空格):

title: 分类

type: “categories”

Hexo

保存编辑。

添加归档

在D:\Blog下空白处右键打开Git Bash,输入以下命令:

hexo new page archives

打开D:\Blog\source\archives文件夹,更改index.md文件如下(注意冒号后有英文符的空格):

title: 归档

type: “archives”

Hexo

添加标签

在D:\Blog下空白处右键打开Git Bash,输入以下命令:

hexo new page tags

打开D:\Blog\source\tags文件夹,更改index.md文件如下(注意冒号后有英文符的空格):

title: 标签

type: “tags”

Hexo

打开主题目录(D:\Blog\themes\next)下的_config.yml文件,找到menu字段下的内容:

Hexo

去掉tags、categories、archives字段前的注释:

Hexo

保存修改,在D:\Blog下空白处右键打开Git Bash,输入以下命令:

清理工程:

hexo c

编译工程:

hexo g

打开本地服务:

hexo s

打开浏览器,在网址栏中输入:

http://localhost:4000

Hexo

打开D:\Blog\scaffolds下的post.md文件:

Hexo

修改为:

title: Hexo搭建Github博客
date: 1554607143000
categories:
archives:
tags:

Hexo

演示

创建一篇新文章以查看效果:

hexo new test

注意冒号后的英文符空格

title: 测试
date: 2019-04-07 22:33:09
categories: 分类测试
archives: 归档测试
tags: 标签测试

Hexo

清理、编译并打开本地服务,查看效果:

主页:

Hexo

标签:

Hexo

分类:

Hexo

归档:

Hexo

去除底部信息

在博客底部,附有Hexo以及Next主题的相关信息:

Hexo

下文提供去除这些信息的方法。

打开D:\Blog\themes\next下的_config.yml文件,找到copyright字段:

Hexo

修改以下的值(注意冒号后的英文符空格)

powered: false

theme:

​ # Theme & scheme info link (Theme - NexT.scheme).

​ enable: false

​ # Version info of NexT after scheme info (vX.X.X).

​ version: true

Hexo

保存修改并清理、编译工程。

打开本地服务,在浏览器中访问http://localhost:4000/

Hexo

可以看到,底部信息已经去除掉了。

其他

更多Hexo以及Next用法请访问官网进行研究。

Hexo:https://hexo.io/zh-cn/

Next:http://theme-next.iissnan.com

-------------本文结束 感谢阅读-------------
打赏一包辣条