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
命令窗口输入以下命令
代码语言:txt复制sudo apt-get update
sudo apt-get install -y python-software-properties software-properties-common
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
sudo npm install n -g
sudo n stable
sudo node -v
如遇到安装错误或其他问题,请使用编译安装。
代码语言:txt复制为保证nodejs版本及稳定性,下面安装是下载nodejs进行编译安装,可能耗时较长,请耐心等待。如您上面执行
sudo node -v
已经正常显示版本,则不用执行下面的代码。
sudo git clone https://github.com/nodejs/node.git
sudo chmod -R 755 node
cd node
sudo ./configure
sudo make
sudo make install
Git
Ubuntu安装git,执行以下命令即可安装
代码语言:txt复制sudo apt-get install git
hexo的安装
接下来,我们需要在本地安装hexo,hexo安装命令非常简单,只需要一步即可安装完成,具体命令窗口输入以下命令:
代码语言:txt复制sudo npm install -g hexo-cli
但是值得注意的是,Windows必须去掉
sudo
命令即npm install -g hexo-cli
,windows如何打开命令窗口请点击这里学习。Ubuntu和Mac仍使用上述命令安装即可。
如何建站
安装完Hexo等相关依赖后,请执行以下命令创建您的网站
代码语言:txt复制sudo hexo init <folder>
cd <folder>
sudo npm install
同上,Windows须去掉
sudo
命令,Ubuntu和Mac仍使用上述命令安装即可。其中<folder>
为你需要创建的网站的文件夹名称,名称无硬性要求,如我创建自己的网站,则可写为sudo hexo init techeek
没错,这样就完了,你的网站已经搭建完成。更多相关的命令解释请点击这里查看。
如何写文章
首先我们需要创建一个新的文章,默认Hexo已经为我们写了一篇为Hello Word的文章,但是为了熟悉撰写文章的过程,我们还是重头撰写一遍。
首先在您的命令窗口输入以下命令
代码语言:txt复制sudo hexo new <title>
同上,Windows须去掉
sudo
命令,Ubuntu和Mac仍使用上述命令安装即可。其中<title>
为你需要创建的文章的名称,名称无硬性要求,如我创建自己的文章,则可写为sudo hexo init hexo-tutorial
这时,找到你创建的网站目录中创建markdown源文件的地方,位置在你创建网站的名称source_posts
下,双击编辑该文件,打开后markdown格式如下:
---
title: 这块写你文章的名称
date: 这块为创建文章的时间,可修改,格式为:年-月-日 时:分:秒
tags: [这块写你文章的标签,使用“,”隔开(注意去掉引号须包含中括号)]
---
这块写你的正文
如本文格式
代码语言:txt复制---
title: 如何快速搭建hexo博客
date: 2018-10-18 14:47:02
tags: [hexo,git,同步]
---
hexo 是一个快速、简洁且高效的博客框架。hexo 使用 Markdown解析文章,在几秒内,即可利用靓丽的主题生成静态网页。hexo是一款基于Node.js的静态博客框架,依赖少易……
部署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
即可,具体如下。
npm install hexo-deployer-cos --save
接下面我们配置hexo的配置文件,首先打开根目录的_config.yml
配置文件,将原来的deploy
替换为下面的内容:
deploy:
type: cos
appId: yourAPPID
secretId: yourSecretId
secretKey: yourSecretKey
bucket: yourBucketName-yourAPPID
region: yourRegion
细心的同学发现我的配置与hexo-deployer-cos
的Github项目页面给出的配置不同,为什么呢?该插件作者更新了插件,但是没更新Readme文档,用原作者的配置文件会报错。所以请用我给出的配置。那么具体配置如下。
假如说我的APPID
是1251234567
,secretId
是ABCDEFGHIGKLMNOPQRSTUVWXYZ
,secretKey
是abcdefghijklmnopqrstuvwxyz
,创建的bucket
是www
,region
可用地区是成都,也就是ap-chengdu
,这个详见准备的表格。
那么我的_config.yml
中deploy
配置为:
......
deploy:
type: cos
appId: 1251234567
secretId: ABCDEFGHIGKLMNOPQRSTUVWXYZ
secretKey: abcdefghijklmnopqrstuvwxyz
bucket: www-1251234567
region: ap-chengdu
......
现在你已经完成了最后的设置,最后一步就是需要部署项目到COS了,输入我们熟悉的部署命令:
代码语言:txt复制hexo g -d
你会看到如下输出:
代码语言:txt复制INFO Start processing
INFO Generating Baidu urls for last 1 posts
INFO Posts urls generated in baidu_urls.txt
https://www.techeek.cn/2018/08/14/Ubuntu-DTS-translation/
INFO Files loaded in 1.24 s
INFO Generated: sitemap.xml
......
INFO 成功上传:E:Desktop临时gitwww.test.compublic2016 6 5Workerman-Tcpindex.html
INFO 成功上传:E:Desktop临时gitwww.test.compublic2017 3 9docker-lnmp-typechoindex.html
INFO 成功上传:E:Desktop临时gitwww.test.compublic2016 928dontstarve-serverindex.html
......
好了,现在我们访问你的域名看看是否上传成功了?在浏览器打开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
代码语言:txt复制git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
配置完成后,输入如下命令生成ssh密钥文件
代码语言:txt复制ssh-keygen -t rsa -C "你的GitHub注册邮箱"
接下来按三下回车就行,不创建密码,然后我们使用
代码语言:txt复制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内容如下
代码语言:txt复制# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:你的GitHub用户名/你的GitHub用户名.github.io.git
branch: master
很多教程都将repo:
写为https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
但是我个人不推荐这样写,因为有时候会因为BUG无法上传,所以我建议按照我上面的格式写。
这是执行如下命令,就可部署你的网站了
代码语言:txt复制sudo hexo deploy
部署完成后,打开https://你的GitHub用户名.github.io.git看看是不是能正常访问啦?
部署在自己的服务器
可以按照第一步的步骤在自己的服务器上提前安装好Node.js和Git,接下来在本地部署好hexo博客,撰写好文章。最后生成静态文件。当静态文件生成好之后我们需要使用如下命令部署网站,命令如下
代码语言:txt复制sudo hexo deploy
sudo hexo server
启动服务器。默认情况下,访问网址为: http://localhost:4000/,或访问你的服务器地址 http://你的服务器IP:4000/。如果使用的是腾讯云的服务器,请打开安全组的4000端口。
总结
部署hexo网站很简单,推荐在Windows部署完成后部署在COS上,因为有cdn的加持,访问速度会快很多,况且有那么多免费流量,个人博客使用足矣。建议将hexo的项目文件同步到Git上,这里我推荐腾讯Git代码托管(工蜂),为开发者提供基于 Git 的在线代码托管工具,包含代码提交/存储/下载/复刻/分支/历史/比对/合并等功能。可一站式完成对代码及代码质量管理,项目及项目人员管理,大大提升研发效率。而且支持免费的私有仓库,将hexo项目同步上去,后续哪怕是更换电脑也能快速更新博客并控制版本。