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

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

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

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

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

作者介紹

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

安裝Hugo

首先，我們先安裝hugo：

brew install hugo

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

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

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

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

hugo new posts/my-first-post.md

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

hugo server

在瀏覽器打開(kāi) http://localhost:1313/ 即可查看效果:

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

hugo -D

生成好的靜態(tài)頁(yè)面文件會(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上找到開(kāi)源的hugo主題，并放置到你的hugo項(xiàng)目中，例如：

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

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

靜態(tài)托管部署

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

這里要注意選擇是按量計(jì)費(fèi)的模式(只有按量計(jì)費(fèi)才能開(kā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)頁(yè)面給上傳上去。當(dāng)然，手動(dòng)上傳顯得不太友好，我們也可以借助 cloudbase cli 以命令行的方式執(zhí)行上傳。

首先，安裝cloudbase cli:

npm install -g @cloudbase/cli

執(zhí)行登錄命令：

tcb login

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

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

cloudbase hosting:deploy ./public  -e EndId

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

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

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

One More Thing

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

云開(kāi)發(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)擊此處快速使用云開(kāi)發(fā)

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