Hexo+github搭建个人博客

思维导图总览:

enter image description here

简介

Hexo:

Hexo 是一款基于Node.js、快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
官网 https://hexo.io/zh-cn/docs/index.html

NodeJs:

Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

JS是脚本语言,脚本语言需要一个解析器才能运行。对于写在HTML页面里面的JS,浏览器充当了解析器的角色。而对于需要独立运行的JS,NodeJS就是一个解析器。

每种解析器就是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM,浏览器就提供了document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁盘文件或者搭建HTTP服务器,NodeJS就相应提供了fs、http等内置对象.
【规律使我们开阔,但文化使我们更加深刻。】

弄清楚一样东西存在的意义还是蛮重要的,因此,我们要上一堂历史课咯~

话说当年NodeJS的作者啊,在创造NodeJS之初,他想实现一个高性能的Web服务器,这厮首先看重的是事件机制和异步IO模型的优越性,而不是JS。但是呢,他首要做的一件事就是要找一门语言,来实现他伟大的想法,而这门语言不能是自带IO功能的(为毛线不能自带啊?那个立志成为海贼王的男人嘛,发现以前同步IO太TM坑爹咯,要自己实现一个异步IO模型,并且能良好的支持事件机制( ⊙ o ⊙ )啊!)。JS没有自带IO功能,天生就用于处理浏览器的DOM事件,并且有一大群屌丝程序员,因此就成为了天然的选择啦。

如他所愿,NodeJS在服务器端活跃起来,出现了大批基于NodeJS的Web服务。而另一方面,NodeJS让前端的开发人员(说你耶)如获神器,终于可以在自己的有生之年,让自己的能力范围内跳出浏览器窗口。自从这春风拂面,大批的开发工具如雨后春笋般涌现,前端开发者的谜之微笑,灿若桃花(闭上眼睛,用心感受)。SO,对于前端而言,虽然不是人人都要拿NodeJS写一个服务器程序,但其简单程度可至使用命令交互模式调试JS代码片段,复杂可至编写工具提高工作效率。可谓,居家旅行必备的装逼神器。

NodeJS生态圈正欣欣向荣,画面太美,不忍直视。

Github

GitHub is the single largest host for Git repositories, and is the central point of collaboration for millions of developers and projects. A large percentage of all Git repositories are hosted on GitHub, and many open-source projects use it for Git hosting, issue tracking, code review, and other things. So while it’s not a direct part of the Git open source project, there’s a good chance that you’ll want or need to interact with GitHub at some point while using Git professionally.

--摘自官方文档

(⊙o⊙)… 这堆鸡肠是神马意思?好吧,我意译一下,水平有限,请不吝赐教。

Github是Git仓库唯一且最大的主机,它是数以万计的开发者和项目协作的中心点。绝大部分Git仓库托管在GitHub上,许多的开源项目使用Github的Git仓库托管服务,问题跟踪,代码复查和其他的东西。因此,虽然它不是直接参与Git的开源项目,但这是一个你会想要或者需要在某些时候专业地使用Git与github互动的好机会。

(翻译得好烂... ... )

Git

是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。

Github page:

GitHub Pages本用于介绍托管在GitHub的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。
github Pages可以被认为是用户编写的、托管在github上的静态网页。


enter image description here

Markdown

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。[1]这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

优点:

1、简单,容易上手

2、纯文本实现,程序员最爱,容易扩展,方便和其他工具联动

3、平台支持广:以Github为首的各种平台、各种博客都支持,基本上现在面向程序员的输入框都可以用Markdown来写了

4、丰富的工具链

5、编辑器:各种支持所见即所得的编辑器

6、和各种其他格式互相转化的工具。PDF、Mobi、Epub、HTML等等,几乎你能想到的所有格式它都能转换。

HOW?

环境配置

enter image description here

node-v4.4.0-x64.msi


enter image description here

Git-1.9.5-preview20150319.exe


enter image description here
markdownpad2-setup.exe(markdown离线编辑器,可选,替代方案是使用在线的马克飞象工具编辑markdown文件)

安装Git

enter image description here

enter image description here

enter image description here

enter image description here

就此不截图了,一直下一步,然后自定义一个安装路径,安装即可。

安装Node.js

enter image description here

也是一直下一步,选择一个自定义的安装路径。接着要配置环境变量:


enter image description here

enter image description here

enter image description here

enter image description here

D:\software\develop\nodejs\是我的NodeJs的安装目录,你配环境变量的时候要配你自己安装的目录。配环境变量是为了让windows的命令行能调用到NodeJS里面的命令。


enter image description here

安装hexo

第一步:打开cmd。
enter image description here

第二步:进入NodeJS的安装目录


enter image description here

第三步:开始安装hexo,利用 npm 命令即可安装
npm install -g hexo
enter image description here

开始搭建博客

来杯咖啡稍作等待,即可安装成功。接下来,执行

 mkdir blog && cd blog

此处blog便是你的博客目录,当然其他什么名字也是极好的,看心情了,此时最好将此目录备份到云盘或者其他地方,以防文件夹丢失后博客就没有了。
然后执行

 hexo init

安装依赖包

 npm install

至此,博客搭建成功!当然,仅仅是本地的了。此时执行

 hexo g

即可生成静态页面,然后执行

 hexo s

访问http://localhost:4000即可看到你的博客。
如果想让放到网上该怎么办呢?那就接着往下看咯。

注意:暂时别关你的cmd窗口。

部署博客到github

1、注册账号

The first thing you need to do is set up a free user account. Simply visithttps://github.com, choose a user name that isn’t already taken, provide an email address and a password, and click the big green “Sign up for GitHub” button.

你所要做的第一件事就是创建一个免费的用户账号。简单地访问https://github.com,选择一个未被使用过的用户名,提供一个邮箱地址以及密码,并点击写着“sign up for GitHub”的绿色按钮。

enter image description here

经过邮箱认证后,该账号就会被激活的。

2、创建一个仓库

enter image description here
enter image description here

注:Github Pages的Repository名字是特定的,比如我Github账号是dantefung,那么我Github Pages Repository名字就是dantefung.github.io。

3、设置github pages

创建成功后,回到主页面,点击进入你刚刚创建好的仓库


enter image description here

接着点击settings,进入仓库管理


enter image description here

更新你的站点
enter image description here

选择主题并发布


enter image description here

至此,你的github pages就发布成功了。试试在浏览器的地址栏输入”你github的用户名.github.io”吧!

现在回到你的 ,

enter image description here

打开你安装好的NodeJS的根目录,然后点击进入刚刚新建的blog文件夹:


enter image description here

在文件的底部,将配置改成介样:

其中只需修改一下repository,将其内容修改为刚刚新建的项目的仓库地址即可。
enter image description here

接下来,回到你的cmd窗口,只需执行两个命令:

npm install hexo-deployer-git --save (这命令是为了解决hexo新版本的部署问题)  
hexo g 回车 (这是重新生成blog) 
hexo d 回车 (这是将本地blog部署到github的仓库)

现在,试试在浏览器的地址栏输入:“你的用户名.github.io”,此时,你应该会看到这样的界面:


enter image description here

你可能会吐槽这个主题怎么这么难看,好下面我就教你怎么改主题。此时,你的cmd窗口还是先别关。

主题篇

接下来,开始对博客进行一番改造。毕竟博客是自己精神上的一个家园,当然要装饰打造一番了。

首先嘛,自然是进行主题的选择了,主题在这里。选择好一个主题之后,就是进行主题的安装了。在刚刚那个网站上,点击右边的链接可以看到主题的Demo,选则一个喜欢的主题然后点击左边的链接进入github上:


enter image description here

enter image description here

第一步:克隆主题到本地themes目录下

方式一:

然后命令行进入到你的博客目录的themes目录下:


enter image description here

点击鼠标右键,打开github bash执行下面语句:

git clone git://github.com/ppoffice/hexo-theme-alex.git
(这个是刚刚那个页面的Install下的命令 )
enter image description here

enter image description here

enter image description here
方式二:

然后命令行进入到你的博客目录目录下:


enter image description here

执行如下命令:


enter image description here

然后你会在“你的blog目录/themes”下看到:
enter image description here

其中git clone后面的链接为你进入的主题的链接地址,themes/alex为你的保存目录,此处已alex主题为栗子,具体的以你选择的主题为准。

第二步:配置你将要生成的博客主题为刚刚克隆的主题

然后进入到/blog/_config.yml里面,将theme改为你刚刚下载保存的主题的名字


enter image description here

然后回到cmd,执行:

hexo g 回车 (这是重新生成blog)

hexo d 回车 (这是将本地blog部署到github的仓库)

好了,试试在浏览器的地址栏输入:“你的github用户名.github.io”,你将会看到如下主题的blog页面/:


enter image description here

编写与发布博客

enter image description here

enter image description here

enter image description here

怎么发布到github的博客?还是老样子啊:


enter image description here

接着:
enter image description here

FAQ(Frequently Asked Questions)

关于你博客部署失败的解决办法:

在用Hexo搭建静态博客的时候,deploy时出现如下错误:

Error: spawn ENOENT

at errnoException (child_process.js:980:11)

at Process.ChildProcess._handle.onexit (child_process.js:771:34)

解决办法?

添加环境变量:你的安装目录\Git\bin;你的安装目录\Git\libexec\git-core,这样就解决了问题了。

可惜,使用这个办法引入环境变量,按道理说cmd可以引用到git的命令,但是,你的却居然不行。辣怎么解决呢?也不是没有办法。

你会发现每次我们执行完 hexo g 后,public目录会被更新一次:


enter image description here

enter image description here

enter image description here

而你执行完 hexo d命令后是将.deploy_git文件夹中的内容推送到github的服务器上:


enter image description here

因此,我们可以在执行完hexo g后自己手动的提交:

随便在某个目录下:


enter image description here

enter image description here

enter image description here

然后,你删掉例如我的dantefung.github.io里面的内容,然后:


enter image description here

接着,双击进入dantefung.github.io(以我的为例):
enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

然后点OK,等待一会儿,正常情况下都会上传成功~

现在,试试在浏览器地址栏输入:“你的github用户名.github.io”,看看你的博客主页吧~~

我不会Markdown怎么办?

http://ibruce.info/2013/11/26/markdown/ Markdown简明语法

参考:

http://www.jianshu.com/p/a2023a601ceb

http://voidy.net/

本文转自:

https://www.cnblogs.com/dantefung/p/d8c48ba8030bcab7cfc364d423186fee.html

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

推荐阅读更多精彩内容