• 《Hexo+github搭建个人博客》


    Hexo+github搭建个人博客

    /冯皓林

    完稿:2016.4.22-2016.4.23

    注意:本节教程只针对Windows用户。本教程由无人赞助,赞助写出。

     

    Hexo+github搭建个人博客》1

    思维导图总览:2

    What?2

    简介:2

    Hexo:2

    NodeJs2

    Github4

    Git5

    Github page:5

    Markdown6

    How?7

    环境配置:7

    安装Git8

    安装Node.js9

    安装hexo13

    第一步:打开cmd13

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

    第三步:开始安装hexo,利用 npm 命令即可安装。15

    开始搭建博客15

    部署博客到github17

    1、 注册账号17

    2、 创建一个仓库17

    3、设置github pages18

    主题篇22

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

    方式一:23

    方式二:25

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

    编写与发布博客29

    FAQFrequently Asked Questions31

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

    我不会Markdown怎么办?38

    我不会git怎么办?38

    入门38

    方式一:图形界面39

    方式二:命令模式46

    进阶:49

    推荐!手把手教你用Git49

    想对hexo有个详尽的了解?49

    关于NodeJS的单线程和异步IO49

    参考:49

     

    思维导图总览:

     

    What?

    简介:

    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等内置对象。

     

    一脸懵逼。

    Penguin:讲这么多,那它有啥用处咯。。

    Big god:别急,且让我给你一一道来。

     

       NodeJS可以直接运行JS文件好像好酷的样子。

    规律使我们开阔,但文化使我们更加深刻。

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

    话说当年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)… 这堆鸡肠是神马意思?好吧,我意译一下,水平有限,请不吝赐教。

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

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

     

    Git

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

    Github page:

    GitHub Pages本用于介绍托管在GitHub的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。

    github Pages可以被认为是用户编写的、托管在github上的静态网页。

     

    Markdown

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

    优点:

    1简单,容易上手

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

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

    4丰富的工具链

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

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

    How?

    环境配置:

    Win7 64

    node-v4.4.0-x64.msi

    Git-1.9.5-preview20150319.exe

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

    安装Git

     

     

     

     

     

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

    安装Node.js

     

     

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

     

     

     

     

     

     

     

     

     

     

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

     

     

    安装hexo

    第一步:打开cmd

     

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

     

    第三步:开始安装hexo,利用 npm 命令即可安装。

    npm install -g hexo

     

     

    开始搭建博客

     

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

    mkdir blog && cd blog

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

    然后执行

    hexo init

    安装依赖包

    npm install

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

    hexo g

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

    hexo s

    访问http://localhost:4000即可看到你的博客

    安装并生成blog的目录应该是酱紫的:

     

    如果想让放到网上该怎么办呢?那就接着往下看咯。注意:暂时别关你的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”的绿色按钮。

     

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

    2、创建一个仓库

     

     

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

     

    3、设置github pages

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

     

     

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

     

     

     更新你的站点

     

     

    选择主题并发布

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

     

     

    现在回到你的 ,

     

     

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

     

     

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

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

     

     

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

    npm install hexo-deployer-git --save (这命令是为了解决hexo新版本的部署问题)

     

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

     

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

     

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

     

     

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

    主题篇

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

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

     

     

     

     

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

    方式一:

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

     

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

     git clone git://github.com/ppoffice/hexo-theme-alex.git

    (这个是刚刚那个页面的Install下的命令 

     

     

     

     

     

     

     

    方式二:

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

     

     

    执行如下命令:

     

     

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

     

     

     

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

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

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

     

    然后回到cmd,执行:

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

     

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

     

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

     

    编写与发布博客

     

     

     

     

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

     

     

    接着:

     

     

    如果最后一步不成功怎么办?请参照FAQ下的《关于你博客部署失败的解决办法》

    FAQFrequently Asked Questions

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

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

    Error: spawn ENOENT

        at errnoException (child_process.js:980:11)

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

    解决办法?

    添加环境变量:你的安装目录Gitin;你的安装目录Gitlibexecgit-core,这样就解决了问题了。

     

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

     

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

     

     

     

     

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

     

    (是不是一模一样的目录结构)

     

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

    随便在某个目录下:

     

     

     

     

     

     

     

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

     

    接着,双击进入dantefung.github.io(以我的为例)

     

     

     

     

     

     

     

     

     

     

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

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

    我不会Markdown怎么办?

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

     

    我不会git怎么办?

    入门

    方式一:图形界面

    以下是简明教程,可快速上手:

    首先从官网上下载windows客户端:https://git-scm.com/download/

     

     

    安装完成后,随便在某个磁盘下新建一个文件夹,名字可叫Git,然后右键选择Git Bash 进行全局用户名和邮箱的配置:

     

    执行以下两行命令行:

     

    git config --global user.mail "此处填写你在github上注册的邮箱地址"

     

    git config --global user.name "此处填写你在github上注册的用户名"

     

     

    然后,右键选择Git Gui打开图形界面:

     

     

     

     

     

     

     

     

     

    克隆完后,就会弹出:

     

     

     

     

    怎么进行版本更新?

    双击进入dantefung.github.io(以我的为例),右键选择 Git Gui

     

     

     

     

     

     

     

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

    方式二:命令模式

    上面图形界面的简明使用方法我就介绍完毕,简单说说命令行的方式:

     

     

     

     

     

    当你对dantefung.github.io(以我的为例)里面的文件进行改动后,此时,你的项目版本就是当前最新版本,你想更新到github服务器的话,就继续往下看咯,双击进入dantefung.github.io文件夹,右键选择Git Bash

     

     

     

    按下回车,然后输入用户名和密码即可。

     

     

    更多详情可参照官方给的文档:

     

    如果觉得看英文吃力的话,可以下载官方的中文文档,或者你可以通过《廖雪峰的官方网站》进行git的学习。

    进阶:

    推荐!手把手教你用Git

    http://www.cnblogs.com/tugenhua0707/p/4050072.html

     

    想对hexo有个详尽的了解?

    参见博客:http://blog.fens.me/hexo-blog-github/

    关于NodeJS的单线程和异步IO:

    引用文  摘自 IBM 刘欣 个人公众号:码农翻身

    美丽的七侠镇上有一条美食街,很多著名的饭店都开在这里,有老字号的Apache, PHP, 最近几年火热的Ruby on Rail , 还有那些重量级的餐饮集团Websphere, Weblogic 等。

     

    这些饭店老板根据自己的实力,或多或少的雇佣了一些店小二来招待来客,这些小二干活都非常殷勤,没有一个偷懒耍滑,把顾客招待的舒舒服服, 所以平日里饭馆运转的还不错,相安无事。

     

    但是随着《武林外传》的拍摄和播放, 七侠镇旅游业大爆发,游客像潮水一样蜂拥而至, 现有的店小二招待不过来了, 到了饭点,每家的门前都排起了长队,游客们吃不上饭,个个怨声载道。

     

    看到这种情况,有些老板咬了咬牙,在人工费不断上涨的情况下, 多雇了一些小二来帮忙, 无奈总是赶不上顾客增长的速度。

     

    某一天有个美国老外来到七侠镇上旅游, 也看到了吃不上饭的问题,他仔细分析了一番后发现了一个秘密: 原来这些店都采用了同一套叫做全程贴心服务的模式, 这个模式很有意思:

     

    客人来了以后,马上有个店小二殷勤迎上去,带着找座位,点菜,给后厨下单

    由于后厨做菜需要很长时间,店小二就在客人的旁边等着。

     

    后厨一摇铃铛,大喊一声:上菜,店小二马上端到客人面前, 然后站在一边等着客人吃完

     

    客人说:结账,小二收钱,找钱,送客, 迎接下一位。

     

    通常这个时候门口都排成了好几百人了!

     

    这个VIP服务实在是太贴心了! 导致的结果很明显,饭店有几个店小二,就只能同时接待几个顾客。

    (当然,现实中是没有饭店是这么做的,否则就等着关门吧)

     

    老外一声不吭的回去了。

    过了几个月, 美食一条街上出现了一个巨火无比的饭馆: Node.js

    虽然这个饭店中人满为患, 可门口竟然没有排队的!

    更让人吃惊的是,这个店里声称: 我只需要一个店小二!

     

    Node.js这个美国老外开的饭店确实只用了一个店小二, 只不过这个小二干活的方式与众不同,他把所有的工作分为两类:

    (1) 马上就能干完的,例如迎客,点菜,找座,下单 等等

    (2) 需要等待别人干完才能干的活,例如上菜,结账等

    (1) 这个小二马上干活

    (2) 店小二不会等待,他只是告诉别人说,你弄完了告诉我一声,我会接着干, 然后马上去做第一类工作

     

    客人来了以后,这个店小二殷勤迎上去,带着找座位,点菜,给后厨下单

    由于后厨做菜需要很长时间,店小二闪电般的离开,去干别的活了,可能是迎客,点菜,找座等,总之是那些不用等待,迅速干完的活。

    后厨大喊一声:上菜,这个小二马上端到客人面前,然后离开,干其他活。

    客人说:结账,小二收钱,找钱,然后还是迅速闪人,干其他活。

     

     

    这个唯一的店小二的能力被发挥到了极致,一刻不停,闪电般的在饭店里跑来跑去,因为老板明确的告诉他: 不要等!

     

    Node.js饭店的基础设施很强大,一旦那些耗时的操作完成,店小二立刻就能知道,飞奔过来马上接着干,如果遇到新的耗时的操作,小二毫不留情的离开。

    就这么简单, Node.js饭店火了,它同时接待客人的数量大大增加,而服务质量保持基本不变。

     

    这是我杜撰出来的一个不成熟的故事,帮助我来理解Node.js的特点:只用一个线程来处理所有请求,事件驱动编程

     

    如果我们回过头来再以计算机的视角看一下会更加清楚:

    店小二: 线程

    顾客:http请求

    第一类工作(迎客,找座,下单) : 在服务器端的代码,能够快速执行

    后厨做菜,客人吃饭: 耗时的I/O 操作

    后厨大喊一声:上菜  这是一个长时间I/O 操作完成的后所发出的事件

    客人说:结账: 另外一个长时间I/O 操作完成的后所发出的事件

    第二类工作(上菜,结账) : 同样是能快速执行的代码,但是他们需要等待那些耗时的I/O 操作完成才能开始,确切的来说,收到了系统发出的事件以后才开始执行。在Node.js中实际上是在回调函数中来执行的

     

    下面是Node.js服务模式的伪代码:

    1. 

    迎客();  

    2. 

    3. 

    找座();  

    4. 

    5. 

    下单();  

    6. 

    7. 

    后厨处理("做菜完成事件", function(){  

    8. 

    9. 

        上菜处理();  

    10. 

    11. 

        客人吃饭("吃饭完成事件",function(){  

    12. 

    13. 

            结账处理();  

    14. 

    15. 

            送客();  

    16. 

    17. 

        });  

    18. 

    19. 

    });  

    20. 

    需要引起注意的是:

    1. 后厨处理()这个函数接受两个参数,一个是事件名,另外一个是匿名的回调函数,事件发生,回调函数才会执行。

    客人吃饭()函数也是类似。

    Node.js 使用的JavaScript作为服务器端的编程语言,这种回调的方式对于javascript程序员来说,是非常自然的事情,同时从代码的角度来讲,也显得非常清晰。

    另外Node.js使用ChromeV8引擎来执行javascript,效率非常高

     

    2. 我们能不能把代码写成这样?

    1. 

    迎客();  

    2. 

    3. 

    找座();  

    4. 

    5. 

    下单();  

    6. 

    7. 

    后厨处理("做菜完成事件", function(){  

    8. 

    9. 

        上菜处理();      

    10. 

    11. 

    });  

    12. 

    13. 

    客人吃饭("吃饭完成事件",function(){  

    14. 

    15. 

         结账处理();  

    16. 

    17. 

    });  

    18. 

    19. 

    送客();   

    20. 

     

    肯定不行!, 因为Node.js执行"后厨处理()"函数时,只是安插了一个匿名的回调函数在那里,并不会等待(非阻塞I/O),反而马上 会执行客人吃饭()"函数,所以上述的写法会引起逻辑上的错误:还没上菜就开始吃饭了!

    所以写惯了顺序阻塞I/O“的我们需要改变一下思维方式,进入到事件驱动的世界中来。

     

    3. 如果某个操作例如上菜处理” 是个CPU密集型的计算任务,Node.js那个唯一的线程就会忙于执行这个计算任务而被阻塞住,就无法响应其他的请求了,带来的后果很严重,整个服务器都无法响应了!  这个时候,需要考虑把这样的代码进行异步处理,也变成node.js所擅长的事件驱动的方式。

     

     

    参考:

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

    http://voidy.net/

     





  • 相关阅读:
    SCOM 初探 [SCOM应用系列之一]
    SCOM 安装部署 [SCOM应用系列之二]
    CMMI 配置管理(Configuration Management)系列(1) 简介
    设计模式总结之创建型设计模式
    tabbar图片渲染的问题
    react实现自定义hooks(节流和防抖)
    前端工程化5js源码编译和ast
    react实现自定义hooks(跑马灯)
    react实现自定义hooks(倒计时)
    react实现自定义hooks(移动端拖拽)
  • 原文地址:https://www.cnblogs.com/dantefung/p/d8c48ba8030bcab7cfc364d423186fee.html
Copyright © 2020-2023  润新知