2023年最新详细教程!手把手教你搭建Hexo + GitLab个人博客
创始人
2024-05-26 23:26:12
0

文章目录

  • 前言
  • 一、安装和配置环境
    • 1.安装 Git
    • 2.安装 Node.js
  • 二、新建博客项目
    • 1.GitLab配置CI/CD自动化部署
      • 1.1 GitLab新建项目
      • 1.2 GitLab自建Runners
        • 1.2.1 下载gitlab-runner
        • 1.2.2 注册Runners
        • 1.2.3 安装Runners并启动
      • 1.3 添加.gitlab-ci.yml文件
    • 2.拉取和推送hexo blog
      • 2.1 拉取hexo blog
      • 2.2 推送项目
  • 三、绑定个人域名
    • 1.GitLab Pages 配置
    • 2.域名设置
      • 2.1 域名解析
      • 2.2 申请ssl证书
  • 四、写文章和更换主题
  • 总结


前言

本文适合所有想要搭建个人博客的读者(无论您是大佬🤖,🆚 还是新手小白🐼,都可放心食用),本文教程以 Windows 为例。

文章稍长,建议点赞收藏📝


一、安装和配置环境

⛔如果是已经有环境的小伙伴则可以跳过此目录

1.安装 Git

从Git官网地址:https://www.git-scm.com/download/ 下载Git 软件,按默认选项安装即可。

如果你对git命令不熟悉也没关系,这里推荐下载 Git小乌龟 🐢TortoiseGit 用熟悉的Windows界面操作git,一样按默认选项安装即可。但是,这里需要注意的是必须先安装git,再安装git小乌龟。

2.安装 Node.js

从node.js官网:https://nodejs.org/en/ 下载Node.js软件,推荐下载稳定版本,然后按默认选项安装即可。安装完成后,按win+R,输入cmd打开命令行,然后输入node --version,若能正常显示版本号,则说明安装成功。
在这里插入图片描述

二、新建博客项目

1.GitLab配置CI/CD自动化部署

CI/CD的核心概念是持续集成、持续交付和持续部署,简单来说就是当我们把代码push到GitLab时,GitLab会自动调用一个叫runners的玩意儿帮项目自动生成页面并部署。这个和在Github pages上部署博客不一样的是,Github需要先在本地生成各种静态网页和文件,然后再推送到Github pages。

1.1 GitLab新建项目

  1. 登录官网 https://gitlab.com/ 登录账户(没有账户的按提示注册账户)
  2. ✔创建一个username.github.io的项目(其中username为自己的账户名)
  3. ✔点击项目左侧 Settings > CI/CD > Runners > Enable,开启Runners

1.2 GitLab自建Runners

GitLab默认开启共享Runners,但是由于使用共享Runners需要验证,这里关掉共享Runners,用我们自建本地Runners

Pipeline failing? To keep GitLab spam and abuse free we ask that you verify your identity.Until then, shared runners will be unavailable.Validate your account or use your own runners.

  • ✔创建一个文件夹,如E:\GitLab-Runner
  • ✔下载二进制文件,改名为gitlab-runner.exe
  • 注册Runners

1.2.1 下载gitlab-runner

参考https://docs.gitlab.com/runner/install/windows.html,下载对应版本

1.2.2 注册Runners

在上面新建的E:\GitLab-Runner文件夹,打开cmd,运行二进制文件

.\gitlab-runner.exe register

按提示步骤操作,输入urltoken(在Settings-CI/CD-Runners 里面可以找到)其他可以不用填,最后输入runner执行器(这里写的shell

1.2.3 安装Runners并启动

将GitLab Runner安装为服务并启动它。您可以使用内置系统帐户(推荐)或使用用户帐户运行该服务。

打开cmd,执行命令

cd E:\GitLab-Runner
.\gitlab-runner.exe install
.\gitlab-runner.exe start

至此,自建Runners就完美结束啦! 🎉🎉🎉,那如何知道Runners是否正常呢?

Settings-CI/CD-Runners Specific runners 下面看到刚刚建的Runnner(如果前面有个绿色的圆圈,则成功运行。如果是感叹号,则没有成功)

出现问题

ERROR: Job failed (system failure): prepare environment: failed to start process: exec: “pwsh”: executable file not found in %PATH%.

解决方法

转到GitLab运行程序的安装目录,如E:\GitLab-Runner。打开config.toml文件,并用powershell替换pwsh,如下所示:

1.3 添加.gitlab-ci.yml文件

项目新增文件gitlab-ci.yml,配置如下(其中node需要填写自己下载的node版本):

image: node:16-alpine # use nodejs v16 LTS
cache:paths:- node_modules/before_script:- npm install hexo-cli -g- npm installpages:script:- npm run buildartifacts:paths:- publicrules:- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

2.拉取和推送hexo blog

2.1 拉取hexo blog

在E盘拉取Gitlab刚刚建立的项目,(这里主要用可视化界面操作,不会git命令也不用担心),右击鼠标选择clone代码,填写项目地址和分支


在这里插入图片描述

💭项目地址在这里查看
项目地址

项目拉取完成,在项目文件目录下鼠标右键点击 Git Bash Here,依次输入如下命令👇

npm install hexo-cli -g
hexo init blog

执行后,会生成blog文件,将blog内容移到项目文件目录下

在项目目录下,执行命令👇

npm install
hexo server


打开http://localhost:4000/,本地博客成功运行。

2.2 推送项目

修改_config.yml配置文件,站点url修改为https://username.gitlab.io,如下:

提交推送代码,同上,右击鼠标选择Git 提交,选择提交并推送

将文件夹push到GitLab,一旦push完成,GitLab就会开始自动部署,在 CI/CD-Pipeline 中可以看到

✔部署完成后,打开 https://username.gitlab.io/ 就能看到博客页面了。

三、绑定个人域名

如果你想要通过自定义域名访问自己的博客,可以将个人域名解析到默认域名上,这样就可以通过个人域名来访问这个博客

🚫前提是有自己的域名,没有的可以在阿里云上去购买

1.GitLab Pages 配置

可以在Deployments-Page 下进行设置

点击 New Domain,将相应的资料填入,点击完成即可。

点击create new domain之后,会出现提示This domain is not verified. You will need to verify ownership before access is enabled.

需要先验证域名,在阿里云添加一个验证域名的DNS解析

  • 记录类型选择TXT
  • 主机记录域名前缀_gitlab-pages-verification-code.www(根据自己生成的)
  • 记录值为gitlab-pages-verification-code=之后的字符串
    在这里插入图片描述
    在这里插入图片描述

2.域名设置

2.1 域名解析

打开阿里云控制台->域名->域名解析,添加个人域名指向我们的Gitlab Pages博客站点的默认域名:https://username.gitlab.io 的主机记录。

一般我们添加两条主机记录,分别是前缀www和前缀@,记录类型选择CNAME,记录值填写默认域名:username.gitlab.io 。TTL最短10分钟,也就是10分钟后域名解析生效。生效后我们就可以使用个人域名来访问这个博客了。

2.2 申请ssl证书

上面说到新建domain时,需要填写ssl证书的信息,这里简单说一下申请ssl证书的流程

控制台->SSL 证书(应用安全)->免费开启ssl证书(申请证书需要实名认证),申请ssl证书后,点击下载,选择其他,下载证书。



下载证书之后,打开将对应信息填入即可。

四、写文章和更换主题

🔴 博客已经成功搭建了,但是我们该怎么写博客呢?

🔻文章保存在项目路径 \username.gitlab.io\source_posts

用编辑器Markdow 语法编写文章

md 全称 Markdown, Markdown 是 2004 年由 John Gruberis设计和开发的纯文本格式的语法,非常的简单实用,常用的标记符号屈指可数,几分钟即可学会, .md 文件可以使用支持 Markdown 语法的编辑器编辑,然后保存文件到 \username.gitlab.io\source_posts 文件夹下即可

🔰 推荐 Windows 上使用 MarkdownPad2 或者小书匠 编辑器
🔰 macOS 上使用 Mou 编辑器
🔰 Linux 上使用 Remarkable编辑器
🔰 Web 端上使用 CSDN

🔴默认的主题比较简单,那么如何更换自己喜欢的主题呢?

🔻hexo官网github 有许多的主题可以供我们选择


找到主题的官方文档 ,按照使用文档操作即可(这里以Theme Rdefine为例)


username.gitlab.io目录下,点击Git Bash Here,执行如下 git 命令

git clone https://github.com/EvanNotFound/hexo-theme-redefine.git themes/redefine

下载成功后,你会发现你的目录*\themes**出现了 Redefine 主题*

安装完成后,在 username.gitlab.io/_config.yml配置文件中将 theme 设置为 Redefine

hexo s 本地预览一遍,成功切换主题


至此,GitLab 自动部署Hexo blog的教程全部结束了🎉🎉🎉,你可以通过https://username.gitlab.io 访问,也可以通过个人域名访问自己的个人博客

总结

⏭使用Gitlab pages部署hexo博客时,我们不需要在本地使用hexo generate命令生成博客静态网页,再push到Gitlab pages仓库,而是直接push了hexo博客的源码到Gitlab pages仓库,同时增加一个.gitlab-ci.yml文件作为CI/CD脚本,通过该文件在Gitlab服务器生成博客的静态网页,然后自动发布到Gitlab pages博客站点上。

⏭当我们要在博客上写新文章时,只需把Gitlab pages仓库中的源码pull下来,然后使用hexo新建文章,使用markdown编辑器(如typora)编辑文章,完成后将源码再push到Gitlab pages仓库中即可,Gitlab服务器会根据.gitlab-ci.yml文件重新生成博客的静态网页,然后自动发布到Gitlab pages博客站点上。

⏭我们可以点击CD/CI configuration让Gitlab服务器自动检测.gitlab-ci.yml文件,若文件正确则自动运行和发布;也可以在Gitlab左侧菜单CI/CD->Schedules中添加new schedule,这样Gitlab服务器会定时重新运行.gitlab-ci.yml文件来重新发布博客。

⏹好啦,以上就是今天要讲的全部内容啦!

关注博主,不迷路

创作不易,关注💖、点赞👍、收藏🎉就是对作者最大的鼓励👏,欢迎在下方评论留言🧐

相关内容

热门资讯

iOSapp移植到安卓系统,i... 你有没有想过,那些在iOS上让你爱不释手的app,是不是也能在安卓系统上大放异彩呢?今天,就让我带你...
现在安卓随便换系统,探索个性化... 你知道吗?现在安卓手机换系统简直就像换衣服一样简单!没错,就是那种随时随地、随心所欲的感觉。今天,就...
安卓系统安装按钮灰色,探究原因... 最近发现了一个让人头疼的小问题,那就是安卓手机的安装按钮突然变成了灰色,这可真是让人摸不着头脑。你知...
安卓7.1.1操作系统,系统特... 你知道吗?最近我在手机上发现了一个超级酷的新玩意儿——安卓7.1.1操作系统!这可不是什么小打小闹的...
安卓os系统怎么设置,并使用`... 你有没有发现,你的安卓手机有时候就像一个不听话的小孩子,有时候设置起来真是让人头疼呢?别急,今天就来...
安卓降低系统版本5.1,探索安... 你知道吗?最近安卓系统又来了一次大动作,竟然把系统版本给降到了5.1!这可真是让人有点摸不着头脑,不...
解放安卓系统被保护,解放安卓系... 你有没有想过,你的安卓手机其实可以更加自由地呼吸呢?是的,你没听错,我说的就是解放安卓系统被保护的束...
校务帮安卓系统下载,便捷校园生... 你有没有想过,你的手机里装了一个神奇的助手——校务帮安卓系统下载?没错,就是那个能让你轻松管理学校事...
安卓系统没有拼多多,拼多多崛起... 你知道吗?最近我在手机上发现了一个小小的秘密,那就是安卓系统里竟然没有拼多多这个应用!这可真是让我大...
甜城麻将安卓系统,解锁全新麻将... 你有没有听说过那个超级火的甜城麻将安卓系统?没错,就是那个让无数麻将爱好者为之疯狂的软件!今天,就让...
安卓系统卸载的软件,深度揭秘卸... 手机里的软件越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么在安卓系统里卸载那些不再需要的软...
安卓系统推荐好游戏,畅享指尖乐... 手机里的游戏可是咱们休闲娱乐的好伙伴,尤其是安卓系统的用户,选择面那可是相当广呢!今天,就让我来给你...
王者安卓系统怎么卖,揭秘如何轻... 你有没有听说最近王者安卓系统的火爆程度?没错,就是那个让无数玩家沉迷其中的王者荣耀!今天,我就来给你...
安卓开发系统内置证书,基于安卓... 你有没有想过,你的安卓手机里那些神秘的内置证书,它们到底是个啥玩意儿?别急,今天就来给你揭秘这些隐藏...
荣耀安装安卓原生系统,深度体验... 你知道吗?最近荣耀手机界可是掀起了一股热潮,那就是——荣耀安装安卓原生系统!这可不是什么小打小闹,而...
安卓13小米系统,创新功能与流... 你知道吗?最近安卓13系统可谓是风头无两,各大手机厂商纷纷推出自家的新版系统,其中小米的安卓13系统...
鸿蒙系统底层安卓10,融合与创... 你知道吗?最近手机圈里可是热闹非凡呢!华为的新操作系统鸿蒙系统,竟然在底层采用了安卓10的架构。这可...
安卓系统辅助在哪关闭,轻松关闭... 你有没有发现,安卓系统的辅助功能真是贴心到不行啊!不过,有时候这些功能太多,用起来有点乱糟糟的。别急...
安卓系统outlook邮件设置... 你有没有发现,自从你把手机升级到了安卓系统,邮件管理变得有点复杂呢?别急,今天就来手把手教你如何设置...
安卓系统停止向华为,自主操作系... 你知道吗?最近科技圈可是炸开了锅!安卓系统突然宣布停止向华为提供技术支持,这可不仅仅是两家公司之间的...