当前位置: 首页 > news >正文

2023年最新详细教程!手把手教你搭建Hexo + GitLab个人博客

文章目录

  • 前言
  • 一、安装和配置环境
    • 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证书后,点击下载,选择其他,下载证书。



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


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

总结

以上就是今天要讲的内容,本文仅仅详细介绍了如何使用 GitLab 搭建个人博客,使用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文件来重新发布博客。

当然,教程下载的博客模板主题比较简单,后面如果需要选择自己喜欢的主题,可以去hexo官网或github上查找

最后附上hexo官网 https://hexo.io/zh-cn/

关注博主,不迷路

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

http://www.lryc.cn/news/19893.html

相关文章:

  • centos7安装
  • java String类(超详细,含常用方法、面试题,内存图,案例)
  • 哈希表以及哈希冲突
  • 测试——基本概念
  • SnowFlake 雪花算法和原理(分布式 id 生成算法)
  • 【死磕数据库专栏】MySQL对数据库增删改查的基本操作
  • 阿里软件测试二面:adb 连接 Android 手机的两种方式,看完你就懂了
  • Docker安装YApi
  • springboot自定义参数解析器
  • Python Unittest ddt数据驱动
  • Vue自定义组件遇到分页传输数据不正确解决办法
  • ABAP 辨析CO|CN|CA|NA|CS|NS|CP|NP
  • RK3568平台开发系列讲解(设备驱动篇)Pinctrl子系统详解
  • ROS小车研究笔记:二维SLAM建图简介与源码分析
  • 番外9:使用ADS对射频功率放大器进行非线性测试1(以IMD3测试为例)
  • 车载软件背景(留坑)
  • Hadoop-MapReduce
  • ChatGPT来了,软件测试工程师距离失业还远吗?
  • 【项目实战】Linux服务管理 之 开启/关闭防火墙
  • OSS存储使用之centOS系统ossfs挂载
  • 【项目实战】SpringBoot多环境(dev、test、prod)配置
  • Laravel框架01:composer和Laravel简介
  • 【bug】Transformer输出张量的值全部相同?!
  • 【LeetCode】剑指 Offer(8)
  • 安装MySQL数据库
  • 手写Android性能监测工具,支持Fps/流量/内存/启动等
  • Java知识复习(三)Java IO
  • Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单
  • 2023年全国最新会计专业技术资格精选真题及答案5
  • 软工个人作业 -- 分析与提问