目錄

從 Medium 到 Hugo,我的轉換、與樹莓派架站實務

這是一篇使用hugo自架網站的心路歷程。

講到架站,我已經想要擁有自己的網站很久很久很久很久了。
第一次接觸架站是小學上電腦課用Frontpage 2003兜出來的網站,當然老師就拿我們做的HTML放在學校的server給學弟妹看覺得好像很酷。
隔幾個星期後就開始學習一些概念,像是 IP 是什麼,然後在學校玩 Linux,第一次接觸的 distro 是 Linux B2D(還跟老師借了書),對那個醜到不行的 UI 給驚豔到(不過對當時的我來說,Linux=Coooool,所以其實我不是那麼在乎就是了),裡頭已經內建了許多架站必備的套件,用XOOPS就可以建立好一個網站。從此之後踏上了學習 Linux 的不歸路。

feel old yet?結果快轉到十幾年後的今天,當年有很多的東西都消失了(尤其是FrontPage或是Flash之類的),平台也改變了不少,現在大家架互動式網頁首選WordPress,靜態網頁才剛剛再度崛起,不知道再下一個10年網路世界究竟會長什麼樣子呢?(笑)

為什麼跳槽?

/hugo/images/2.jpg

我很喜歡 Medium。它提供了我更多受眾看我的文章,很直覺的 Clap 機制讓我覺得很有成就感。
但是這個平台實在是不太符合寫技術文章這樣的需求,原因大概如下:

  • 超渣的編輯器,而且不支援 Markdown 我以前感到最順手的 workflow 是會在 Notion 裡面用 Markdown 寫好稿子,copy paste 到 Medium,再一行行修格式外加上傳圖片(對,Notion 複製的圖片在 Medium 是無法貼上的),所以我每次寫文章這樣的複雜流程讓我感到極度痛苦,一直很希望能有個簡單的解決方式來處理這個問題。想當然地到最後就是空集合。
  • 文章顯示設計 Medium 受眾應該是比較屬於閱讀5–10分鐘長度的文章,對於動不動就又臭又長還含圖片的技術文章,在相對鬆散的頁面看起來就極度痛苦。另外就是沒有內建文內目錄的功能,所以可能要找一篇超長篇文章的一小段就會拉bar慢慢拉慢慢找,真的很沒有效率而且不友善。
  • 無中文 這個是目前讓別人幫我按拍手或是回應最大的門檻,因為你要做上面這兩件事的前提就是要看著英文的介面去辦帳號。雖然我的邏輯是英文是每個人都該會的東西,很討厭一看到英文就嚇個半死的人,但問題就是身邊大部分的人都是這樣的人,所以更不用說不會有人願意上一個英文網站冒險就是了。
  • 回覆視為新文章 這是我覺得 Medium 最智障的設計,之前有陣子超級討厭大家回覆我的文章就是因為這個,所以自己的回覆還會堆積在自己的草稿區,然後回覆的回覆還會一直不停的開新文章,這真的讓我討厭極了。所以雖然這個網站用 Disqus 但遠比 Medium 那個討人厭的機制好太多了…
  • 實現夢想 夢想就是前言所述。

總結上面的五大點,以及寫了一年多以來各種不滿的情緒,所以我這幾個月來就開始在尋找我的下一步… 題外話就是我對架站的知識是0,所以我有寫錯或是理解錯誤的話請提醒我修正吧,感謝感謝。 當然連我這種沒有知識的人都能開心的架好網站,那我相信任何人都可以的(?

下一步,哪裡?

在 2020 年,大部分的人架站幾乎都選 WordPress.com 或是 WordPress.org 了,畢竟有完善的後台,完善的theme,以及最廣大的使用群支撐,這真的很棒。但最近技術圈有個新的潮流就是利用SSG(Static Site Generator,又稱靜態網頁產生器)來架站,解決了 WordPress 又肥又慢的問題,而且以 Markdown 為基礎,速度極快,不太需要什麼維護,成本極低這種優勢,這讓我真的非常心動,最終我就開始往 SSG 這個方向去研究。

Static Site Generator

目前我覺得比較流行當 blog 的 SSG 分別為 使用 Ruby 的 Jekyll、使用 Go 的 Hugo 以及 使用 node.js 的 Hexo。其他不是沒有,就是單純這三個比較常見。

Jekyll 為 GitHub Pages 的後端,也是 GitHub 官方推薦的 SSG,網路上也有許多人在 Jekyll 跟 Medium 之間作抉擇,畢竟使用 Markdown 寫文,又有 GitHub 加持,不需要再購買空間跟域名就可以搞定一個網站,又具備比 Medium 還要更高的擴充性,就令人感到非常的心動。

Hexo 為一個專注於寫 blog 的網頁框架,其實上網看很多人的版面都能一眼就看出是用 Hexo 架出來的玩意,我個人是覺得很直覺,但是研究個幾天之後還是覺得擴充性不如我的預期所以作罷(畢竟我的技術力有限也沒辦法大改),所以作為一個純粹寫 blog 是很秤職沒錯,但有其他的需求可能就有點尷尬。

Hugo 是我在看 Chris Titus Tech 講 SSG 的影片意外看到的,主打用go語言,速度很快,一 Google 才發現原來使用者遠比 Hexo 還要多很多,討論也比較熱絡,所以我就毫不猶豫地直接選擇了Hugo,弄了幾天覺得許多功能也是我要的,最後就開始定型開始從 Medium 開始搬家。

/hugo/images/3.jpg

這裡附上一個 SSG 討論排名給各位參考,盡可能地從比較熱絡的引擎下手對於日後維護會比較有幫助些。
https://www.staticgen.com/

Hugo

/hugo/images/4.jpg

根據官方介紹,大致上如下

『Hugo 是個用 go 語言撰寫的靜態 HTML 與 CSS 網站產生器。特別以速度、易用跟可調整設定興做優化,從一個包含內容以及模板的資料夾並渲染為一個完整的 HTML 網站。
Hugo 依賴著 markdown 檔案以及文章設定資訊,而且可以從任何的資料夾運行,這非常適合在共用電腦,或是電腦權限不足的使用者使用。
Hugo 渲染一個普通大小的網頁只需要大概數秒鐘,單篇文章大概能在1微妙就完成。
Hugo 適合各式各樣的網站如部落格、或是文件等…』

所以總而言之就是因為這些特性讓 Hugo 成為各位愛用的 SSG,那我們今天就要來利用 Hugo 來建立屬於自己的網站。

環境與安裝

參考資料 https://gohugo.io/getting-started/installing/

雖然說 hugo 能夠在各種作業系統上面運作,不過看官方教學就一副就是在 Mac 上操作的,所以我們這邊當然就是要在 Mac 上面操作(← Windows Hater),在 Linux 上操作也差不多喔!

  1. 安裝 homebrew 如果你是用 macOS,輸入指令 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 如果你是用 Linux,輸入指令 mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
  2. 安裝 hugo,輸入指令 brew install hugo
  3. 檢查安裝版本(或是檢查是否安裝成功),輸入指令 hugo version

到了這個步驟,環境就大概建立好了。

另外就是做到這裡的你,如果還沒有寫 Markdown 的工具的話,可以去找一個來用。(當然覺得自己超棒要用文字編輯來寫MD也不是不行啦)
線上方案目前我最推 hackmd,軟體方案就有很多可以挑,我自己目前很懶都用 VSCode + Markdown 外掛來寫,可以順便部署網站其他的內容。

建立網站

環境來安裝好了就來建立網站吧

  1. 建立網站,輸入指令 hugo new site [你的網站] [你的網站] 請用自己的名稱套用,例如hugo new site mysite 輸入後就會在當前目錄(如果你終端機都沒有cd的話,那就是指~,也就是家目錄)建立一個新的資料夾作為網站,hugo 會幫你建立好所有的結構。
  2. 切換目錄,輸入指令 cd [你的網站] [你的網站] 請用自己的名稱套用,例如cd mysite
  3. Git 初始化,輸入指令 git init
  4. 尋找模板 這邊就要說明一下,Hugo有廣大的使用者製作許多的模板,建議可以到這邊查看,挑選一個自己喜歡的樣式。 Complete List | Hugo 通常在模板的頁面裡面都會附上一個 github 的連結,先把那個連結複製起來等等會用到。
  5. 套用模板,輸入指令 git submodule add [Git連結] themes/[佈景主題名稱] [Git連結] 請用剛剛複製的連結貼上去 [佈景主題名稱] 就是個簡短的名稱可自己設定 最後大概會像 git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  6. 將佈景主題資訊加到 config.toml 裡面,輸入指令 echo 'theme = "[佈景主題名稱]"' >> config.toml (你也可以直接開文字編輯器修改 config.toml) [佈景主題名稱] 用自己設定的名稱替換

新增內容

有了網站的架構之後就來寫點內容,當作 Hello World 吧!

  1. 輸入指令 hugo new posts/[文章名稱].md [文章名稱] 請用自己的名稱替換,也可以日後修正(直接改產生出來的檔名)沒問題 最後長得像這樣 hugo new posts/hello-world.md 這個是 contents/posts 資料夾內新增一篇文章叫做 hello-world 的意思
  2. 對 [文章名稱].md 打開文字編輯器進行編輯

對於沒有 Markdown 的人而言可能會很納悶,這種純文字的東西是要怎麼寫出一篇像是排版好的文章呢? 這就該去了解一下 Markdown 怎麼撰寫,學了之後效率大幅提升,就完全回不去了呢! Markdown 語法說明 ``tips 簡易教學

一級標題

二級標題

三級標題

四級標題

文字 單行程式
上下``` 多行程式碼
名稱 超連結
位置 圖片插入
等等還有更多,建議去看上面的語法說明學習吧``

檢視效果

  1. 輸入指令 hugo server -D
  2. 打開瀏覽器,輸入網址 localhost:1313 就會看到網站了

做到這邊在瀏覽器打開來,就會看到剛剛寫的文章搭在佈景主題上面,一整個就很有趣。 其實這個繼續講下去還有不少Know How,所以我想這點有機會再繼續講下去吧?(可能會有一篇follow-up) 給各位的建議就是多去把資料夾結構打開來看看裡面長什麼樣,為什麼會這樣寫,另外就是多到Hugo的Wiki去爬文,這樣子在日後除錯上會相對比較容易喔!

Medium to Hugo

/hugo/images/5.jpg

我在那邊手動移植,長篇文移一篇要花我30分鐘,我一整個大崩潰跑去Google看有沒有解決辦法…更崩潰的是已經有人寫了很多好工具來幫忙移植了,瞬間覺得剛剛在那邊 copy paste 的我腦袋根本就是壞了。(←可憐哪)

參考資料 https://github.com/bgadrian/medium-to-hugo

特色

  • 轉換 HTML 至 markdown 格式
  • 無視留言或是空文章
  • SEO 友善(會留下 Medium 文章原先的連結)
  • 盡可能地留下所有的文章結構與資訊
  • 如果有文章失敗將會繼續運行
  • 將草稿以 draft_ 放置
  • 抓取 Medium 原文 tag
  • 抓取文章所有的圖片
  • 文章以日期排序
  • 自動產生參數(image, images, slug, subtitle)
  • 清理 HTML 檔(移除空連結,重複標題等等)
  • 新增 #layout 確保版型盡可能與 Medium 相同

操作

  1. 下載你的 Medium 資料 (在 Settings > Account 裡面有個 Download your information,點擊 Download .zip 按鈕,就會發送一封下載連結到信箱。)
  2. 解壓縮你的 medium-export 資料夾
  3. 下載 medium-to-hugo
  4. 解壓縮後,打開終端機,cd 到對應的程式資料夾,像我這邊使用 macOS 操作如 cd ~/Downloads/mediumtohugo/macos/
  5. 輸入指令 ./mediumtohugo [Medium 輸出] [Hugo 資料夾] posts Medium 輸出是指你 medium-export/posts,用自己的位置替換 Hugo 資料夾是指你 [hugo專案]/ posts 是指新增你的文章至 posts 資料夾(也是大部分的人會新增的地方) 完整指令大概像是 ./mediumtohugo ~/Downloads/medium-export/posts/ /myblog/content posts

最後就會看到輸出資料夾有了轉好的成品,但問題是他把圖片放在文章目錄底下這樣我的環境根本就無法使用,所以我只要再一篇一篇挪路徑,加Tag跟一些必要的選項就搞定了,其實還是遠比我一篇一篇從0開始轉貼來得有效率多了。 整個文章處理好大概花了兩三個鐘頭吧,其實效率還不錯(其實我應該要修改一下他的程式符合我的需求應該能花更少時間就是了)。

這邊列一下我覺得不合需求的地方:

  • 將圖片放在文章資料夾底下 目錄結構就變成這樣⌞ posts ⌞ 文章 ⌞ images ⌞ index.md

所以我需要再手動調整,把images丟到 /static/images 底下,然後將 index.md 改名丟出去就好。

  • 層級結構不同 Medium 轉出的層級會變成 大標題### 小標題 ####,而我的 Hugo 主題要 ## 以上才會編列目錄,所以我需要將 ### 取代為 ## 這樣就可以了
  • 無法使用自定義的 Archetypes 轉換器會依照 Medium 的文章來自動建立 Archetypes,但是我的主題還有額外的參數需要追加(像是Tag,或是Description等等),所以我還是得要手動自己追加。

其他應該就沒什麼了,大致上來說還算好用啦!

Raspberry pi 部署

/hugo/images/6.jpg

看到老爸把買來當數位訊源的樹莓派插頭拔起來晾在哪邊就覺得很心痛(關於這點我改天再來講好了),所以就萌生出了「我只是拿來架一個靜態網頁伺服器,應該不會太吃資源吧」這樣的想法,所以就來嘗試實作看看了。

查了一下就連樹莓派官網都有拿pi當web server的文章,差點讓我懷疑官網是不是用一堆樹莓派來架站了(笑)。目前最流行的架站組合就是LAMP(Linux、Apache、MySQL、PHP)跟 LEMP(Linux、Ngnix、MySQL、PHP),由於我們只是要拿來放靜態網頁所以只弄了 Linux 跟 Ngnix 理論上就能夠完成了。

Raspbian

我們使用的系統直接用 Raspbian Lite 就可以了,畢竟我們純粹只需要用指令來進行控制。(其實不熟指令也不用擔心,在這邊除錯除夠久了自然就熟了哈哈)

官方網站 https://www.raspberrypi.org/downloads/raspbian/

  1. 選擇一個版本下載,我建議直接下載無圖形介面(Raspbian Buster Lite)的即可(反正其實操作都是在用指令就是了)
  2. 下載下來解壓縮,使用 Etcher 或是 Rufus 燒進 microSD 卡即可。
  3. 將 microSD 卡插入 Raspberry Pi,插電開機
  4. 開機到一半會詢問帳號密碼 帳號:pi 密碼:raspberry
  5. 初次設定,輸入指令sudo raspi-config
  6. 更改使用者密碼,游標移至1 Change User Password 按下 return,在裡頭輸入兩次密碼(不會顯示)更改密碼
  7. 開啟 SSH 功能,游標移至 5 Interfacing Options 按下 return,找到 SSH 選項按下 return,會詢問是否開啟選擇 Yes 按下 return
  8. 游標移至 Finish,回到終端機畫面,輸入指令 sudo reboot,重新啟動樹莓派

到了這邊樹莓派的基礎設定就結束了,可以回到電腦對 pi 進行設定了

  1. 連接樹莓派,打開終端機,輸入指令sudo ssh [email protected][IP位址] IP位址就使用樹莓派的IP替換,可以直接查看路由器的設定頁面,也可以趁這個機會設定IP保留(記得重開樹莓或是重抓DHCP),例如sudo ssh [email protected]
  2. 輸入密碼(不會顯示),按下return確認
  3. 檢查更新,輸入指令sudo apt-get update
  4. 若有(通常會有)安裝更新,輸入指令sudo apt-get upgrade (像我這邊就要更新63個套件,要很久很久很久很久)

Ngnix

參考資料 Setting up an NGINX web server on a Raspberry Pi

  1. 檢查更新 sudo apt update
  2. 安裝 nginx,輸入指令 sudo apt install nginx
  3. 啟動 nginx 伺服器,輸入指令 sudo /etc/init.d/nginx start
  4. 打開瀏覽器,輸入樹莓派IP,檢查是否安裝成功(顯示 nginx 網頁)

網頁部署

SFTP 傳輸

將網站上傳到樹莓派上面,我原先打算安裝套件 FTP 套件的,上網查了一下發現根本就沒人在用這種過時又不安全的東西,都改用 SFTP 去了。SFTP 是 FTP 的安全加強版,而且是走 SSH 的,不需要再安裝任何套件。

  1. 打開電腦中的 FTP 軟體,我自己是用 FileZilla
  2. 輸入資訊 主機: sftp://[IP位址] 使用者名稱: pi 密碼:[密碼] 點擊快速連線即可。
  3. 你就可以瀏覽樹莓派內部的結構

/var/www 權限調整

參考資料 /var/www/html permissions

你會發現將資料夾拖入 /var/www 內的時候會完全上傳不上去,存取權被拒絕。那是因為 /var/www 的權限是開給 root 使用者的,所以我們要修改權限才能寫入裡頭的內容。

  1. 將 www 資料夾開放給 www-data 群組的使用者,輸入指令sudo chown www-data:www-data /var/www
  2. 更改 www 資料夾為讀寫,輸入指令sudo chmod 775 /var/www
  3. 將 pi 使用者加到 www-data 群組內,輸入指令`sudo usermod -a -G www-data pi```tips:
    chmod 三個數字代表的意義為
    擁有者、群組、其他用戶
    而數字本身的意義=是
    7 = 4(讀)+2(寫)+1(執行)
    5 = 4(讀)+1(執行)
    4 = 4(讀)````所以文內的 chmod 775 就是代表 擁有者可讀寫跑、群組可讀寫跑、其他人可讀跑``

Ngnix 設定

參考資料 Deploying a static Hugo site with NGINX

  1. 安裝 vim 文字編輯器,輸入指令sudo apt-get install vim
  2. 設定網站專屬的 Ngnix 設定檔,輸入指令 cd /etc/nginx/sites-available/
  3. 複製一份預設的設定檔,輸入指令cp default [你的網站] [你的網站]以自己的名稱替換,例如cp default mysite
  4. 編輯設定 vim [你的網站] [你的網站]以自己的名稱替換,例如vim mysite
  5. 打開來,按i切換編輯模式,修改內容server { listen 80; listen [::]:80;```` server_name [你的網域];```` root [網頁位置]; index index.html;```` location / { try_files $uri $uri/ =404; } }

server_name 後端加上你的網域名稱,例如 server_name www.mysite.com;
root 後端加上網站的資料夾位置,例如 root /var/www/mysite/public;
6. 編輯完畢,按esc退出編輯模式,輸入指令:wq按下return存檔並且離開

  1. 刪除預設的設定檔,輸入sudo rm /etc/nginx/sites-enabled/default
  2. 將設定檔連結到 sites-enabled 資料夾,輸入指令sudo ln -s /etc/nginx/sites-available/[你的網站] /etc/nginx/sites-enabled/[你的網站]
  3. 啟動 Ngnix,輸入指令sudo systemctl start nginx
  4. 啟用 Ngnix,輸入指令sudo systemctl enable nginx
  5. 打開瀏覽器,透過自己的網域查看網站是否運作tips: VIM 基本操作 https://gitbook.tw/chapters/command-line/vim-introduction.html````↑:q 不存檔離開 :wq 存檔離開 遇到唯讀檔後方要加! --NORMAL-- 瀏覽模式 ↓按I ↑按ESC --INSERT-- 編輯模式

SSL 加密

參考資料 Deploying a static Hugo site with NGINX

這年頭 SSL 加密算是必備了,就算我只是個寫文章的。這也會同時影響到自己網站的 SEO,所以很重要。 這邊就如參考資料一樣使用 certbot 來快速搞定,那我們就繼續吧

  1. 檢查更新,輸入指令sudo apt-get update
  2. 安裝certbot跟nginx套件包,輸入指令sudo apt-get install certbot python-certbot-nginx
  3. 初次設定,輸入指令sudo certbot --nginx
  4. Enter email address (used for urgent renewal and security notices) (Enter ‘c’ to cancel): 輸入你的 email
  5. 讀取 Let’s Encrypt 的使用者條款``- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Please read the Terms of Service at
    https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
    agree in order to register with the ACME server at
    https://acme-v02.api.letsencrypt.org/directory

(A)gree/(C)ancel:``

確定後,輸入A,按return

  1. 是否分享 email 給機構、接收新資訊 ``- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Would you be willing to share your email address with the Electronic Frontier
    Foundation, a founding partner of the Let's Encrypt project and the non-profit
    organization that develops Certbot? We'd like to send you email about our work
    encrypting the web, EFF news, campaigns, and ways to support digital freedom.

(Y)es/(N)o:``

我不太想接收這些訊息,輸入N,按return

  1. 列出網域名稱,詢問要幫哪個網域加上 HTTPS ``Which names would you like to activate HTTPS for?

1: www.mysite.com


Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):``

直接按下return套用所有的網域

  1. 是否重新導向非https網址至https,我們輸入2然後return ``- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    1: No redirect - Make no further changes to the webserver configuration.
    2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
    new sites, or if you're confident your site works on HTTPS. You can undo this
    change by editing your web server's configuration.

Select the appropriate number [1-2] then [enter] (press 'c' to cancel):``

  1. 打開瀏覽器,去檢查有沒有上綠鎖頭,有沒有https了 tips 如果更改設定後就發現網站整個上不去的話建議去檢查一下Port有沒有開 我在那邊除了兩個多鐘頭的錯只是因為路由器的port 443沒有開所以上不了站。

後記

所以架好站到我寫後記的時候已經過了將近一個星期,目前網站運作還算滿順利的,樹莓派比我預期的還要可靠就是了。
另外我有弄了 Google Analytics 來看我網站的流量簡直就是慘不忍睹呢,相對於每天有上百閱讀數的 Medium 那邊,這邊幾天下來只有 3 個查看數,其他沒意外應該都是我自己的。我在想是不是我哪裡沒設定好,上 Google Search 也都查得到我的網站跟文章,可能只是 SEO 超級低的關係吧(我猜應該是我的網域用免費學校的關係),關於這點我可能日後要來研究看看了…
在我 SEO 還沒處理好之前應該 Medium 還是會照 Po 啦,只是想看有目錄的技術文的人就要轉到這裡來才能滿足需要了。

最後的最後,這邊列出一些我覺得之後該處理的內容

  • SEO 優化 剛剛有寫的內容
  • 續篇內容 網域 礙於窮學生的預算目前暫時先拿交大的免費網域的服務來玩玩看,順便弄懂流程,我覺得是還不錯啦!不過很不意外的SEO超級低就是了哈哈(苦笑)
  • 續篇內容 Config.toml 這個就是網站的設定檔,原本想說theme都有寫好的範本但不是每個theme都有的樣子,所以這個勢必是要去了解的…
  • 續篇內容 圖片優化 這點我覺得滿值得拿出來講的,畢竟是自架有了流量與空間問題,這勢必得要優化的。
  • 續篇內容 Google Analytics與Google Search Console 沒了 Medium Stats 的我還是得要有工具可以看來源跟客群(滿足我的成就感)這些內容應該也是可以寫進去,我覺得蠻值得一講的。
  • 續篇內容 土炮的主畫面背景圖 這個是在沒有教學的狀態下自己硬幹出來的,雖然只有達到我預期70%的效果,但有總比沒有好(笑)。
  • 續篇內容 Disqus 留言板 沒了留言功能讓我有點難過,不過我的 theme 已經幫忙寫好了有關 Disqus 的功能那我就直接套用了
  • 續篇內容 Liker 按鈕 這個也是土炮放進去的,我在GitHub上面找到有人打包成JS的套件likeco-btn,基本上只要知道JS要放在哪個位置即可有什麼內容希望我補充的,就傳個建議讓我知道吧,如果我有餘力就來寫一下(笑)

其他暫時想不到了,那今天就先這樣吧(苦笑) 希望你能從這篇文章獲得什麼?




謝謝您的閱讀。
如果喜歡我的文章,您的 5下鼓掌 將會成為我寫作的動力。

點擊上方鼓掌登入 LikeCoinID點擊鼓掌5下
使我獲得回饋且無須付費轉化為寫作的助力。
您也可以留言、追蹤我,在未來期望也能夠有與您交流互動的機會。