使用hexo搭建github博客

导言

这两天看了些技术文章,心血来潮突然想搭建一个github博客。在网上搜了一些教程,花了点时间,终于把博客搭好,下面简单记录下搭建过程,做个记录。

原理

在网上看了几个教程,很多上来就是按照步骤输入命令行安装,运行。一开始看到云里雾里,虽然最终是安装成功了,但相信对于不少新手读者来说存在不少困惑。

下面是自己的一点粗浅理解。首先,我们知道,NodeJS是一个宿主运行环境,我们可以在上面运行使用javascript写的程序。npm是一个包管理工具。在编写javascript代码的过程中,我们可以通过npm来安装、卸载、更新项目所依赖的包。而hexo就是这么一个包,它可以通过npm来安装,而与一般的包只能被导入所不同的是,hexo还能作为普通的命令来使用,当它被调用的时候,实际上它是调用了NodeJS作为运行环境来运行程序。

所以实际上我们只要将hexo作为一个普通的命令来使用就行。

那hexo和github又是什么关系呢?

实际上如果你实际使用会发现,使用hexo命令创建的博客文件夹中有一个public文件夹,里面放的跟你在github上的仓库内的文件是一毛一样的。也就是说,其实hexo的作用就是将你本地创建的Markdown文件连同模板一起转化成为静态的html文件,然后放到github仓库上面。

当我们访问我们所创建的静态网页的时候,我们可以发现,所有页面的url都是github仓库的文件路径。那么从原理上来说,你甚至完全不用管什么hexo,只要在github上创建一个 username.github.io 的仓库然后想里面放html网页文件就可以了。当然要渲染出漂亮的页面还是用工具方便些。

安装和使用

安装NodeJS

既然hexo依赖于NodeJS那么先安装NodeJS,可以参考一下官网,windows下是一路next,*unix下也就一句命令的事,此处不赘述。一般来说npm都是随NodeJS一同安装的。安装完记得检查一下,在命令行输入下列命令:

$ node -v

$ npm -v

安装hexo

前面已经说了,hexo其实是一个包,所以只要使用npm管理工具安装即可:

$ npm install -g hexo-cli

然后就可以在任何地方使用hexo这个命令来创建博客程序了。

安装git

使用git相信是绝大部分使用程序员的必备技能,此处不多说,window下下载个安装包一路next,*unix下也是一行命令的事。

配置git

为了能够将代码顺利上传到远程仓库,安装完还是要配置一下git,这里使用ssh-key的方式验证身份。

生成密钥
$ git config --global user.name "gitHubusername"
$ git config --global user.email "gitHub_email"
$ ssh-keygen -t rsa -C "github_email"

这里说一下,上面命令前两句是说设置用户名和邮箱为你自己的用户名和邮箱,ssh-keygen是使用你的github邮箱生成本机上的公钥。非对称加密方式要求远程服务器知道你的公钥来验证你的身份。同样,你也需要知道远程服务器的公钥,来验证对方的身份。如无意外你将在自己的用户文件夹下生成一个叫.ssh的文件夹,里面有一个id_rsa.pub的文件,这里面就是你的公钥。

上传公钥

在你自己的github账户右上方头像中点选Settings点选SSH and GPG keys,然后在右上方点选New SSH key, 然后将id_rsa.pub中的内容全部粘贴上去并保存。这样公钥就上传完成了。

$ ssh git@github.com

上面的命令可以验证前面的公钥是否成功配置。

至此基础设施已经完全配备完成。下面就可以使用hexo来创建博客了。

使用hexo

我们可以创建一个我博客文件

$ hexo init foldername # flodername是可选的,不填就在当前文件夹直接生成许多文件
$ cd foldername # 不填foldername就不用进入了
$ npm install # 根据package.json安装依赖包

至此一个博客文件夹就做好了,然后就可以开始创建你的文章了:

$ hexo new your_article_title

然后你就有了一个md文件,通过这个途径创建的文章都放在source/_posts中,当然在创建项目之初就为你创建了一篇著名的hello,world让你过目了。
然后你就可以用你想要的任何编辑器来编辑里面的文件。
如前所述,hexo是一个工具,它将Markdown文件连同模板一起渲染成静态html文件。现在既然你已经编辑好了你的文章,可以通过以下命令来进行转化:

hexo generate

敲下命令你会发现多了一个public文件夹,里面就是你的html文件。
现在要将html文件传到远程仓库,hexo命令怎么知道你的仓库是多少呢?这时就要在_config.yml文件中配置了,打开文件拉到最底下,配置成下面的样子:

deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

这里需要注意的是username是你git上的用户名,而repository的值是git上的仓库username.github.io的ssh地址。如果你写https的形式有可能会出错(反正我试过是出错的)。

这样还不够,hexo本身没有提供调用git的功能,所以要安装一个依赖包:

$ npm install hexo-deployer-git --save

如无意外,你就可以将文章放到git仓库上。下面是意外,安装上面依赖的时候你可能会遇到:

platform unsupported hexo-deployer-git..............

这样的错误。这时可以尝试以下命令:

$ npm rebuild node-sass

然后再安装一次:

$ npm install hexo-deployer-git --save

最后是将文件部署到github上:

$ hexo deploy

你也可以先在本地预览一下效果,部署到本地端口(默认4000):

$ hexo server

结语

至此hexo部署和使用过程就描述完了,总结一下,hexo的作用是将Markdown文件连同模板渲染成静态文件,它的运行依赖于NodJS运行环境,它的安装可以使用npm包管理工具,每个博客的配置文件是_config.yml。当然这些介绍还是过于简陋,更加详尽的功能还需要在今后使用中进一步探索。

参考

官方文档
could not read Username for 'https://github.com': Invalid argument错误
安装hexo-deployer-git错误的解决方法
知乎专栏

posted @ 2018-03-11 21:11 zhangjpn 阅读(...) 评论(...) 编辑 收藏