如何用hexo半小时建立一个漂亮的个人博客

不知道大家有没有想过搭建一个自己的博客呢,你们或者有人已经尝试过用

wordpress,但小编使用过后觉得过于庞大了,

于是乎,在这次推送中,小编想给大家介绍一下一个轻量级的博客框架——Hexo.

什么是Hexo

根据官网的描述,hexo是一个快速、简洁且高效的博客框架。它可以将markdown文章进行解析,并生成相应的静态页面。

如何安装 hexo

”工欲善其工,必先利其器“,在动手用hexo搭建博客之前,我们需要先安装好开发环境。

我们需要的工具有: node.js, git(不知道怎么安装这两个环境的小伙伴请自行百度)

当我们安装好上述两个环境后,执行该命令:npm install -g hexo-cli

tips

由于国内的大环境问题,使用npm包管理器的时候可能会下载失败,因此推荐大家使用淘宝做的镜像cnpm, 安装方式如下:

npm install -g cnpm

之后凡是涉及到npm命令的,都直接换成cnpm即可

如何使用hexo建站

用hexo建站发文简单来说有以下几个步骤:

1. 配置渲染环境

2. 新建文章

3. 完成后渲染成静态页面文件

4. 将静态页面文件上传到服务器

我们一步一步来进行

配置环境

在你想要保留博客文件的目录下,输入命令

hexo init

hexo就会在当前目录下生成文件夹,之后在文件夹中输入

npm install

来安装相应的包依赖。于是就可以看到如下的目录树:

新建文章

在上面创建的文件夹下,输入命令:

hexo new

我们便可创建名为essay_name的文章,相对应的md文件可以在source/_posts中找到。之后对该文件进行编辑即可。

渲染网页

当我们完成了文章的创作后,可通过调用命令:

hexo g

即可渲染成静态网页文件,我们在目录public下可以找到这些文件,而且通常情况下,我们会先输入命令:

hexo clean

来清除掉之前生成生成的静态文件,再调用生成静态文件的命令。

同时,为了能使我们在上传到相应的服务器之前就能看到生成网站的效果,hexo也为我们提供了

hexo server

命令来使我们在本地就可看到效果,在初始情况下,当我们输入该命令时,会看到如下效果图:

是不是觉得好丑,emmmm,我也是这样觉得的,所以hexo也提供了更换主题的功能,在经过一番调教后,效果会出乎你的想象的。

上传到服务器

很多人其实是直接把这些文件放到github的,在网上也有很多相应内容的博客,这里就不赘述了,我主要想讲的是如何把文件上传到自己的服务器。

首先,我们需要先把自己的服务器弄成一个简易的git服务器,详见:

廖雪峰的git教程:

(https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579bc4b458f044ce7afed3df579123eca000)

在配置完后,我们在hexo创建的文件夹里找到文件 _config.yml,一般在该文件的最底部可以看到以下内容:

根据官网的指定格式填写你的服务器IP地址和用户名即可,之后在你每次调用命令 hexo g 来生成相应的静态文件后,只要再输入命令:

hexo d

即可将其推到你的服务器上了!!

但是!!!!

所以,我把静态文件推送上去后,还要自己手动地把文件给复制到博客对应的目录下吗?

当然不用,这么弱智的操作是不被允许的,而解决方法就是:设定hook

在我们设定好的git服务器目录下可以找到文件夹 hooks,进入后,我们把post-update.sample改名为post-update,并在里面设置命令,这样,每当你把文件推送到服务器上时,应付触发这个hook使其执行里面的命令,这样,通过合适的命令,就可以实现自动的部署了。以下是小编的输入的命令:

简单地说明一下代码的意思:

首先,进入到你网页文件的目录下,由于小编的目录间接地暴露了自己的博客域名,所以被我涂掉了.....

第二行代码存在的主要原因是因为我目录的特殊性导致在运行git clone命名时需要是root权限,于是我先把密码输出,再sudo命令自动地读入,从而实现自动使用root权限。之后就是简单地把代码复制过来了。

最后一点

前面大家也看到了,hexo默认的主题其实不是很好看(其实就是丑爆了),而hexo本身其实也给了使用者很大的自定义空间,如果我们比较懒的话,也可以直接使用大神定义好的theme,在此,小编强烈推荐主题——NextT。

话不多说,直接上图(可能你们还会觉得丑,但这真的是我的审美极限了.....)

∞∞∞∞∞

IT派有个广州交流群,了解一下?

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180804B07XVC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券