Techeek's Studio.

如何快速搭建hexo博客

字数统计: 2.9k阅读时长: 11 min
2018/10/18

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.jsGit,由于系统花样繁多,本文将仅介绍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
2
3
4
5
6
7
8
9
10
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已经正常显示版本,则不用执行下面的代码。

1
2
3
4
5
6
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,执行以下命令即可安装

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
2
3
sudo hexo init <folder>
cd <folder>
sudo npm install

同上,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
2
3
4
5
6
---
title: 这块写你文章的名称
date: 这块为创建文章的时间,可修改,格式为:年-月-日 时:分:秒
tags: [这块写你文章的标签,使用“,”隔开(注意去掉引号须包含中括号)]
---
这块写你的正文

如本文格式

1
2
3
4
5
6
---
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即可,具体如下。

1
npm install hexo-deployer-cos --save

接下面我们配置hexo的配置文件,首先打开根目录的_config.yml 配置文件,将原来的deploy替换为下面的内容:

1
2
3
4
5
6
7
deploy: 
type: cos
appId: yourAPPID
secretId: yourSecretId
secretKey: yourSecretKey
bucket: yourBucketName-yourAPPID
region: yourRegion

细心的同学发现我的配置与hexo-deployer-cos的Github项目页面给出的配置不同,为什么呢?该插件作者更新了插件,但是没更新Readme文档,用原作者的配置文件会报错。所以请用我给出的配置。那么具体配置如下。

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

那么我的_config.yml deploy配置为:

1
2
3
4
5
6
7
8
9
......
deploy:
type: cos
appId: 1251234567
secretId: ABCDEFGHIGKLMNOPQRSTUVWXYZ
secretKey: abcdefghijklmnopqrstuvwxyz
bucket: www-1251234567
region: ap-chengdu
......

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

1
hexo g -d

你会看到如下输出:

1
2
3
4
5
6
7
8
9
10
11
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

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的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
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: [email protected]:你的GitHub用户名/你的GitHub用户名.github.io.git
branch: master

很多教程都将repo:写为https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git但是我个人不推荐这样写,因为有时候会因为BUG无法上传,所以我建议按照我上面的格式写。

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

1
sudo hexo deploy

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

部署在自己的服务器

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

1
2
sudo hexo deploy
sudo hexo server

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

总结

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

CATALOG
  1. 1. 本地部署hexo开发环境
    1. 1.1. Node.js及git的安装
      1. 1.1.1. windows中Node.js及Git的安装
        1. 1.1.1.1. Node.js
        2. 1.1.1.2. Git
      2. 1.1.2. Mac中Node.js及Git的安装
        1. 1.1.2.1. Node.js
        2. 1.1.2.2. Git
      3. 1.1.3. Ubuntu中Node.js及Git的安装
        1. 1.1.3.1. Node.js
        2. 1.1.3.2. Git
    2. 1.2. hexo的安装
    3. 1.3. 如何建站
    4. 1.4. 如何写文章
  2. 2. 部署hexo到腾讯云COS
  3. 3. 部署在Github Page
    1. 3.0.1. 创建Github仓库
    2. 3.0.2. 生成ssh密钥文件
    3. 3.0.3. 部署网站
  • 4. 部署在自己的服务器
  • 5. 总结