从零打造免费个人网站：一，初识HEXO

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

想不想拥有自己的个人网站

你想拥有一个只属于你自己的网站么？

不想？

是因为怕要花钱，又要学习很多建站的知识，而且管理起来很麻烦么？

那么，现在我现在告诉你，有这样一个机会：只要学习几个简单的命令，点几下鼠标敲几下键盘，就可以免费建立并管理一个完全属于你自己的网站，你来不来呢？

如果我再告诉你：如果一切顺利的话，整个过程只需花费五分钟，你来不来呢？

好吧，如果你还在继续往下看，那我想你八成是动心了。那我们就废话不多说，马上行动起来吧。

我们的整体思路是这样的：利用HEXO这个工具，在github这个网站上，搭建我们自己的个人网站。

注意刚才这句话里，我们一共提到两个东西：HEXO和github。在进行下一步操作之前，我觉得最好先详细介绍一下它们俩，毕竟它们是我们接下来所有操作的主角。

它们一个是工具，一个是网站，这点刚才已经说过了。但它们具体是怎么的工具，怎样的网站呢？别着急，我马上为你一一道来。

HEXO和github

1.什么是HEXO？

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

2.安装HEXO

安装Hexo只需几分钟时间，相当简单。但有个安装前提，在安装前，您必须检查电脑中是否已安装下列应用程序：

  • Node.js
  • Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用npm即可完成Hexo的安装。具体的安装过程及必备程序的安装，我们稍后会详细介绍，暂且按下不表。

3.什么是github

github到底是一个怎样的网站呢？让我们直接引用来自维基百科的解释：

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

GitHub 同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代码仓库。根据在2009年的Git用户调查，GitHub是最流行的Git访问站点。除了允许个人和组织创建和访问保管中的代码以外，它也提供了一些方便社会化共同软件开发的功能，即一般人口中的社区功能，包括允许用户追踪其他用户、组织、软件库的动态，对软件代码的改动和bug提出评论等。GitHub也提供了图表功能，用于概观显示开发者们怎样在代码库上工作以及软件的开发活跃程度。

截止到2015年，GitHub已经有超过两千八百万注册用户和7900万代码库。事实上已经成为了世界上最大的代码存放网站和开源社区。

说了这么多，我们需要知道的无非以下两点：

  1. github是程序员们用来储存代码的，它通过git进行版本控制；
  2. 免费用户也可以在github上建立代码仓库。

看吧，可以免费建立代码仓库——对于我们来说是储存网站文件，还可以进行版本控制——对于我们来说是网站的更新，我们需要的功能是不是都有了呢。

4.软件安装

通过前面的介绍，背景知识就介绍的差不多了。我们这就进入下一步准备工作：软件安装。

由于我自己用的电脑是windows系统，而且读者中大部分人用的也是windows系统，故以下操作就以windows系统为例，其他操作系统的，请自己灵活处理了。

我们需要安装哪些软件，它们各有什么作用，我用下面的表格作个说明：

软件 作用
Node.js HEXO运行必备
git HEXO必备，上传网页到github，版本控制（当然了，对于我们来说是网站的更新）
HEXO 网页文件的生成
atom 文件编辑器，markdown写作利器

除了HEXO，另外三个软件我们直接下载安装包安装就行了。虽然这里面包含了无奈与妥协，但是这个我们就不说了。为了方便大家，我在这里也贴出我分享的百度网盘下载地址：https://pan.baidu.com/s/1TrQDVBCT-Iij7-6UBrf01A。

相信我人品的，不怕死的，就把地址复制到浏览器里下载吧。不想在这里下载的朋友，下载地址大家自己搜索下吧，尽量用谷歌搜索，尽量选择官方下载。

注意，我这里分享的软件只适用于64位windows系统。还在用32位系统的各位，你们可能只能靠自己了，祝好运！

至于HEXO，等后面直接用命令安装就好了，现在还不到时候。安装好了这两个软件，就让我们进入下一步吧。

#我的网站我来了！

1.创建代码仓库

在github创建代码库之前，我们首先要先登录账号。如果你还没有github账号，打开github.com，注册一个就好了，没什么好说的，记住用户名不要包含中文，取个由英文字母和数字组成的就行。

我们直接跳到下一步，如何创建代码仓库。

也许到这里，有的朋友会心生疑问：

喂，老兄！你是不是搞错了？我们是要储存网页，又不上传代码，怎么是建立什么代码仓库呢？

这个问题我觉得提得非常好。我现在马上解答：

  1. 没有搞错。
  2. 是的，我们是要储存网页。

我们就是要建立一个代码仓库，来储存我们上传的网页。需要特别注意的是，我们要建立一个特殊的代码仓库，它必须以你自己的用户名加一个固定后缀，公式是：yourname+.github.io。以我自己为例，我在github的用户名是：wuhua0871，所以我需要创建的代码仓库名字就是：wuhua0871.github.io。

一定要记住，这里能够变动的，只有用户名，其他一个字母都不能变。

2.安装HEXO，建站

如果你完成了上一步，那现在我们就万事具备，只欠东风了。

现在，选择一个文件夹，用来储存你网站的本地文件。比如我选择的是E:\HEXO，那么我就需要在E:\HEXO这个文件夹上点击右键，选择Git Bash Here，然后会弹出如图所示窗口。

在刚才弹出的窗口输入下列命令：

1
2
3
4
5
6
7
8
npm install hexo -g
npm install hexo-cli -g

hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo serve

两点说明：

  1. 命令要一条一条输入和执行，一条完了再输另外一条
  2. 注意把其中的yourname换成你在github的用户名。

直到出在下面信息：

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

这时你可以在浏览器里面敲入上面的地址http://localhost:4000/，预览一下网站的样子。

到现在为止，我们离成功建立自己的网站就只差临门一脚了。切换回git bash窗口，先按下组合键Ctrl+C，然后在命令框中输入下列命令：

1
atom .

在弹出的atom右侧，选择_config.yml文件，把图片位置修改如下：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

同样的，记得替换yourname为你的用户名。完了按组合键Ctrl+S保存修改，然后回到git bash，键入下面命令：

1
hexo deploy

在弹出的窗口中，输入你的github账号和密码，回车。

如果一切正常，窗口在跳过一连串代码后，会出现下面的信息：

1
2
Everything up-to-date
INFO  Deploy done: git

这就意味着一切正常，你的网站已经部署成功了，网址就是你的代码仓库名字：https://yourname.github.io 。

你现在可以在浏览器里面查看了。

开心了吧？还不赶紧把你的网址发给小伙伴们装个逼！

结尾

现在，我们的网站已经建立起来了。

你会发现，这只是一个HEXO用来示范的模板，就是我们刚才本地预览的那个死样子，几乎没什么内容，而且样式也千篇一律，丑到了极点。你心里可能会有千万神痹呼啸而过：尼玛，这货跟我想要的网站之间，差了至少有无数个wuhua0871.com的距离吧！

但这不是重点。

重点是：我们现在是拥有自己网站的人了，对不对！

王家卫的电影《东邪西毒》里面，张国荣不是就有这么句台词么：

穿鞋的和不穿鞋的刀客，价钱是相差很远的。

是的，我们现在算是穿鞋的刀客了——虽然穿的鞋并不怎么样。有和没有，差距就是这么大，你不觉得么！

好了，我们的教程到这时就结束了。至于说怎样个性化我们的网站，怎么更新我们网站的内容，这又是另外的问题了，我们后会有期。

无华0871 wechat
感谢阅读！欢迎扫码订阅我的公众号！