banner
Magneto

Magnetoの小屋

Magneto在區塊鏈上の小屋,讓我們的文章在互聯網上永遠熠熠生輝!!

使用Vercel+GitHub快速建立Hexo博客

基礎操作#

image

選擇灰框勾選的內容,也就是你的 GitHub,然後點擊 Select 按鈕,然後點擊 GitHubGIT SCOPE 處選擇你想要儲存 Hexo 的用戶,在 REPOSITORY NAME 處填上你想要儲存 Hexo 的倉庫,並勾選 Create private Git Repository 選項,這個選項是將該倉庫設為私有倉庫,對他人不可見。然後點擊 Continue 按鈕,然後什麼都不需要修改,直接點擊 Deploy,等待它自動完成構建,3 分鐘之內完成,並分發一個免費的二級域名,可以暫時用於使用(不會回收,但不建議使用)

::: gallery
image
image
:::

部署完成後,它就和你剛剛所填寫的倉庫綁定了,一旦你的倉庫有什麼變化,它就會自動同步部署,全過程大概 5 分鐘可以完成部署。

接下來就是進階玩法,自定義主題以及寫文章。

進階玩法#

本地修改#

準備環境#

  • Windows 操作系統電腦
  • Git for Windows
  • Node.js ≥ v12
  • NPM
  • Hexo

環境安裝

已有的可以選擇跳過此步驟,或者不需要檢查是否可以運行的也可以選擇跳過安裝。

本教程環境基於 Windows 10 20H2 進行安裝

Git(必裝,即使不檢查是否可以正常運行也必須安裝)

要在 Windows 平台上使用 Git,你需要 Git for Windows,下載並安裝(如果覺得官方下載速度過慢,可以前往 淘寶 NPM 鏡像 下載)。

我在這裡使用的是 此鏈接 下載的 Git-2.25.0-64-bit.exe,全默認選項安裝。

驗證安裝

在資源管理器右鍵菜單或開始菜單裡,可以找到 Git Bash,打開後是個命令行界面,本地修改 Hexo 全靠這個檢查 Hexo 系統是否可以正常運行。

打開 Git Bash,通過下面的代碼查看版本:

node -v
npm -v

image

則代表環境安裝成功。

Hexo

Hexo 是一個快速、簡潔且高效的博客框架。

打開 Git Bash,運行下面的命令安裝 Hexo(回車後可能需要等待一段時間,我在這裡等了 100s):

npm install -g hexo

提示 + hexo@{{版本號}} 即為安裝成功。

GitHub & SSH key (本字節轉自 FlyingSky)

前往 GitHub 註冊屬於你的帳號(請及時驗證郵箱地址)。

打開 Git Bash,運行下面的命令:

ssh-keygen -t rsa -C "{{你的電子郵箱地址}}"

連續 3 次回車,最終會在用戶目錄下生成個包含公鑰私鑰等數據的目錄(一般是 C:/Users/{{你的用戶名}}/.ssh/)。

打開這個目錄,找到 id_rsa.pub 文件,用你喜歡的二進制文本編輯器(記事本)打開並複製裡面的內容。前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key(即 該鏈接):

將剛複製的內容粘貼到 Key 中,Title 填你喜歡的,點擊保存(Add SSH Key)。

設置 Git

運行下方命令:

git config --global user.name "{{你的 GitHub username}}"
git config --global user.email "{{你的 GitHub 註冊郵箱地址}}"

驗證是否成功

打開 Git Bash,運行下面的命令:

ssh -T [email protected] # 此處郵箱地址不用改

如果提示 Are you sure you want to continue connecting (yes/no)? 請輸入 yes 並回車。

Hi {{你的 GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.

看到這個信息則說明配置成功。

這時,本地環境配置完成,便可以進行修改了。

本地修改#

使用 git 指令克隆儲存在 github 的倉庫到本地。

git clone https://github.com/{{用戶名}}/{{倉庫名稱}}.git

注意,私有倉庫 clone 需要輸入 Github 帳號和密碼。

完成 clone 之後,你可以選擇切換個主題,然後寫個文章。

切換主題

如果你喜歡默認的主題,請跳過本章節。

我在這裡用 SumiMakito/hexo-theme-Journal 做演示。

在你的 hexo 站點目錄下用 Git Bash 運行下面的命令安裝主題(需要等待):

git clone {{主題 git 文件地址}} themes/{{主題名稱}}

例如:

git clone https://github.com/SumiMakito/hexo-theme-Journal.git themes/journal

下載完成後修改 _config.yml 中的 theme: landscape 改為 theme: {{主題名稱}},然後執行 hexo g 來重新生成。

如果出現一些莫名其妙的問題,執行 hexo clean 來清理 public 的內容,然後重新生成發布。

安裝插件

在你的 hexo 站點目錄下用 Git Bash 運行下面的命令:

hexo new '{{文章名稱}}'

運行後 source\_posts\ 目錄下就多了 {{文章名稱}}.md 文件,用你喜歡的二進制文本編輯器(記事本)打開這個文件,hexo 默認生成了頭部信息。

文件內容結構如下:

---
title: {{文章名稱}}
date: {{文章時間}}
categories: {{文章分類}}
tags: {{文章標籤 [tag1,tag2,tag3]}}
description: {{文章摘要}}
---
{{文章正文}}

文章內容支持 Markdown 語法。

運行測試

在完成寫文章、裝主題之後,可以通過執行以下命令:

hexo g -s

輸入完成命令後訪問 localhost:4000 檢查是否可以正常運行。

部署 Hexo 博客#

如果上一步正常運行,就可以通過 Git Push 的方式,推送到 Github 上,Vercel 自動拉取部署。如果不會 Push 可以百度,CSDN、博客園都有類似的教程,本文最後會寫 Push 教程,但不詳細,建議自行百度學習。

CloudStudio 修改#

環境及準備#

環境安裝

這裡就不教如何註冊 CloudStudio 了。

進入 Coding 之後,在左側找到 CloudStudio,授權後,點擊 新建工作空間 然後選擇 Node.Js,命名隨意填,代碼來源選擇空。

新建完成後,進入該空間,點擊終端,新建一個終端,接下來的大部分內容都需要在終端完成。

驗證安裝

在終端輸入以下內容:

node -v
npm -v

如果都有版本顯示,則可以開始 CloudStudio 雲端修改。

image

Hexo

Hexo 是一個快速、簡潔且高效的博客框架。

打開終端,運行下面的命令安裝 Hexo:

npm install -g hexo

提示 + hexo@{{版本號}} 即為安裝成功。

GitHub & SSH key

首先,可以看到路徑為 RemoteWorking 而,我們需要將文件儲存路徑定位到 root 內。

則可執行:

cd /root

我們選擇打開一個文件夾,然後進入 root 文件夾內。

在終端中輸入:

ssh-keygen -t rsa -C "{{你的電子郵箱地址}}"

連續 3 次回車,最終會在用戶目錄下生成個包含公鑰私鑰等數據的目錄(一般是 C:/Users/{{你的用戶名}}/.ssh/)。

打開這個目錄,找到 id_rsa.pub 文件,用你喜歡的二進制文本編輯器(記事本)打開並複製裡面的內容。前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key(即 該鏈接):

將剛複製的內容粘貼到 Key 中,Title 填你喜歡的,點擊保存(Add SSH Key)。

設置 Git

運行下方命令:

git config --global user.name "{{你的 GitHub username}}"
git config --global user.email "{{你的 GitHub 註冊郵箱地址}}"

驗證是否成功

打開 Git Bash,運行下面的命令:

ssh -T [email protected] # 此處郵箱地址不用改

如果提示 Are you sure you want to continue connecting (yes/no)? 請輸入 yes 並回車。

Hi {{你的 GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.

看到這個信息則說明配置成功。

這時,本地環境配置完成,便可以進行修改了。

CloudStudio 修改#

然後,使用 git 指令克隆儲存在 github 的倉庫到 CloudStudio。

git clone [email protected]:用戶名/倉庫名稱.git

注意,私有倉庫 clone 需要授權,可以前往 https://github.com/settings/tokens/new 生成一個完全權限的 Token 提交到 CloudStudio 進行授權。

完成 clone 之後,你可以選擇切換個主題,然後寫個文章。

切換主題

如果你喜歡默認的主題,請跳過本章節。

我在這裡用 SumiMakito/hexo-theme-Journal 做演示。

cd /{{Hexo所在的目錄}}

運行下面的命令安裝主題(需要等待):

git clone {{主題 git 文件地址}} themes/{{主題名稱}}

例如:

git clone https://github.com/SumiMakito/hexo-theme-Journal.git themes/journal

下載完成後修改 _config.yml 中的 theme: landscape 改為 theme: {{主題名稱}},然後執行 hexo g 來重新生成。

如果出現一些莫名其妙的問題,執行 hexo clean 來清理 public 的內容,然後重新生成發布。

安裝插件
進入 Hexo 所在的目錄:

cd /{{Hexo所在的目錄}}

在終端輸入以下命令:

npm install hexo-deployer-git --save

寫文章
進入 Hexo 所在的目錄:

cd /{{Hexo所在的目錄}}

在終端輸入以下命令:

hexo new '{{文章名稱}}'

運行後 source\_posts\ 目錄下就多了 {{文章名稱}}.md 文件,單擊文件,hexo 默認生成了頭部信息。

文件內容結構如下:

---
title: {{文章名稱}}
date: {{文章時間}}
categories: {{文章分類}}
tags: {{文章標籤 [tag1,tag2,tag3]}}
description: {{文章摘要}}
---
{{文章正文}}

文章內容支持 Markdown 語法。

部署 Hexo 博客#

由於無法完成本地運行測試,故直接 Push,通常情況下,在主題、插件沒有問題的情況下,直接 Push 部署是沒有任何問題的。如果不會 Push 可以百度,CSDN、博客園都有類似的教程,本文最後會寫 Push 教程,但不詳細,建議自行百度學習。

GitHub Push#

這裡我只提供一個代碼,具體情況需要百度學習,Git 指令如同 Linux 指令一樣,深不可測……

git status
git add .
git status
git commit -m '註釋'
git branch -m master
git push -f origin master

一般首次推送,要在執行這段指令前,執行一遍 git add

當然,你也可以使用 ide 軟件進行控制,這是十分方便的。

結尾#

好了,本期超長的 Hexo 部署教程寫完了,後續還會根據情況對其進行修改。

參考的全部資料:

幫助我完成這篇文章的東西:

  • 一杯水
  • 一杯牛奶
  • GitHub Proxy Github 代理加速
  • 50 首平均 4 分鐘的歌

以上內容,如果出錯,則還需要通過百度深度學習亦或者參考我參考過的資料。

此文由 Mix Space 同步更新至 xLog 原始鏈接為 https://fmcf.cc/posts/technology/Hexo_on-_Vercel

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。