首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用hexo+gitpages搭建自己的个人博客(原理详解)

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

作者头像
戈贝尔光和热
发布2018-12-27 14:44:53
7780
发布2018-12-27 14:44:53
举报
文章被收录于专栏:HUBU生信HUBU生信

最近一直想做一个自己的个人博客,其实有很多框架可以用来搭建自己的个人博客,比如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 1301646236@qq.com

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

,如图所示为止。

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

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

ssh  -T  git@github.com

如果显示welcome *** ! 说明你已经关联成功了。 它的原理是这样的:当你输入第一条命令之后,在本地会创建一对密钥,一个私钥和一个公钥,其中公钥就是在.ssh文件夹中的文件。将它保存到GitHub之后,就相当于在用ssh远程与GitHub服务器时,会自动与你的仓库匹配,因为只有你的仓库有密钥。 这样准备工作就做完了,当然,建议你熟悉一下git命令,我上面推荐的博客,值得一看。


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

hexo  init

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

在电脑中打开test文件夹:

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

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

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

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

。而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中新方法:

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

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

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

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


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

全文结束,欢迎在评论区讨论~

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-09-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
测试服务
测试服务 WeTest 包括标准兼容测试、专家兼容测试、手游安全测试、远程调试等多款产品,服务于海量腾讯精品游戏,涵盖兼容测试、压力测试、性能测试、安全测试、远程调试等多个方向,立体化安全防护体系,保卫您的信息安全。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档