本博客大约有2300字,全篇读完差不多需要15分钟!
前言
总是羡慕别人有一个属于自己的时间胶囊,承载着点滴的成长积累,凝聚成涌浪让自己扬帆千里。也总是莫名觉得搭建一个博客是多么的麻烦,以至于很多文章一直只存储在本地,自娱自乐。
既然我天性乐于分享,在把一些本地的文章整理之后供大家取乐之余,同时也记录下搭建本博客的过程,其最终结果就是现在你所看到的样子!
丑不丑乱不乱都是主题和排版的问题,这些咱另当别论。这篇文章主要是写给那些跟我一样本以为搭建博客是非常复杂的人。
仅仅使用GitHub(博客部署在GitHub上并且没有个人域名)、不考虑各种自定义的主题配置,从0开始搭建一个跟本博客类似的网站差不多也就需要10到20分钟的时间而已,并且搭建过程十分简单!
系统:Mac OS X El Capitan(10.11)
HEXO博客框架
在看完这章节之后,您就在【本地】搭建好了一个博客,那时我们可以通过 http://localhost:4000/
访问到自己的博客。这个博客只能在您自己的电脑上访问,其他人是访问不到的。要想让咱们的博客连接到互联网中去,就需要把整个博客部署到GitHub上(其实就是把所有博客后台代码文件上传到GitHub上并开启GitHub Pages服务)。至于为什么部署到GitHub上就能够供他人访问,下节介绍。
Hexo是一款基于Node.js的静态博客框架。其实说白了,Hexo就是一个把您写的文章以各种形式(摘要列表、题目归档列表、全篇等)展现出来,再加上些作者相关信息的网站。而主题是来决定这个网站显示成什么样子,如结构、字体、颜色等。
安装 Node.js + Hexo
既然Hexo是用Node.js开发出来的东西,那首先肯定需要安装Node.js。
Node.js是一个可以运行JavaScript的环境。试想一下,要是把这个运行环境装在后台服务器上,那岂不是用JavaScript可以写服务器端的程序了?要是把这个运行环境装在Windows上,那岂不是用JavaScript还可以写Windows桌面应用程序了?恩,没错,更神奇的在于Node.js还能开发Mac服务端程序、Mac桌面应用、Android手机应用、路由器应用、机顶盒应用等等!Node.js问世至今也有7年多的时间了,其本身的设计思想还挺独特,很有意思,没了解过的可以关注下!Node.js不在本文重点介绍的范畴之内,停止扯淡!
Hexo就是基于的Node.js运行环境并且用JavaScript语言写的一个后台服务器程序。而我们最终的后台服务器程序就托管在GitHub上。
那就先来安装Node.js吧! 来到官网 https://nodejs.org/en/, 下载安装包,安装到最后会告诉你Node.js的安装路径,没必要记录下来,如果你想要知道,可以通过 which node
命令来查看Node.js的安装路径!
安装完成之后,为了验证Node.js是否安装成功,可以在终端Terminal中输入 node --version
查看版本号,我当前装的Node.js的版本号是 v4.4.4
,至此,Node.js准备就绪。
接下来就可以安装Hexo了,其实在Hexo的GitHub(https://github.com/hexojs/hexo)上已经很详细的写出了安装步骤,下面我再重复一下吧!
回到终端Terminal中,输入 sudo npm install hexo-cli -g
命令,然后输入你的开机密码,回车,等待安装完成。这条命令表示在系统中安装Hexo,同样可以通过 hexo --version
来查看Hexo的版本号,如下图,我当前装的Hexo的版本号是 1.0.1
,至此,Hexo准备就绪。
利用Hexo来生成博客
Hexo装好了,那就用Hexo来生成一个默认的博客网站吧!找一个存放你博客网站地方,比如我的博客放在了我的家目录中,在终端Terminal中,输入下面四条命令:
|
|
这个时候,咱们的博客后台服务器程序就已经准备完毕了!
通过命令 hexo server
来启动服务器,你会看到命令行中显示:
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
意思是,您的网站服务器已经启动,您可以通过网址 http://localhost:4000/
来访问您的博客。如果要停止服务,可以键盘按 Ctrl + C
。
咱们可以在浏览器中输入 http://localhost:4000/
来看下这个博客长什么样。
在生成博客的同时,Hexo默认生成了一个 hello-world.md
文件,这个文件中的内容就是你当前在博客上看到的那篇文章。
hello-world.md
后缀 md
代表这是一篇用 Markdown
语言写出来的文章。Markdown
语言能够使文章排版简单优美。您可以打开 hello-world.md
文件来初略的查看 Markdown
的语法。至于 Markdown
语言的详细介绍不在本文的所述范围之内,还请自行查阅相关资料。
增加新文章
我们先在终端Terminal中按 Ctrl + C
来停止博客访问。
在我们的博客网站中添加文章有两种方式。
第一种方式是通过命令:在终端Terminal中输入 hexo new "NewPost001"
(确保在 Todd_Tutorials
路径下执行该命令, NewPost001
为文章的名字)。再次输入命令 hexo server
启动服务,可以看到刚才新建的文章,虽然里面什么都没有。
我如果要编辑这些文章,去哪里找呢?它们在【博客主目录 - >source -> _posts】中,如下图:
第二种方式就很明显了,直接把你写好的 Markdown
文章放到【博客主目录 - >source -> _posts】文件夹下即可。
主题
Hexo的官网(https://hexo.io/themes/)上给出了52款主题(截止2016.05.17),每个主题都各有特色,您可以挑选一个最喜欢的。本博客选择的是一个叫做 NexT
的主题。
NexT
主题的GitHub地址是 https://github.com/iissnan/hexo-theme-nextNexT
主题的官网地址是 http://theme-next.iissnan.com
NexT
主题的官网非常清晰地描述了怎么把Hexo从默认 landscape
主题换成 NexT
主题。而我选择 NexT
主题有两个原因,一是风格简洁,二是文档详细。因此,跟着 NexT
主题官网上的文档一步一步的做就行了,同样也是非常简单。如果仅仅换一下主题,不做自定义的配置,差不多一分钟就能搞定了。至于自定义的配置,可以等有了文章之后再慢慢调整。
至此,在本地已经搭建好了一个Hexo博客,我们可以通过 http://localhost:4000/
网址来访问该博客,接下来要做的就是能让更多人访问到这个博客。
部署HEXO博客到GitHub上
为什么把Hexo博客部署到GitHub上就可以被他人访问了?
GitHub Pages
Github已经成为当下使用量最大的代码仓库,它不光满足了个人分享开源代码的需求,还赢得了很多大公司项目开发的青睐。为了使个人或企业在其代码仓库中的一些项目更加方便的被他人接受、学习并使用,有一个较为详细的介绍页面是锦上添花的。因此,GitHub迎合了用户的这种诉求并提供了GitHub Pages服务,这是一种提供静态网站托管的服务,从而可以方便的为项目建立介绍站点,也可以用来建立个人博客。如此强大的服务拥护者总多,比如微软(http://microsoft.github.io)、twitter(http://twitter.github.io)、谷歌(http://google.github.io/material-design-icons/)等。
有三点需要注意一下:
1、GitHub Pages服务为每个GitHub主机上的代码仓库只提供一个静态网站托管服务,说白了就是一个GitHub账户只能托管一个博客网站,如果你想要搭建三个博客网站,那就需要用三个不同的邮箱注册三个不同的GitHub账户。
2、GitHub Pages服务托管的网站最大可以有300MB的空间。就写文章的话,够写几千几万篇了吧!
3、GitHub Pages服务允许绑定自己的域名。这一步我没有做(通过 http://todd2010.github.io
网址访问我的博客我也能接受)。绑定域名其实也很简单,您要是感兴趣的话网上有大把的资料可以参考。
那具体怎么部署呢?
首先需要注册GitHub,从接触互联网开始就注册各种网站,这边我就不说了。
注册登录之后,来到GitHub首页,点击 New repository
新建一个代码仓库,如下图:
然后根据下图填写必要的信息,请务必看清图中的说明。
点击 Create repository
按钮。至此,GitHub Pages就准备好了。
部署
下文为了叙述方便,我们假设您的GitHub账户名是 ABC123
。
接下来就是要把本地的Hexo博客部署到刚新建的ABC123.github.io的仓库中去。
Hexo有一个专门部署GitHub的插件,叫做 hexo-deployer-git
,GitHub地址:https://github.com/hexojs/hexo-deployer-git。Hexo没有自带这个插件,因此需要先安装一下,来到终端Terminal,切换到博客主目录中,输入 npm install hexo-deployer-git --save
这个命令就完成了安装。
接着在本地博客的主目录下打开 _config.yml
配置文件,有两处需要稍作修改。
首先在第二段的URL中把 url: http://yoursite.com
改成 url: http://ABC123.github.io
。
其次把最下面的部署内容修改成如下代码并保存退出。
|
|
上面两处修改需要注意冒号后面是有一个空格的,千万不能去掉,最好直接复制我的代码,然后把相应字段的稍作修改。
再次回到终端Terminal中,输入:
|
|
至此,搭建博客就全部搞定了!
在浏览器中输入ABC123.github.io就可以看到属于您的个人博客了。
结束语
在搭建博客的过程中,我遇到过两个问题。
1、有时候会遇到输入某条命令之后出现了各种错误,可是试着在命令前加上 sudo
, 使用系统权限来执行这条命令,然后输入密码即可。
2、在执行 hexo deploy
后,用Safari打开没有及时更新。这时可以稍等5到10秒或多刷新几次。不过这个问题在Chrome上没有发生过。