使用Hexo快速搭建博客并部署到GitLab
Hexo?介是个嘛呀?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
在这篇文章中,我们将从如何安装开始,实现Hexo博客平台搭建,写出第一篇文章,了解 GitLab Runner 并借助GitLab将博客部署到个人仓库以实现浏览器访问,申请自己的域名及https证书,最后将博客地址提交到搜索引擎以让大家能够搜索到你。
为了达到最佳阅读体验,请于右上角开启夜间模式
准备工作
安装 Hexo 相当简单,只需要在自己对应的平台先安装下列应用程序即可:
- Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 - Git
Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。
(其实很简单,只需要无脑Next即可)
Hexo依赖于Node.js执行环境及其npm包管理器,同时也需要Git来拉取资源,若完成了上述软件的安装,即可进行下一步。
当然,你也可以去查看一下官方的说明文档
安装Hexo
很简单,安装Hexo只需要一条命令即可,而它被显示在了Hexo主页最显眼的位置
1 |
|
例如在Windows下,打开命令提示符cmd或powershell终端并执行安装命令
Linux 下也是同样的操作,但是如果不想面对满屏的ERROR,记得加上sudo或以root身份执行
如果正确安装,通过命令hexo version
可以查看版本号。
初始化&运行
如果已经安装好了Hexo,我们只需要敲击简单的命令行即可初始化博客,不过首先我们需要找一个用于放置博客的文件夹,注意这个文件夹必须是空的,这里我新建了一个名为test
的文件夹,然后我们cd到这个空文件夹内(或者在这个位置打开终端),执行如下命令以初始化Hexo
1 |
|
如果使用的终端是Windows PowerShell
的话可能会出现“无法加载文件,因为在此系统上禁止运行脚本”的报错,这是因为PowerShell
默认执行策略是禁止脚本命令运行的,可以敲击cmd进入命令提示符再执行初始化,或者以管理员身份打开PowerShell
的同时执行Set-ExecutionPolicy RemoteSigned
,将Powershell
的执行策略更改为RemoteSigned
看不明白?这里我们逐行翻译一下大意,第一行表明Hexo正在从https://github.com/hexojs/hexo-starter.git
这个地址获取Hexo启动器相关文件,而第二行则提示无法从这个地址获取文件,原因是无法解析GitHub.com
,于是第三行提示将从本地安装的Hexo文件中复制一份启动器到当前目录,第四行安装依赖文件,第五行提示安装成功。
考虑到国内GitHub的确经常抽风,这是正常现象,看到这个高亮的 WARN 不要紧张,当然不排除网络质量好的时候能直接从云端获取资源。
到这里,你会发现文件夹里面已经出现了很多东西:
接下来,在刚才的终端内输入启动命令:
1 |
|
这时候按住Ctrl点击Hexo启动器给出的连接,即可在本地访问渲染后的博客页面:
当想结束渲染服务时,按下Ctrl+C退出渲染器。
到了这一步,如果恰好你有一台服务器、并且恰好拥有公网IP,或者有那么一些关于隧道的知识,你已经可以通过上述这些方式将预览地址发布出去供他人访问了。
更新第一篇推文
Hexo使用Markdown
作为主要编辑语言,在开始前,倘若你对此没有任何了解也无需担心,Markdown
标记语言入门十分容易,看看这里就能有所收获。
若你对Markdown
有所了解或者想之后再了解,那让我们先Ctrl+C退出渲染器,执行下列命令来创建一篇新文章或者新的页面:
1 |
|
在命令中可以指定文章的布局(layout),默认为 post,以及文章标题(title)可以通过修改 _config.yml
中的 default_layout
参数来指定默认布局。
Hexo 有三种默认布局:post、page 和 draft。在创建这三种不同类型的文件时,它们将会被保存到不同的路径;而自定义的其他布局和 post 相同,都将储存到 source/_posts
文件夹。
布局 | 路径 |
---|---|
post | source/_posts |
page | source |
draft | source/_drafts |
<其他> | 详见对应主题 |
你可以在source/_posts
下找到Hexo默认生成的文章
实际上,也可以手动在这个目录下建立.md
文件并开始编写,但是需要注意每个文章起始都有一些用于渲染器的内容信息
这些文章标签在不同主题及设置下有不同的功能及扩充,但大致都包含如下几种:
标签 | 功能 |
---|---|
title | 指定文章标题 |
date | 指定文章时间 |
tags | 指定文章内容标签摘要 |
categories | 指定文章归档内容 |
<其他> | 详见对应主题 |
新建文章或文件后,启动渲染器,即可通过浏览器预览页面,事实上也可以开启渲染器的情况下直接在source/_posts
文件夹内新建文章或者编写文章,刷新一下浏览器即可实现一边预览一边编辑
要注意的是,所有的图片文件都属于资源文件,文章对应的图片文件需要放到对应主题的source/
文件夹下,并在文章内时使用相对路径索引,且必须以/
指代对应的source
路径开头,否则无法显示,详见Hexo资源文件夹说明
主题&美化
默认主题太丑?没关系,你可以在官方的主题收纳页找到更多符合你 XP 审美的主题,不论二次元极致味冲还是简洁看板类型都能在这里找到,通常下载连接都藏在各个特色十足的页面角落,每个主题都有其对应的个性化配置文件,所以这里不一一展开,具体到对应的主题发布页查看说明文档即可。
此外,Hexo主题大多都归档发布在GitHub
上,所以有时候打开需要科学上网,这里我推荐网易UU加速器-免费学术加速稳定链接不&awdawd^&$%^,我真的没收广告费,网易速速给我打钱
为了进行下去我们需要知道….
到了这里,我们已经成功在自己的电脑上部署了Hexo,并且运行了渲染器实现浏览器访问,甚至为了满足自己的XP完成了美化工作,但是大部分人可能并没有公网IP或者服务器资源,我们现在所做的事情无异于自娱自乐,这个网站现在还仅仅只能在渲染器运行时通过本地链接访问,并不能拿去装B分享给你的朋友访问。
我们仔细想一想,网页能够访问的前提,是渲染器正常工作,且有一个大家都能访问的地址,那么有没有什么办法能够让我们的博客部署到一个24小时不下线、不收费且不论何人何时何地只要有网都能正常访问的地方呢?
有的,那就是 GitHub/GitLab/Gitee 等代码托管平台,并且Hexo官方部署说明文档里也有提及
对于程序员来说,这东西肯定是至少没用过也必须听说过,对于我们部署博客的目的来说,Git发挥的作用就相当于一个云盘,存储着我们的博客网页供大家访问而已。
请放心,这个过程并不复杂,对于许多过程我们都可以忽略,我们只需要知道Git仓库的概念,Git拉取、推送的操作即可,只要细心一些是可以掌握的,详情可以参考如下链接,或者搜索一些视频教程:
当然我尽可能把后续步骤以过程化的形式展现,所以读者也可以试试跟着走
个人比较推荐使用VsCode图形化Git操作方式,并且因为GitHub神奇的网络特性且没有中文支持,我建议使用国内可以正常访问的Gitee或GitLab,由于个人习惯原因本文将以GitLab为目标平台。
为此读者需要自行创建一个GitLab账号,到那时由于GitLab使用了谷歌人机验证系统,在注册时会有一个验证码出不来且不易察觉,所以建议大家科学上网或者使用GitHub等方式代理登陆。(虽然不知道为什么UU加速器居然可以加载出这玩意来)
初次注册及登陆时GitLab默认语言偏好为英文,可以在右上角点击自己头像找到偏好设置->本地化->语言偏好,并将其设置为中文,不要忘了翻到下面保存偏好设置
随后我们需要对账户进行ssh令牌设置,这里插入一段ssh的简单介绍:
SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定;SSH 为建立在应用层基础上的安全协议。SSH 是较可靠,专为远程登录会话和其他网络服务提供安全性的协议。利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。SSH最初是UNIX系统上的一个程序,后来又迅速扩展到其他操作平台。SSH在正确使用时可弥补网络中的漏洞。SSH客户端适用于多种平台。几乎所有UNIX平台—包括HP-UX、Linux、AIX、Solaris、Digital UNIX、Irix,以及其他平台,都可运行SSH。
简单来说,为了与Git服务器通信,我们需要在自己的电脑上生成一个ssh密钥,并将其登记到Git服务器,我们可以在终端内输入以下命令以ed25519算法进行ssh密钥生成:
1 |
|
在生成过程中会提示你输入要保存的文件位置、掩码、确认掩码等,本人建议是一路直接回车(不然你可能需要面临指定ssh密钥令牌路径等问题)
对于Linux也是一样的操作,且如果执行正确,会看到富有标志性的Randomart Image
,生成结束后可以在当初指定的位置找到密钥文件,如果是按照默认位置生成的,那可以前往终端的提示括号内容指向路径(对于Windows用户而言这个路径通常是C:\Users\<用户名>\.ssh
)找到对应的两个密钥文件,我们需要以记事本方式打开.pub
结尾的公钥文本,并复制其中的内容添加到GitLab SSH令牌,你可以在偏好设置里找到它
如果生成发现生成路径下有两组以上的ssh密钥,请删掉他们并重新生成,确保只有一套密钥存在,以免因为密钥配置引发的权限相关问题,并且对于密钥的内容,不要对外公开!!不要对外公开!!不要对外公开!!
本文中出现的一切密钥明文仅作说明使用,后续会被销毁。
新建一个仓库并推送内容
为了将博客相关内容上传到GitLab,我们需要新建一个项目仓库,你可以在左上角的菜单里面找到它:
GitLab提供了几种项目类型模板,这里我们选择新建空白项目,项目URL+标识串与最终生成的博客网页链接有关系,如果你想让你的网页以 https://<你的ID>.gitlab.io
的方式访问,那么这个项目标识串就应当为 <你的ID>.gitlab.io
且在你个人的项目URL名称空间下,这样最稳妥且不会重名,此外也可以随便起一个项目名称就好,但因为毕竟是用了人家的托管服务,这个仓库的页面服务还是会在gitlab.io
域名下,归档到 https://<项目 URL>.gitlab.io/<项目标识串>
,此外也不是没有别的网页地址方式,后面我们可以申请自己的域名地址来映射到你的博客,实现类似http://世界超一流大学.com的访问方式。
项目标识串通常是与项目名称同名自动填充的,但不支持中文及任何特殊字符,并且我们不需要自述文件所以取消勾选,因为我自己的博客已经存在,所以这里我以blog.gitlab.io
为项目名称及标识串
项目仓库新建完成后先不要关闭它,稍后会用到,如果你已经关闭了,你可以到你的个人项目里找到它。
我们需要去之前博客所在文件夹内新建两个文件,注意文件名不要打错了,如果你的电脑没有后缀名显示,那么请先前往控制面板取消文件后缀名隐藏:
需要新建的两个文件及内容如下,你可以新建txt文本并填充内容后修改文件名为目标文件名:
.gitignore
1
2
3
4
5
6
7
8
9
10
11# .gitignore 文件的内容
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml.gitlab-ci.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19# .gitlab-ci.yml 文件的内容
image: node:10-alpine # use nodejs v10 LTS
cache:
paths:
- node_modules/
before_script:
- npm install hexo-cli -g
- npm install
pages:
script:
- hexo generate
artifacts:
paths:
- public
only:
- master
.gitignore
用于告知Git需要忽略哪些文件,如果你的文件夹内已经存在它,那么请检查其中是否包含了public/
条目,如果没有请记得务必加上;.gitlab-ci.yml
是一个用于GitLab CI/CD的流水线脚本,它能够指挥GitLab执行器生成我们博客的页面并部署GitLab Pages页面托管服务,这个我们稍后会提到
向博客目录文件夹内添加完这两个文件后,我们在 博客所在目录 打开终端,执行Git指令上传博客相关文件到我们刚才建立的仓库,如果你是第一次使用Git,还需要执行下面两条指令来设置你的基本信息:
1 |
|
这个用户名和邮箱地址仅作为上传仓库时的信息标记,并不用于任何实质性的身份验证,这部分的工作已经由ssh来完成了,所以大家随便填写即可。
随后我们依次执行以下指令(注意不要连注释一块复制了):
1 |
|
项目仓库的ssh地址可以在仓库页面的“克隆”处找到:
在敲击git add *
与git commit -m 'first commit'
时会可能出现很多带warning
文件信息刷屏,是正常现象,这与文件行尾序列为RF或CRLF有关,但是Git会自动处理好,这里不多展开,当git push -u origin master
执行完成后,你可以刷新一下项目仓库页面,可以看到文件已经成功推送上来了
一切执行正确的话,除了在项目仓库页面看到提交的文件外,GitLab还非常“贴心”地向你的右键发送了一封CI/CD流水线失败地邮件,这是正常的,原因是GitLab找不到流水线执行所需的执行器(Runner),不用担心,我们慢慢来解决这个问题。
GitLab Runner?能吃吗?
当然不能,从名字就可以看出来,GitLab Runner 就是个负责跑腿的(Runner)家伙,好比你上网买了个东西、点了个外卖,快递员和配送员给你跑腿把东西送到你手里,GitLab Runner,也称执行器(或者跑腿的也行)通过获取仓库内.gitlab-ci.yml
文件内容来确定自己需要做些什么,前面我们已经为仓库添加了一份Runner需要执行的任务清单,让我们来详细看一下里面的内容都有何种含义:
# .gitlab-ci.yml 文件的内容
image: node:10-alpine # 指定工作环境镜像为 nodejs v10 LTS
cache: # 指定请求相关文件或目录
paths: # cache请求的目录条目
- node_modules/ # 目录条目
before_script: # 执行前脚本,通常是为接下来的任务做环境准备的
- npm install hexo-cli -g # 通过npm安装hexo客户端
- npm install # 安装npm软件包及其依赖的软件包
pages: # pages任务
script: # 脚本内容
- hexo generate # hexo静态文件生成,会将静态文件生成到public目录下
artifacts: # 产物指定
paths: # 产物路径指定
- public # 指定产物路径为public
only: # 指定pages任务条件
- master # 指定pages任务只在master分支执行
以上的执行过程就是一条CI/CD流水线,当然这只是DevOps环节中最简单的应用方式之一,如果你想了解更多可以看这里===>MicrosoftAzure-什么是 DevOps?
你会发现这张清单无非就是让Runner去执行了一些脚本命令,事实上也确实如此,我们甚至可以自己执行上述内容,并手动将Hexo生成的public目录上传到仓库并开启GitLab Pages服务,但如果每次都要冒着环境配置不正确或记错指令及操作步骤的风险去执行这个过程,未免着实不太雅致,有了跑腿的执行器,这些过程都会变得准确且自动化,CI/CD流水线将在仓库有更新提交时自动寻找Runner执行流水线任务,前提是你为项目仓库的流水线配置了至少一个可用的Runner。
为项目仓库配置Runner
GitLab为项目社区提供了许多公开免费的共享Runner,这些共享Runner的存在好比免费且不知疲倦的外卖员,极大地促进利好了社区项目构建及个人开发者的工作,但因为Runner毕竟是一个个真实存在的执行器,所以难免有心怀不轨之人想借这点微妙的算力做些有违社区初衷的事情,自某个时间点起GitLab对共享Runner策略作出了一些调整,每个使用共享Runner的用户都必须向GitLab提供真实的信用卡信息以验证身份,且对每月的共享Runner执行时间做出了限制(本文时间点为每账号每月400min),如果你恰好有一张VISA信用卡(没错,普通的储蓄卡/借记卡是不行的),那么可以在CI/CD流水线的失败任务里找到身份验证设置:
当然,并不是所有人都有这个条件,而且共享Runner的精神虽然高尚,但那点可怜的带宽未免还是让人有些膈应……
我们可以在自己的设备上安装一个Runner执行器,用于项目仓库的流水线任务,并且因为是自己的,所以不用担心每月配额及被心怀不轨之人滥用的情况,你所需要做的就是安装下载一个GitLab Runner:
如果是windows用户,这里有64-bit
和32-bit
的直链,点击下载即可。
下载完成后,我们将其更名为gitlab-runner.exe
并将其放置到一个不经常使用但能够找到的目录下,并在此目录下以管理员身份打开终端输入以下指令以配置Runner:
gitlab-runner.exe install //安装GitLab Runner 服务
gitlab-runner.exe register //注册GitLab Runner 到Git服务器
第二条指令执行后,会要求你输入希望注册的任务派发服务器URL,注册令牌(Token),对此执行器的描述,对此执行器的标签设置,增加可选描述,执行器工作方式等等,任务派发服务器URL,注册令牌Token可以在项目仓库的CI/CD设置里找到,顺便记得关闭右侧的共享Runner。
一切执行顺利的话,你将会在CI/CD设置种找到刚刚注册的Runner执行器,让我们点击编辑,勾选允许执行未被标记的任务
以安排它能够执行所有来自流水线的所有任务:
对于windows用户,我们随后需要找到GitLab所在目录下多出的config.toml
文件,我们以记事本方式打开它,并将shell = "pwsh"
条目更改为shell = "powershell"
(注意不要破坏缩进),并确保已经将powershell
执行策略策略设置为了RemoteSigned
,如果没有请跳转到这里,随后回到终端(如果你已经关闭了请重新在Runner目录以管理员身份打开),输入以下指令让执行器开始工作:
gitlab-runner.exe run
此时保持GitLab Runner在后台工作,我们前往GitLab手动为master分支触发一下之前失败的流水线(不需要设置变量):
可以看到流水线正在开始执行,而你的终端也开始弹出消息,稍等片刻后流水线便执行完毕,可以看到绿色的通过字样及GitLab向你邮箱发来的贺电:
我们可以在项目仓库的Pages服务里查看生成的页面链接:
正常来说,你能够看到和在本地预览时一样的画面,但不排除少数人在创建仓库时起了些特立独行的名称,所以可能会出现页面显示不正常的情况,这时你可以回到项目仓库主页,找到_config.yml
并打开,使用Web IDE编辑它,将url: http://example.com
条目后的链接更改为你在Pages服务看到的链接,并提交上传(在本地仓库,你应该执行git pull
来同步这个操作),也可以直接修改本地仓库的_config.yml
,并执行git add *
拟存储,git commit -m '<确认提交的消息记录>'
确认存储记录,最后执行git push
推送到GitLab仓库,对于所有的仓库文件更改(包括博客文档更新)你都可以这么做,流水线会自动对每一次的推送执行任务,等待流水线再次执行完毕后即可刷新查看页面,且如果你希望这个页面能被所有人看到,那么请根据提示前往左侧 项目设置->通用->可见性->Pages 修改为所有人可见
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!