一文详解Hexo+Github小白建站

Posted 玩世不恭的Coder

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一文详解Hexo+Github小白建站相关的知识,希望对你有一定的参考价值。

一文详解Hexo+Github小白建站

前言一、搭建环境环境介绍:安装:Git的安装:node.js的安装:Github的注册二、博客的秒速搭建创建仓库并部署Hexo博客框架的搭建三、主题引入四、总结

前言

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

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

Github+Hexo的官网:
Github:https://github.com/
Hexo:https://hexo.io/zh-cn/docs/

作为一位Coder,必定需要搭建一个属于自己的博客站点,来记录自己学习的过程以及所走过的坑。网络平台上也有各种各样的建站方法,例如WordPress、emlog、Typecho等等。但是这些对于一个有着极其建站欲望的小白来说无疑是难如上青天,对于懒癌患者来说也是一大痛病,通过海量信息的层层筛选,涛涛最终发现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官网中根据自己的需要进行下载:https://git-scm.com/。打开之后你将看到如下内容,无脑download for Windows
一文详解Hexo+Github小白建站

将其下载到指定的磁盘,然后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下载:https://nodejs.org/en/

一文详解Hexo+Github小白建站

Github的注册

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

一文详解Hexo+Github小白建站

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


二、博客的秒速搭建

创建仓库并部署

  • 进入个人Github主页之后点击New repository来创建新的仓库(就是放东西的),如下:
    一文详解Hexo+Github小白建站

  • 之后按照如下步骤进行
    一文详解Hexo+Github小白建站

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

ssh-keygen -t rsa -C XXX@XXX.com

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

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
xx: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终端分别配置自己的用户名和邮箱。命令如下:

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

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

Hi username! You've successfully authenticated

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

一文详解Hexo+Github小白建站

Hexo博客框架的搭建

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

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

npm install hexo-cli -g
npm install hexo --save

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

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

一文详解Hexo+Github小白建站

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

  1. ctrl+D切换到桌面。

  2. 右键此电脑,点击属性。

  3. 点击左侧的高级系统设置。

  4. 点击环境变量。

  5. 在用户变量或者系统变量中找到Path并双击它(推荐用户变量)

  6. 双击之后点击新建,然后将以上的复制的bin目录粘贴至此。

  7. 然后一步一步的确定、确定、确定。OK,完成了,是不是很简单 (* ̄rǒ ̄)。

一文详解Hexo+Github小白建站

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

一文详解Hexo+Github小白建站

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

初始化hexo:

hexo init

自动安装网站所需组件:

npm install

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


三、主题引入

Hexo中有很多很多很多的主题可供用户选择(N个。。。Σ( ° △ °|||)︴ 我不知道有多少个,因为他会被许多的前端大神不断频繁更新开源着,如果好奇的话自行了解即可),其主题官网为:https://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仓库页面之后,根据如下图所示复制出该主题的仓库链接:

一文详解Hexo+Github小白建站

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

git clone https://github.com/theme-next/hexo-theme-next.git

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

一文详解Hexo+Github小白建站

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

一文详解Hexo+Github小白建站

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

一文详解Hexo+Github小白建站

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

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

  1. hexo clean:清除缓存

  2. hexo g:生成静态页面

  3. hexo d:将资源提交到服务器中

hexo clean  
heo g   
hexo d  

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


四、总结

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

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

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

2020-03-07,By Taoye,于上饶


以上是关于一文详解Hexo+Github小白建站的主要内容,如果未能解决你的问题,请参考以下文章

Github Pages + Hexo 建站图文教程

Github Pages + Hexo 建站图文教程

Github Pages + Hexo 建站图文教程

Hexo建站教程

极限建站

全网最全!小白搭建hexo+Github/Gitee/Coding