云開發(fā) Hugo 博客部署

Hugo是一個(gè)用Go編寫的靜態(tài)站點(diǎn)生成器，它具有豐富的主題資源和較好的生成速度。

云開發(fā)（CloudBase）是一款云端一體化的產(chǎn)品方案 ，采用 serverless 架構(gòu)，免環(huán)境搭建等運(yùn)維事務(wù) ，支持一云多端，助力快速構(gòu)建小程序、Web應(yīng)用、移動(dòng)應(yīng)用。

云開發(fā)靜態(tài)網(wǎng)站托管支持通過云開發(fā)SDK調(diào)用服務(wù)端資源如：云函數(shù)、云存儲(chǔ)、云數(shù)據(jù)庫等，從而將靜態(tài)網(wǎng)站擴(kuò)展為全棧網(wǎng)站。

無論是騰訊云·云開發(fā)用戶，還是小程序·云開發(fā)用戶，只要開通按量付費(fèi)，即可享有云開發(fā)靜態(tài)網(wǎng)站托管服務(wù)。

作者介紹

騰訊云云開發(fā)布道師——俞煥。任職于騰訊前端開發(fā)工程師，全棧開發(fā)者，就職騰訊游戲市場體系TGideas團(tuán)隊(duì)，負(fù)責(zé)開發(fā)了多款針對線下的跨端小程序應(yīng)用，有豐富的云開發(fā)實(shí)踐經(jīng)驗(yàn)，同時(shí)也負(fù)責(zé)部分中臺(tái)系統(tǒng)的開發(fā)，對Vue.js在構(gòu)建Web后臺(tái)系統(tǒng)上有較多的實(shí)踐經(jīng)驗(yàn)。

安裝Hugo

首先，我們先安裝hugo：

brew install hugo

windows的用戶可以去Hugo的githubc倉庫上下載安裝hugo的可執(zhí)行程序進(jìn)行安裝，具體安裝流程請點(diǎn)擊這里。

緊接著，我們用hugo來幫我們創(chuàng)建一個(gè)blog項(xiàng)目：

hugo new site hugo-demo && cd hugo-demo

然后我們先創(chuàng)建一個(gè)測試的文章:

hugo new posts/my-first-post.md

最后，直接在目錄中運(yùn)行：

hugo server

在瀏覽器打開 http://localhost:1313/ 即可查看效果:

當(dāng)然，我們需要部署的是編譯完成的靜態(tài)頁面文件：

hugo -D

生成好的靜態(tài)頁面文件會(huì)放在項(xiàng)目的public目錄中，目錄結(jié)構(gòu)如下：

├── 404.html


├── categories


│   ├── index.html


│   └── index.xml


├── dist


│   ├── css


│   │   └── app.1cb140d8ba31d5b2f1114537dd04802a.css


│   └── js


│       └── app.3fc0f988d21662902933.js


├── images


│   └── gohugo-default-sample-hero-image.jpg


├── index.html


├── index.xml


├── posts


│   ├── index.html


│   ├── index.xml


│   ├── my-first-post


│   │   └── index.html


│   └── page


│       └── 1


│           └── index.html


├── sitemap.xml


└── tags


    ├── index.html


└── index.xml

如果你不喜歡hugo站點(diǎn)的默認(rèn)主題樣式的話，可以自行在github上找到開源的hugo主題，并放置到你的hugo項(xiàng)目中，例如：

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

當(dāng)然，這篇文章的重點(diǎn)不是教大家如何使用hogu，而且如何在云開發(fā)上部署靜態(tài)的站點(diǎn)。

靜態(tài)托管部署

我們進(jìn)入騰訊云的云開發(fā)(cloudbase)控制臺(tái)，選擇開通一個(gè)云環(huán)境:

這里要注意選擇是按量計(jì)費(fèi)的模式(只有按量計(jì)費(fèi)才能開通靜態(tài)網(wǎng)站托管)。創(chuàng)建完成后，點(diǎn)擊進(jìn)入我們剛剛創(chuàng)建的云環(huán)境，進(jìn)入云環(huán)境管理界面：

在云環(huán)境管理界面，在右側(cè)的網(wǎng)站托管中，我們可以將剛剛項(xiàng)目中生成好的靜態(tài)頁面給上傳上去。當(dāng)然，手動(dòng)上傳顯得不太友好，我們也可以借助 cloudbase cli 以命令行的方式執(zhí)行上傳。

首先，安裝cloudbase cli:

npm install -g @cloudbase/cli

執(zhí)行登錄命令：

tcb login

在彈出的頁面確認(rèn)授權(quán):

接著，在hugo-site中將public目錄中的文件給部署上去：

cloudbase hosting:deploy ./public  -e EndId

這里的 EnvID 替換為剛創(chuàng)建好的環(huán)境ID。

騰訊云云開發(fā)的靜態(tài)網(wǎng)站托管有默認(rèn)域名可供訪問：

通過默認(rèn)域名，我們就能訪問啦:

One More Thing

只需要簡單的幾步，你就能得到你喜歡的站點(diǎn)樣式了，豐富的資源更是能滿足多樣化的需求，還不快試試？

云開發(fā)（CloudBase）是一款云端一體化的產(chǎn)品方案 ，采用 serverless 架構(gòu)，免環(huán)境搭建等運(yùn)維事務(wù) ，支持一云多端，助力快速構(gòu)建小程序、Web應(yīng)用、移動(dòng)應(yīng)用。

技術(shù)文檔：https://www.cloudbase.net/

點(diǎn)擊此處快速使用云開發(fā)

微信搜索：騰訊云云開發(fā)，獲取項(xiàng)目最新進(jìn)展