hexo 是一个快速、简洁且高效的博客框架。hexo 使用 Markdown解析文章,在几秒内,即可利用靓丽的主题生成静态网页。hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub Page、COS(腾讯云对象存储)等支持静态网站的系统上,是搭建博客的首选框架。
本文将简介如何自己的服务器、腾讯云COS及Github Page上部署hexo博客。先说结论,如果你在国内使用博客的话,本文推荐你在COS上部署,首先是不用自己搭建静态网站服务器,其次是免费,这里的免费额度优惠很大,每月50G免费空间,10G CDN下行流量,每月100万次读写请求。对于一个静态网站或者个人博客来说,非常够用了。当然,你也可以使用Github Page和自己的服务器,但是这里会遇到一些问题,比如使用Github Page国内访问速度慢甚至无法加载报错456的情况。而使用自己的服务器,撰写部署又成为一大难题。
本地部署hexo开发环境
安装之前,需要你电脑安装好Node.js和Git,由于系统花样繁多,本文将仅介绍Windows、Mac、Ubuntu(linux)安装方法,其他系统请自行摸索。
Node.js及git的安装
windows中Node.js及Git的安装
Node.js
打开Node.js的官网,点击8.12.0 LTS绿色按钮(本文撰写时的版本),下载好后一路下一步安装即可。
Git
打开Git官网,点击Download 2.19.1 for Windows(本文撰写时的版本)按钮,下载好后一路下一步安装即可。
Mac中Node.js及Git的安装
Node.js
打开Node.js的官网,点击8.9.4 LTS绿色按钮(本文撰写时的版本),下载好后一路下一步安装即可。
Git
Mac默认自带Git,若您系统版本过低,请打开Git官网下载安装。
Ubuntu中Node.js及Git的安装
Node.js
命令窗口输入以下命令
1 | sudo apt-get update |
如遇到安装错误或其他问题,请使用编译安装。
为保证nodejs版本及稳定性,下面安装是下载nodejs进行编译安装,可能耗时较长,请耐心等待。如您上面执行
sudo node -v
已经正常显示版本,则不用执行下面的代码。
1 | sudo git clone https://github.com/nodejs/node.git |
Git
Ubuntu安装git,执行以下命令即可安装
1 | sudo apt-get install git |
hexo的安装
接下来,我们需要在本地安装hexo,hexo安装命令非常简单,只需要一步即可安装完成,具体命令窗口输入以下命令:
1 | sudo npm install -g hexo-cli |
但是值得注意的是,Windows必须去掉
sudo
命令即npm install -g hexo-cli
,windows如何打开命令窗口请点击这里学习。Ubuntu和Mac仍使用上述命令安装即可。
如何建站
安装完Hexo等相关依赖后,请执行以下命令创建您的网站
1 | sudo hexo init <folder> |
同上,Windows须去掉
sudo
命令,Ubuntu和Mac仍使用上述命令安装即可。其中<folder>
为你需要创建的网站的文件夹名称,名称无硬性要求,如我创建自己的网站,则可写为sudo hexo init techeek
没错,这样就完了,你的网站已经搭建完成。更多相关的命令解释请点击这里查看。
如何写文章
首先我们需要创建一个新的文章,默认Hexo已经为我们写了一篇为Hello Word的文章,但是为了熟悉撰写文章的过程,我们还是重头撰写一遍。
首先在您的命令窗口输入以下命令
1 | sudo hexo new <title> |
同上,Windows须去掉
sudo
命令,Ubuntu和Mac仍使用上述命令安装即可。其中<title>
为你需要创建的文章的名称,名称无硬性要求,如我创建自己的文章,则可写为sudo hexo init hexo-tutorial
这时,找到你创建的网站目录中创建markdown源文件的地方,位置在你创建网站的名称\source\_posts
下,双击编辑该文件,打开后markdown格式如下:
1 | --- |
如本文格式
1 | --- |
部署hexo到腾讯云COS
既然比较推荐部署到腾讯云COS,那么我们就先看看如何将hexo部署在腾讯云的COS上。在开始之前,我们要做一些准备,要在腾讯云COS上创建存储桶,并设置好静态网站环境,这里可以参考**如何通过 cos 托管静态网站**这个教程。
创建并设置好环境后,还需要获取腾讯云COS相关密钥才能部署,这里我们需要获取APPID
,SecretId
,SecretKey
,Bucket
,Region
这五个参数,具体如下:
名称 | 描述 |
---|---|
APPID | 开发者访问 COS 服务时拥有的用户维度唯一资源标识,用以标识资源 |
SecretId | 开发者拥有的项目身份识别 ID,用以身份认证 |
SecretKey | 开发者拥有的项目身份密钥 |
Bucket | COS 中用于存储数据的容器,本文创建以www为例 |
Region | 域名中的地域信息。枚举值参见 可用地域 文档,如:ap-beijing, ap-hongkong, eu-frankfurt 等 |
获取这些值后,我们需要安装能将HEXO部署在COS上的插件,这里我们选择安装hexo-deployer-cos
,安装比较简单,只需要执行npm install hexo-deployer-cos --save
即可,具体如下。
1 | npm install hexo-deployer-cos --save |
接下面我们配置hexo的配置文件,首先打开根目录的_config.yml
配置文件,将原来的deploy
替换为下面的内容:
1 | deploy: |
细心的同学发现我的配置与hexo-deployer-cos
的Github项目页面给出的配置不同,为什么呢?该插件作者更新了插件,但是没更新Readme文档,用原作者的配置文件会报错。所以请用我给出的配置。那么具体配置如下。
假如说我的APPID
是1251234567
,secretId
是ABCDEFGHIGKLMNOPQRSTUVWXYZ
,secretKey
是abcdefghijklmnopqrstuvwxyz
,创建的bucket
是www
,region
可用地区是成都,也就是ap-chengdu
,这个详见准备的表格。
那么我的_config.yml
中deploy
配置为:
1 | ...... |
现在你已经完成了最后的设置,最后一步就是需要部署项目到COS了,输入我们熟悉的部署命令:
1 | hexo g -d |
你会看到如下输出:
1 | INFO Start processing |
好了,现在我们访问你的域名看看是否上传成功了?在浏览器打开https://www.test.com
我们看到项目已经上传,我们在打开COS的Bucket,看看是不是网站真的在Bucket上。
我们看到,服务器在COS运行成功了。
部署在Github Page
创建Github仓库
首先你需要创建并登录Github账户,点击这里注册,然后点击GitHub中的New repository创建新仓库。仓库名称必须命名为你的GitHub用户名.github.io
,其中“你的GitHub用户名”使用你的github账户代替,比如我的仓库名称为techeek.github.io
,这样,你就创建好你的Github Pages仓库了。
生成ssh密钥文件
接下需要创建ssh密钥文件,为什么要创建呢,因为Hexo部署在github上是通过密钥配对上传的,所以我们需要创建公钥和私钥,什么是公钥和私钥请点这里。我们首先依然打开命令提示符,Windows请搜索打开Git Bash。然后输入如下命令配置git
1 | git config --global user.name "你的GitHub用户名" |
配置完成后,输入如下命令生成ssh密钥文件
1 | ssh-keygen -t rsa -C "你的GitHub注册邮箱" |
接下来按三下回车就行,不创建密码,然后我们使用
1 | cd ~/.ssh |
命令打开ssh生成的密钥文件,Windows密钥文件在C:/Users/你的用户名/.ssh
目录下。接下来打开GitHub_Settings_keys 页面,新建new SSH Key。Title为标题,任意填写。将刚刚复制的id_rsa.pub内容粘贴到key,最后点击Add SSH key。
部署网站
部署前需要修改Hexo的配置文件,这里先放出官方的配置方法,大家可以参考。我这里只讲如何配置git
修改_config.yml内容如下
1 | # Deployment |
很多教程都将repo:
写为https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
但是我个人不推荐这样写,因为有时候会因为BUG无法上传,所以我建议按照我上面的格式写。
这是执行如下命令,就可部署你的网站了
1 | sudo hexo deploy |
部署完成后,打开https://你的GitHub用户名.github.io.git看看是不是能正常访问啦?
部署在自己的服务器
可以按照第一步的步骤在自己的服务器上提前安装好Node.js和Git,接下来在本地部署好hexo博客,撰写好文章。最后生成静态文件。当静态文件生成好之后我们需要使用如下命令部署网站,命令如下
1 | sudo hexo deploy |
启动服务器。默认情况下,访问网址为: http://localhost:4000/,或访问你的服务器地址 http://你的服务器IP:4000/。如果使用的是腾讯云的服务器,请打开安全组的4000端口。
总结
部署hexo网站很简单,推荐在Windows部署完成后部署在COS上,因为有cdn的加持,访问速度会快很多,况且有那么多免费流量,个人博客使用足矣。建议将hexo的项目文件同步到Git上,这里我推荐腾讯Git代码托管(工蜂),为开发者提供基于 Git 的在线代码托管工具,包含代码提交/存储/下载/复刻/分支/历史/比对/合并等功能。可一站式完成对代码及代码质量管理,项目及项目人员管理,大大提升研发效率。而且支持免费的私有仓库,将hexo项目同步上去,后续哪怕是更换电脑也能快速更新博客并控制版本。