Category: Coding

  • Integrating Excalidraw with Remix React

    Integrating Excalidraw with Remix React

    —

    by

    Gabriel JC
    in , ,

    Excalidraw is a famous Client Side whiteboard tool to make you easy sketch with handwriting style, widely adopted by Developers and Designers. Reference: https://docs.excalidraw.com/docs、https://excalidraw.com、https://github.com/remix-run/remix/discussions/8877 What…

  • Resend 免費 SMTP 三分鐘內讓你的 APP 寄出 Email

    Resend 免費 SMTP 三分鐘內讓你的 APP 寄出 Email

    —

    by

    Gabriel JC
    in , , , ,

    Resend 是 YC 2023 的一個項目，他注重開發者體驗，讓程式開發及 Email API 合而為一，而且每個月提供 3,000（每日 100）封免費 Email！設定也非常簡單易懂。這篇會使用 Remix (React) 示範。 Reference: https://resend.com/、https://react.email Why Resend 這個真的是嚇爆，之前在思考我是否應該自架郵件伺服器，甚至去研究了 Postfix，結果不知道為什麼當初沒有找到的 Resend 重新出現在我眼前。 雖然主打程式開發，但其實一般人也能直接使用哦！就像其他的 SMTP 平台一樣。…

  • 部署流程自動化 GitHub CD w/ Flask & Deploy Keys

    部署流程自動化 GitHub CD w/ Flask & Deploy Keys

    —

    by

    Gabriel JC
    in , , ,

    每次寫完程式碼 Push 上 GitHub 後，就要手動部署一次（我是部署在 GCP），所以今天來處理 CD (Continuous Deployment) 的部分，使用 GitHub Webhhok 到我的 Server，使用 Flask 接收並執行 Bash Script。 Reference: https://docs.github.com/en/authentication/connecting-to-github-with-ssh/managing-deploy-keys#set-up-deploy-keys 簡單說明達成 CD 的邏輯 這篇適合已經熟悉 Nginx…

  • Deploy Docker Compose on Azure Failed

    Deploy Docker Compose on Azure Failed

    —

    by

    Gabriel JC
    in , , ,

    This is a relatively easy post to record the steps to deploy docker images with docker compose. Reference: Snap install Docker、Manage Docker as Non Root…

  • docker-compose 一次建立多個 Container

    docker-compose 一次建立多個 Container

    —

    by

    Gabriel JC
    in , , ,

    當一次運行多個 Container 時，這個 docker-compose 就派上用場了，他可以在一個文件中定義多個 container，不論是從當前的相對目錄裡面的 Dockerfile build image，還是直接從 repository pull image 然後放在一起跑。 定義你的 Dockerfile Dockerfile，建議在瀏覽前先知道設定單一 Container 怎麼做，看這篇：Docker container intro。 這個部分很簡單，但先有一個從你的程式資料夾複製到 image 資料夾的概念，你可以整包 COPY .…

  • Linux Postfix Mail Server with Gmail SMTP

    Linux Postfix Mail Server with Gmail SMTP

    —

    by

    Gabriel JC
    in , , , ,

    安裝完 Bitnami Stack 之後發現 WordPress 無法寄信，稍微研究後了解是因爲我根本沒有裝 MTA (Mail Transfer Agent) 或常稱 Mail Server，在 DNS 上會看到 MX，所以這篇來筆記一下安裝 Postfix 並配置他使用 Gmail SMTP 的過程（借用別人的 MTA）。 Reference: https://linux.vbird.org/linux_server/centos6/0380mail.php#postfix 前言…

  • Create an Easy Flask on GCP with Apache

    Create an Easy Flask on GCP with Apache

    —

    by

    Gabriel JC
    in , , ,

    Quick and easy note to deploy a Python Flask app on GCP(Google Cloud Platform), including configuring Apache web service and Certbot Free Let’s Encrypt SSL/TLS.…

  • Free SSL/TLS On Linux Apache With Flask

    Free SSL/TLS On Linux Apache With Flask

    —

    by

    Gabriel JC
    in , , ,

    This article is going to make Flask site served with Apache secured with SSL/TLS using Let’s encrypt. Reference: https://console.cloud.google.com/marketplace/product/bitnami-launchpad/wordpress?hl=zh-TW、https://docs.bitnami.com/google/apps/wordpress/、https://certbot.eff.org Introduction I’m using Apache serving my…

  • Remix Nested Route（嵌套路由） Explained

    Remix Nested Route（嵌套路由） Explained

    —

    by

    Gabriel JC
    in , , ,

    對剛開始學 Remix 的人，他的路由系統應該會看得很辛苦，沒關係我也是，所以就寫了這篇來記錄一下該怎麼好好的寫好這些路由。 Reference: https://remix.run/docs/en/main/components/outlet、https://remix.run/docs/en/main/file-conventions/routes解釋影片：https://www.youtube.com/watch?v=QONJCXsZt58Route Demo：https://interactive-remix-routing-v2.netlify.app Remix Route 名詞解釋 1. Route 在你的 route 裡面，長 your_route.tsx 會自動產生一個 route，可以從 /your_route 進入。在 Filing 系統中，你的檔案夾名稱就會是 route，而 Remix 會自動取得檔案夾下面的 route.tsx…