零成本搭建博客:Hexo+Github Pages建站指南

超高校级的囧小平 超高校级的囧小平 2019-10-26 09:36

前言

你是否有撰写个人博客的习惯呢?或用来记录心路历程,或用来分享生活点滴,或用来积累学习经验。在微博、微信等轻量短消息社交网络占据互联网主流的许多年前,撰写博客是一件非常流行的事情。时至今日,许多博客分享网站已经逐渐没落甚至消失。但仍有不少用户群体仍然有着撰写博客的习惯。如果你也想通过写博客分享自己的精彩人生,互联网上也有像是简书、CSDN、新浪博客等传统博客写作平台。除此之外,拥有一个属于自己的博客网站,对于博主来说似乎是一件更酷的事情。本文,将详细介绍一种低门槛、零成本的个人博客搭建方法。简单来说,就是利用Hexo这个工具,借助免费的Github Pages帮助我们快速建站。这是一种很常见的方法,稍有优点建站经验的IT从业者应该都知道。

准备工作

首先要进行一些准备工作。准备工作主要是Github账号的注册和相关软件的安装。准备工作目的主要有两个:一是拥有可用的Github Pages;二是搭建Hexo正常运行的环境。本教程默认使用Windows环境,如果你用的是Linux的话,估计早就知道该怎么做了。

Github账号注册

作为世界上最大的程序员交友网站,哦,不是,是代码托管网站,Github给广大程序员带来了无尽的财富和巨大的便利。Github尚未被G*F*W这个邪恶的怪物Block,我真的应该先庆幸后骂街。如果你已经有了Github账号,自然可以略过本节内容。如果没有,注册GitHub也不是一件很难的事情。首先进入Github这个网址进行账号注册。虽然是全英文网站,但是这种程度的英文应该难不倒大家吧。第一步,依次输入用户名、邮箱地址、密码,完成机器人验证,点击创建账户。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

第二步,自然是选择免费版本的账户。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

第三步,填写一些个性化的信息,这里直接跳过即可。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

第四步,进入你的注册邮箱进行账号验证。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

第五步,验证完毕后会让你建立一个代码仓库。我们这里将代码仓库的名称命名为:yourname.github.io,比如我这里既是zimingjushi.github.io。其他暂时不用管,创建仓库即可。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

完成以上工作后,我们就获得了一个空的代码仓库,Github Pages的准备工作就算完成了。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

GitHub Desktop安装

Github上的代码是使用Git工具来管理的,为了简单起见,我这里直接使用了Github官方的桌面图形化Git工具GitHub Desktop。有经验的同学可以选择自己喜欢的工具。GitHub Desktop的下载地址在此:GitHub Desktop。虽然只有87M,但是在我的默认网络环境下,下载速度实在让人难以忍受,开了Brook后瞬间就起飞了。安装完成后打开软件,选择登录你的Github账户。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

配置Git这一栏,是设置提交代码时显示的信息。如果你不在意,直接继续就行。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

最后,我们可以在界面上看到我们注册账户时创建的代码仓库zimingjushi.github.io。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

Hexo依赖环境的安装

Hexo的依赖只有Node.js和Git。首先安装Node.js,要求版本时6.9以上,下载地址在此:Node.js。选择长期支持版本还是最新版本看自己的喜好了。我喜欢用最新的,因此选择了Current版本。双击安装下载下来的msi文件。没什么好说的,一路下一步,选项都是默认的。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

然后,还需要安装Git,下载地址在这里:git-scm。如果你会用这个Git,那么上面那个GitHub Desktop其实就不用安装了。双击安装下载下来的exe文件。如果你懂,当然可以进行个性化安装和设置。否则无脑地默认选择并下一步即可。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

Hexo的安装

先简单介绍一下Hexo。Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。前面我们已经完成了Hexo依赖环境的安装,下面安装Hexo就简单很多了。在桌面或者其他任意文件夹下点击鼠标右键,选择”Git Bash Here”,打开集成在Git里面的命令行终端。为了使下面的安装顺利一些,建议更换npm镜像源,终端下输入以下命令:

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

然后运行下面的命令安装hexo-cli。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

$ npm install -g hexo-cli

此时在终端中运行hexo命令,如果有如下输出,表明安装成功。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

网站搭建

完成上面的准备工作后,我们就可以利用安装好的工具进行网站的搭建了。网站的搭建基本可以分为两大步骤:通过Hexo生成静态网页文件和在Github Pages上进行部署。下面分别讲述这两个步骤。

Hexo静态网页文件的生成

现在电脑上选择一个合适的目录进行Hexo工程的初始化工作,这个目录是生成静态网页文件的关键,建议时常备份。我这里将目录选择为D:Hexo,在这个目录下点击鼠标右键,选择”Git Bash Here”,打开命令行终端,输入Hexo的初始化命令。

$ hexo init

hexo将会下载一些工程文件到这个目录中去。整个下载过程可能比较漫长,请耐心等待。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

下载完毕后,在当前目录中将会有以下这些文件。其中,_config.yml这个文件中可以进行一些个性化的配置。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

这里先进行一些简单的修改:设置了网站的标题和作者的名字。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

其他更多配置说明可以参考官方文档:configuration docs。接着,我们运行以下命令生成网站的静态网页文件。

$ hexo generate

命令运行完毕后,可以看到当前文件夹下多出了一个名为public的目录,里面存放的就是网站的静态文件。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

再运行以下命令使这个网站在本地先运行起来,看下具体效果。如果弹出防 火 墙警告请授予访问权限。

$ hexo server

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

此时,通过浏览器打开网址,查看运行效果。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

看到没有,一个看起来还不错的博客网站就在本地成功运行起来了。而且还自带了一篇名为”Hello World”的博客文章。

Github Pages博客部署

目前我们达到的效果只是能够在本地局域网内访问,我们当然更希望我们的博客文章可以在任意外网环境都可以访问。要达到这个目的的办法其实有很多,不过本文是以免费为目的的。所以稍微有些成本的方法就不探讨了,直接使用Github Pages这个免费的空间部署我们的博客。先删除之前在Hexo工程下生成的public目录。打开GitHub Desktop这个软件,将我们之前已经创建好的工程clone下来。注意将目的文件夹选择为Hexo工程下的public目录。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

clone完毕后再次运行命令

$ hexo generate

回到GitHub Desktop可以看到有很多修改过的文件加入了待提交列表。填写一下Git Message,并选择提交到当前分支。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

然后再Push到远程分支。此时可以看到我们的GitHub代码仓库多出了很多文件。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

此时,在浏览器中输入https://yourname.github.io/,就可以看到我们构建的博客网站了,此时这个网站是外网可访问的。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

在Github Pages上进行博客部署,官方推荐使用hexo-deployer-git这个工具。我这里进行了一些简化,总之就是将public下的内容上传到远程GitHub仓库中,疏途同归,大家可以根据自己的喜好选择。

博客的撰写

目前,我们已经有了一个可以外网访问的博客网站,并且有了一篇已经写好的博客。那么,如果我想写新的博客时要怎么做呢。首先,我们在D:Hexosource_posts目录下新建一个.md文件,请务必使用英文、数字、字符作为文件名。例如,我这里创建一个名为First-Blog.md的文件。使用任意文本编辑器打开这个文件,并设置文章的Front-matter。所谓Front-matter,就是文件最上方以—- 分隔的区域,用于指定个别文件的变量。常见的变量配置如下:

title:文章名称

date:文章日期

tags:

-文章标签一

-文章标签二

categories:文章分类

例如First-Blog.md中配置好Front-matter如下图。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

Front-matter以下就是正文部分,使用Markdown进行撰写。具体Markdown的语法和撰写本文就不再做详细展开了,并不是很难的东西,自行学习即可。我将网上常见的Markdown语法实例直接复制到正文部分,就当是博客的内容了。博客写完之后,需要重新运行以下命令生成相应的静态文件。

$ hexo generate

此时回到GitHub Desktop发现我们的本地工程又有了新的变化。跟上面一样,提交修改并Push到远程分支。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

完成后刷新https://yourname.github.io/这个网址,就可以看到我们刚发布的博客文章了。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

本文对.md文件的配置相对简单,想要了解更为详细的配置可以参阅官方文档。

主题的配置

基于目前的操作,其实你已经有了一个可以撰写基于Markdown语法的博客文章,并可以在外网发布和访问的个人博客网站了。但是,你可能会觉得Hexo自带的前端主题不是那么好看。为了让你的网站看起来更酷,我们可以选择自行安装第三方主题。在hexo themes中,你可以浏览并选择自己喜欢的主题。这些主题基本上都会发布在GitHub上,而且也都有比较详细的安装和配置步骤。这里任意选择了一款名为Anatole的主题进行简单的示范。首先,在hexo-theme-Anatole-releases此处下载主题文件,并解压到D:Hexothemes目录下,重命名为anatole。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

然后,安装主题所需要的依赖。在D:Hexo下运行以下命令即可。

npm install --save hexo-render-pug hexo-generator-archive hexo-generator-tag hexo-generator-index hexo-generator-category

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

接着,修改_config.yml主题设置,并增加以下配置

archive_generator:

per_page:0

yearly:false

monthly:false

daily:false

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

最后,重新生成静态文件并提交到远程仓库,上面说过好多次不再赘述了。不过生成前最好删除public下的所有内容,但是不要删除这个文件夹和隐藏文件。完成后刷新https://yourname.github.io/网址,就可以看到新的博客主题了。具体每个主题还会有很丰富的配置,可以参阅每个主题作者撰写的文档。

零成本搭建博客:Hexo+Github Pages建站指南_新浪众测

后记

可能对于没有相关经验的同学,看到这篇文章会觉得无从下手。其实本文只是描述的比较详细而已,实际的核心操作并不多。各种软件的安装没有什么难度,几个简单的命令执行起来也很方便。如果你比较熟悉Git操作和Markdown语法,那么本文基本上没有任何难度可言了。为了兑现标题中零成本的承诺,所以本文对很多东西没有深入展开。比如将博客运行在自己的服务器上,内网穿透,配置个性化域名等等。如果只是撰写一些文字博客,又对个性化域名没什么兴趣,那么Hexo加Github Pages的方法,已经可以满足你的绝大部分需求了。

(声明: 本文著作权归作者本人和新浪众测共同所有,未经许可不得转载。本文仅代表作者观点,不代表新浪众测立场。)
0 0
分享 商务合作 返回
微博 QQ空间 微信