V2CE – 如何快速搭建 hexo 博客

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

命令窗口输入以下命令

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

如遇到安装错误或其他问题,请使用编译安装。

为保证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,执行以下命令即可安装

sudo apt-get install git

hexo的安装

接下来,我们需要在本地安装hexo,hexo安装命令非常简单,只需要一步即可安装完成,具体命令窗口输入以下命令:

sudo npm install -g hexo-cli

但是值得注意的是,Windows必须去掉sudo命令即npm install -g hexo-cli,windows如何打开命令窗口请点击这里学习。Ubuntu和Mac仍使用上述命令安装即可。

如何建站

安装完Hexo等相关依赖后,请执行以下命令创建您的网站

sudo hexo init <folder>
cd <folder>
sudo npm install

同上,Windows须去掉sudo命令,Ubuntu和Mac仍使用上述命令安装即可。其中<folder>为你需要创建的网站的文件夹名称,名称无硬性要求,如我创建自己的网站,则可写为sudo hexo init techeek

没错,这样就完了,你的网站已经搭建完成。更多相关的命令解释请点击这里查看。

如何写文章

首先我们需要创建一个新的文章,默认Hexo已经为我们写了一篇为Hello Word的文章,但是为了熟悉撰写文章的过程,我们还是重头撰写一遍。

首先在您的命令窗口输入以下命令

sudo hexo new <title>

同上,Windows须去掉sudo命令,Ubuntu和Mac仍使用上述命令安装即可。其中<title>为你需要创建的文章的名称,名称无硬性要求,如我创建自己的文章,则可写为sudo hexo init hexo-tutorial

这时,找到你创建的网站目录中创建markdown源文件的地方,位置在你创建网站的名称\source\_posts下,双击编辑该文件,打开后markdown格式如下:

---
title: 这块写你文章的名称
date: 这块为创建文章的时间,可修改,格式为:年--日 时::tags: [这块写你文章的标签,使用“,”隔开(注意去掉引号须包含中括号)]
---
这块写你的正文

如本文格式

---
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相关密钥才能部署,这里我们需要获取APPIDSecretIdSecretKeyBucketRegion这五个参数,具体如下:

名称

描述

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文档,用原作者的配置文件会报错。所以请用我给出的配置。那么具体配置如下。

假如说我的APPID1251234567secretIdABCDEFGHIGKLMNOPQRSTUVWXYZsecretKeyabcdefghijklmnopqrstuvwxyz,创建的bucketwwwregion可用地区是成都,也就是ap-chengdu,这个详见准备的表格。

那么我的_config.ymldeploy配置为:

......
deploy: 
  type: cos
  appId: 1251234567
  secretId: ABCDEFGHIGKLMNOPQRSTUVWXYZ
  secretKey: abcdefghijklmnopqrstuvwxyz
  bucket: www-1251234567
  region: ap-chengdu
......

现在你已经完成了最后的设置,最后一步就是需要部署项目到COS了,输入我们熟悉的部署命令:

hexo g -d

你会看到如下输出:

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\临时\git\www.test.com\public\2016\06\05\Workerman-Tcp\index.html
INFO  成功上传:E:\Desktop\临时\git\www.test.com\public\2017\03\09\docker-lnmp-typecho\index.html
INFO  成功上传:E:\Desktop\临时\git\www.test.com\public\2016\09\28\dontstarve-server\index.html
......

好了,现在我们访问你的域名看看是否上传成功了?在浏览器打开https://www.test.com

1534242401013

我们看到项目已经上传,我们在打开COS的Bucket,看看是不是网站真的在Bucket上。

1534242479116

我们看到,服务器在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

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

配置完成后,输入如下命令生成ssh密钥文件

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

接下来按三下回车就行,不创建密码,然后我们使用

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内容如下

# 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无法上传,所以我建议按照我上面的格式写。

这是执行如下命令,就可部署你的网站了

sudo hexo deploy

部署完成后,打开https://你的GitHub用户名.github.io.git看看是不是能正常访问啦?

部署在自己的服务器

可以按照第一步的步骤在自己的服务器上提前安装好Node.jsGit,接下来在本地部署好hexo博客,撰写好文章。最后生成静态文件。当静态文件生成好之后我们需要使用如下命令部署网站,命令如下

sudo hexo deploy
sudo hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/,或访问你的服务器地址 http://你的服务器IP:4000/。如果使用的是腾讯云的服务器,请打开安全组的4000端口。

总结

部署hexo网站很简单,推荐在Windows部署完成后部署在COS上,因为有cdn的加持,访问速度会快很多,况且有那么多免费流量,个人博客使用足矣。建议将hexo的项目文件同步到Git上,这里我推荐腾讯Git代码托管(工蜂),为开发者提供基于 Git 的在线代码托管工具,包含代码提交/存储/下载/复刻/分支/历史/比对/合并等功能。可一站式完成对代码及代码质量管理,项目及项目人员管理,大大提升研发效率。而且支持免费的私有仓库,将hexo项目同步上去,后续哪怕是更换电脑也能快速更新博客并控制版本。

正文完