一文详解Hexo+Github小白建站

作者:玩世不恭的Coder

时间:2020-03-08

说明:本文为原创文章,未经允许不可转载,转载前请联系作者

一文详解Hexo+Github小白建站

前言

GitHub是一个面向开源及私有软件项目的托管平台,也是版本控制库因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。此后,2018年6月4日,微软宣布,通过75亿美元的股票交易收购代码托管平台GitHub。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

不会使用Markdown的技术员不是一个好的技术员,其功能及其强大,大大加快了写作及排版的速度,同时完美的解决了江湖上令人头阔疼的传言: 写文一小时,排版两小时。 (小声哔哔:该订阅号中所有的文章都是基于Markdown来进行编写和排版的哦!)有时间的话,整理一篇关于我多年以来使用Markdown的经验,以及该文的排版样式等等。

Github+Hexo的官网:

Github: github.com/

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

作为一位Coder,必定需要搭建一个属于自己的博客站点,来记录自己学习的过程以及所走过的坑。网络平台上也有各种各样的建站方法,例如 WordPressemlogTypecho 等等。但是这些对于一个有着极其建站欲望的小白来说无疑是难如上青天,对于懒癌患者来说也是一大痛病,通过海量信息的层层筛选,涛涛最终发现Hexo+Github能够很好的满足大多数小白的要求,既简单又美观,极其适合小白选手,使用它来搭建属于自己的个人站点再好不过了。如果你有也有建站的想法的话,那么以下内容将记录了我之前搭建Hexo的过程,或许能够帮助到你,久而久之,你还会发现其中还有很多有意思的美化操作。(日后再聊)

以下的图文并茂的搭建过程是针对纯小白所实现的,例如github仓库的创建、环境变量的配置、git终端等一些基础操作都有较为详细的说明,按照流程一步步来,分分钟建站毫无压力。

一、搭建环境

环境介绍:

  1. windows系统:系统根据自己的实际需要准备即可,mac、linux皆可,为了服务更多的读者,本文主要介绍的是在windows系统下搭建。
  2. git :安装之后方便使用各种命令,在github上直接使用clone命令秒速下载,在发布文章到服务器时也能方便的使用 hexo clean、hexo g、hexo d 等命令。
  3. node.js :一个Javascript运行环境,网站的搭建必须建立在这个框架之上。
  4. Hexo :使用命令可以直接将Hexo生成的静态资源存储到Github上,然后使用自己的Github账户即可访问。

安装:

Git的安装:

你可在git官网中根据自己的需要进行下载: git-scm.com/ 。打开之后你将看到如下内容,无脑 download for Windows

将其下载到指定的磁盘,然后Windows系统下傻瓜式安装即可。安装好后我们打开cmd终端(win+r -> 输入cmd -> 回车),执行 git --version ,若出现 git version 2.19.2.windows.1 之类的版本输出,那么恭喜你已经成功安装,离完成建站近了一步。

node.js的安装:

node.js的安装和Git的安装完全如出一辙,同样的操作下载node.js并安装即可,安装好后我们同样在cmd终端使用 node -version 命令,如出现 v10.13.0 类似输出,则说明已经成功安装。

node.js下载: nodejs.org/en/

Github的注册

Github是一个大佬级别的网站,我们进入Github的注册页面观摩一下: github.com/join?source…

然后提示信息填写你的用户名、邮箱、密码等信息进行注册即可。

二、博客的秒速搭建

创建仓库并部署

注册了github之后,我们需要创建一个仓库来存储我们的网站源码以及文章等数据,创建的仓库名也就是我们最终站点所访问的url地址,该url是采用子域名的方式,其一般形式为: XXX.github.io 。XXX一般代表着你注册时的github用户名,所以在你注册之后该仓库名一般是固定的,仓库的创建及部署流程参考如下:

  • 进入个人Github主页之后点击 New repository 来创建新的仓库(就是放东西的),如下:

  • 之后按照如下步骤进行

  • 完成以上操作之后,你就已经成功创建好了自己的仓库。这时我们还需要利用git命令来生成我们的秘钥。鼠标右键桌面选择 git bash here (安装好Git之后即可看见),然后在git终端执行以下命令:

1ssh-keygen -t rsa -C XXX@XXX.com
复制代码

其中 XXX@XXX.com 指的是你注册github时候使用的邮箱,在命令执行的时候回有一些yes、no的选择,直接默认回车即可,最终你将会看到类似如下内容:

1Your identification has been saved in /c/Users/you/.ssh/id_rsa.
2Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
3The key fingerprint is:
4xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx your_email@example.com
复制代码

之后你将在 c/Users/you/.ssh/id_rsa.pub 路径文件看到生成的秘钥对,这个文件我们暂且打开,之后复制粘贴会用到。

补充:打开git bash here之后我们首先需要配置一下个人信息,在git终端分别配置自己的用户名和邮箱。命令如下:

1git config --global user.name XXX   # XXX表示你github注册时的用户名
2git config --global user.email XXX  # XXX表示你github注册时的邮箱
复制代码
  • 之后我们需要将ssh key添加到我们的github账户。在个人github主页找到settings,然后点击SSH and GPG keys,之后再出现的页面的中点击 New SSH key ,随后根据如下图操作进行添加ssh key:

  • 打开 git bash here ,执行 ssh -T git@github.com ,之后会出现一系列的yes or no的问题,我们只需要回答yes即可,最终会输出如下类似内容:

1Hi username! You've successfully authenticated
2
复制代码

OK,完成以上流程后,你的本机就可以连接上Github了。

Hexo博客框架的搭建

在完成以上操作后,我们就可以来完美地使用Hexo了,你可通过如下操作来进行。

  • 在以上操作的基础上,我们首先安装一下Hexo。根据自己的需要在磁盘中创建一个名为 hexo 文件夹,为了更好的管理文件,涛涛是在E盘的根目录中创建该文件夹的。之后进入该文件并在当前路径下打开 git bash here ,依次运行如下命令来进行搭建hexo环境:
1npm install hexo-cli -g
2npm install hexo --save
复制代码

执行完成之后,你会发现在该目录之下会有个 node_modules 文件夹生成,如此一来,你就已经搭建好了Hexo环境,离终点又近了一点 (* ̄rǒ ̄)

  • 以上的node_modules文件生成之后,我们需要配置一下Hexo的环境变量,以便在cmd中可以直接执行后续博客操作的命令,而不需要在指定的Hexo目录中执行。进入到node_module文件夹下的bin目录,然后复制该bin目录的路径,如下:

后面的添加环境变量的操作比较简单,所以就描述一些流程,就不贴图了。如果有遇到问题的可联系涛涛,或者在下方留言即可。后续操作描述如下(小白也懂的操作):

  1. ctrl+D切换到桌面。
  2. 右键此电脑,点击属性。
  3. 点击左侧的高级系统设置。
  4. 点击环境变量。
  5. 在用户变量或者系统变量中找到Path并双击它(推荐用户变量)
  6. 双击之后点击新建,然后将以上的复制的bin目录粘贴至此。
  7. 然后一步一步的确定、确定、确定。OK,完成了,是不是很简单 (* ̄rǒ ̄)。

在以上操作完成之后,win+r,打开cmd终端,然后执行 Hexo --version ,若出现如下类似信息,则说明你的Hexo已经成功配置了环境变量。

  • 随后,我们需要创建我们的博客站点的主目录,你可使用我推荐的方式进行创建,当然你也可以根据自己的喜好方式进行创建。首先在E盘的根目录下创建ZerosBlog文件夹(自定义),然后进入该文件夹并创建XXX.github.io文件夹(该文件夹名必须与你之前创建的github仓库名必须一致,必须固定),双击进入到该目录右键点击 git bash here 来打开git终端,之后在该终端下根据如下命令一步步进行操作:

初始化hexo:

1hexo init
复制代码

自动安装网站所需组件:

1npm install
复制代码

稍等片刻即可完成所有的安装步骤。OK,至此,你已经基本完成了网站的建设,可以说是万事具备,只欠东风了。一个基本的Hexo博客框架已经完成了,现在我们只需要最后一步了:导入自己的喜欢的博客主题即可正常使用了,Hexo中有很多很多很多的主题可供用户选择,主题的引入操作如下。

三、主题引入

Hexo中有很多很多很多的主题可供用户选择(N个。。。 Σ( ° △ °|||)︴ 我不知道有多少个,因为他会被许多的前端大神不断频繁更新开源着,如果好奇的话自行了解即可),其主题官网为: hexo.io/themes/ ,你可以在此观摩并使用任意一个来作为你博客的主题,但据统计,绝大多数使用 hexo+github 来搭建博客的都是使用 NexT ,它的简单美受到了许多用户的青睐,所以以下将以NexT为例来作为我们主题的引入,当然,你也可以去阅读 NexT的主题文档 来进行NexT主题的引入。

在Hexo主题页面ctrl+F并输入next查找到NexT主题,然后点击进入到NexT主题的github页面,该页面存储了NexT主题的源码,我们需要将其下载下来为己所用。在前面我们已经已经下载好了Git,而且也提到了git的最为方便之处就是可以随意clone github的任意资源,在这个操作就可以完美的显露出来了 ┗|`O′|┛ 嗷

┗|`O′|┛ 嗷

┗|`O′|┛ 嗷~~。

在进入到NexT主题的Github仓库页面之后,根据如下图所示复制出该主题的仓库链接:

复制好该链接后我们进入 E:\ZerosBlog\XXX.github.io\themes 文件夹下,右键点击 git bash here 进入git终端,并执行如下命令,其中链接为你上一步所复制的内容

1git clone https://github.com/theme-next/hexo-theme-next.git
复制代码

这个过程可能需要一丢丢的时间,如果你累了或者渴了的话可以喝口茶,稍等片刻之后就会在该目录之下成功下载NexT主题了。

待到成功下载NexT主题后,我们需要少量的配置来达到使用该主题的目的,该配置文件是属于站点的,其路径为 E:\ZerosBlog\XXX.github.io\_config.yml ,我们用文本编辑器(notepad、notepad++、sublime text、Vim……皆可)打开它,然后ctrl+f输入theme查找到theme属性,然后将值改为next,如下所示:

在NexT中已经为我们准备了四种博客样式,其配置文件在主题的配置文件中(注意与上文中博客的配置文件 _config.yml 区别开来),即 E\ZerosBlog\XXX.github.io\themes\next\_config.yml 文件,我们用文本编辑器(notepad、notepad++、sublime text、Vim……)打开它,然后ctrl+F输入scheme查找到如下内容:

可以看见总共有四种主题 Muse、Mist、Pisces、Gemini ,你可以根据自己的喜好选择其中一种(可以四种都尝试然后决定一种样式),然后将其他三种注释即可,ctrl+s保存然后退出

操作完成之后,我们来到站点的根目录下,即 E:\ZerosBlog\XXX.github.io ,打开git终端(空白处右键git bash heer),完成如下三步走命令

  1. hexo clean:清除缓存
  2. hexo g:生成静态页面
  3. hexo d:将资源提交到服务器中
1hexo clean  
2heo g   
3hexo d  
复制代码

在以上命令执行过程中,可能会遇到一个登陆表单的突然出现,我们只需要根据自己github注册时所填的信息进行登陆即可,命令执行完成之后我们的站点已经完成了部署并请求 https://XXX.github.io/ 即可访问到自己的网站了,如下图所示:

四、总结

以上的图文并茂的搭建过程是针对纯小白所实现的,例如github仓库的创建、环境变量的配置、git终端等一些基础操作都有较为详细的说明,按照流程一步步来,分分钟建站毫无压力。另外如果在如上页面中有不懂的地方可以联系作者或者在下方留言,看到后会第一时间回复大家。

特别注意:

这里需要提一点的是,上面的搭建过程仅仅是博客站点的搭建,博客的内容需要我们在 E:\MyBlog\XXX.github.io\source\_posts 文件夹中创建你想要发布的文章,例: HelloWorld.md ,然后在该文件下使用Markdown语法进行编写,编写完成之后同样使用 hexo clean | hexo g | hexo d 命令将撰写好的文章发布到Github服务器中,最后浏览器访问 https://XXX.github.io/ 即可看见文章。Markdown撰写语法不再本文的内容介绍中,有时间的话,整理一篇关于我多年以来使用Markdown的经验,以及该文的排版样式等等,或者自行前去学习: www.zybuluo.com/mdeditor

至此,已经完成了博客的搭建,但是我们左看看、右看看,不管怎么看都似乎显得有点单调,在之后将会介绍博客的美化,可以引入一些插件,比如像Gitalk在线聊天、APlayer、字数统计、背景等一些插件。

2018-09-10,By 涛涛,于上饶

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章