从零打造免费个人网站:一,初识HEXO

主页

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

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

不想?

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

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

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

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

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

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

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

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。


[图片上传中...(02.填写_副本.png-710729-1524568801691-0)]

02.填写_副本.png

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

2.安装HEXO,建站

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

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


04右键.png
05 Git.PNG

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

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的用户名。

直到出在下面信息:

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

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

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

atom .
06 atom_副本.png

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

deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

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

hexo deploy

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

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

Everything up-to-date
INFO  Deploy done: git

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

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

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

结尾

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

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

但这不是重点。

重点是:我们现在是拥有自己网站的人了,对不对!

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

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

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

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

哦,对了,有个事儿偷偷告诉你下,点击这里:无华的博客,可以看看我的网站是什么样子。哈哈……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容