flchenhp (chenhuaping)

用 kamal 部署 rails 至阿里云主机总结

flchenhp — Mon, 13 Apr 2026 01:25:32 +0800

需求背景

rails 开发速度很快，体验很好，但是如果无法部署到服务器上，最后也就是自己在本机玩玩，开发的网页服务不能给别人使用。我在 deepseek 的帮助下经过一周的摸索终于实现了部署，特记录供自己后期查阅，也供其他人借鉴。真的感谢好时代，有 deepseek 不然想也不敢去想我一个个人业余开发者，身边没一个同语言开发指导老师怎么敢去想自行摸索完成部署功能。

让 deepseek 总结 kamal 一次完整部署的生命周期

下面是 Kamal 从初始化到部署完成的完整工作流程，每一步都对应具体的操作：

阶段 0：准备工作（只需一次）

初始化配置：运行 kamal init，生成 config/deploy.yml 配置文件
配置服务器列表：在 deploy.yml 中指定服务器的 IP 地址或域名
配置容器注册表：设置注册表的用户名和密码（通过环境变量加密存储）
设置 SSH 密钥：确保本地可以免密登录服务器
编写 Dockerfile：Rails 7+ 会自动生成，确保镜像构建正确

阶段 1：初始部署（`kamal setup`）

这个命令会完成服务器的首次配置：

SSH 连接并安装 Docker：连接到配置文件中的服务器，如果 Docker 未安装，自动通过 apt-get 安装
登录容器注册表：在本地和远程服务器上都登录，以便推送和拉取镜像
构建 Docker 镜像：使用项目根目录的 Dockerfile 构建镜像
推送镜像到注册表：将构建好的镜像推送到配置的容器注册表
在服务器上拉取镜像：通过 SSH 命令让服务器从注册表拉取镜像
启动 Kamal Proxy：确保代理服务正在运行，并监听 80/443 端口
启动应用容器：基于拉取的镜像启动新的 Docker 容器
健康检查：验证应用是否响应 GET /up 请求（必须返回 200 OK）
清理旧资源：删除未使用的镜像和停止的容器，防止磁盘占满

阶段 2：后续部署（`kamal deploy`）

这是日常更新应用的命令，只执行部署流程，不重复安装 Docker：

构建新镜像：基于最新的代码构建新版本镜像
推送到注册表：新镜像被推送到注册表，标签通常是 Git commit hash
SSH 连接服务器并拉取新镜像：服务器从注册表拉取新版本镜像
启动新容器（旧容器仍在运行）：在旧容器旁边启动新容器，确保服务不中断
健康检查：等待新容器通过健康检查（GET /up）
Kamal Proxy 切换流量：代理原子性地将流量从旧容器切换到新容器
停止旧容器：新容器稳定运行后，停止并删除旧容器
清理资源：删除旧镜像和未使用的容器，释放磁盘空间

我理解 kamal 的功能（没怎么接触过 docker）

我理解 kamal 大致功能是先将本机的开发环境和项目通过 docker 打包成镜像，push 到镜像仓库，然后登陆服务器先下载 docker，然后从镜像仓库 pull 这个镜像再还原运行。之前尝试过在本机和服务机均安装网络代理工具，这一步实现了，但是直接参考 rails guide 部署还是会存在问题，没搞明白。只能尝试将所有可能会用到科学上网的源替换成国内的源。

部署记录

step1：准备 hello world 项目

新建 rails 项目

ruby -v
rails -v
rails new rails106

用编辑器（我用的是 trae）打开项目，做初始化保存

#iterm
git add .
git commit -m "initial commit"

将 gem 源改成 rubychina 的源

# gemfile
-source "https://rubygems.org"
+source "https://gems.ruby-china.com"

添加 hello world 页面

#iterm
rails g controller welcome index

# app/views/welcome/index.html.erb
+<h1>hello world</h1>
-<h1>Welcome#index</h1>
-<p>Find me in app/views/welcome/index.html.erb</p>

# config/routes.rb
  root "welcome#index"
  get "welcome/index"

启动项目，查看 hello word 页面

# iterm
bin/dev

将代码加入 git 保存

# iterm
git add .
git commit -m "add hello world page"

step2:选择云主机

阿里云主机可以直接添加 docker，免去安装 docker 的麻烦。直接用 root 账号和设定的自定义密码，这个会用于远程服务器。

远程主机验证 docker 安装成功：

# 云主机命令行
docker --version
docker run hello-world

step3:申请阿里云容器镜像服务（ACR）

进入控制台：登录后搜索“容器镜像服务”，或直接访问容器镜像服务控制台。
按提示创建个人版实例（下面的信息都很重要，部署的配置文件要用）
按提升建立命名空间
按提示设置密码，获取登录命令
获取个人加速器地址

step4:在本机下载 docker

访问 Docker Desktop for Mac 下载页面选择适宜自己电脑版本下载安装
点击 Mac 顶部菜单栏的 Docker 图标，选择 Settings。在左侧菜单选择 Docker Engine，将阿里云和一些其他的加速器地址填上 { "builder": { "gc": { "defaultKeepStorage": "20GB", "enabled": true } }, "experimental": false, "registry-mirrors": [ "https://5ex1e6il.mirror.aliyuncs.com", "https://docker.1panel.live", "https://hub.rat.dev", "https://docker.m.daocloud.io", "https://docker.nju.edu.cn", "https://docker.xuanyuan.me", "https://docker.1ms.run" ] }
打开“终端”应用，运行docker --version 和docker run hello-world 进行验证 docker 是否正确安装

step5:进行部署配置

#rails106/config/deploy.yml
-image: rails106
+image: myrailsapp/rails106 # myrailsapp是阿里云的镜像仓库命名空间

-    - 192.168.0.1
+    - 47.x x.xx.236 # 这是阿里云的IP地址

-  server: localhost:5555
+  # 这里填阿里云的镜像仓库的公网地址
+  server: crpi-xxxxxxxxxxx.cn-zhangjiakou.personal.cr.aliyuncs.com 

-  # username: your-user
+  # 这里填阿里云的账号
+  username: chenxxxxxx21

-  # password:
+   # 这里填阿里云的镜像的固定秘密
+  password: cxxxxxx9

代码类似

# rails106/Dockerfile
-# syntax=docker/dockerfile:1
+# #syntax=docker/dockerfile:1 # 第一行这里要再加个注释符号注释，不然会报错，不知道为什么

-FROM docker.io/library/ruby:$RUBY_VERSION-slim AS base
+# FROM docker.io/library/ruby:$RUBY_VERSION-slim AS base
+# 要换成ruby的国内的源，不然会卡住
+FROM docker.m.daocloud.io/library/ruby:$RUBY_VERSION-slim AS base

WORKDIR /rails
+# 设定 apt 源为阿里云镜像，不然会卡住
+RUN sed -i 's/deb.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list.d/debian.sources && \
+    sed -i 's/security.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list.d/debian.sources
# Install base packages
RUN apt-get update -qq && \

代码类似加入 git 仓库

# iterm
git add .
git commit -m "add deploy set"

step6:打部署命令开始部署

# iterm
bin/kamal setup

部署成功：浏览器输入 ip 测试大功告成！！！

将 macbook pro 自带的 zsh 界面美化升级

flchenhp — Thu, 04 Sep 2025 17:03:24 +0800

macbook pro 自带的 zsh 界面略简陋，美化升级一下可以带来更好的开发体验，主要通过安装 oh my zsh 和 iterm2 来实现。原生界面：美化后的界面：

zsh、oh my zsh 和 iterm2 各是什么？

简单来说，它们的关系可以用一个比喻来理解：

Zsh：是汽车的发动机。
Oh My Zsh：是汽车的智能驾驶系统、内饰和装饰件。
iTerm2：是汽车的车身、座椅、仪表盘和控制台。下面我来详细解释每一部分的作用和它们如何协同工作。 * * * ### 1. Zsh (Z Shell) - “发动机”
它是什么：Zsh 是一个 Unix Shell，与你可能听说过的 Bash、Ksh、Tcsh 是同一类东西。它是一个命令行解释器，是你和操作系统内核之间进行交互的桥梁。
它的角色：它是核心，是真正执行你的命令（如 ls, cd, git commit 等）的东西。没有它，你的终端窗口就是一个空壳。
Mac 现状：从 macOS Catalina (10.15) 开始，Zsh 已经取代 Bash，成为所有新用户账户的默认 Shell。所以你的 MacBook Pro 原生就在使用 Zsh。 ### 2. Oh My Zsh - “智能系统和装饰”
它是什么：Oh My Zsh 是一个用于管理 Zsh 配置的开源框架。它本身不是一个独立的 Shell。
它的角色：原生的 Zsh 功能强大但配置起来非常复杂，就像一台没有任何内饰和电子系统的裸车发动机。Oh My Zsh 的作用是：
1. 简化配置：它提供了一个结构化的、易于编辑的配置文件（~/.zshrc），让你通过简单的修改就能启用强大功能。
2. 提供主题：它收集了数百个主题（主要是修改命令提示符 prompt 的外观），让你一键更换界面风格（如你之前问的 Agnoster 主题）。
3. 管理插件：它提供了海量的插件生态系统，可以轻松安装和管理插件，为你增加命令补全、语法高亮、Git 状态显示等功能。
总结：Oh My Zsh 不替代 Zsh，而是运行在 Zsh 之上，让它变得更强大、更美观、更易用。你没有 Oh My Zsh 也能用 Zsh，但会麻烦很多。 ### 3. iTerm2 - “车身和座舱”
它是什么：iTerm2 是一个终端模拟器（Terminal Emulator），是 macOS 自带“终端”（Terminal.app）的一个功能强大的替代品。
它的角色：它是一个应用程序，是显示命令行界面（CLI）的那个窗口。它的职责是：
- 呈现文本界面
- 处理窗口分割、标签页
- 管理配色方案、字体、光标样式
- 提供搜索、回放、自动完成等增强功能
关键区别：iTerm2 不关心你里面运行的是 Zsh、Bash 还是 Fish。你可以在 iTerm2 的设置里指定使用哪个 Shell（比如 /bin/zsh 或 /bin/bash）。它只是为 Shell 提供一个更好的“运行环境”和“显示容器”。 * * * ### 三者如何协同工作？ 一个典型的、美化了的工作流程是这样的：
你打开 iTerm2 应用程序（它代替了难用的原生 Terminal）。
iTerm2 启动，并根据它的设置，去调用系统的 Zsh。
Zsh 启动时，会加载 Oh My Zsh 的配置框架。
Oh My Zsh 根据你的 ~/.zshrc 文件，应用你选择的主题（控制文字、颜色、图标显示）和插件（增加功能）。
最终，你看到了一个功能强大、色彩绚丽、提示信息丰富的命令行界面，并在其中高效地工作。 ## 具体美化步骤 ### step1:用 iTerm2 更换终端模拟器 iTerm2 是一款完全免费的，专为 Mac OS 用户打造的命令行应用，支持分窗、搜索、自动补全、自定义快捷键等强大功能，是替代 macOS 自带 Terminal 的优秀选择。
安装方法：访问iTerm2 官网，下载并拖拽到应用程序文件夹即可。得到成功如下：打开 item 将主题颜色修改为程序员喜欢的暗黑配色： ### step2:安装 oh my zsh Oh My Zsh 是一个开源的、社区驱动的框架，用于管理 Zsh 配置，它提供了大量的主题和插件，让 Zsh 配置变得简单有趣。安装指令：sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)" 得到的成果： ### step3:选择 oh my zsh 主题 oh my zsh 有许多主题，详细可查看oh my zsh 主题列表。其中 Agnoster 主题：一款非常流行的主题，显示信息丰富（如 git 状态、上一命令返回值等），是程序员喜欢的一款主题，我也选择这个。设置步骤：修改配置文件：nano ~/.zshrc 注释掉这一行：#ZSH_THEME="robbyrussell"，添加这行：ZSH_THEME="agnoster" 保存配置退出到命令行注意：许多漂亮的主题使用了特殊图标，需要安装 Powerline 字体才能正确显示。安装步骤：依次执行 git clone https://github.com/powerline/fonts.git --depth=1 cd fonts ./install.sh cd .. rm -rf fonts 选择刚安装的字体：让修改的配置生效：source ~/.zshrc，得到效果图： ### step4:安装 oh my zsh 插件 oh my zsh 的插件列表：网址链接，其中 zsh-autosuggestions、zsh-syntax-highlighting 是两个非常推荐的插件。 sh-autosuggestions：根据历史命令自动建议补全，用方向键→或 Ctrl+F 接受建议，效率神器。下载指令： git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions zsh-syntax-highlighting：为命令提供语法高亮，书写错误时会显示红色，正确则为绿色。下载指令： git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
将两个插件添加配置文件： nano ~/.zshrc 找到插件配置行，原始为：plugins=(git) 修改成：plugins=( git zsh-autosuggestions zsh-syntax-highlighting ) 注意：zsh-syntax-highlighting 必须放在最后。
保存配置后退出到命令行
使刚修改的配置生效：source ~/.zshrc。
得到的效果如下图： ### iterm2 常用的命令 ## 搞定完成任务，给自己点个👍，嘎嘎～

在 rails8 项目中引入 bootstrap5

flchenhp — Tue, 02 Sep 2025 13:19:57 +0800

为什么我选择 bootstrap5 而不是 tailwildcss

原因是我前端菜鸡，从来没有好好认真写过 css，虽然 tailwildcss 给了原子粒度的工具类名，让你很容易能定制自己的轮子，但是我根本不知道一个能看的过去的轮子怎么搭建，还是 bootstrap 这种直接给出的还比较好看的组件适合我，我可以像搭积木一下搭出一个能比较好看的网页。

在 rails8 项目中引入 bootstrap5

step1.新建 rails8 项目

rails new rails101 cd rails101 用 rubymine 打开项目： rubymine .

step2.引入 bootstrap css 和 icon

将以下链接添加到 app/views/layouts/application.html.erb 的

中，由于我电脑连接 jspm.io 有问题，切换其他 CDN 源为 jsDelivr 或 unpkg 的链接：

<!-- 引入 Bootstrap CSS 和 Bootstrap icon -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

step3.引入 bootstrap 的 js

在 config/importmap.rb 中添加 bootstrap 的 js 文件的 url

# 将原来的 jspm.io 链接替换为 jsDelivr 或 unpkg 的链接
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.esm.min.js"
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"

测试引入 bootstrap 的效果

step1.生成测试页面

rails g controller home index

step2.在 config/routes.rb 中修改成 root 路径指向测试页面路径

root "home#index"

step3.添加 bootstrap5 的测试代码

在测试页面 app/views/home/index.html.erb 填入

<h1 class="text-danger"><i class="bi bi-wifi">good</i>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<div class="container mt-5">
  <h2 class="text-primary">Hello, Bootstrap!</h2>
  <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Demo Modal
  </button>

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Bootstrap Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>
            Wow! A modal is working without any build tool!
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

step4.浏览器查看效果

启动项目 bin/dev 在浏览器访问http://127.0.0.1:3000/ 得到效果图如下，bootstrap 的 css、js、icon 功能均生效

用 bootstrap 为网站添加常用一些 partial 模块

Step 1. 新增 app/views/common 资料夹

mkdir app/views/common

touch app/views/common/_navbar.html.erb 填入

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">
    <img src="https://img1.baidu.com/it/u=2544257883,100398830&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="logo" style="width:40px; margin-left: 15px">
  </a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>

    <form class="d-flex">
      <input class="form-control me-2" type="text" placeholder="Search">
      <button class="btn btn-primary" type="button">Search</button>
    </form>

    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">登录</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">注册</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>

  </div>
</nav>

Step 3. 新增 footer touch app/views/common/_footer.html.erb 填入

<footer class="fixed-bottom bg-light p-3 text-center">
  <p class="mb-0">
    Copyright ©2025 rails101
    <br>
    Design by chenhuaping
  </p>
</footer>

Step 4. 新增 flashes

touch app/views/common/_flashes.html.erb 填入

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-<%= flash_class(key) %> alert-dismissible">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <%= value %>
    </div>
  <% end %>
<% end %>

增加 flash 的辅助模块 touch app/helpers/flashes_helper.rb 填入

module FlashesHelper
  FLASH_CLASSES = { danger: "danger", success: "success", warning: "warning", info: "info", primary: "primary"}.freeze

  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end

  def user_facing_flashes
    flash.to_hash.slice "danger", "success", "warning", "info", "primary"
  end
end

Step 5. 将新增几个 partial 加载显示

在 app/views/layouts/application.html.erb，将<%= yield %>换成以下代码：

<div class="container-fluid">
      <%= render "common/navbar" %>
      <%= render "common/flashes" %>
      <%= yield %>
      <%= render "common/footer" %>
    </div>

Step 6. 触发 flash 功能

在 app/controllers/home_controller.rb 中 index 方法中添加触发代码

def index
    flash[:primary] = "测试flash功能！"
  end

step7.浏览器中查看效果

刷新网址http://127.0.0.1:3000/navbar, footer, flash，均正常显示

大功告成

给自己点个👍，嘎嘎

macbook pro 安装 rails 开发环境记录

flchenhp — Sun, 31 Aug 2025 23:01:37 +0800

之前的 macbook pro18 年买的，配置太低 8g 内存 100g 硬盘，经一次换屏幕多次换电池，现在已难以使用，出现硬盘空间不足，在开发高负荷运转时发烫严重、风扇很响问题。我由于不是程序员，业余爱好而已，身边也没有可以指导的老师，rails 代码水平基本停留在 CRUD 水平，本来对 code 已经停了几年的我完全没兴趣的再去淘个 mac 再来练习 code，在上个月偶然尝试用 deepseek 来指导我写个 ruby 脚本解决我工作中遇到的建立 ip 台账的工作，发现竟然成功完成了我的任务，这是我之前不敢想的，因为完全靠我自己，我对这个脚本代码要如何编写毫无头绪，至此打开了让 deepseek 指导我写代码的大门，我尝试让 deepseek 教我实现 devise 的登录触发邮件确认功能，尝试让 deepseek 教我写关注功能（当前琢磨了 2 个月才实现这个功能，deepseek 几十秒就出来了），让我又有了兴趣再继续来玩玩 code，所以在抖音商城淘了个二手的 21 年款 m1 芯片、32g 内存、500g 硬盘的 mac，再次出发来练习练习 code。

在我的过去的认知，编程领域要出发去探索 ruby on rails 的世界，开发环境安装就是一个很大的拦路虎，小白基本上是很难完全靠自己装载好 rails 的开发环境，特记录我这次在新二手 mac 安装 rails 开发环境的过程，供其他人参考。

我在安装过程遇到过一些问题，直接把报错黏贴给 deepseek，它会告诉你如何解决，deepseek 真是个不厌其烦的称心老师。

安装 rails 开发环境

1、安装 Xcode

Mac 上建立程序开发环境的辅助应用程序。

安装步骤：

在苹果的 app store 找到后安装、启动执行，首次执行，Xcode 会要求同意“使用者协议”，选择 Agree

安装成功：

xcode 图形软件可正常启动

2、安装 Command Line Tools

Command Line Tools 是一种可以编译程序的软件。但我们不会直接使用它，你可以把它想成是电脑执行编程需要的软体工具跟套件之一就可以了。

安装步骤

到 Mac 的 Spotlight

搜寻 Terminal

打开你的“Terminal” （终端机）程式。（注意：未来我们都会透过这个程式来输入程序指令）

在终端机里输入安装指令：

xcode-select --install

安装成功指令：

xcode-select -p

会输出：/Applications/Xcode.app/Contents/Developer

3、安装 Homebrew

Homebrew 是开发者社群专为 MacOSX 打造的第三方套件管理程式，比如说安装 Ruby 需要一些编译工具或函式库，这些工具或函式库，可以从 Homebrew 取得。

从官网安装：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

使用官网因为网络问题可能会卡，建议使用清华大学镜像安装指令：

/bin/bash -c "$(curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/mirror-scripts/install.sh)"

使配置立即生效指令：

source ~/.zshrc

确认安装成功：

brew --version

会输出版本信息：Homebrew 4.6.7

4、安装 ImageMagick 和 vips

ImageMagick 和 vips 是专门处理图片的函式库。未来我们在 Ruby 中常常需要使用 ImageMagick 和 vips 相关的功能，所以通常在初始环境时，我们也会一并先安装。

brew install imagemagick vips

确认是否安装成功？

vips --version

会输出版本信息：vips-8.17.1

5、安装 PostgresSQL

PostgresSQL 是一套强大的资料库。许多网站开发预设使用 PostgresSQL 作为底层资料库。在初始环境时，我们也会一并先安装。

安装指令：

brew install postgresql

设定开启：

brew services start postgresql@14

确认安装成功：

psql --version

会输出版本号：psql (PostgreSQL) 14.19 (Homebrew)

6、安装 RVM

在 Mac 开发 Ruby on Rails 程式时，因为 Ruby 版本更新很快，常常会遇到一些版本与权限上的问题。所以当在开发时，我们通常不会使用系统内建的 Ruby。而是会改采用一套 Ruby Version Manager 去管理 Ruby 的安装与升级。透过 Ruby Version Manager ( RVM) 去安装 Ruby。

安装 GPG 密钥 (用于验证安装脚本正确性）：

gpg --keyserver keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

安装指令：

\curl -sSL https://get.rvm.io | bash -s stable

使 rvm 立即生效：

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"

source ~/.zshrc

确认安装成功

rvm --version

会输出 rvm 版本：rvm 1.29.12 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]

7、安装 ruby

将 gem 源换成国内的速度会快一点：

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

ruby 安装指令：

rvm install 3.4.5 --with-openssl-dir="$(brew --prefix openssl@3)"

注：我安装时如果不带后面参数会报错，正常应该不用带参数

ruby 是否安装成功：

rvm list

会输输出已安装成功的版本 ruby：

ruby-3.4.5 [ arm64 ]

设定默认使用的 ruby 版本：

rvm alias create default ruby-3.4.5

查看当前使用 ruby 版本：

ruby -v

会输出当前使用 ruby 版本

8、安装 rails

rails 是我们开发网站要使用网站框架

安装指令：

gem install rails -v 8.0.2

确认安装成功：

rails -v

会输出 rails 版本：Rails 8.0.2

9、安装 node 和包管理工具 yarn

安装指令：

brew install node

brew install yarn

安装是否成功：

node --version

会输出 node 版本信息：v24.7.0

yarn --version

会输出 yarn 的版本信息：1.22.22

10、安装 rubymine（非必选，建议此编辑器，其他还有 atom 等免费方案）

官网下载安装，淘宝买个激活账号，大概十 - 几十块

测试 rails 开发环境是否成功

新建 rails 项目指令：

rails new rails101

设置命令行可启动 rubymine 打开项目编辑

用 rubymine 打开这个项目

然后开始配置后期可通过命令行启动 rubymine 步骤：

macOS: 点击顶部菜单栏 Tools -> Create Command-line Launcher...。

它会弹出一个对话框，显示默认的命令和路径（通常是 /usr/local/bin/mine）。

直接点击 OK 或 Create 即可。

修改配置启用命令行启动 rubymine 设置：

nano ~/.zshrc

在文件的末尾添加下面这行代码。这行代码的作用是将 RubyMine 的路径追加到现有的 $PATH 变量中。

export PATH="/Applications/RubyMine.app/Contents/MacOS:$PATH"

在 nano 编辑器中，按 Ctrl + O（写入）、按回车确认文件名、按 Ctrl + X（退出）。

让配置立即生效：

source ~/.zshrc

测试：关闭 rubymine，cd rails01，rubymine .,正常 rubymine 就会打开这个项目。

测试

bin/dev启动项目，http://127.0.0.1:3000/可打开出现如下图，说明开发环境配置成功

大功告成

大约花了我 1 天多的时间～

收集的可用的 ruby gem 源

flchenhp — Fri, 29 Aug 2025 04:31:13 +0800

1、官方的：https://rubygems.org

2、rubychina 的：https://gems.ruby-china.com

3、清华的：http://mirrors.tuna.tsinghua.edu.cn/rubygems

4、华为云：https://mirrors.huaweicloud.com/repository/rubygems/

5、阿里云：https://mirrors.aliyun.com/rubygems/

6、腾讯云：https://mirrors.tencent.com/rubygems/

均已经通过 rails8 项目安装 gem 测试有效

开发一个类似 logdown 的博客网站 loglearn

flchenhp — Sun, 06 Aug 2023 18:21:21 +0800

一直很喜欢 logdown 的的代码展现方式，代码可以添加文件路径，能让初学者不迷路。所以搞了个类似的网站：网址：http://loglearn.fun/

用 Rails 开发的一个财报展示网站 - 财报营

flchenhp — Mon, 12 Jun 2023 18:14:00 +0800

用 rails 开发的一个财报展示网站 - 财报营：https://caibaoying.fun/，欢迎大家浏览提出优化建议

用 social-share-button 给文章加个社交分享功能

flchenhp — Sun, 29 Aug 2021 10:46:56 +0800

原文链接，原文展示效果更佳哦～

why：为什么要分享？

文章分享有以下几大好处：

得到点赞鼓励，可以正循环促进自己坚持写作
得到批评意见，可以进行针对性的改善，提升自己的写作能力
如果是无理的谩骂，直接无视，也能锻炼一下自己的厚脸皮和抗击打能力

what：功能效果是什么样子？

点击文章里微信图标，弹出二维码界面：

用微信扫描二维码会用微信打开这篇文章，点右上角课选择分享到到朋友圈或者朋友。其他社交网站还支持微博，Facebook，Twitter 等等好多个。

how：如何一步步实现？

Rails 的魅力就在于很多功能，别人都已经帮你写好了，我们只需要拿来用就可以，不用什么都自己做～

Rails 实现社交分享超简单，写好的 gem 叫social-share-button，下面我就一步一步完成吧～

+ gem 'social-share-button'

执行bundle install

引入 js 和 css

  //= require bootstrap/modal
+ //= require social-share-button
+ //= require social-share-button/wechat
  //= require_tree .

 +@import "social-share-button";

  .....
  .....
+/****** 分享按钮样式 ******/
 +$size: 24px;
 +
 +.social-share-button {
 +  .ssb-icon {
 +    background-size: $size $size;
 +    height: $size;
 +    width: $size;
 +  }
 +}
 +/****** 完成分享按钮样式 ******/

给分享功能做配置

执行touch config/initializers/social_share_button.rb，新增配置文件

SocialShareButton.configure do |config|
  config.allow_sites = %w(weibo qq wechat douban twitter facebook)
end

你也可以自定义选择你希望分享的社交网站，具体参考：github 的说明文件

在 post 的 show 页面中增加分享的链接图标

<%= social_share_button_tag(@post.title, 'data-wechat-title' => '#{@post.title}') %>

验证效果

可以找个文章的 show 页面，点击尝试分享。

大功告成，啦啦啦～

参考文章

新上线 Rails 网站的 SEO 优化要点

flchenhp — Sat, 28 Aug 2021 18:40:52 +0800

原文链接，原文展示效果更佳哦～

什么是 SEO

新网站上线的下一个课题

当你的网站开发辛辛苦苦开发上线了，你的会遇到的下一个问题是如何推广，如何让用户发现有你这么个网站，解决思路主要有：

出钱去做推广，比如出钱在百度上买某些关键字，用户在搜索这些关键字的时候就会优先把你的网站展现出来，但是用 rails 开发的主要都是创业公司，每一分钱都很宝贵。
SEO 是另一个解决思路，SEO 的全名是（Search Engine Optimization），也就是让自己的网站符合搜索引擎的规则，提高网站权重，理想目标是能夠在搜尋页面前几笔就能被曝光。

SEO 权重要点

虽然 SEO 的权重规则基本上一直在变化，权重的給分也随着技术升级而有了新的规则，像以往的网站只是网站，現在的网站还要能能够支持 RWD（responsive web design 响应式网站设计）來让移动端的浏览时能够更加轻松，也免去了做 mobile app 的工作（有能力两个都做当然更好）。

搜索引擎如 google 会定时派爬虫來爬网站，爬完之后依照权重重新去排名，权重大致上要在乎的就是几点：

善用 Meta Tag / Meta Data 帮网址划重点
Url 具有意义
HTML tag 沒有乱用，例如一大堆 h1
采用 HTTPS 连接
支持 RWD（Responsive Web Design）
网站开启速度快
语系和国家
Sitemap
爬虫
浏览量

SEO 优化参考标准

Meta Tag / Meta Data 优化

Title Tag: 当前页面的标题，关键字要往前放，字数不宜过长，否則有可能被认为是权重作弊，建议

英文字数 70 以內
中文字数 40 以內

范例：

<title> Rails 好用常用的gem汇总 | 结构化写作网</title>

Meta Description Tag: 每个页面的敘述，文案好坏间接影响点阅率

含标点符号的英文在 150 字內
中文十二字內，关键字往前放

范例：

<meta name="description" content="rails社区丰富的gem，是帮助rails工程师快速、快乐开发的好帮手，其中好用常用的已帮大家收集">

以上兩個标签非常重要，每一個頁面一定要不一樣，如果过多重复，搜索引擎会认为你在作弊，是会扣分的哦

如：Facebook Open Graph: 这是专门給 Facebook 抓取用的，可以在这些 meta tag 里面调整你要分享出去的內容长什麼樣子，如果都沒有设定，他会默认抓取你的 title description tag 來作为参考。

可以用 Facebook debug tools 來作为侦查改善的工具

Facebook 分享缩略图设定范例：

<meta property="og:image" content="https://example.me/img/about.jpg">

Twitter Cards: 这个就是专门给 Twitter 抓的，一样可以调整分享后的的样式。

在 Rails 實作部分可以用

seo_helper
meta-tags

网址优化

Canonical Url 告诉搜索引擎关于这个页面的标准网址，有时候我們一个页面会带很多参数，可能是语系、搜索参数等等，這個标签可以让搜索引擎只收录正确的网址就可以了。

例如：

https://www.example.com/products?category=dresses&color=green

后面就带了 category 和 color 的传递参数，这样的网址看起來会非常不舒服。

那么 Canonical Url 这个 tag 就可以这样写：

<link rel="canonical" href="https://www.example.com/products" />。

这样子就不会把一些带有参数的网址收录到搜索引擎下了

让 URL 具有意义 禁用链接，如果有一些链接你不想被计入 SEO，那么你可以使用 nofollow 标签。

關於 nofollow 介绍

情況大概会是，付费链接、留言里的链接，或是登入登出这种沒有必要被收入的链接会用到

范例：

link_to "不想被收录", awesome_path, rel: 'nofollow'

在一般 CRUD 出來的网址，通常都会是

http://example.com/products/1

那这个产品的 URL 是用数据库的 ID 作为依据，这样以来光看 URL 是沒有任何意义的，也无法提升权重，比较好的作法是让网址具有意义

http://example.com/products/aeron-chair http://example.com/products/xbox-360-white

这样一來，不仅一眼就能够看得出來这个 product 是什么，也能提升搜索的权重。

怎么做呢？

在 Rails 上面可以使用 friendly_id 这个 Gem，

详细的实作我在之前有写过一篇使用 Friendly_id 与 Babosa 美化你的 Rails 网址

在这里面的教学還可以让 URL 带中文的 slug。

几点需要注意的是，如果要提升网域的权威性，请在主网域使用例如：

http://example.com/products/aeron-chair

会比

http://shop.example.com/products/aeron-chair

来的更好，因为他可以直接提升 http://example.com 的网域分数。

HTML 标签优化

慎用 HTML tag，HTML tag 如果乱用，例如在同一个页面有一大堆 h1，是相当扣分的行为。

因为 HTML tag 其实就是拿来替你的网页画清楚重点，他是一個具有意义的語言

HTML 当初在设计时，本身就带有「语意」

你可以这样理解

h1 是大标题
h2, h3 是中标题
h4, h5, h6 是小标题
p 是指 paragraph (段落)
strong 是重点部分，他与 b 不同的是，b 只有粗体，但 strong 是加重语气，如果是盲人使用阅读器在观看你的网站时，加重语气可以让辅助导读的软体能够正确的念出这段话
img 中的 alt 是指替代文字，title 是标题

开发者希望他的网站能正确被收录，那么你就应该正确的使用 HTML 语意标签。

补充一点，

是对 SEO 沒有特別的加分或扣分效果，因为从以前就很流行以 div + CSS 来达到网站前端画面开发，毕竟 div 沒什麼包袱，它就是个区块

所以

与是沒有语意的，他只是容器

规则标准：

h1 一个页面只能有 1 个
h2 一個页面只能有 2~3 个
h3 一個页面可以有 6~10 个

HTML 标签权重由高至低：

title > meta description > h1 > h2 > h3 > strong > p

连接安全优化

优先采用 HTTPS 连线

因为近年來非常重视资讯安全问题，尤其现在很多金流行为是可以透过网址传输完成的，这当中可能会有信用卡等交易的机密资料，那么用 HTTPS 可以避免被第三方监听，因为这个过程是加密传输的。

HTTPS 是指你的网址有沒有安裝 SSL（Secure Sockets Layer , 传输层安全协议），如果你有确实安裝 SSL 的认证，通訊协定就会从 HTTP 改变为 HTTPS（Hypertext Transfer Protocol Secure , 超文字安全传输协议）。

在 2014 年時，Google 官方正式宣布 HTTPS 已被列入搜索引擎演算法之一

但如果你的网站只是「內容型网站」，沒有涉及到用户资安问题（例如交易），就目前來说，不使用 HTTPS 并不会有「超大的影响」。

不过值得注意的是，从 2017 年 10 月起，从 Chrome 62 开始，只要是需要输入任何资料的网页，若未使用 HTTPS，即会被标示为不安全。

參考 Google Chrome 官方文章

也因为 SSL 的凭证基本上都是要钱的，但也有很好心的公司 Let’s Encrypt 大力推广加密凭证的安全，也有放出三個月免费的版本，过期的话就要重新签名。

申请凭证的流程大致上是：

先自己生成一个私钥、一个申请用的凭证 CSR
將 CSR 传上去给凭证机构
凭证机构审核你真的拥有这个网域
下载 SSL 凭证
將私钥和 SSL 凭证安裝到网站服务器上
如果主要客戶不是在中国，那么可以更简单的申请使用 Cloudflare 这个 CDN 服务，這包含免費的 SSL 憑證，可以免去申請安裝的麻煩。它的 Flexible SSL 模式，可以让終端使用者到 CloudFlare 是加密连线，而你的服务器不需要安裝。使用 Cloudflare 需要將 DNS 也給它管理，在注册的流程中会要求你去修改 Namecheap 改用 Custom DNS。

支持 RWD 响应式网页设计

做 RWD 的好处是可以保有连接单一性，让原本的流量不会因为移动设备而沖散，因为这个链接的浏览量会让他的权重变高，更容易出現在搜索排名上面，但如果分別做 mobile/desktop 版，就会有两种不同的网址链接，会让 SEO 的效果打折。

RWD，也不是有做就好，而是会去依照载入速度有不一样的评分。

详细可以到 Google 提供的简易测试工具来测试一下你的读取秒数吧，依照 Google 說法是人的耐性只有三秒 XD，那就尽可能的压到 3 秒以下吧 XDrz。

网站开启速度

通常一个网站会慢多半不是后端处理 query 的速度，都会是在前端资源情況吃太紧，既然要作最佳化就必須要用科学化的方式测量，这样一来我们才知道最佳化有沒有成功。

Chrome 的除错器本身就很详细，可以观察 Network 在 Load page 花了多长的时间。

对前端来说，重视的是 Page load time, 而不是单一 request 的时间，因为网页的组成有 HTML + CSS + JavaScript

Google 提供的好用工具 PageSpeed Insights

PageSpeed Insight 评分标准

或是用 Chrome 外挂 Lighthouse

都有清楚的报表以及提示你如何改善。

知识点，在 HTTP2 以后，有 async 和 defer 属性可以用。

以往的关键渲染会是把 javascript 移出 head, 让 CSS 优先加载达到画面快速渲染，在载入能够有互动式效果的 JS file。

不过新的属性可以让浏览器知道要异步加载

例如

-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :async => true %>

或是

-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :defer => true %>

async 与 defer 差別在于

async, 浏览器不会阻挡 HTML 渲染，当 JavaScript 下载完成时就会自动加载，不会等 HTML DOM 加载 defer, 浏览器也不会阻挡 HTML 渲染，但是当 JavaScript 下载完成后，会等 HTML 加载完成，才会执行 JavaScript。如果你的 JavaScript 里面有依赖 DOM 的話，适合用这个方式。 CSS 也被浏览器视为一种 render blocking 的资源，当浏览器解析 HTML 看到 <link href="style.css" rel="stylesheet" 时，就会等待完整解析这个 CSS 后才会继续渲染頁面。

语系与国家

如果你的网站本身有支援多语系，那么沒有设定好的情況会变成说，不论哪个国家的搜索引擎搜到你，进来都还要自己調整语系，而且在 google 搜寻结果上面也会 bian 得怪异，例如：美國 IP 搜出來的标题是中文之类的。

所以別忘記在你的 html tag 裡面加入

<html lang="zh">

可以参考 Apple 官方网站的作法，该网站是很标准的能够支援多语系 SEO 的写法，具体如下

<link rel="canonical" href="https://www.apple.com/">
<link rel="alternate" href="https://www.apple.com/" hreflang="en-US">
<link rel="alternate" href="https://www.apple.com/ae-ar/" hreflang="ar-AE">
<link rel="alternate" href="https://www.apple.com/ae/" hreflang="en-AE">
<link rel="alternate" href="https://www.apple.com/am/" hreflang="en-AM">
...

这样就能够让搜索引擎正确在每个国家直接显示相对应语系的网站了。

这个方法不是唯一，你也可以选择用 Sitemap 的方法來让搜索引擎正确收录。

择一即可。

制定 Sitemap

Sitemap 基本是描述一个网站的架构，它可以是任意形式的网页页面，通常是采用分级或分类的形式，能够消化庞大的网站架构，对于网站的访问者在网站浏览上的资讯需求也能快速获得，且能提高 SEO 搜索引擎优化的效果，对网站的帮助是非常大。

参考 Apple 繁体中文官网的 Sitemap

在这部份用 Gem“sitemap_generator”可以轻松帮你完成，并且有 rake task 能够让你每次产生新內容的時候更新上去。

爬虫

在 Rails 的路径public/robots.txt 是专门拿來給搜索引擎爬虫读取的，这只档案会告诉他什么资源不需要被收录。

参考 Apple 官方网站的 robots.txt

不过有时候我们除了 Production 环境以外，可能还有 Staging，避免被收录的化可以依照环境动态生成 robots 这只档案。

get '/robots.txt' => 'home#robots'
def robots                                                                                                                                      
  robots = File.read(Rails.root + "config/robots.#{Rails.env}.txt")
  render :text => robots, :layout => false, :content_type => "text/plain"
end

分別在 public/下生成robots.staging.txt, robots.production.txt

就可以做到根据环境控制生产 robots.txt生成了

參考 Gist

浏览量

你的网域权重的提升也会因为浏览量的高低有不一样的排名，所以过时的导流进去，让更多用戶喜欢上这个产品能够不断回访网站，会让权重分数慢慢往上爬，這就跟养小孩一样，需要一点时间才会成长。

Google 是会將大量的垃圾链接或不优质的內容降低权重的，所以非常重视网站经营者生成的內容，他们的演算法会一直更新，阻挡那些尝试作弊欺骗权重的网站，最后一点就是认真经营网站喽。

參考資源

Rails 好用常用 gem 汇总

flchenhp — Fri, 27 Aug 2021 11:45:51 +0800

原文链接，原文展示效果更佳哦～

好用的 Gem 列表

本页用于介绍 Ruby 社区里面那些特别热门的 Gem，以下 Gem 可以在 rubygems.org 找到。

实用的 RubyGems 排名站点 www.ruby-toolbox.com

前端常用

bootstrap 来自 Twitter 的 Bootstrap，是一套完成的前台 CSS 框架。以简洁，优雅著称于世。被无数攻城狮所青睐，又让无数程序猿审美疲劳。

font-awesome-sass icon 图标

simple_form 和 Formtastic Rails 为我们带来和一改传统的表单构件方式，但是经过实际的使用，我们渐渐发觉这样依然还是不够“敏捷”，我们需要更加简便并具有更细致规范的表单，所以有了 Formtastic，它用起来比 Rails 默认的 form 更加简洁，但是却具有更多的功能，你可以为每个字段设定 help-text 放到文本框下面，并可以走 I18n 的方式设置语言，具体参见 Railscasts 上面对于 Formtastic 的介绍。而 simple_form 和 Formtastic 功能类似，但它的写法还要简单一些。

ClientSideValidations 现在越来越多网站为了改善用户体验，使用 JavaScript 来进行客户端验证。对于程序员来说，也因此增加多一份工作。而往往客户端的验证逻辑跟服务端的验证逻辑几乎一样，如果要另外再写一次验证代码，实在不够 DRY，client_side_validations 正是为解决此问题要出现。client_side_validations 会读取服务端的验证逻辑并生成对应的客户端验证逻辑（依赖 jQuery），让你几乎不用增加任何前端代码就可实现客户验证。

bootstrap-datepicker-rails bootstrap 风格的日历

select2-rails: 下拉提示 select 框（支持前端和后端）

会员系统常用

Devise 用于快速构建用户功能，如：注册，登陆，个人设置，找回密码... 同时 Ruby 社区有各类和账号体系的库可以很容易和 Devise 打通。

RuCaptcha 图片验证码，安全、简单、易用，无依赖。

rolify Very simple Roles library without any authorization enforcement supporting scope on resource obje

CanCanCan 一些应用中会用到为不同用户设定不同功能的权限，你可以试试 CanCanCan 这个 Gem 他可以帮你制定一套完善的方案，Railscasts 上有使用介绍。

如果 Devise 一样，CanCanCan 在 Ruby 社区也是非常流行，所以和它有关的实现非常多，你能很容易找到资料。

OmniAuth 如果你需要在项目中实现三方平台（如：Twitter, Facebook, 新浪微博，腾讯 QQ）账号登陆的支持，那你需要用上它。

omniauth-weibo-oauth2 omniauth-qq-connect omniauth-wechat-oauth2

Doorkeeper 前面说了 OmniAuth 介入 OAuth 2 的服务，有时候你可能需要自己建立一个 OAuth 2 服务，作为提供商，这个时候 Doorkeeper 可以帮到你。

china_sms：短信平台接口， https://github.com/saberma/china_sms wechat-rails：帮助开发者方便地在 Rails 环境中集成微信公众平台提供的所有服务 rqrcode：生成二维码

内容功能常用

will_paginate 和 Kaminari 分页，几乎所有 Rails App 都在用，其中 will_paginate 比较老，应用案例较多，kaminari 更新，性能和兼容性更好

Carrierwave 和 Paperclip 这两个都是上传组件，Paperclip 是老牌产品了，也是几乎绝大多数项目都有在用它，它可以帮你处理上传图片，裁减，定义不同的图片尺寸，几乎很完美。而 Carrierwave 是后起之秀，功能和 Paperclip 差不多，但它还可以管理除图片之外的东西，而且灵活性更高（ruby-china 就是用它）。国内的各大云存储服务都已经有了 Carrierwave 的支持，例如 carrierwave-aliyun, carrierwave-upyun。

WiceGrid 表格控件，针对 ActiveRecord，超级强大，支持任意字段排序，过滤，具体看它的 Demo.

elasticsearch-rails 实现全文搜索或搜索有关的功能，目前要数 Elasticsearch 最火，它也有 Ruby 的实现。

Ransack
常用的搜索插件

social-share-button 分享功能

ancestry 树形结果的方式存储，可以看作是一对多、多对多的扩展

by_star 这是一个辅助 ActiveRecord 的组件，让你可以简单的实现按某年，某月，某日，或者星期几，来查询数据，用起来非常简单，省下麻烦的条件组合，此外，它还可以查询上一篇，下一篇类似的功能。

lazy_high_charts 当前绘图 JS 库中 Highcharts 非常优秀，rubyist 使用这个 gem 来管理和编写需要的图。

rmagick
图片处理确保安装了 ImageMagick，rmagick 是 ImageMagick 的中间件，用于对图片进行切割等操作。mini-magick 稳定，占用内存小，但是功能比 rmagick 少

acts_as_list 给 model 中的对象进行排序记录在 position 字段中

chinese_pinyin 转化汉字为拼音 eg: Pinyin.t("中国") => "zhongguo"

acts-as-taggable-on 管理标签的插件

spreadsheet 操作电子表格

china_city 省市区级联

aasm ruby 状态机

awesome_nested_set Model 多层类别

内容输入

redcarpet Markdown 标记语言

后台管理

active_admin 后台管理框架

部署

capistrano 项目自动化部署

开发测试常用

RailsSettingsCached 项目经常会有一些配置信息，你需要一个库帮你管理。

annotate 在 model 类的顶部或者底部，插入数据库表的描述，方便查看

faker 生成假数据

pry 简单强大的调试工具，轻量级的工具。直接在终端调试方便又直接

Better Errors 它用一个更好的，更有用的错误页替换标准的 Rails 错误页面，对 Rack middleware 也同样有效。·Railscasts 也有相应的介绍。

Seed Fu 强大的 seed

Grape 随着 Mobile App 的增多，很多时候我们在做用 Rails 做 API Base 项目时，rails 自带的 C 和 V 层显得过于繁杂，grape 可以帮助我们快速的构建和 Rails 完美融合的 API 接口。

Faraday HTTP Client 支持多种方式

rails_best_practices 编写代码总有方圆，费心费力写文档，还不如用这个工具来控制代码质量。

daemon-spawn 将一些事情作为 daemon 来启动，可以类似 Debian 的 service foo start 比如用来管理 Resque 的启动和重启，会变得很简单。

rest-client：Http 客户端

生产运维性能常用

Whenever Linux 里面有 Cron 可以帮助我们定期执行一些任务，但是 Cron 手动写起来很是麻烦，尤其是前面时间周期的定义，Whenever 可以帮助我们用更人性化的方式编写 Cron 任务，具体参见 Railscasts 上面关于 Whenever 的介绍。

Sidekiq, Resque 和 Delayed_job 有时候一些任务的执行会很慢，而这些任务我们并不要求需要马上返回结果 (比如：发送邮件，生成图片缩略图)，那我们可以选择将这些任务放到后台执行，以便于页面不会长时间等待执行。

god Ruby 进程监控工具

second_level_cache ActiveRecord 二级缓存插件，装上他你可以无缝的实现对 ActiveRecord 数据的二级缓存。

paper_trail 记录 model 数据的变化

爬虫常用

Nokogiri 采集数据是我们需要解析复杂的 HTML 结构，从中获得需要的数据，Nokogiri 可以帮助我们完美的处理不同网页上面不同的 HTML 结构，并且有很好的编码处理能力，用它你不用担心页面是 GB2312 还是 GBK 还是 UTF-8，它都很很好的处理，解析结构可以用类似 jQuery 的 CSS Selector 的方式查找，很是方便。曾经用过 Ruby 的好几个类似插件，最终发现 Nokogiri 才是最好的。

SEO 优化

sitemap_generator 生成网站的 sitemap.xml 文件

flchenhp (chenhuaping)

用 kamal 部署 rails 至阿里云主机总结

需求背景

让 deepseek 总结 kamal 一次完整部署的生命周期

阶段 0：准备工作（只需一次）

阶段 1：初始部署（kamal setup）

阶段 2：后续部署（kamal deploy）

我理解 kamal 的功能（没怎么接触过 docker）

部署记录

step1：准备 hello world 项目

step2:选择云主机

step3:申请阿里云容器镜像服务（ACR）

step4:在本机下载 docker

step5:进行部署配置

step6:打部署命令开始部署

将 macbook pro 自带的 zsh 界面美化升级

zsh、oh my zsh 和 iterm2 各是什么？

在 rails8 项目中引入 bootstrap5

为什么我选择 bootstrap5 而不是 tailwildcss

在 rails8 项目中引入 bootstrap5

step1.新建 rails8 项目

step2.引入 bootstrap css 和 icon

step3.引入 bootstrap 的 js

测试引入 bootstrap 的效果

step1.生成测试页面

step2.在 config/routes.rb 中修改成 root 路径指向测试页面路径

step3.添加 bootstrap5 的测试代码

step4.浏览器查看效果

用 bootstrap 为网站添加常用一些 partial 模块

Step 1. 新增 app/views/common 资料夹

Step 2. 新增 navbar

Step 4. 新增 flashes

Step 5. 将新增几个 partial 加载显示

Step 6. 触发 flash 功能

step7.浏览器中查看效果

大功告成

macbook pro 安装 rails 开发环境记录

安装 rails 开发环境

1、安装 Xcode

2、安装 Command Line Tools

3、安装 Homebrew

4、安装 ImageMagick 和 vips

5、安装 PostgresSQL

6、安装 RVM

7、安装 ruby

8、安装 rails

9、安装 node 和包管理工具 yarn

10、安装 rubymine（非必选，建议此编辑器，其他还有 atom 等免费方案）

测试 rails 开发环境是否成功

新建 rails 项目指令：

设置命令行可启动 rubymine 打开项目编辑

测试

大功告成

收集的可用的 ruby gem 源

开发一个类似 logdown 的博客网站 loglearn

用 Rails 开发的一个财报展示网站 - 财报营

用 social-share-button 给文章加个社交分享功能

原文链接，原文展示效果更佳哦～

why：为什么要分享？

what：功能效果是什么样子？

how：如何一步步实现？

安装 social-share-button 这个 gem

引入 js 和 css

给分享功能做配置

在 post 的 show 页面中增加分享的链接图标

验证效果

参考文章

新上线 Rails 网站的 SEO 优化要点

原文链接，原文展示效果更佳哦～

什么是 SEO

新网站上线的下一个课题

SEO 权重要点

SEO 优化参考标准

Meta Tag / Meta Data 优化

网址优化

HTML 标签优化

连接安全优化

支持 RWD 响应式网页设计

网站开启速度

语系与国家

阶段 1：初始部署（`kamal setup`）

阶段 2：后续部署（`kamal deploy`）