如何搭建个人网页（二）—— Gitlab Pages部署

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 2.2k 阅读时长 ≈ 4 分钟

开始

前面讲到了Hexo的安装和基本使用，但是此时我们还是只能在本地预览网页，如何讲网页部署到线上去，让所有人都能看到呢？这里我们就将要借助gitlab pages的静态代码托管功能了。当然也有很多其他方案（详见第六章），但是gitlab pages是免费的，同时配置起来也比较简单。

本篇文章将主要讲搭建个人网页的第二步，包括gitlab基础，创建gitlab项目和gitlab pages部署。

一 Gitlab

GitLab 是一个基于 Git 的 DevOps 平台，集代码管理、持续集成/持续部署（CI/CD）、项目管理和版本控制于一体，为开发团队提供了从代码开发到部署的完整工具链。它支持私有仓库和公有仓库，提供了灵活的权限管理、代码评审功能以及高效的协作工具，适合团队协作开发。此外，GitLab 还具备强大的自动化能力和自托管选项，可以帮助团队提高开发效率并简化交付流程，是现代软件开发中的一站式解决方案。

Gitlab可以看作是另一个Github。

首先，我们需要有一个gitlab账号，访问这里 https://gitlab.com注册和登录。

记得在设置里将你的ssh公钥添加进去，具体操作可以参考gitlab添加SSH密钥——查看本地密钥 & 生成ssh密钥-CSDN博客。

f8d0e345b6a8d9840bde785ceec41c50

二 创建gitlab项目

在gitlab中，我们依次点击“项目/新建项目/创建空白项目”。

项目名称这里填 <用户名>.gitlab.io，可见性级别设为 public/公开，将README.md去掉，然后新建项目。

image-20241212203829525

这个时候我们应该可以看到一个新的项目，并且里面是空的，后面我们网页的代码会被推送到这里，并自动构建部署。

注意这里，如下图所示，进入项目“设置/通用/可见性，项目功能，权限/Pages”，把这个改成“具有访问权限的任何人”，不然其他人还是看不了你的网页的（这个点没教程提过，被坑惨了）。

7a056885798b92df61c30c3bf8a9a72c

三 Gitlab Pages部署

GitLab Pages 是 GitLab 提供的一项静态网站托管服务，允许用户通过 GitLab 仓库轻松部署和管理静态网站。它支持自定义域名和 HTTPS，并可以通过 GitLab CI/CD 管道自动生成和部署网站，适用于个人博客、项目文档、产品宣传页等场景。用户可以自由选择生成静态网站的工具（如 Hexo、Jekyll、Hugo），并直接将代码推送到仓库中，由 GitLab Pages 负责构建和发布。其简单易用的特点让开发者无需额外配置服务器，即可快速上线静态网站。

还记得我们的hexo项目吗？打开 /blog/_config.yml，这份文件很重要，我们称其为 站点配置文件，以后还会多次使用到它。

翻到最后的deploy，改成下面这样，注意这里的repository应该换成你的仓库名，例如：

1
2
3
4
deploy:
  type: git
  repository: git@gitlab.com:jinqq/jinqq.gitlab.io.git
  branch: main

按这样配置以后，hexo就知道应该把代码部署到哪里去了。

然后在blog/目录下，首先安装Git部署插件：

1
npm install hexo-deployer-git --save

然后输入我们上一章讲过的三个命令：

1
2
3
hexo clean
hexo g   
hexo d

如果你能看到类似下面的内容，说明成功了：
image-20241212204704488

此时到我们的gitlab项目中，应该可以看到仓库中多了很多文件（如果你仔细观察，可以发现这些文件其实就是blog/public里的内容，hexo d在这里就相当于进行了一次push操作）。

但此时我们还需要最后一步，在gitlab你的项目中，上传一份 .gitlab-ci.yml 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r ./* .public
    - rm -rf public
    - mv .public public
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

10caab19532c0d3c289bb85bacbfa38e

当gitlab看到这份文件后，就会自动开始CI/CD构建。

GitLab Pages 构建流程基于 GitLab CI/CD 自动化完成：当你将代码推送到 GitLab 仓库后，GitLab 会读取 .gitlab-ci.yml 文件，触发 CI/CD 流水线。通过 GitLab Runner，运行指定的命令生成静态文件（如 HTML、CSS、JS），并将这些文件作为 artifacts 部署到 GitLab Pages 服务器上。最终，网站会托管在一个默认 URL 或自定义域名下，用户可以直接访问。这一流程实现了从源码到静态网站的全自动化部署。

此时只要等待构建成功即可，类似下面的状态。

image-20241212205119906

然后在浏览器访问https://<你的用户名>.gitlab.io，就可以看到你的网站已经成功部署了，大功告成！

image-20241212205348558

新注：在阅读完本章后，动手之前强烈建议先阅读第七章。

继续

在第零章里我们提过，在markdown里插入的图片是默认保存在本地的，这样发布到线上之后肯定是无法看到的，因此我们需要借助图床来存储这些图片，接下来就会讲如何使用图床。