使用hexo搭建静态个人博客

发表于 | 分类于 | 评论数： | 阅读次数：

简单介绍hexo

hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351。这篇文章主要介绍在windows平台上用node.js框架搭建blog的方法。

为什么使用静态博客

不少人选择在虚拟主机或vps上面搭建动态博客。但是这些主机商通常“免费的不稳定,稳定的不免费”。之前我图方便在淘宝上购买了香港的免备案服务器，除了网络带宽，流量受到限制，还随时会面临服务器商跑路的风险。如果我们能够找到这样的空间,在自己保留最大控制权前提下,由别人托管,会省去不少事情。

静态博客编译之后是纯html页面,优点就是支持它的环境十分好找,例如github、gitcafe、七牛云存储等站点都支持静态页面托管,自然是我们的首选了。我自己的博客就是托管在github仓库上的。

但是静态博客并非没有缺点。动态博客更新文章时,脚本是不变的,只需要更新数据库。静态博客要频繁改动文件,不支持增量式上传的东西,比如ftp,就难于管理。此外,还要十分熟悉git各种命令,才能部署页面，接下来我们就开始blog的部署。

配置环境

  • node.js框架
  • gitbub账户&仓库
  • git
  • 域名

开始搭建

1.node.js框架的安装

node.js框架的安装可以到node.js官网,对于windows平台，下载安装包之后直接点击安装即可.

安装完成以后按window+r，输入cmd打开命令行窗口，输入 npm，这时若弹出node.js 的使用指南说明安装完成。

2.hexo的安装

  • 1.在命令提示窗口中使用命令 npm install -g hexo
    来安装 hexo。
  • 2.在你喜欢的位置创建文件夹用来存放网页内容，如：D/hexo，接着转到这个文件夹，使用命令提示行输入 hexo init。 这个文件夹就是你的 blog 的源文件夹;
  • 3.生成静态页面，执行命令 npm generate （或者npm g);
  • 4.执行命令 hexo server
    在本地建立网站，默认端口为4000，打开任意浏览器，键入 http://localhost:4000 (或者127.0.0.1：4000)，这是就可以在本地访问搭建好的网页了；
    http://onep1caa3.bkt.clouddn.com/hexo%20server.png

3.github仓库的建立

github仓库的建立比较简单，大家可以参照这篇文章；注意建立的仓库的名字必须与你自己的用户名对应，即仓库名必须为【your_user_name.github.io】。

4.准备将本地网站clone到你的github仓库中

在本地预览自己的网页感觉没什么问题以后，就可以开始把自己的个人博客clone到github仓库上。

建立关联，需要修改之前建立网站的源文件夹的一个名为_config.yml的文件，这个文件可以用大多数文本编辑器打开，我用的是brackets，这个软件很适合初学者学习前端的基本知识，因为它有即时预览模式，在编辑网页的同时可以看到网页的变化。闲话不多说，打开这个文件之后，看到前面有些设置选项，这些暂时都不管，拉到最下面，添加如下代码 

deploy:

type: git

repo: https://github.com/hhb1994/hhb1994.github.io.git

branch: master

其中repo后面跟的应该是你的github仓库的地址。请注意，type，repo，branch冒号后面一定要加一个半角空格，不加的话不能上传。之前没有注意到这个问题，弄了很久都没有成功。

5.使用SSH登陆

使用ssh可以免去每次更新网站都输入账户密码的麻烦，详细的本地生成ssh并绑定你的github账户的教程请看这里，需要注意的是，如果你有一个以上的仓库，必须把ssh绑定到你要上传网站的那个仓库里面，如果你直接从设置里面绑定，执行 hexo deploy时会报错。正确的做法时选择你上传网站的仓库，在这个仓库的setting里面绑定ssh。如果之前是全局绑定了ssh，需要先解绑，再在你选择的仓库进行绑定。

6.开始上传

执行命令
hexo deploy(或者hexo d)，就开始了上传流程，上传完毕之后，就可以打开网页hhb1994.github.io（换成你的仓库地址）访问你的博客了。

域名的重定向

如果你想把这个博客和你购买的域名绑定在一起（可以到万网购买域名，价格也比较实惠，在这里我是绑定万网购买的域名），请打开万网，登陆你的账户以后找到域名设置-域名解析，添加三条解析。

  • 1.记录类型：CNAME，主机记录：www，记录值：hhb1994924.github.io；
  • 2.记录类型：A，主机记录：@，记录值：192.30.252.154；
  • 3.记录类型：A，主机记录：@，记录值：192.30.252.153；

添加之后，还需要在hexo/source中添加CNAME文件，文件名为CNAME，注意没有缩略名，用文本编辑器打开这个文件，输入hhb123.top(换成你自己购买的域名)，接着用命令提示行输入 

hexo clean  

hexo deploy

稍等一会，就可以在浏览器输入hhb123.top来访问个人博客了。

添加文章

可以直接在D:\hexo\source_posts中添加.md文件，再执行 

hexo clean  
hexo deploy

就可以上传文章了，.md文件使用markdown格式，这种格式注重内容而不是形式，语法结构也比较简单，很快就可以学会，这里有教程。编辑markdown格式的编辑器有很多，windows平台上的markpad，markdownpad都是不错的选择，另外还有一些网页上面的markdown编辑器，效果也不错。

更换主题&个性化

hexo提供了很方便的更换主题的方式，选择你喜欢的主题，打开存储你的网页的文件夹，然后使用命令提示行键入

git clone https://github.com/iissnan/hexo-theme-next themes/next

这样就可以把“next”主题的文件拷贝到hexo/themes文件夹了。
接着在hexo文件夹的_config.ylm文件夹中找到主题设置，
theme：landscape
landscape是默认的主题，这里我们把默认的主题改为
theme：next
接着执行 

hexo clean  
hexo deploy

就可以看到新主题的效果了，主题的设置在 D:\hexo\themes\next_config.yml中。

thank u !