我們把文章搬到自己架設的網站了

| |

首先,是的,我們搬家了,未來文章都會優先發佈到我們的官方部落格網站 blog.starrocket.io 上,如果不想錯過,歡迎你使用 RSS 訂閱或者是訂閱我們的創新創業週報,我們會同步推送我們寫的科技觀點與他站優質好文給你。

Star Rocket 自 2018 年開始使用 Medium 來發布自己所寫的文章,但從去年年底開始,我們決定要自己架設網站。目前我們的部落格是使用 WordPress 來架設,不過在那之前,也曾使用過 Gatsby+Netlify (不過失敗了)。

在決定使用 WordPress 前,曾經考慮使用與 Star Rocket Newsroom 一樣的技術:Ghost+Gatsby+Netlify,以及 Ghost+Next.js 這兩種技術來搭建網站,但最後卻意外轉彎使用 WordPress。

本篇將跟各位介紹,從內容編輯、行銷的角度裡面,我們使用 Medium 以及這次搬家的理由。同時,也會從工程師與產品經理的角度來跟各位說明,我們如何決定網站要用什麼技術來搭建。


那些年,我們選擇 Medium 的理由

首先,在談及搬家的理由之前,還是來跟各位分享一下當年我們選擇 Medium 這個平台而非其他平台的優點。

1. 無側邊欄 + 編輯字型大小上的限制設計,所打造的優質閱讀體驗

撇開 Star Rocket 本身,我自己在 2015 年初知道 Medium 。

從當時開始,Medium 一直採簡潔的設計,不同於其他部落格在閱讀單篇文章有側邊欄(side bar)的排版設計,Medium 採無側邊欄的設計讓讀者在閱讀文章上可以更加專注。

另外因為 Medium 特意在編輯上的限制,像是不讓內容編輯設定字體大小與字型,減少內容編輯的腦袋去思考樣式問題,專注於內容,也讓讀者的閱讀體驗可以統一,以及更加專注。[1]

雖然在中文上的可讀性並非英文這麼好,但基本上算是非常堪用。

圖左為沒有側邊欄(side bar)的設計,圖右為編輯內容時的相關設定

2. 簡單上手的部落格平台

2018 年的時候,我們並沒有像我這般的偽工程師,同時比起鑽研技術自己架設,不如花更多時間製造更多優質的內容會是更優先的事情,所以比起自己架站,選擇一個合適的部落格平台顯然會是比較好的作法。

加上 Medium 有著多數部落格平台有的功能:分類功能、版面排版可以讓讀者看見所有文章,加上註冊 Medium 基本上也不用做太多的設定,所以對於新手來說,絕對會是非常入門的選擇。

Medium 兼備良好的閱讀體驗與寫作體驗

3. 有基本的 SEO 設定

Medium 目前提供一些基本的設定像是網址內容的設定、Meta tag 的設定等等這些利於 SEO 的功能,已經可以滿足基本的 SEO 需求。

Medium 可以讓使用者設定 SEO 標題副標以及 URL slug

除了 Medium,我們其實還有個官方部落格

當時使用 Gatsby.js + Netlify 所架設的部落格

開始在 Medium 寫內容後,當時我們其實有自己建立一個簡單的部落格,當時是使用 Gatsby+Netlify 的技術來架設,Gatsby 是靜態網站生成器,是天生適合搭建像部落格這樣的網站而生的 framework,然後在那之後卻沒有繼續更新。主要原因就是:

沒有後台介面造成的困難

對於非工程師而言,使用編輯器來上稿似乎還是一件麻煩的事情,少了平常習慣的 GUI 介面,需要透過程式碼來確認內文排版與發佈等等,會讓人稍稍退卻,也因此雖然我們當時有用這兩個技術來架設網站,實際上因為沒有後台介面的關係,讓編輯們沒有再繼續更新網站內容。[2]

使用這個方式還需要自己找到圖床上傳照片,此外還需要自己會打開終端機在 local 端呼叫出來才有辦法預覽文章,對於從未學習過程式碼的內容編輯人員來說,會是不小的負擔

從 Medium 搬出的理由

大概到去年年底,我們便開始討論要將部落格從 Medium 上移回來到自己的網站,主要的理由如下:

1. 想看更多的分析數據

Medium 目前提供的數據非常有限,從 2012 年開始至今,一直以來都沒有開放串接像是 Google Analytics 這樣的數據分析報表,僅可使用他們自己的分析數據來評估自己的文章品質與成效。

我們想知道,人們用了什麼關鍵字搜尋,整體對哪一種文章性質有興趣,以便針對我們的讀者提供更好的內容,過去還沒有這麼大的需求是因為文章數量還不夠大到可以開始進行這樣的整理與分析,目前為止 Star Rocket 已經寫了大約 100 篇左右的文章,認為是個適合開始進行一些數據分析的時機點。

2. 想將流量拉回至自己的網域集中管理,提高自網站的 SEO

Medium 在前幾年仍開放大家將 publication 掛在自己的網域底下,但近幾年已經不再提供這種功能。

就數位行銷的角度來說,流量集中到自己的網域底下,好處是會讓搜尋引擎知道我們的網站是很多人會看的,將提高我們的網站在搜尋引擎結果的曝光度,也就是對我們網站的 SEO 會有所助益。

我們從去年年初開始,陸續重新架設官網、Newsroom 以及目前的部落格,主要就是希望開始好好經營自然搜尋的流量以及提供更好的使用者體驗,這次的調整也是跟 Star Rocket 的目標與策略有關係。

3. 降低風險

使用平台的好處當然是自己的內容也能曝光給在這個平台底下的讀者,不得不說,Medium 其實聚集大量對科技內容有興趣的讀者,對我們的內容曝光上會有很大的幫助。

離開 Medium,有可能會使我們流失掉一部分的讀者與瀏覽量。

不過相對的,也因為是將自己的內容放在他人建立的平台上,也必須受限於他人,然而我們非常重視自己所產製的內容,所以我們認為還是要有一個場域能夠完整保存我們自己的內容是必要的。

這次的搬家,我們也並非會完全搬離,而是在這個轉移的過程中持續評估。

4. 更多內容編排上的自由

過往我們的編輯使用習慣是使用 Markdown來寫文章[3],但因為 Medium 並沒有提供 Markdown 相容性功能(Markdown Compatible),導致每次將內容放置到 Medium 上的時候都會花費一些額外的時間在處理格式。

加上 Medium 不能在文章裡放播放器,導致我們無法讓有興趣聆聽星箭廣播的聽眾可以不跳轉,直接在頁面上聆聽,降低整體使用者體驗,然而目前這件事情對我們非常重要,因此不能使用也間接影響了我們想將內容移到自己的網站去。

挑選 WordPress 的理由

上述有提到,自從我這位偽工程師進來之後,陸續重新整理了我們的網站,試過幾個不錯的開源框架來製作。

Newsroom 是用 Ghost 當作後台上稿系統、用 Gatsby 開發網頁優化網頁效能與體驗,並且用 Netlify 來部署;而官網一樣是用 Gatsby 來開發並用 now.sh 來部署[4]

自初次接觸 React 之後,我們非常喜歡 React 與他的生態圈,因此每一次網站的調整,都會藉此嘗試一些相關的框架後進行評估。

這次的部落格,我們本來是打算使用 Next.js 來開發,Next.js 是 now.sh 同家公司旗下的產品,我們當時選擇使用他,其中有個原因是因為他是 Server Side Rendering (SSR),這種技術能夠幫助 SEO。

起初嘗試了 Next.js,除了對他們的網站的設計美感到非常喜歡之外,對其 tutorial 的學習方式讚譽有加,堪稱是我認為 DX(Developer Experience) 最高。

看吶,怎麼可能會有工程師開源社群裡面的 404 頁面美成這樣(誤)

不過最後我們卻打了個煞車停了下來,回心轉意改用 WordPress。最主要的原因就是 WordPress 的編輯器:Gutenberg Editor 以及他的生態系。[5]

1. 模組化的編輯器 Gutenberg Editor

這幾年開始,我們發現 block 成為一種趨勢,像是 React 的概念或者是 Notion [6],Gutenberg Editor 其實也是這樣的一個概念。

Gutenberg Editor 在每一個區塊(blocks)裡面可以使用比 Medium 與 Ghost 更多的格式,可以放上按鈕、音檔、直接塞入 HTML 之外,連圖文的排版都可以自由調整。

簡單點選幾下就可以叫出各式各樣的 block 來設計你的內容

在 Gutenberg Editor 的介紹裡面聲稱,你不需要當一個專業的工程師,也可以透過這套編輯器,製作出各種你想要的文章編排樣式。

根據這一個強大的功能,我們決定轉向 WordPress,因為實際上來說,這樣的彈性自由將可以讓內容編輯在撰文與排版上有更多發揮的空間。

對於我這種不追求自己的程式碼能力,只追求最高偷懶境界的偽工程師而言,與其自幹,不如善用工具,來得更輕鬆(誤)。

不過在踏入工程師的世界後,我開始理解到:

工程師不需要每個都自己做,也不需要為了新技術而硬是選擇新技術,回歸需求,善用工具,有時候才會是更好的作法。

2. 有許多針對內容、行銷的套件可以使用

此外,選擇 WordPress 還有其他幾個理由包含 有非常多針對內容、行銷的套件(plugin)可以選擇,在 SEO、數據分析上有非常大的幫助,有些甚至不需要自己改動程式碼,就可以進行數據追蹤,對於非工程師的人來說會是一大優點。

未來有機會的話,再跟大家分享幾個我們認為很不錯的套件。

每個時期都有自己最適合的方式

不論是從一剛開始以求內容深度為主而選擇 Medium,到之後因為有懂技術的行銷人員加入而開始考量流量佈局,進而決定搬回來自己架設網站。

並回歸需求面的角度,來決定技術面上,選擇 WordPress ,而不使用 Next.js 或者是目前 Newsroom 的架站技術:ghost + Gatsby 來架設。

主要考量原因是因為 WordPress 有許多套件可以滿足內容編輯的排版需求,不需要再讓 Star Rocket 的夥伴花時間開發功能,以及行銷人員的數據追蹤、SEO 的部分,而決定使用 WordPress。

以上就是我們這次搬家的理由以及就需求層面上選擇何種技術的理由,希望有說服大家自己架站(欸不是)。

總之,這是 Star Rocket 這一路下來的奇幻旅程,我自己這樣看下來覺得每個時期都有各自注重的需求,並且根據需求去做當中最好的選擇。

最後,還是要再說一次,歡迎大家利用 RSS 訂閱功能來訂閱我們,未來的內容都會優先發布在這裡噢。


  1. 這樣做產品特意的限制讓我覺得很有趣,開始好奇對這個 Medium 的創辦人 Evan Williams 的故事,跑去聽了星箭廣播 42 集《掀起網路內容革命:Evan Williams 與 Blogger 的故事》,他也是 Blogger 與 Twitter 的創辦人。

  2. 也因有鑒於這樣的事情,於是我們在建立 Star Rocket Newsroom 的時候,決定要使用 Ghost 這套 open source CMS,來架設後台介面,讓未來不喜歡/不懂程式碼的同事,也還是能夠更新內容。

  3. Markdown 是一種輕量型標記語言,如果不知道那是什麼,歡迎收聽星箭廣播第 9 集《HackMD 開發故事(同場加映:Markdown 與一大堆編輯器)

  4. 詳細官網使用 Gatsby 與 Now.sh 來開發可以看此篇貼文: Gatsby.js + Zeit now.sh 部署心得分享… | Facebook

  5. Gutenberg Editor 的介紹頁直接就是編輯器,非常好玩,不妨試試看!

  6. 關於 Notion 我們也曾經邀請過駐點創業家 Lawrence 林宜儒來分享過他使用 Notion 的看法,詳細可看:《星箭廣播》37 集 —— 從過去找未來:Notion 的工具設計哲學

本文依 CC 創用姓名標示 - 非商業性 - 相同方式分享 4.0 國際釋出
Previous

科技創業週報 #226:什麼是 UX 工程師?

螢幕分享、一鍵通話,Tandem 讓遠距也像「跟同事面對面」

Next

“我們把文章搬到自己架設的網站了” 有 5 則留言.

發佈回覆給「honda」的留言 取消回覆

Share via
Copy link
Powered by Social Snap