Hexo+GitHub Actions 完美打造我的博客

時間 2020-05-12

標籤 hexo+github hexo github actions 完美打造我的博客欄目 Git 简体版

原文原文鏈接

Hexo簡介

Hexo是一款基於Node.js的靜態博客框架，依賴少易於安裝使用，能夠方便的生成靜態網頁託管在GitHub和Coding上，是搭建博客的首選框架。你們能夠進入hexo官網進行詳細查看，由於Hexo的建立者是臺灣人，對中文的支持很友好，能夠選擇中文進行查看。html

Hexo搭建步驟

安裝Git
安裝Node.js
安裝Hexo
編寫github actions
推送到github
發佈文章

咱們的開發過程是在win環境下，本質和環境不要緊，影響不大，首先咱們要保證咱們的電腦上安裝了git 與node.js 其中git是爲了咱們方便檢出與推送咱們的代碼，node.js是爲了構建hexo的腳手架，生成項目結構，咱們在在後面提供生成好的項目結構源碼，這樣子咱們也不須要node.js了，不過仍是建議你們本身來構建，靈活操做，本地瀏覽構建項目也須要node

上述兩個環境咱們不在這裏闡述，若是不懂安裝的能夠百度，咱們直接從hexo的腳手架構建開始

Hexo 安裝與項目初始化

首先咱們能夠用 cmd命令窗口或者vscode裏命令窗口，都同樣，這裏咱們使用VScode由於後期項目的ide就用vocode ;git

打開vscode 軟件，按 CTRL+ `調出命令窗口，輸入

cd H:\project\    -- 切換到咱們項目要放的目錄下

node -v     -- 查看node的環境版本

npm -v  -- 查看 npm 的版本

經過這兩個命令來查詢咱們node.js的安裝狀況以下，則顯示正常github

執行命令 npm install -g hexo-cli 來安裝hexo的腳手架支持，這是安裝到node的插件中，

上述顯示下載好cli程序，接下類咱們開始初始化項目shell

建立項目目錄名字本身定，好比 'myblog'

命令： mkdir myblog 、npm

初始化hexo項目 mylog

命令： hexo init 項目目錄名 這裏就是： hexo init myblogubuntu

等待構建好，上面顯示就已經構建好了，接下來咱們直接經過vscode來打開項目目錄 myblog

新建完成後，指定文件夾目錄下有：微信
1. node_modules : 依賴包
2. public ：存放生成的頁面
3. scaffolds ：生成文章的一些模板
4. source ：用來存放你的文章
5. themes ：主題
6. ** _config.yml : 博客的配置文件**
這時候咱們咋控制檯能夠直接命令編譯啓動項目網絡

cd .\myblog\`

npm install

在執行時可能會出現下面問題架構

簡單翻譯就是：
5 個包正在尋找募款，執行 npm fund 查看詳情（募捐連接）；
發現一個發現 1 個低嚴重性漏洞，執行 npm audit fix 進行修復, 或 npm audit 查看更多信息。
經過命令 npm audit 詳細信息爲：

=== npm audit security report ===                        

          Manual Review                                  
        Some vulnerabilities require your attention to resolve             
                                                                          
    Visit https://go.npm.me/audit-guide for additional guidance           

  Low             Prototype Pollution                                           

  Package         minimist                                                      

  Patched in      >=0.2.1 <1.0.0 || >=1.2.3                                     

  Dependency of   hexo                                                          

  Path            hexo > swig-templates > optimist > minimist                   

  More info       https://npmjs.com/advisories/1179                             

found 1 low severity vulnerability in 470 scanned packages
  1 vulnerability requires manual review. See the full report for details.

若出現這些信息，根據提示作也可不作。咱們直接忽略就好了，不影響咱們的項目

經過 hexo s啓動項目，經過http://localhost:4000訪問

效果以下：

咱們能夠經過 hexo g 來生成靜態文件，在 public 目錄下，相似以下：

上述是咱們本地搭建運行的結果，可是在咱們後面的使用中每次都要本身來生動生成靜態頁面是很是麻煩的事，咱們徹底能夠交給github來作這件事

Github Actions實現自動部署

什麼是 Github Actions，官網的介紹是：
With GitHub Actions you can automate your workflow from idea to production.
有點抽象，可是咱們知道 Github 是什麼啊，代碼倉庫，一個提供了分佈式版本控制和源代碼管理的代碼倉庫。在實際場景中，好比你寫好了一個網站的代碼，而且存儲到了 Github 上，就能夠了嗎，並滅有沒有，你還須要部署代碼才能讓別人訪問你的網站。另外，若是你修改了代碼，還須要單獨測試。理想的狀況應該是：當你將代碼提交到 master 時，測試、部署等等全部工做自動執行。如今有了 Github Actions，就能夠幫咱們實現這些功能，
Github Actions 能夠自動化和定製化項目的 Workflow，像官網顯示的那樣。

首先咱們瞭解一下GitHub Actions 的一些術語

（1）workflow （工做流程）：持續集成一次運行的過程，就是一個 workflow。
（2）job （任務）：一個 workflow 由一個或多個 jobs 構成，含義是一次持續集成的運行，能夠完成多個任務。
（3）step（步驟）：每一個 job 由多個 step 構成，一步步完成。一個工做中的每一個步驟都在相同的虛擬環境中執行，從而容許使用文件系統共享信息。
（4）action （動做）：每一個 step 能夠依次執行一個或多個命令（action）。你能夠建立本身的action、使用 GitHub 社區共享的action。

這裏咱們不在闡述過多的知識，推薦你們去網上看，或者去這裏-> GitHub Actions 入門教程 - 阮一峯的網絡日誌, 我的感受仍是很優秀的文章，能夠學習！！

部署到騰訊雲

下面咱們貼出咱們的配置（部署到騰訊雲CloudBase）

name: GitHub Actions Build and Deploy
on:
  push:
    branches:

      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    - name: 1. git checkout...

      uses: actions/checkout@v1

    - name: 2. setup nodejs...

      uses: actions/setup-node@v1

    - name: 3. install hexo...

      run: |
        npm install hexo-cli -g
        npm i -S hexo-prism-plugin -g
        npm install hexo-generator-search --save -g
        npm i hexo-permalink-pinyin  -g
        npm i --save hexo-wordcount -g
        npm install hexo-filter-github-emojis  -g
        npm install hexo-generator-feed  -g
        npm install

    - name: 4. hexo generate public files...

      run: |
        hexo clean
        hexo g
    # 部署到騰訊雲    

    - name: Deploy static to Tencent CloudBase

      id: deployStatic
      uses: TencentCloudBase/cloudbase-action@v1
      with:
        secretId: ${{ secrets.SECRET_ID }}
        secretKey: ${{ secrets.SECRET_KEY }}
        envId: ${{ secrets.ENV_ID }}
        staticSrcPath: ./public

    - name: Get the deploy result

      run: echo "Deploy to cloudbase result ${{ steps.deployStatic.outputs.deployResult }}"

對上面內容作一個簡單說明，其實這就是在github的一個容器裏面跑的

首先checkout 出來咱們的代碼到容器，這些actions都有人寫了咱們直接用就好，
而後加載 uses: actions/setup-node@v1 的環境，也就是支持了node.js的環境
而後再 run下面編寫咱們正常使用的命令就行，最後經過hexo g生成靜態文件，
下面是用來騰訊的靜態網站託管服務的actions ,須要配置幾個屬性SECRET_ID、SECRET_KEY、ENV_ID

部署到GitHubPage

有些小夥伴像直接用GitHubPage來做爲承載對象，那麼實現也是很是簡單的，上面項目推送github同樣，做爲源代碼倉庫，能夠直接私有化，actions的配置裏面須要修改一下後面說
須要在github上新建一個倉庫做爲存放生成的靜態文件，這個倉庫的命令有着要求，格式： GitHub用戶名.github.io 按照這個來建立倉庫，若是你用戶名爲 admin 那麼倉庫名就是 admin.github.io
建立好後，不要建立任何文件裏面，保持空的便可，在源代碼的倉庫中配置 github Actions 的配置文件，和上面的相似，只有後面不服不一樣，具體以下：

name: GitHub Actions Build and Deploy
on:
  push:
    branches:

      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    - name: 1. git checkout...

      uses: actions/checkout@v1

    - name: 2. setup nodejs...

      uses: actions/setup-node@v1

    - name: 3. install hexo...

      run: |
        npm install hexo-cli -g
        npm i -S hexo-prism-plugin -g
        npm install hexo-generator-search --save -g
        npm i hexo-permalink-pinyin  -g
        npm i --save hexo-wordcount -g
        npm install hexo-filter-github-emojis  -g
        npm install hexo-generator-feed  -g
        npm install

    - name: 4. hexo generate public files...

      run: |
        hexo clean
        hexo g
    
    # 提交到咱們的存放靜態資源的倉庫

    - name: Build and Deploy

      uses: y4code/hexo-deploy-action@master
      env:
        PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        PUBLISH_REPOSITORY: it-briefcode/it-briefcode.github.io # The repository the action should deploy to.
        BRANCH: master  # The branch the action should deploy to.
        PUBLISH_DIR: ./public # The folder the action should deploy.