在GitLab pages上快速搭建Jekyll博客

我就是我 2022-12-04 07:49 246阅读 0赞

### 文章目录 ###

*   *  在GitLab pages上快速搭建Jekyll博客
     *  Step1: 导入已有项目
     *  Step2: 为gitlab生成ssh密钥
     *  Step3: Clone代码
     *  Step4: 创建 CI/CD配置文件
     *  Step5: 等待build，2到3分钟build完成后即可访问
     *  Step6: 绑定域名
     *  Step7: 坐等自动下发SSL证书

## 在GitLab pages上快速搭建Jekyll博客 ##

前一段时间将我的Jekyll静态博客从github pages镜像部署到了 `zeit.co`(现vercel)上了一份，最近偶然发现gitlab pages也不错，百度也会正常抓取，于是动手倒腾，将github pages快速迁移Jekyll博客到[gitlab pages][]，中途遇到了不少坑，管他呢，一把刷。

于是有了下文的 **从github pages快速迁移Jekyll博客到gitlab pages的完全指南。**

## Step1: 导入已有项目 ##

登陆[gitlab.com][]，点击`New Project`,

![screenshot1][]

点击`Import projects`,

![image.png][]

比如，我的jekyll blog对应的代码仓库是: [https://github.com/yanglr/yanglr.github.io][https_github.com_yanglr_yanglr.github.io],  
对应的访问页面为 [https://geekplayes.com][https_geekplayes.com]，  
由于我绑定了github账号yanglr，系统会将我在github下所有的分支都load进来，接下来，我选择[yanglr/yanglr.github.io][https_github.com_yanglr_yanglr.github.io],这个仓库，当然Import进来之前要记得改名为: gitlab-username.gitlab.io, 接下来等待导入完成即可。

或点击`Repo by URL`,

![image.png][image.png 1]

## Step2: 为gitlab生成ssh密钥 ##

bravo@localhost MINGW64 /d/coding/Gitlab.com
    
    $ cd ~/.ssh
    
    bravo@localhost MINGW64 ~
    
    $ ssh-keygen -t rsa -b 2048 -C "email@example.com"

然后复制id\_rsa.pub的内容，贴到gitlab profile的 settings -> ssh key中，具体入口为: [https://gitlab.com/profile/keys][https_gitlab.com_profile_keys]

![image.png][image.png 2]

如果怕github的密钥文件与gitlab的弄混，可以在执行ssh-keygen -t rsa -b 2048 -C ""时，文件名取为: `id_rsa_gitlab`

然后到 .ssh 文件夹下创建一个文件名为`config`的文件，内容如下:

# github
        Host github.com
        Hostname github.com
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/id_rsa
    
    # gitlab
        Host gitlab.com
        Hostname gitlab.com
        User legege007
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/id_rsa_gitlab

## Step3: Clone代码 ##

设置好ssh key后，我们就可以克隆代码到本地了，命令如下:

git clone https://gitlab.com/legege007/legege007.gitlab.io.git

**git clone非常慢的解决方法:**

在自己的PC上git clone太慢了，clone地址换https的速度还可以~

有能力科学地上网的小伙伴可以想办法解决。

还可以在git clone时，去掉末尾的.git

## Step4: 创建 CI/CD配置文件 ##

这部分可以直接参考gitlab官方给的 jekyll 示例 [https://gitlab.com/pages/jekyll][https_gitlab.com_pages_jekyll] 来做。

具体做法是，在本地克隆下来的代码仓库的根目录中创建文件 `.gitlab.ci.yml`, 然后贴入如下代码:

image: ruby:latest
    
    variables:
      JEKYLL_ENV: production
      LC_ALL: C.UTF-8
    
    before_script:
      - gem install bundler
      - bundle install
    
    test:
      stage: test
      script:
      - bundle exec jekyll build -d test
      artifacts:
        paths:
        - test
      except:
      - master
    
    pages:
      stage: deploy
      script:
      - bundle exec jekyll build -d public
      artifacts:
        paths:
        - public
      only:
      - master

来源: [https://gitlab.com/pages/jekyll/-/blob/master/.gitlab-ci.yml][https_gitlab.com_pages_jekyll_-_blob_master_.gitlab-ci.yml]

同理，如果你的静态博客选用的框架是hexo, 请参考项目[https://gitlab.com/pages/hexo][https_gitlab.com_pages_hexo] 下的CI/CD配置文件[https://gitlab.com/pages/hexo/-/blob/master/.gitlab-ci.yml][https_gitlab.com_pages_hexo_-_blob_master_.gitlab-ci.yml]，gitbook 项目请用 [https://gitlab.com/pages/gitbook/-/blob/master/.gitlab-ci.yml][https_gitlab.com_pages_gitbook_-_blob_master_.gitlab-ci.yml]。

如果想对gitlab CI/CD有更多的了解，请参看:

[https://gitlab.com/help/ci/quick\_start/README][https_gitlab.com_help_ci_quick_start_README]

## Step5: 等待build，2到3分钟build完成后即可访问 ##

点击页面左侧菜单中的 CI/CD,

![image5][]

大概2到3分钟build完成后即可访问，pipelines中会出现一个状态为 passed 的记录，这时就可以访问你的静态博客(pages)了，访问地址是：[legege007.gitlab.io][]，由于gitlab是为gitlab.io默认提供ssl证书的，所有此时也可以访问https版本: [https://legege007.gitlab.io][legege007.gitlab.io]。

## Step6: 绑定域名 ##

现在，我们来绑定自己的域名。

回到项目 刚才的代码仓库，比如我的是: [https://gitlab.com/legege007/legege007.gitlab.io][https_gitlab.com_legege007_legege007.gitlab.io]，点击左侧 Settings -> pages，会发现右上角有个`New Domain`,

![image6][]

比如，我想绑定到: `geekplayers.com`，填进去，点"Create New Domain"即可。

![image7][]

接下来会看到以下界面:

![image8][]

此时，需要在域名管理网站(比如，我在腾讯云上买的域名，我需要登陆 [https://console.cloud.tencent.com/cns][https_console.cloud.tencent.com_cns])，然后在里面先后分别添加一条类型为TXT和一条类型为CNAME的记录。

<table> 
 <thead> 
  <tr> 
   <th>主机记录</th> 
   <th>记录类型</th> 
   <th>线路类型</th> 
   <th>记录值</th> 
   <th>MX优先级</th> 
   <th>TTL（秒）</th> 
   <th>最后操作时间</th> 
   <th>操作</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>_gitlab-pages-verification-code.web</td> 
   <td>TXT</td> 
   <td>默认</td> 
   <td>gitlab-pages-verification-code=319ec4807facc9d92c6c62ba4efd1ccf</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>blog</td> 
   <td>CNAME</td> 
   <td>默认</td> 
   <td>legege007.gitlab.io.</td> 
   <td>-</td> 
   <td>600</td> 
   <td>2020-08-30 11:03:33</td> 
   <td>修改暂停删除</td> 
  </tr> 
 </tbody> 
</table>

TXT那一条加完之后，可以点击 Verify Status 右侧的 红色按钮旁边的 ↶ ↺ ⟲ 按钮验证网站所有权，该按钮会变成绿色，接下来点击页面下方的"Save Changes"。

## Step7: 坐等自动下发SSL证书 ##

最后就是等gitlab自动下发ssl证书。

大概再需要等6分钟左右，页面上的Domain会从http版的 [http://blog.geekplayers.com][http_blog.geekplayers.com] 变为: [https://blog.geekplayers.com][https_blog.geekplayers.com]，表明SSL证书已成功获取。

至此，gitlab pages构建完毕。如有疑问，欢迎在评论区提问交流~

> 作 者: Bravo Yeung  
> 首发于: [在GitLab pages上快速搭建Jekyll博客 - 极客玩家大白][GitLab pages_Jekyll_ -]

如需转载，请注明出处: [https://www.geekplayers.com/migrate-from-github-pages-to-gitlab-pages.html][GitLab pages_Jekyll_ -]

[gitlab pages]: https://web.geekplayers.com
[gitlab.com]: https://gitlab.com
[screenshot1]: /images/20221123/a406e70cf0a14aa295e9658114ef683e.png
[image.png]: /images/20221123/e495483b07ee48e68c080d650ed513bc.png
[https_github.com_yanglr_yanglr.github.io]: https://github.com/yanglr/yanglr.github.io
[https_geekplayes.com]: https://geekplayes.com
[image.png 1]: /images/20221123/9211c0f10fb041eab3ec73932e34667e.png
[https_gitlab.com_profile_keys]: https://gitlab.com/profile/keys
[image.png 2]: /images/20221123/28f5088c5e9840798c0e38fe050207a4.png
[https_gitlab.com_pages_jekyll]: https://gitlab.com/pages/jekyll
[https_gitlab.com_pages_jekyll_-_blob_master_.gitlab-ci.yml]: https://gitlab.com/pages/jekyll/-/blob/master/.gitlab-ci.yml
[https_gitlab.com_pages_hexo]: https://gitlab.com/pages/hexo
[https_gitlab.com_pages_hexo_-_blob_master_.gitlab-ci.yml]: https://gitlab.com/pages/hexo/-/blob/master/.gitlab-ci.yml
[https_gitlab.com_pages_gitbook_-_blob_master_.gitlab-ci.yml]: https://gitlab.com/pages/gitbook/-/blob/master/.gitlab-ci.yml
[https_gitlab.com_help_ci_quick_start_README]: https://gitlab.com/help/ci/quick_start/README
[image5]: /images/20221123/4c5798fc4f7d4d85b4b1e226d870987f.png
[legege007.gitlab.io]: https://legege007.gitlab.io
[https_gitlab.com_legege007_legege007.gitlab.io]: https://gitlab.com/legege007/legege007.gitlab.io
[image6]: /images/20221123/2f8b8c14df4e4fd2a0c4418a95d45b4f.png
[image7]: /images/20221123/2138a689f6f1426e89cf23dd74fd7f89.png
[image8]: /images/20221123/3b74ffed8eac4a5eac0e316c94996288.png
[https_console.cloud.tencent.com_cns]: https://console.cloud.tencent.com/cns
[http_blog.geekplayers.com]: http://blog.geekplayers.com
[https_blog.geekplayers.com]: https://blog.geekplayers.com
[GitLab pages_Jekyll_ -]: https://www.geekplayers.com/migrate-from-github-pages-to-gitlab-pages.html