Hosting Typecho on Vercel

* [https://www.fordes.top/posts/tutorials/typecho-vercel/ - fordes123's Blog](https://www.fordes.top/posts/tutorials/typecho-vercel/)
* 记录本身, 即已是反抗
* 2024-03-22 07:26:00

Typecho is a lightweight PHP-based blogging platform with a small footprint and good extensibility. As a dynamic blog, its advantages speak for themselves, but it needs to run on a server and cannot be hosted directly on GitHub Pages like most static blogs, so maintenance costs can be substantial.
Luckily, we still have Vercel ~

---

Preparation

Since this article is called “Hosting Typecho on Vercel”, we'll first need a Github account 👻
fork Typecho, then clone it locally to make changes.

Create a routing entry point

Create an api directory in the project root, then create an index.php file inside it with the following content:

<?php
$file= __DIR__ . '/..'.$_SERVER["PHP_SELF"];

if(file_exists($file))
{
   return false;
}
else
{
    require_once __DIR__ . '/../index.php';
}

Add a Vercel configuration file

Create a vercel.json file in the project root with the following content:

{
  "functions": {
    "api/index.php": {
      "runtime": "vercel-php@0.6.0"
    }
  },
  "routes": [
    { "src": "/(.*)", "dest": "/api/index.php" }
  ]
}

Here, vercel-php@0.6.0 is the PHP runtime for Vercel. If you need a different PHP version, refer to the vercel-php documentation.

Remove the upload directory write checks

Projects deployed on Vercel cannot write files, so we need to remove Typecho's upload directory write checks.
Search the entire project for “上传目录无法写入” (“Cannot write to the upload directory”), then comment out the relevant code. In Typecho 1.2.1, for example, this is on lines 773-775 of install.php and lines 352-363 of Upgrade.php.

Create a Typecho configuration file

Create a config.inc.php file in the project root with the following content:

<?php
/**
 * Typecho Blog Platform
 *
 * @copyright  Copyright (c) 2008 Typecho team (http://www.typecho.org)
 * @license    GNU General Public License 2.0
 * @version    $Id$
 */
/** Enable HTTPS */ 
define('__TYPECHO_SECURE__',true);

/** Define the root directory */
define('__TYPECHO_ROOT_DIR__', dirname(__FILE__));

/** Define the plugin directory (relative path) */
define('__TYPECHO_PLUGIN_DIR__', '/usr/plugins');

/** Define the theme directory (relative path) */
define('__TYPECHO_THEME_DIR__', '/usr/themes');

/** Admin path (relative path) */
define('__TYPECHO_ADMIN_DIR__', '/admin/');

/** Set the include path */
@set_include_path(get_include_path() . PATH_SEPARATOR .
__TYPECHO_ROOT_DIR__ . '/var' . PATH_SEPARATOR .
__TYPECHO_ROOT_DIR__ . __TYPECHO_PLUGIN_DIR__);

/** Load API support */
require_once 'Typecho/Common.php';

/** Initialize the application */
Typecho_Common::init();

/** Define database parameters */
$db = new Typecho_Db('数据库驱动名称: Pdo_Mysql 或 Pdo_Pgsql', '表前缀 如: myblog_');
$db->addServer(array (
  'host' => '数据库地址',
  'user' => '数据库用户名',
  'password' => '数据库密码',
  'charset' => '数据库编码, 推荐：utf8mb4',
  'port' => 数据库端口,
  'database' => '数据库名',
  'engine' => '数据库引擎, 对于MySQL为 InnoDB 或 MyISAM',
  'sslCa' => '数据库SSL证书路径',
  'sslVerify' => 启用SSL证书验证 true 或 false,
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);

The only section you need to focus on is 定义数据库参数 (“Define database parameters”). Replace the placeholders with your database details, making sure to keep the quotation marks. You can delete any settings you don't need, such as sslCa and sslVerify.

Import a theme

Place the folder for your chosen theme in the /usr/themes directory.
If you use an open-source theme, you can add it as a submodule to make updates easier. Run the following command in your terminal:

git submodule add <主题仓库地址> ./usr/themes/<主题文件夹名>
# Example: git submodule add https://github.com/fordes123/gleaner .\usr\themes\gleaner 

Once you've completed these steps, commit your changes and push them to Github.

Note: I recommend making the repository private. If you must make it public, store sensitive information from config.inc.php, such as your database password, in environment variables and configure them in Vercel.

Deploy to Vercel

After logging in to Vercel, import the repository from the previous steps. If you're using environment variables, configure them here, then click Deploy.

Once deployment is complete, Vercel will automatically generate a domain for you. Append /install.php to the domain and visit it to open the installation page, then follow the prompts to finish the installation.

---

Appendix

Using PlanetScale

For hosting, we generally choose a free cloud database. For example, PlanetScale offers 5G of free storage with no connection limit. Since PlanetScale enables SSL by default, some additional configuration is required.

1. Add the PlanetScale Integration in Vercel

First, make sure you have created a database in PlanetScale. Then visit https://vercel.com/integrations/planetscale, select Add Integration, and authorize PlanetScale for our project. Vercel will automatically create a set of environment variables for the project:

• PLANETSCALE_DB: Database name
• PLANETSCALE_DB_USERNAME: Database username
• PLANETSCALE_DB_PASSWORD: Database password
• PLANETSCALE_DB_HOST: Database host
• PLANETSCALE_SSL_CERT_PATH: SSL certificate path

2. Modify the Typecho Configuration File config.inc.php

Again, focus on the 定义数据库参数 section and replace the relevant values with the environment variables above. For example:

/** Define database parameters */
$db = new Typecho_Db('Pdo_Mysql','表前缀');
$db->addServer(array (
  'host' =>  $_ENV["PLANETSCALE_DB_HOST"],
  'user' => $_ENV["PLANETSCALE_DB_USERNAME"],
  'password' => $_ENV["PLANETSCALE_DB_PASSWORD"],
  'charset' => '数据库编码, 推荐：utf8mb4',
  'database' => $_ENV["PLANETSCALE_DB"],
  'engine' => '数据库引擎, 对于MySQL为 InnoDB 或 MyISAM',
  'sslCa' => $_ENV["PLANETSCALE_SSL_CERT_PATH"],
  'sslVerify' => true,
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);

Once you have made the changes, commit and push them. Vercel will deploy automatically, and the remaining steps are the same as above.