使用hexo+gitpages搭建自己的个人博客网站(原理详解)

最近一直想做一个自己的个人博客,其实有很多框架可以用来搭建自己的个人博客,比如django,我最开始就是想到的它,但是看了有一段时间,感觉自己还是没有领悟,同时自己的域名也还没有审批下来,所以决定转战大家熟悉的gitpages搭建自己的博客。使用的最主要的技术是hexo+gitpages+workdown。其实很简单,希望本文对大家能有所帮助。

首先,我们应该搞清楚一个问题,一个博客是什么? 博客,也就是用文字和图片来记录自己一些心得和生活的地方。现在有很多大厂都有提供博客写作,比如 博客园,cdsn,知乎,新浪微博其实也可以算,只不过它的功能已经远比博客的功能要多得多了。搭建博客需要哪些条件:1.服务器2.域名3.搭建框架4.写作工具。

在这里,服务器,我们就用GitHub的服务器,域名就用GitHub提供的域名,框架选择hexo,简洁而优雅。下面我们来具体看一下。


GitHub为了大家方便管理自己的仓库,提供一个静态的网页来使自己的仓库容易被其他人浏览,当然,你完全可以用它来做自己的博客。具体方式是

1.GitHub的配置

GitHub的操作在自己的GitHub中新建一个仓库,叫做:用户名.http://github.io,比如我的GitHub的用户名叫做reBiocoder,所以,我应该新建一个仓库叫做:http://reBiocoder.github.io。必须这样命名,不然的话,GitHub是无法识别的,因为这里的仓库名实际上就是GitHub分配给你的域名,每个用户只能分配一个域名。

2.安装hexo

安装hexo的前提是需要你的电脑里已经安装了node.js和git,node.js是由Ryan Dahi在09年发布的一款js工具,它能够在服务器上良好的运行js脚本。关于git,我曾经写过一篇git博文,大家可以看一下python后阶段的学习思路以及对git的基本理解。node.js和git的安装都很简单,直接搜索然后安装即可。

如果电脑安装好了上述程序,你只需要在gitbash中输入:

npm install -g hexo-cli

即可成功安装hexo,如果在git bash中无法安装,可以在node.js command prompt 中进行安装(node.js安装成功后自然就会有)

之后就是将本地git与github向关联,在git bash中使用命令:

ssh-keygen -t rsa -C [email protected]

这里注意把邮箱换成你注册github是的邮箱,然后一路回车即可。直到出现

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

,如图所示为止。

此时你的电脑c盘用户文件夹里面会出现一个.ssh文件

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

可以检验一下你的GitHub和本地git是否关联成功:

ssh -T [email protected]

如果显示welcome *** ! 说明你已经关联成功了。

它的原理是这样的:当你输入第一条命令之后,在本地会创建一对密钥,一个私钥和一个公钥,其中公钥就是在.ssh文件夹中的文件。将它保存到GitHub之后,就相当于在用ssh远程与GitHub服务器时,会自动与你的仓库匹配,因为只有你的仓库有密钥。

这样准备工作就做完了,当然,建议你熟悉一下git命令,我上面推荐的博客,值得一看。


3.创建一个hexo项目

在你喜欢的地方,新建一个文件夹,然后再文件夹(使用git bash打开文件夹)里面使用命令:

hexo init

初始化hexo,此时在文件夹中会出现一些框架文件,如图:

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

在电脑中打开test文件夹:

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

可以看见,有很多框架文件。

网上关于hexo的教程很多,我就不一一细说,我们重点看一下原理:

第一个文件 node_modules;这个文件实际上就是node.js的模板文件,一般情况下,这是不用我们进行更改的。

第二个文件 scaffolds,这是一个模板文件夹,在hexo中有一个叫做Front-matter的配置,它是用来声明每篇博文中所涉及的一些变量的。比如我这篇博客,它的front-matter就是:

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

。而scaffold这个文件夹就是可以改变front-matter。

地三个文件夹:source 这个文件中存放的是你的文章,分类和标签的路径。 也就是你写的文章,以及你所设置的标签和分类来世都是存放在这个文件夹里面的,当你

g`之后,hexo便会自动帮你将这样文件夹变成路径,部署到public文件夹中。而public文件夹也就是你的根目录“/”。
第四个themes: 它是用来存放你所下载的主题的,主题的配置,通过主题里面的```_config.yml```来进行配置

后面的四个文件,只介绍一下```_confing.yml```,这个文件是一个配置文件,它是站点的配置文件,和主题的配置文件是不一样的。
现在,你可以在git bash中输入命令:
hexo g #生成hexo
hexo s #启动本地测试服务

然后你就可以在浏览器中输入hexo生成的一个测试站点,就可以看见你的博客主页啦!

当然,这样配置,其他人是不能访问你的博客的,你还需要将你的博客部署到你的GitHub上面,在hexo中这个操作,异常地简单,你只需要:

hexo g -d

即可。 此时,你在浏览器中输入:用户名.http://githb.io就可以看见你的博客啦,比如我的:http://reBiocoder.github.io。

基本操作就是这些。


下面来讲一下写博客和留言系统的配置

工具:markdown

注意问题:插入图片的方式

暂时,插入图片,我还没有发现一些好的方法,hexo的官方文档给出的是使用标签语法来进行插图,但是当我在博客中加入了gitment留言系统之后,由于使gitment之后,为了不报错permalink需要被改,也就是 permalink: :year/:month/:day/:title/中的title需要被换,原因是title有字数限制,而加入评论系统的gitment需要使用permalink来作为url,这里为了gitment不报错,将:title改成:subtitle,也就是改成副标题。 此时,在之后的博文中的front-matter中,必须还要加上subtitle(副标题)。 这样一来,我的文件路径就被更改了,尝试了几次发现,使用hexo3中新方法:

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

还是会使路径错误。 所以决定改用图床,直接上外链,使用的工具是SM.MS,

它能给上传的图片生成一个外链,比如:

使用hexo+gitpages搭建自己的个人博客网站(原理详解)

然后使用markdown的语法就能将图片插入进来,网上有人推荐使用七牛云,实际上我不是很喜欢,因为它还要实名认证什么的,很麻烦,SM.MS可以直接使用。

博文写完之后,只需要hexo g -d即可。


hexo真的是一款简约大方的框架,好像是一个台湾人写的,所以对中文支持也特别好,真心不错。 后面可能更新一些关于数据结构与算法的文章,我想把数据结构与算法的c代码在过一遍。

更多优质内容请关注微信公众号:生物信息与python

我的博客:www.lovexu.xyz

GitHub:reBiocoder


分享到:


相關文章: