使用 Hugo 和 Firebase 創建您的免費開發者博客
已發表: 2022-03-10在本教程中,我將演示如何使用 Hugo 創建自己的博客並將其免費部署在 Firebase 上。 Hugo 是一個開源靜態站點生成器,Firebase 是一個 Google 平台,提供用於增強 Web 和移動開發的資源和服務。 如果您是尚未擁有博客但有興趣託管博客的開發人員,本文將幫助您創建博客。 要遵循這些步驟,您需要知道如何使用 Git 和終端。
擁有自己的技術博客可以為您作為開發人員的職業生涯帶來很多好處。 一方面,關於技術主題的博客可以讓您了解在主要開發人員工作中可能不會學到的東西。 當你研究你的作品或嘗試新事物時,你最終會學到很多東西,比如如何使用新技術和解決邊緣案例問題。 除此之外,當您與讀者的評論互動時,您還可以練習溝通以及處理批評和反饋等軟技能。
此外,您對自己的軟件開發技能更加自信,因為在為您的博客構建示例項目以說明概念時,您需要編寫大量代碼。 技術博客可以增強您作為開發人員的品牌,因為它為您提供了一個展示您的技能和專業知識的平台。 這為您提供了各種機會,例如工作、演講和會議活動、圖書交易、副業、與其他開發人員的關係等等。
SmashingMag推薦閱讀:
- 從 WordPress 切換到 Hugo
- 如何在 JAMstack 上創建無頭 WordPress 網站
- 用 Vue.js 替換 jQuery:無需構建步驟
- 在遠程團隊中建立真實的人際關係
例如,Chris Sevilleja 於 2014 年開始在他的博客 scotch.io 上編寫教程,該博客後來發展成為一家企業,後來加入了 Digital Ocean。 擁有技術博客的另一個重要好處是它可以讓你成為一個更好的作家,這在你編寫軟件設計和技術規範文檔時可以成為你工作中的一項資產。 此外,它使您成為傑出的老師和導師。 例如,我經常閱讀 research.swtch.com,這是 Russ Cox 的博客,他寫了有關 Go 語言的博客,並且還在構建它的 Google Go 團隊工作。 從中,我學到了很多關於語言是如何工作的知識,而這些知識可能不是我從主要工作中學到的。
另一個我也喜歡閱讀和學習的很棒的博客是 Ali Spittel 的 welearncode.com,他曾經寫道,博客的一個非常重要的部分是:
“幫助其他人學習如何編碼,讓追隨我的人更容易。”
讓您的博客啟動和運行的一種相當簡單且輕鬆的方法是使用第三方平台,例如 Medium,您只需創建一個帳戶即可獲得博客。 儘管這些平台一開始可能適合大多數博客需求,但從長遠來看,它們確實存在一些缺點。
一些平台提供了糟糕的用戶體驗,比如不斷地為瑣碎的事情發送令人分心的通知、要求安裝應用程序等等。 如果您的讀者在託管您的博客的平台上體驗不佳,他們不太可能與您的內容互動。 除此之外,可能不支持您可能需要增強讀者與博客的互動和時間的工具。 該平台可能不支持諸如 RSS 提要、代碼片段的語法突出顯示等內容。 在最壞的情況下,託管您的博客的平台可能會關閉,您可能會丟失所有已完成的工作。
託管您自己的博客並將您的用戶重定向到它會增加他們對您發布的帖子的參與度更高的機會。 您不必在平台上與其他作家競爭讀者的注意力,因為您將是平台上唯一的人。 讀者可能會閱讀更多您的帖子或註冊您的時事通訊,因為他們更關注您所交流的內容。 託管自己的博客的另一個好處是能夠以多種方式根據自己的喜好對其進行自定義,這通常是第三方平台無法實現的。
設置雨果
如果您在 macOS 或 Linux 上工作,安裝 Hugo 的最簡單方法是使用 Homebrew。 您只需要在終端上運行:
brew install hugo
如果你在 Windows 上運行,可以使用 scoop 安裝程序或巧克力包管理器安裝 Hugo。 對於獨家新聞:
scoop install hugo
對於巧克力:
choco install hugo -confirm
如果這些選項都不適用於您,請查看這些選項以進行安裝。
設置 Firebase 工具
要安裝 firebase 工具,您需要安裝 Node.js 才能訪問 npm。 要安裝 Firebase 工具,請運行:
npm install -g firebase-tools
在此鏈接免費創建一個 Firebase 帳戶。 為此,您需要一個 Google 帳戶。 接下來,使用 Firebase 工具登錄。 您將被重定向到一個瀏覽器選項卡,您可以在其中使用您的 Google 帳戶登錄。
firebase login
創建您的博客
選擇一個您希望存放博客源代碼的目錄。 在終端上將位置更改為該目錄。 為您的博客選擇一個名稱。 出於本教程的目的,我們將博客命名為sm-blog
。
hugo new site sm-blog
建議備份您網站的源代碼,以防出現任何問題。 我將為此使用 Github,但您可以使用任何版本控制服務——如果您選擇這樣做的話。 我將初始化一個存儲庫。
cd sm-blog git init
在我們可以在本地運行站點並在瀏覽器上實際查看之前,我們需要添加一個主題,否則您將看到的只是一個空白頁面。
為您的博客選擇和安裝主題
我喜歡 Hugo 的一件事是它背後的社區以及所有提交主題供社區使用的開發人員。 有大量主題可供選擇,從小型企業網站、作品集到博客,應有盡有。 要選擇博客主題,請前往 theme.gohugo.io 的博客部分。 我選擇了一個名為 Cactus Plus 的主題,因為它的簡單性和極簡主義。 要安裝這個主題,我需要將它添加為我的存儲庫的子模塊。 許多主題指示其用戶使用子模塊進行安裝,但如果不是這種情況,只需按照說明中提供的主題製造商給出的說明進行操作。 我會將主題添加到/themes
文件夾中。
git submodule add -b master https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus
在 blog 文件夾的根目錄下,存在一個生成的文件config.toml 。 您可以在此處指定站點的設置。 我們需要改變那裡的主題。 主題名稱對應於/themes
文件夾中所選主題的文件夾名稱。 這些是現在config.toml文件的內容。 您還可以更改博客的標題。
baseURL = "https://example.org/" languageCode = "en-us" title = "SM Blog" theme="hugo-theme-cactus-plus"
現在我們可以運行博客了。 除了名稱更改之外,它將看起來與主題完全一樣。 運行服務器後,在瀏覽器上轉到https://localhost:1313 。
hugo server -D
個性化您的博客
部署自己的博客的一個好處是可以根據自己的喜好以各種方式對其進行個性化設置。 使用 Hugo 執行此操作的主要方法是更改您選擇的主題。 許多主題通過config.toml提供自定義選項。 主題創建者通常會在主題頁面的描述中提供選項列表以及它們的含義。 如果沒有,請查看主題的/exampleSite
文件夾並將該文件夾中的config.toml的內容複製到您的config.toml文件中。 例如:
cp themes/hugo-theme-cactus-plus/exampleSite/config.toml .
由於所有主題都不同,我在這裡所做的更改可能不適用於您的主題,但希望您能夠了解如何處理您的博客。
- 我將更改頭像圖像和博客的網站圖標。 包括圖像在內的所有靜態文件都應添加到
/static
文件夾中。 我在static
中創建了一個/images
文件夾並在那裡添加了圖像。 - 我將添加 Google Analytics,以便跟踪我博客的流量。
- 我將啟用 Disqus,以便我的讀者可以對我的帖子發表評論。
- 我將啟用 RSS。
- 我會將我的社交鏈接放入 Twitter 和 Github。
- 我將啟用 Twitter 卡。
- 我將在主頁上的帖子標題下啟用摘要。
所以我的config.toml會是這樣的:
### Site settings baseurl = "your_firebase_address" languageCode = "en" title = "SM Blog" theme = "hugo-theme-cactus-plus" googleAnalytics = "your_google_analytics_id" [params] # My information author = "Cat Lense" description = "blog about cats" bio = "cat photographer" twitter = "cats" copyright = "Cat Photographer" # Tools enableRSS = true enableDisqus = true disqusShortname = "your_disqus_short_name" enableSummary = true enableGoogleAnalytics = true enableTwitterCard = true [social] twitter = "https://twitter.com/cats" github = "https://github.com/cats"
創建您的第一篇文章
Hugo 的帖子是用 markdown 寫的。 所以你需要熟悉它。 創建帖子時,您實際上是在創建一個 Markdown 文件,然後 Hugo 會將其呈現為 HTML。 取帖子的標題,將其設為小寫,用連字符替換空格。 那將是您的帖子的名稱。 Hugo 獲取文件名,用空格替換連字符,將其轉換為起始大小寫,然後將其設置為標題。 我將我的文件命名為my-first-post.md 。 要創建您的第一篇文章,請運行:
hugo new posts/my-first-post.md
帖子在/content
文件夾中創建。 這些是文件的內容。
--- title: "My First Post" date: 2020-03-18T15:59:53+03:00 draft: true ---
帖子包含前端內容,即描述您的帖子的元數據。 如果您想在撰寫帖子時將帖子保留為草稿,請留下draft: true
。 完成寫作後,更改draft: false
以便帖子可以顯示在主頁上。 我將在前面的內容中添加一個摘要行,以總結主頁上的帖子。
為您的帖子添加資源
要將資源添加到您的帖子中,例如圖像、視頻、音頻文件等,請在/content/posts
文件夾中創建一個與您的帖子同名的文件夾,但不包括擴展名。
例如,我會創建這個文件夾:
mkdir content/posts/my-first-post
然後,我會將所有帖子資源添加到該文件夾並僅通過文件名鏈接到資源,而無需指定長 URL。 例如,我會添加這樣的圖像:
![A cute cat](cute-cat.png)
託管您博客的源代碼
寫完第一篇文章後,在部署之前備份它很重要。 在此之前,請確保您有一個.gitignore文件並將/public
文件夾添加到其中。 應該忽略公用文件夾,因為它可以再次生成。
在 Github 上創建一個存儲庫來託管您博客的源代碼。 然後在本地設置遠程存儲庫。
git remote add origin [remote repository URL]
最後,暫存並提交所有更改,然後將它們推送到遠程存儲庫。
git add * git commit -m "Add my first post" git push origin master
將您的博客部署到 Firebase
在將博客部署到 Firebase 之前,您需要在 Firebase 上創建一個項目。 前往 Firebase 控制台。 單擊添加項目。
輸入您的項目名稱。
如果您想在博客中使用 Google Analytics,請啟用它。
創建項目後,返回博客的根目錄並在博客中初始化 Firebase 項目。
firebase init
運行此命令時,系統會提示您輸入一些信息。
提示 | 回答 |
---|---|
您要為此文件夾設置哪些 Firebase CLI 功能? | 託管:配置和部署 Firebase 託管站點 |
項目設置選項 | 使用現有項目 |
你想用什麼作為你的公共目錄? | 民眾 |
配置為單頁應用程序(將所有 url 重寫為/index.html )? | ñ |
接下來,我們將構建博客。 將創建一個/public
文件夾,其中將包含您生成的博客。
hugo
在此之後,我們所要做的就是部署博客。
firebase deploy
現在博客已部署。 在輸出中提供的託管 URL 中查看它。
下一步
在 Firebase 上託管的唯一缺點是它用於託管項目的 URL。 它可能難看且難以記住。 所以我建議你購買一個域並為你的博客設置它。
第三方平台也不全是壞事。 他們有很多讀者可能對你的作品感興趣,但還沒有看到你的博客。 您可以交叉發佈到這些網站,將您的作品展示在大量受眾面前,但不要忘記鏈接回您自己的博客。 將您博客上文章的鏈接添加到您發佈到的任何平台作為規範 URL,這樣它就不會被搜索引擎視為重複內容並損害您網站的 SEO。 Medium、dev.to 和 Hashnode 等網站支持規範 URL。
結論
在您自己的技術博客上寫作可以為您作為軟件開發人員的職業生涯帶來巨大的好處,並幫助您培養自己的技能和專業知識。 我希望本教程已經開始了你的旅程,或者至少鼓勵你創建自己的博客。