个人博客搭建心得

准备工作

想要搭建一个像我这样的个人博客吗?其实你只需要大概三十分钟左右的时间就可以拥有这样一个和我一样的博客了,我的这个博客是基于运行在Node.js上的hexo框架运行在github pages上的,Hexo是一个基于 node.js的快速生成静态博客的开源框架,支持 Markdown和大多数 Octopress插件,一个命令即可部署到 Github页面、 Giteee、 Heroku等,强大的APl,可无限扩展,拥有
数百个主题和插件。但他也不是完美的,它本质上是一个静态网页生成器,每次更新内容都需要你重新把他push上去才可以,但是它是免费的啊!对于免费的东西再怎么苛责都是无意义的,那么话不多说,我们就开始吧!

你需要准备的东西:

1.Node.js

2.Git Bash

3.一个Github账号

4.一台能上网的电脑和你勤劳的小手

部署Node.js

这一步其实没什么好说的,根据官网引导一步一步下载安装就是,这可能是你整个步骤当中最为轻松的一步了,你所需要的就是点击Node.js官网然后根据引导安装。哦对了,如果你是Windows系统的电脑,别忘了配置环境变量~

具体的教程可以参考NodeJS安装教程

npm下载慢的话也可以下载淘宝下载源cnpm.

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后,你就可以使用以下的命令来判断是否安装成功了。

node -v
npm -v

部署Git Bash

同样的,下载安装即可,百度搜索Gitbash下载,然后找一个下载网站提供的安装包就行,这里推荐用腾讯软件中心的,虽然版本并不能和官网同步更新,但是最起码你用他下载很快(不用翻墙)。这里是GitBash下载地址,点击普通下载就可以啦,具体的安装教程可以参考 GitBash安装教程,基本上就是无脑下一步即可。

安装完成后,你可以通过以下dos命令查看是否安装成功。

git --version

搭建HEXO

到了这一步,恭喜你基本上的准备工作已经完成了。接下来你需要在你想要的地方创建一个空目录,例如D:/myblog,然后在这个空目录右键,选择Git Bash Here。在弹出来的窗口输入以下命令。

npm install -g hexo-cli
或者
cnpm install -g hexo-cli

如果此时报错你没有足够的权限,那么需要你手动以管理员身份运行GitBash,然后自行切换到对应的目录下。

安装完成后即可使用hexo -v检验是否安装成功

hexo -v

然后,初始化hexo

hexo init

然后,安装npm

npm install

然后,激动人心的时候来啦,

hexo server
或者
hexo s

如果一切正常的话,在完成这一步之后,你就可以在浏览器地址栏里输入(http://localhost:4000/),敲下回车,你就会看到,你的博客已经搭建好了,但是此时我们的博客还搭建在本地,还没有被传到互联网上,那么接下来要怎么做呢?

在Github上的工作

首先你需要有一个Github账号(这不是废话吗),注册完成后,点击右上角的新建仓库(New Repository),注意!给仓库起名字的时候最好全都选择成和你的用户名一样,例如填写McFranco.github.io,这样的话你就可以把这段URL当做你的域名来使用了。

创建完成后,你需要设置好SSH连接和验证你的邮箱,准备完成后,在你的博客目录下gitbash

npm install hexo-deployer-git --save

这个步骤可能会非常的漫长,不要慌,耐心等待即可,或是喝杯咖啡?

好了之后,进入你的仓库的settings,给你的github pages名字设置成 你的用户名.github.io。

但是这个时候,你进入你的用户名.github.io只能看到404消息,因为这时只是建立好了连接,我们还没有真正的把我们的代码push到github仓库里,重新进入你的博客目录,然后打开该目录下的_config.yml文件,在这里进行配置。

yml文件配置

直接拉到文件末尾,在deploy type上输入git,然后复制你github的clone/download下的SSH地址,填进deploy repo中。

回到上面,在url中输入你博客的地址 XXX.github.io。

大功告成!

至此,你的博客的准备工作已经完全做好了,接下来你只需要简单的几个命令,就可以在互联网上见到你的博客了!

第一个!

hexo clean
or
hexo cl

这一步是清理你的文件缓存,建议每次upload的时候都清一下

第二个

hexo g

顾名思义,hexo generate,生成你的博客页面

第三个

hexo s

这一步的作用是生成一个本地的预览用静态页面,可以在这里确认你的改动确实生成了之后再push到internet上,输入localhost:4000即可查看本地博客页面。

最后一步!

hexo d

终于到了最后一步,前面所有的努力都是值得的,这一步是让hexo deploy内容到你的github仓库,把本地的修改全部overwrite到你的仓库中。

结语

至此,一个简单的博客就搭建好了,虽然他看起来没什么特别的,简单的界面,复杂的上传操作,但是基于github的免费仓库保管功能和pages的静态展示功能,你已经货真价实的拥有了一个属于自己的博客,而且这也不代表你的博客之路就到此结束了,你可以深度的魔改hexo的主题,给他加上各种花里胡哨的功能,你也可以把他搬迁到国内的gitee上,让他拥有更快的响应速度,总而言之,一切刚刚开始,现在,就动手搭建你的博客吧,期待见到各位的博客早日上线,拜拜~!