software

Indie developer blog - 獨立開發者的極簡部落格開發流程

一個獨立開發者/軟體工程師,要怎麼用最極簡的方式架設、部屬以及開發自己的Blog呢? 今天要跟你分享,我開發Blog的完整流程!


Russ
Russ
- 12 min read
我目前有提供「免費諮詢服務」,幫助你在短時間內打造一項不受時間地點限制的專業技能,開始接案,最終達成「邊工作邊旅行」的生活方式。
✅ 填寫表單跟我預約 免費諮詢
✅ 我的IG輕鬆聯繫 @russ.slash.life
✅ 免費領數位遊牧電子書 5步驟達成數位遊牧

2022.09.24

每當我開發並發表新的作品時,都會有朋友問我,你的 tech stack 是什麼、你的開發流程是什麼,有推薦什麼程式語言嗎?

我跟我的 Role Model - Pieter Levels,想法很接近,通常是「當下會什麼技術,就使用什麼技術」,重點在於創造出產品,而不是使用的技術堆線。

我會知道 role model 這個名詞,其實是因為在2022.02的時候跟 Vicky - 鋼鐵V 見面吃飯時聊天學到的,我當時只是跟她分享我很愛 Pieter Levels,但不是追星的那種愛,而是認同他做的事跟價值觀,於是她就跟我說「那他一定是你的 role model」,經過她的分享我才學習到原來有 role model 這個詞可以表達我的想法!
與鋼鐵V的聚餐

想打造一個 Android app 就去學 java 或 kotlin,(有興趣可看我人生寫的第一個App),想架一個網站,前端就學 HTML、CSS、Javascript,後端可以學 Python 的 Django、Flask,或是PHP也可以,先想想你想做什麼,才去找適合的方式,不要被工具限制住。

我真的很愛 Pieter Levels,幾乎看遍了他所有的文章、在網路上極少曝光的 Twitch、Podcast、YouTube,甚至把當兵時的短暫放手機時間(通常30分鐘-1小時),拿來看他的電子書, (BTW,臨兵過來看我手機在看什麼時都認為我瘋了,因為大家不是在滑IG、YT不然就是在打遊戲,就只有我一直在看文章跟電子書XD)。

當然,在剛開始什麼都不會時,就只能一直Google一直Google,比如說要有一個Blog,扣除掉設計跟寫作能力,技術面來說至少需要的能力會有 VPS部屬能力、CMS部屬能力、最好還要有Linux、SSH的觀念跟能力(但不是必須)。

但「絕對不要去想一次學完所有能力」,循序漸進的打造能力,才會有累積成就感逐步成長的感覺,追著成長不但很難打造成就感,甚至即使自己成長速度很快還是會無限的懷疑自己、無止境的挫折。

這裡只簡單帶過我Blog發展的歷史,因為完整描述可能會是獨立一篇文章,這篇先專注在我「目前的開發流程吧」。

簡單帶過我的Blog發展歷史

一開始我並沒有租借VPS主機,而是透過 Hexo (我已停更的 Hexo blog) 來架設一個靜態部落格,完全不用花一分錢,但需要的能力很多。

包括:

  • Hexo框架的使用(Hexo官方)
  • Git版控
  • Github 或是 Gitlab 的使用

上面是打造 Hexo Blog 需要的最基本能力,少了一個能力就不可能呈現最基本的Blog。

如果你要更完整的 Blog ,還需要學習以下這些技能。

SEO

  • 工具: google analytics、google search console
  • 目的: 讓你的 Blog 能被讀者或世界看到

CI/CD

  • 工具: 例如 Gitlab CI/CD
  • 目的: 簡化你持續交付跟部屬的流程,簡單來說就是你發佈新文章只需要 git push 後,剩下的部分程式會自動幫你完成。

留言板

  • 工具: Disqus 或 Facebook Comments Plugin
  • 目的: 如果你想讓你的 Blog 有留言的功能,需要學會引入一些留言的套件。

我大概是從這個時期開始了解基本的HTML、CSS 跟 JS,懵懵懂懂的成功架了一個自己的Blog,甚至依照自己的需要去改造了Blog,但事實上並沒有100%的理解自己在做什麼事,等於是硬改出來的。

可是也因為這樣,時間久了、經驗累積更多,現在回頭看,突然都完全懂了。

這些過程是很值得的,你可以超客製化、完全的掌控你的Blog系統,想做什麼就做什麼,自由度封頂,而且這些能力不管跳到哪個產業,只要他們需要網路行銷、程式撰寫,就一定派的上用場,所以拿來找工作也很加分。

好了接下來要進入正題,到底「現在」的Blog開發流程是怎麼呢?

現在使用 Ghost Blog

沒記錯的話應該在 2021的1月吧,我覺得 Wordpress 的寫作後台實在太不好用,又發現一些我喜歡的外國 Blogger 都是使用 Ghost,甚至是 Pieter Levels 也是,於是我開始學習怎麼用 Ghost 架設部落格,最後很幸運的成功架起來了~

跟 Wordpress 比起來他的速度更快、而且幾乎是開箱即用,因為主題跟後台都很好看,不像 Wordpress 其實架設完還有很多東西要設定跟修改才會比較像個樣。

但這裡沒有要戰 Wordpress 或是 Ghost,只是兩者定位不同。

用最近最夯的話題 Adobe 跟 Figma 來舉例應該可以秒懂。

Wordpress 就像是 Adobe,沒有不好,只是因為功能太完整,有時候我並不需要那麼多用不到的功能,但他還是會在你的介面上呈現給你。

而 Ghost 則是專注在 「部落格/部落客/寫作體驗」,他甚至整合了電子報跟寫作,在寫作時你可以順便把這篇文章用 電子報 發送給讀者,而且你可以選擇要發送給免費讀者或是付費讀者,或是發送給全讀者,也可以像 寫作平台 - Medium 一樣,設置這篇文章僅提供給付費讀者閱讀。

沒有最好的只有最適合的,所以如果我的客戶需要強大且完整功能的部落格,或是需要一個電商網站,我仍然會用 Wordpress 幫他架設,因為這才符合需求,但如果他只想專注在寫作、分享經驗、提供價值,那 Ghost 絕對會是不錯的選擇。

我的 Ghost Blog 開發歷史

每個部落格轉換都有我的原因跟故事,上面算簡略的交代一下,接下來終於要進入到重點環節,我怎麼開發我的 Ghost Blog 了。

一開始僅是使用Vim

一般來說,任何一間公司都不可能讓你在 正式環境 Production environment 開發跟測試,但因為這是我自己的 Blog,我不想讓開發流程變得複雜,有時我只是要改一兩行程式碼而已,比如說改個CSS、加個HTML元素而已。

所以我就用最簡單的方式,沒有區分開發環境正式上線環境,直接用SSH連線到我的 VPS ,修改幾行程式碼。

順帶一提,其實我最熟悉的編輯器是 VSCode ,但因為 VSCode 的 SSH Remote 套件實在太吃資源,每次連線到 VPS ,不久就整台當機無回應,所以才改用 Vim 來開發。

這樣的好處是所見即所得,你改了什麼,最後你的 Blog 就呈現什麼,不用管開發環境跟正式環境的差異。

原本只用 Vim SSH 到 VPS  極簡開發

加入 Git版控

從原本僅是修改一兩行文字或是程式碼,慢慢的我想把整個 Ghost 的主題都改掉,因為這樣而引入了 Git 來做版本控制。

透過 Git ,我們可以知道每次的修改紀錄,改了哪一行 CSS 、哪一行HTML都會被記錄下來,一方面可以紀錄自己的成長,一方面要還原改壞的程式碼也容易且方便。

從下面這張圖,可以很容易的看出來,我先改了README文件、接著修改了網站的Footer,接著修改了首頁,然後修改了文章內頁的作者介紹區塊

然後就是 Email描述區塊修復了文章圖片的變形問題..等。

透過Git的版本紀錄,讓整個部落格修改的迭代過程交代的一清二楚。

Git版本控制

如果我真的不小心搞壞了什麼,我也只需要下個指令。

git reset --hard HEAD^

接著重新啟動我的 Ghost Blog ,就能快速回到沒壞掉時的樣子。

順代一提,一般來說比較有規模的公司會透過 git revert 的方式來還原壞掉的程式碼,因為這樣可以把「我有還原唷」也記錄下來,讓所有工程師團隊知道你做了版本還原的事情,但因為我只有一個人開發,就省略這件事了~

還是建立了開發環境

透過 Vim 簡單修改文字 + Git 版控,這個單純的搭配我用了好一陣子。

但發展到現在,決定開始建立開發環境。

每個決定、流程改變、每個被開發出來的產品,通常都是為了「解決某樣問題」而做的改變,所以下面也來講講為什麼我決定建立開發環境,拋棄原本無敵極簡的流程(原本根本沒開發環境XD)。

為什麼需要開發環境?

原本的方案很簡單、使用起來很方便,但不可能永遠的用下去,遲早會出問題。

會出現什麼問題呢?

當我的 Blog 還沒有什麼人閱讀時,即使我搞壞了我的 Blog 也不會有人發現,但當流量慢慢增長,愈來愈多人轉載跟推薦我的文章 (謝謝科技島的推薦),讀者變得愈來愈多時,總不可能讓使用者閱讀到一半看到網站壞掉的訊息吧。

為了讓大家感受部落格壞掉,我特別把正式環境搞壞給大家看哈哈哈,希望當時沒有讀者嚇到。
故意搞壞我的 Ghost Blog 給大家看

為了解決這個問題,我們就不可能繼續使用原本的開發方案,把正式環境當開發環境使用。

於是開發環境就誕生了,流程會變得稍微繁瑣一點點。

開發環境怎麼架設,其實沒有想像中的複雜,就是在我的 Mac 上安裝一份 Ghost 開發環境而已,想看怎麼在本地端安裝 Ghost ,可以參考 Ghost官方文檔,寫的非常清楚,但如果有需要幫助,還是可以到 FB私訊我 唷。

開發跟上線的流程改變

當我們在 Mac 上有開發環境後,就可以在本地端(自己的電腦)開發,確定沒問題之後再上線。

Mac VSCode 開發

開發流程

在 Mac 上建立一份開發環境後,就可以在自己的電腦上開發跟測試啦!

Ghost local 開發環境

基本上就會像圖片上看到的,瀏覽器打開 http://localhost:2368/ 連線到本地端的 Ghost 開發環境,接著用 VSCode 編輯程式碼,滿足了開發跟測試的需求。

上線流程

因為現在已經不是在正式環境上編輯程式碼了,那要怎麼讓本地的程式碼放到正式主機上呢?

Local computer -> Remote VPS

就是透過 Git 的方式,在本地端改寫完程式碼後,會下 git的指令,把程式碼保存到 Github上。

像是這樣:

git add .  //一個點,代表所有的改動都寫到暫存
git commit -m "feat: 我改變的東西" //確定改變的程式碼,跟寫我改變什麼的資訊
git push origin master //接著就是把程式碼推送到github上保存

為了讓大家更簡單的了解開發到上線流程,我繪製了下面這張圖,希望這個圖解能幫助到你哈哈。

俯瞰程式碼上線流程

在本地開發環境修改程式碼之後,把程式碼用git push的指令推送到 Github 上,接著連線到 Linode遠端主機上,用git pull的指令,把程式碼抓下來,就樣就完成程式碼的上線啦!

為了保持簡單不讓流程變得複雜,只有我自己開發,所以我沒有建立新的 git分支 來開發,保持只有 master

基本上這個就是最簡易的區分開發環境跟正式上線環境,避免讓你的讀者看到突然壞掉的網站。

文末

大概分享到這,竟然已經 5000 多字了,目前 Blog 還沒有留言功能,如果有話想跟我說,歡迎到我的FB私訊我,或是 Email 我囉~

歡迎訂閱我的電子報
幫助你在短時間內打造一項不受時間地點限制的專業技能,開始接案,最終達成邊工作邊旅行的生活方式。
Russ
Russ
我是Russ, 我邊工作邊旅行。

歡迎來我的FB或IG找我
Facebook (YuQuan)
Instagram (@russ.slash.life)
✅ 免費資源 5步驟達成數位遊牧

另外我目前有提供「免費諮詢服務」,幫助你在短時間內打造一項不受時間地點限制的專業技能,開始接案,最終達成「邊工作邊旅行」的生活方式。

以下是接案常見的兩大迷思:
1. 架網站的專業技能,一定要寫程式嗎?不用!不寫程式也能做出單一案子價值10萬以上的網站。
2. 接案能力要比上班族更好?不用!有時候我甚至覺得上班族的能力比接案者強大很多,只是思維不同、不知道原來這些能力可以接案賺大錢,突破後你會發現人生可以自由很多很多。

這些都歡迎在免費諮詢時跟我聊聊~
✨點此預約免費諮詢

或許你會喜歡👩🏻‍💻

2022

2023自學法語 | 透過AI輔助

5元台幣做好2吋申請護照用的照片

Line Notify token 申請教學

2023 我換了 Macbook Air M1

數位遊牧在海外門號怎麼辦 | 在海外如何收簡訊驗證

數位遊牧的筆電應該怎麼挑選 | 充筆電的行動電源旅行實測

世界上並不存在成功與失敗

行銷人絕對不知道的行銷秘密 | 用 Nginx 做行銷?

我如何從零開始網路創業到開始變現 | 一個月內網路創業成為全職教練

我如何快速修正問題

我的大量諮詢系統進化過程 | 如何管理大量線上諮詢

2月份全數諮詢完畢3月份準備開始安排 | 大量諮詢的心得

30分鐘前接到兩個案子並解決了 | 接案能力要很強?

紀念收到國際學生 | 最低手續費國際收款 | 美金收款 | 跨境收款

短時間內表單超過100人填寫的心得 | 公私域流量怎麼操作 | 轉換率超過10%以上

提供大量免費諮詢後學習到的寶貴經驗

我靠賣課程財富自由了嗎

替自己產生的價值收費合理嗎?

傳統教育、自我懷疑與經濟困擾:粉絲諮詢的問題分析

3天IG破千粉心得分享 | IG高速漲粉心得

免費諮詢預約系統設定的心得 | 第一次提供大量諮詢

3年前我打造的電郵系統再次派上用場 | 創業不要隨意購買訂閱制產品

2月份諮詢全額滿

現在生活的日常

來自馬來西亞的軟體工程師 — CY | 粉絲諮詢心得

如何成為自由的軟體工程師

我的YouTube頻道10週年(已停更)

軟體工程師要賺錢就不該寫程式

為什麼30歲以前別存錢

諮詢最常見的三種人

經營自媒體的最大收穫 | 我如何認識美國創業家

在台灣我如何熟悉全英文環境

我用 ChatGPT 來幫我加速做 Side Project

數位遊牧怎麼住宿最便宜

如何透過ChatGPT幫我加速學習,接一個從未接過的案子!

自由工作者的2022覆盤+2023目標

25歲達到數位遊牧(邊工作邊旅行)

這禮拜的收穫有三件

學習的本質是什麼? 為什麼我們會焦慮? 求學、求職的經驗分享。

Indie developer blog - 獨立開發者的極簡部落格開發流程

我人生中上架的第一個Android App

軟體工程師的自我成長工具

一個人放空清淨的好地方

我所堅信的價值觀

我倚靠一個php檔,打造300多位使用者使用的網站

如何獲取寫文章的無限靈感

人生下一步該往哪走,你需要定義屬於自己的成功!| ikigai是什麼

給剛進入NFT市場的新手小白,別茫茫的進去當韭菜 | NFT投資心態

NFT項目 | 拿白名單的方法大公開

5分鐘教你快速開發Discord機器人

我開發了一款NFT通知機器人 | 2022最有可看性的產品,網友讚:已掌握財富密碼

Google Drive教育版不再提供無限儲存 | 教你一鍵無痛檔案轉移

【2022最新】圖解 Cloudways 主機架設Wordpress網站教學 | 圖解手把手教你架設CP最高的主機!

我想做自媒體但是不想讓朋友及老闆知道。其實你只是不相信自己。

欸你創業成功了沒

透過 Pi-Hole 還你一個乾淨的網路環境

How to install Raspberry Pi Imager on macOS

在校成績不好?傳統教育不適合你?或許你值得更好的選擇 - 創業

寫部落格一定要花錢嗎?

wordpress 發布文章教學

Godaddy 購買網域名稱教學

讀書不能財富自由,創造價值才能。