工作協(xié)同圖片

簡介

現(xiàn)在個(gè)人博客通常有比較多的選擇，如果不想要自己購買服務(wù)器實(shí)現(xiàn)靜態(tài)博客的發(fā)布，可以在簡書、CSDN等平臺建立自己的賬號并發(fā)布，但是原始數(shù)據(jù)無法在本地管理；如果想要數(shù)據(jù)完全自己管理，可以使用GitHub或者Gitee Pages功能發(fā)布自己的博客，利用Hugo或Hexo等成熟的靜態(tài)博客將md文件轉(zhuǎn)換成靜態(tài)網(wǎng)站文件進(jìn)行快速發(fā)布。本文就用來記錄如何快速將博客發(fā)布到簡書、GitHub以及Gitee Pages三個(gè)平臺。

一、流程設(shè)計(jì)

我希望的流程當(dāng)然是主要精力用在寫文章，發(fā)布的流程最好完全不需要手動(dòng)處理，但實(shí)際情況下手動(dòng)發(fā)布博客的流程大體是：

編寫->拷貝到簡書->本地Hugo生成文件->提交到Github->提交到Gitee->Gitee頁面刷新；
流程相對比較多，希望能夠編寫完md后只需要把源文件提交到GitHub即可實(shí)現(xiàn)GitHub和Gitee Pages的自動(dòng)化部署。

之前有使用過Travis CI+GitHub+Hexo自動(dòng)發(fā)布到GitHub Pages，但是GitHub的訪問經(jīng)常不那么靠譜，因此想著也能同步到Gitee，并且自動(dòng)構(gòu)建Hexo的速度受Nodejs環(huán)境部署影響，速度很慢，因此本次計(jì)劃采用Hugo來構(gòu)建網(wǎng)站文件，整體流程設(shè)計(jì)如下：

博客自動(dòng)發(fā)布流程

二、環(huán)境準(zhǔn)備

為了滿足博客自動(dòng)發(fā)布流程，首先需要在本地準(zhǔn)備好生產(chǎn)環(huán)境，以滿足快速發(fā)布，以此的復(fù)雜是為了長期的簡單，因此在環(huán)境準(zhǔn)備階段我會(huì)把所有涉及的工具都記錄下來，以方便大家使用以及后邊自己回顧，環(huán)境準(zhǔn)備包含：

• Typora配置
• Git配置
• Hugo配置
• Obsidian配置

Ⅰ、Typora配置

1、Typora基本配置

Obsidian完成知識積累后，按照ZK->Project->Archive->Blog的流程發(fā)布Blog，但是Obsidian的文件相互關(guān)聯(lián)，且附件如何快速復(fù)用，需要對Typora和Obsidian都進(jìn)行簡單的配置，確保后續(xù)Blog能夠快速完成并發(fā)布，并且文件仍在Obsidian工程中正常顯示；

Typora非常的簡潔，而且可以實(shí)時(shí)預(yù)覽，在寫博客的時(shí)候經(jīng)常會(huì)插入一些圖片，截圖后可以直接粘貼進(jìn)去，圖片也會(huì)自動(dòng)保存在本地，這里需要注意圖片的保存路徑，在偏好設(shè)置里，設(shè)置插入圖片時(shí)復(fù)制到指定路徑（./resource/），這樣復(fù)制的圖片就會(huì)自動(dòng)保存在當(dāng)前文件夾下的resource文件夾里，方便后續(xù)管理與轉(zhuǎn)移。

Typora圖像設(shè)置

2、使用Typora+picgo-core+gitee實(shí)現(xiàn)圖床功能

1. 安裝Nodejs

   • windows7安裝

     a. 從官網(wǎng)下載對應(yīng)版本，win7可用最新版本為：v13.14.0；win10/win11可下載最新版本；

     b. 運(yùn)行安裝即可；

   • ubuntu 20.04安裝

     ubunut倉庫中默認(rèn)的Nodejs版本是v10.19.0，不是最新的版本，因?yàn)槲矣玫降钠渌枰蕾嚫呒壈姹荆虼税惭bv14版本；

     a. 安裝NodeSource：curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -，這個(gè)腳本將會(huì)添加 NodeSource 的簽名 key 到你的系統(tǒng)，創(chuàng)建一個(gè) apt 源文件，安裝必備的軟件包，并且刷新 apt 緩存；如果你需要另外的 Node.js 版本，例如12.x，將setup_14.x修改為setup_12.x；

     NodeSource 軟件源提供了以下版本：

     • v14.x - 最新穩(wěn)定版
     • v13.x
     • v12.x - 最新長期版本
     • v10.x - 前一個(gè)長期版本

     b. 安裝Nodejs和npm：sudo apt install nodejs，安裝的版本node -v可查看是v14.18.2；

2. 配置npm

   配置npm源為淘寶源，命令如下：

   npm config set registry https://registry.npm.taobao.org
   npm config get registry
   

3. 安裝picgo

   • 方法一、在上傳服務(wù)中點(diǎn)擊PicGo-Core(command line)

     自動(dòng)下載的目錄為：%AppData%\Typora\picgo

   • 方法二：在上傳服務(wù)中點(diǎn)擊Custom Command，打開終端，輸入以下命令：

sudo npm install --no-optional --verbose picgo -g #跳過可選依賴

4. 在Gitee創(chuàng)建圖床倉庫

   a. 注冊一個(gè)碼云（gitee）賬號
   b. 創(chuàng)建一個(gè)倉庫（加號）
   c. 倉庫設(shè)定

   
   
   gitee創(chuàng)建圖床倉庫

   d. 創(chuàng)建gitee訪問token

   • 新建token，點(diǎn)擊頭像

     
     
     gitee私人令牌1
     
     
     gitee私人令牌2

   e. 配置picgo

   打開終端輸入以下命令，如果是自動(dòng)安裝，需要將picgo目錄加入path，或者在picgo目錄執(zhí)行命令：

   #安裝gitee的插件    
   picgo install gitee-uploader 
   #設(shè)置配置文件    
   picgo set uploader  
   1.按上下鍵找到gitee，回車    
   2.repo：用戶名/倉庫名 （打開自己的倉庫，瀏覽器里的網(wǎng)址username/reponame）    
   3.token：剛才生成的token      
   4.path:路徑，圖片上傳到倉庫的目錄，例如img，即上傳到倉庫的img目錄    
   5.custompath:不用填，回車   
   6.customURL:不用填，回車    
   #使用配置好的文件（配置文件在~/.picgo/config.json）    
   picgo use uploader
   

7. 測試上傳功能

   • 打開你typora，驗(yàn)證圖片上傳，查看是否成功；
   • 成功設(shè)置好圖床，將一張圖片拖到typora中，試一下能否自動(dòng)上傳
   • 手動(dòng)上傳圖片可參考：picgo gitee倉庫；

Ⅱ、Git配置

1、Git下載安裝

1. 去官網(wǎng)下載git;
2. 運(yùn)行安裝，選擇安裝路徑，其他默認(rèn)即可；

2、基本配置

• 配置全局用戶名和郵箱

git config --global user.name "用戶名"
git config --global user.email "郵箱"

• 生成公鑰

ssh-keygen -t rsa -C "郵箱地址"

在.ssh文件生成id_rsa和id_rsa.pub兩個(gè)文件；

3、配置公鑰到github

setting->SSH and GPG keys：new SSH Key；

4、配置公鑰到gitee；

設(shè)置->ssh公鑰->添加公鑰；

Ⅲ、Hugo安裝配置

Hugo 是一個(gè)基于Go語言開發(fā)的靜態(tài)博客框架，號稱世界上最快的構(gòu)建網(wǎng)站工具；

1、安裝

• Windows安裝：在hugo github下載windows版本包，解壓到目錄，并添加到PATH即可；
• Ubuntu安裝：sudo apt-get install hugo

2、生成博客

命令為：hugo new site myblog
myblog為博客的目錄名，可以修改為你自己想取的名字，生成的目錄如下：

image

3、主題下載

• 在hugo主題網(wǎng)站找到喜歡的主題，我選的是hexo主題，可以在next主題的github地址hugo-theme-next下載;
• 可以下載主題壓縮包，解壓到themes文件夾下，也可以直接使用git clone到themes目錄下；

4、主題配置

• 將【exampleSite\config】和【exampleSite\content】兩個(gè)目錄拷貝到站點(diǎn)根目錄下；
• content目錄下有en和zh_CN兩個(gè)目錄，分別放英文和中文兩個(gè)頁面的md文件，默認(rèn)的md文件可以刪除，將需要發(fā)布的文章放入這兩個(gè)目錄即可；
• config目錄下_default目錄對站點(diǎn)的側(cè)欄等功能進(jìn)行配置，可以根據(jù)自己需要進(jìn)行配置；

5、主題修改

由于默認(rèn)主題生成的文章頁面有些功能是不需要的，因此需要對themes下文件進(jìn)行修改：

image

• single.html修改，刪除文章頁面不需要的幾個(gè)信息；

  
  
  image
• rss.html，直接刪除文件內(nèi)容即可；
• comment.html修改為自己的評論功能代碼，我使用的是utteranc，可以參考5、配置評論功能]；
  
  image

• foot.html，刪除頁腳不需要的信息

  
  
  image

6、快速復(fù)制當(dāng)前配置

將config、content和themes三個(gè)目錄拷貝到新創(chuàng)建的站點(diǎn)目錄，將content下替換為文章文件即可。

7、配置評論功能

utterances是一款基于Github Issue的Github工具，優(yōu)點(diǎn)主要是無廣告、加載快、配置簡單，輕量開源。
由于utterances是一款Github App，因此安裝utterances非常簡單，只需要授權(quán)特定repo權(quán)限給utterances就可以了,注意一個(gè)點(diǎn)：授權(quán)的這個(gè)repo必須是public的，可以選擇多個(gè)repo，但是建議選擇一個(gè)就可以了，也比較安全。

• 給出我授權(quán)的repo作為參考，我是選擇博客的repo作為utterances評論的存放點(diǎn)(在博客評論的內(nèi)容都會(huì)以issue的形式發(fā)布在repo下).
  
  utterances APP配置
• 將插入評論代碼加到主題模板中：

<script src="https://utteranc.es/client.js"
repo="qz757/qz757.github.io"
issue-term="title"
theme="preferred-color-scheme"
crossorigin="anonymous"
async>
</script>

這是當(dāng)前最簡單的配置方法， 也可以在utterances官方查看其他配置方法，以及詳細(xì)的配置參數(shù)說明。

8、Hugo常用命令

1. hugo server本地啟動(dòng)服務(wù)進(jìn)行預(yù)覽，localhost:1313訪問；
2. hugo生態(tài)靜態(tài)網(wǎng)頁文件到public目錄；
3. hugo -b url，制定baseurl生成網(wǎng)頁文件，所有文章的鏈接前綴都是以此生成的；
4. hugo new post/first.md，用模板生成md文件

Ⅳ、Obsidian配置

Obsidian的安裝和使用可參考我的另一篇文章：Obsidian作為第二大腦工具的基本使用和配置

三、實(shí)現(xiàn)方案

所有環(huán)境準(zhǔn)備好后，終于要開始啟動(dòng)我們的自動(dòng)化流程的實(shí)現(xiàn)了；

Ⅰ、GitHub和Gitee Pages配置

1. Gitee Pages配置：
   • 創(chuàng)建與用戶名同名倉庫；
   • 倉庫主頁->服務(wù)->Gitee Pages，選擇對應(yīng)的分支并開啟https；
2. GitHub Pages配置：
   • 創(chuàng)建名稱為【用戶名.gthub.io】的倉庫；
   • 倉庫主頁->setting->Pages，選擇對應(yīng)的分支；

Ⅱ、GitHub同步到Gitee鑒權(quán)私鑰配置

1. 參考git配置生成公私鑰，并將公鑰配置到Gitee；

2. 將私鑰配置到GitHub倉庫，Pages倉庫主頁->Settings→Secret→New repository secre 用于GiuHub Action提交代碼到Gitee的鑒權(quán)，命名為GITEE_RSA_PRIVATE_KEY，將私鑰填入；

   
   
   image

Ⅲ、GitHub倉庫代碼更新Token配置

1. 生成GitHub賬號的 personal access token

   
   
   image
2. 將倉庫權(quán)限選上就行了，然后將生成的token，配到私鑰配置的地方 倉庫→Settings→Secret→New repository secre，命名為ACCESS_TOKEN；

Ⅳ、配置Gitee密碼到Github用于自動(dòng)部署Gitee Pages工程

同之前步驟相同，將Gitee密碼配置到GitHub Secrets，命名為：GITEE_PASSWORD，所有配置結(jié)果如下：

image

Ⅴ、編寫Actions腳本

synctogitee.yml

name: deploy blog to gitee
 
on:
  push:
    branches:
      - master    # master 分支 push 的時(shí)候觸發(fā)
      
jobs:
  deploy: #執(zhí)行部署Hugo生成靜態(tài)代碼，默認(rèn)放在gh-pages分支
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.90.1'
          extended: true #不需要extended版本就可以注釋

      - name: Build github # 我的Hugo配置baseurl為GitHub Pages路徑，使用hugo命令默認(rèn)為GitHub Pages生成靜態(tài)網(wǎng)站
        run: hugo

      - name: Deploypage # 部署到GitHub Pages分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }}
          external_repository: qz757/qz757.github.io
          publish_branch: gh-pages  # default: gh-pages
          publish_dir: ./public

      - name: Build gitee # 指定baseurl為giee Pages的url生成Gitee網(wǎng)站靜態(tài)文件；
        run: hugo -b https://qz757.gitee.io
          
      - name: Deploygitee # 部署到Gitee對應(yīng)的分支，該步驟是部署到GitHub倉庫的對應(yīng)分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }}
          external_repository: qz757/qz757.github.io
          publish_branch: gh-pages-gitee  # default: gh-pages
          publish_dir: ./public
                
  
  sync: #同步到gitee倉庫
    needs: deploy
    runs-on: ubuntu-latest
    steps:
    - name: Sync to Gitee
      uses: wearerequired/git-mirror-action@master
      env:
        SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
      with:
        # 來源倉庫
        source-repo: "git@github.com:qz757/qz757.github.io.git"
        # 目標(biāo)倉庫
        destination-repo: "git@gitee.com:qz757/qz757.git"
        
  reload-pages:
    needs: sync
    runs-on: ubuntu-latest
    steps:
      - name: Build Gitee Pages
        uses: yanglbme/gitee-pages-action@main
        with:
          # 注意替換為你的 Gitee 用戶名
          gitee-username: qz757
          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          # 注意替換為你的 Gitee 倉庫，倉庫名嚴(yán)格區(qū)分大小寫，請準(zhǔn)確填寫，否則會(huì)出錯(cuò)
          gitee-repo: qz757/qz757
          # 要部署的分支，默認(rèn)是 master，若是其他分支，則需要指定（指定的分支必須存在）
          branch: gh-pages-gitee

Ⅵ、綁定Gitee賬號到微信公眾號

需要綁定Gitee賬號到微信公眾號，否則最后一步reload pages自動(dòng)部署Gitee Pages會(huì)登錄失敗，原因是需要短信驗(yàn)證；綁定公眾號后則不需要短信驗(yàn)證；其他問題解決可以參考gitee-pages-action

Ⅶ、自動(dòng)發(fā)布

1. 將Hugo生成的工程文件整體提交到GitHub Pages工程master分支；

2. 查看Actions執(zhí)行結(jié)果完成后，GitHub和Gitee Pages已自動(dòng)部署完成；

   
   
   image

四、后續(xù)使用

在Typora完成文章編寫后，一鍵上傳所有圖片到Gitee圖床，拷貝發(fā)布到簡書，然后提交到GitHub repo master分支，即可自動(dòng)部署到GitHub和Gitee Pages；

結(jié)束

以上就是我利用GitHub-Actions將Hugo博客自動(dòng)發(fā)布到GitHub和Gitee Pages，希望可以幫助大家快速構(gòu)建自己的個(gè)人網(wǎng)站；后邊我會(huì)繼續(xù)完善我的第二大腦系統(tǒng)的構(gòu)建思路和方法。