乐趣区

使用Hexo框架搭建博客,并部署到github上

开发背景:年后回来公司业务不忙,闲暇时间了解一下 node 的使用场景,一篇文章吸引了我 15 个 Nodejs 应用场景,然后就被这个 hexo 框架吸引了,说时迟,那时快,赶紧动手搭建起来,网上找了好多资料一天时间才搭建完成,我的博客地址:博客,记录一下过程,以便以后学习。

开始搭建
学习新框架的一般步骤:

中文文档撸一遍,跟着做(Hexo 中文文档),一般都会有各种问题出现,当然直接成功的也有,很不幸,我就是出现问题的那一类,没关系,出现问题,解决问题的过程,才能学到更多东西;
上网找一些 hexo 使用的教程,继续弄;
这个时候要是再有问题就是很难解决的有针对性的问题了,继续上网找相关的解决办法;
网上资源真的很多,很好用,只要想学没有找不到的东西,哈哈哈 …

一、安装
前提:既然是 node 框架,肯定前提是你已经安装过 Node.js(下载地址),另外还需要你安装 Git(下载地址);如果你已经成功安装了上述程序后,接下来就是 hexo 的安装:
$ npm install -g hexo-cli

安装完成以后,需要初始化一下项目,执行下列命令:
$ hexo init
$ npm install
完成以后,项目大概目录就是这样的:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml 网站的配置信息,可以在此配置大部分的参数。后面发布到 github 上面时,有用到这个文件;
package.json 应用程序的信息。

文件的其他部分的详细解释请看文档,此处只是记录一下搭建以及发布的过程,具体写文章的步骤,先不进行过多说明;

接下来可以在本地启服务来查看一下项目的初始状态:
$ npm install hexo-server –save
$ hexo server
效果大概就是下面的样子:我稍微修改了一下文字配置,可能你的会跟我的有点不一样,项目能启动就是成功了;

二、发布到 github 并设置成个人博客
1、github 上新建一个仓库

登录自己的 github 后,在界面右上角用户信息点击左边的加号,新建一个 repository:
然后给新建的仓库起个名字,注意:这个名字必须跟用户名一致,github 才会默认设置成用户的博客:
项目建好以后,就是一些信息的设置:设置页面里面有分支选项,如果有 master 分支,会默认成博客的首选代码;

2、将本地搭建好的 hexo 发布到 github 上:将本地代码上传到 github 上的方法有很多:可以用 Github Desktop, 简单直观,但是需要把之前我们搭建好的项目生成的文件放到 GitHub Desktop 指定的位置,再上传,感觉不那么智能,还有点麻烦,所以我选择 planB,耶!我可真是个小机灵鬼 …

下面是在项目中生成静态文件的命令:
$ hexo generate

简写,结果是一样的
$ hexo g
执行完以上代码,会在项目的根目录下生成 public 文件夹,选择 planA 的童鞋就可以将里面的所有文件用 GitHub Desktop 上传到 github 上了;

而另外一种,就是在当前项目直接远程连接自己的 github 上传文件,这会涉及到 SSH(关于 SSH 是什么,网上有很多详细说明,可以自己查找学习)
安装插件:
npm install hexo-deployer-git –save
修改网站配置文件_config.yml, 添加 deploy 信息:
deploy:
type: git
repo: git@github.com:wjlilh/wjlilh.github.io.git
branch: master
上面的 repo 的配置信息,替换成自己的项目名字

生成 SSH key:
按照网上的教程生成 ssh key 的时候是直接 ssh-add, 但是失败了,调查问题,发现原因是因为,我是第一次使用 ssh-agent 代理,第一次需要首先执行以下命令,以后就不需要了(具体原来请参考此处链接):
$ ssh-agent bash
以上命令回车,启动进程,后再输入命令:
$ ssh-add ~/.ssh/id_rsa

按照提示操作输入密码,
这样就在 c 盘对应位置生成了 ssh-key;
配置 github 账户的 ssh-key 打开 id_rsa.pub 文件将一整串公钥拷贝下来
进入你的 github 账户设置,在 ssh and GPG keys 中新增一个 ssh key,如下

title 随意,key 填 id_rsa.pub 文件中内容,保存即可;

验证是否连接成功:
$ ssh -T git@github.com
出现下面的语句说明你的 ssh key 已经配置好了
Hi wispyoureyes! You’ve successfully authenticated, but GitHub does not provide shell access.

ok, 到了这一步,本地跟远程 github 的连接已经建立,在项目中,直接生成静态文件,上传就可以了:
$ hexo clean // 清除缓存文件 db.json 和已生成的静态文件 public
$ hexo g // 生成网站静态文件到默认设置的 public 文件夹
$ hexo d // 部署网站到设定的仓库
这样就完成了个人博客的 github 部署,直接打开过程中设置的地址就可以查看了,我的是:https://wjlilh.github.io/

退出移动版