1. 程式人生 > >在GitLab pages上快速搭建Jekyll部落格

在GitLab pages上快速搭建Jekyll部落格

前一段時間將我的Jekyll靜態部落格從github pages映象部署到了 `zeit.co`(現vercel)上了一份,最近偶然發現gitlab pages也不錯,百度也會正常抓取,於是動手倒騰,將github pages快速遷移Jekyll部落格到[gitlab pages](https://web.geekplayers.com),中途遇到了不少坑,管他呢,一把刷。 於是有了下文的 **從github pages快速遷移Jekyll部落格到gitlab pages的完全指南。**
## Step1: 匯入已有專案 登陸[gitlab.com](https://gitlab.com),點選`New Project`, ![screenshot1](https://cdn.jsdelivr.net/gh/yanglr/images/1598757602233-a850ea96-39a9-4cff-bdf9-c320d5d2d744.png) 點選`Import projects`, ![image.png](https://cdn.jsdelivr.net/gh/yanglr/images/1598757844067-819530aa-262f-4971-bead-71c9c1b6abac.png) 比如,我的jekyll blog對應的程式碼倉庫是:
, 由於我綁定了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](https://cdn.jsdelivr.net/gh/yanglr/images/1598758018132-66be5558-b6cb-424f-9b5f-62d422cf9f13.png)
## Step2: 為gitlab生成ssh金鑰 ```bash bravo@localhost MINGW64 /d/coding/Gitlab.com $ cd ~/.ssh bravo@localhost MINGW64 ~ $ ssh-keygen -t rsa -b 2048 -C "[email protected]" ``` 然後複製id_rsa.pub的內容,貼到gitlab profile的 settings -> ssh key中,具體入口為: ![image.png](https://cdn.jsdelivr.net/gh/yanglr/images/1598759369549-f23ad8d1-68f8-4f97-97d8-380c00fdb743.png) 如果怕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後,我們就可以克隆程式碼到本地了,命令如下: ```bash 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 示例 來做。 具體做法是,在本地克隆下來的程式碼倉庫的根目錄中建立檔案 `.gitlab.ci.yml`, 然後貼入如下程式碼: ```yaml 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 ``` 來源: 同理,如果你的靜態部落格選用的框架是hexo, 請參考專案 下的CI/CD配置檔案,gitbook 專案請用 。 如果想對gitlab CI/CD有更多的瞭解,請參看:
## Step5: 等待build,2到3分鐘build完成後即可訪問 點選頁面左側選單中的 CI/CD, ![image5](https://cdn.jsdelivr.net/gh/yanglr/images/1598758942346-5b456249-ea92-4ff9-8919-c83ac7c9067c.png) 大概2到3分鐘build完成後即可訪問,pipelines中會出現一個狀態為 passed 的記錄,這時就可以訪問你的靜態部落格(pages)了,訪問地址是:[legege007.gitlab.io](https://legege007.gitlab.io),由於gitlab是為gitlab.io預設提供ssl證書的,所有此時也可以訪問https版本:
## Step6: 繫結域名 現在,我們來繫結自己的域名。 回到專案 剛才的程式碼倉庫,比如我的是: ,點選左側 Settings -> pages,會發現右上角有個`New Domain`, ![image6](https://cdn.jsdelivr.net/gh/yanglr/images/1598759747911-24a52910-8a9f-46e6-8470-a2454a915fda.png) 比如,我想繫結到: `geekplayers.com`,填進去,點"Create New Domain"即可。 ![image7](https://cdn.jsdelivr.net/gh/yanglr/images/1598759978763-86f36d62-1a3f-4e6d-9f8e-0d55b4dc06f8.png) 接下來會看到以下介面: ![image8](https://cdn.jsdelivr.net/gh/yanglr/images/1598760055832-ed221625-27e7-4eeb-91fa-9606b235f19f.png) 此時,需要在域名管理網站(比如,我在騰訊雲上買的域名,我需要登陸 ),然後在裡面先後分別新增一條型別為TXT和一條型別為CNAME的記錄。 | 主機記錄 | 記錄型別 | 線路型別 | 記錄值 | MX優先順序 | TTL(秒) | 最後操作時間 | 操作 | | ----------------------------------- | -------- | -------- | ------------------------------------------------------------ | -------- | --------- | ------------------- | ------------ | | _gitlab-pages-verification-code.web | TXT | 預設 | gitlab-pages-verification-code=319ec4807facc9d92c6c62ba4efd1ccf | | | | | | blog | CNAME | 預設 | legege007.gitlab.io. | - | 600 | 2020-08-30 11:03:33 | 修改暫停刪除 | TXT那一條加完之後,可以點選 Verify Status 右側的 紅色按鈕旁邊的 ↶ ↺ ⟲ 按鈕驗證網站所有權,該按鈕會變成綠色,接下來點選頁面下方的"Save Changes"。
## Step7: 坐等自動下發SSL證書 最後就是等gitlab自動下發ssl證書。 大概再需要等6分鐘左右,頁面上的Domain會從http版的 變為: ,表明SSL證書已成功獲取。 至此,gitlab pages構建完畢。如有疑問,歡迎在評論區提問交流~ > 作 者: 大白 > 首發於: [在GitLab pages上快速搭建Jekyll部落格 - 極客玩家大白](https://www.geekplayers.com/migrate-from-github-pages-to-gitlab-page