跳转至主要内容
晴雨技术笔记

Linux安装WordPress Studio

杏川铭心 杏川铭心
发表于 2024年9月17日
  • 本文最后编辑于 642 天前,部分信息可能已严重过时,请注意甄别。
  • 前段时间WordPress.com发布了WordPress Studio这款工具,比较可惜的是官方没有提供打包好的Linux版本。

    好在Studio就是个Electron app,我们直接自己打包就可以了。

    克隆源码

    git clone https://github.com/Automattic/studio.git wordpress-studio

    安装依赖

    cd wordpress-studio
    nvm install
    nvm use && npm install

    这一步需要提前安装好nvm。需要注意的是nvm跟其他的软件包不同,安装完后不能马上使用,必须要进行一次配置。下面以Arch Linux为例示范一下nvm的安装与配置:

    sudo pacman -S nvm
    echo 'source /usr/share/nvm/init-nvm.sh' >> ~/.bashrc

    具体是使用.bashrc还是.zshrc需要根据你的shell来填写,相信这个难不倒广大Linux用户。

    进行打包

    npm run package

    创建应用程序启动项

    这一步完成之后只是打包好了二进制文件,但是这样每次要执行都得在命令行里面敲绝对路径,这还不得累死?

    好在一般的桌面环境都是支持自己创建启动项的;我们首先创建一个~/.local/share/applications/studio.desktop文件,然后在下面写上这些内容:

    [Desktop Entry]
    Name=WordPress Studio
    Comment=Studio By WordPress.com dev
    Comment[zh]=由 WordPress.com 开发的桌面 WordPress 开发工具
    Exec=/仓库的位置/wordpress-studio/out/Studio-linux-x64/studio %U
    Icon=/仓库的位置/wordpress-studio/assets/studio-app-icon.png
    Type=Application
    Terminal=false
    MimeType=x-scheme-handler/wpcom-local-dev;
    Categories=Development;
    

    这时候在你喜欢的桌面环境下搜索“WordPress Studio”,就可以找到这款软件了:WordPress Studio在KDE Plasma应用程序菜单中的样子。

    可能遇到的问题

    安装过程可能会遇到各种各样的问题,主要都是网络问题。下面就来介绍一下我遇到的几个问题和解决方案:

    npm install卡住

    这一步卡住,相信很多人就会去找npmmirror之类的镜像站,可是在这里配置完之后,居然还是卡住!

    查看控制台会发现卡在@wordpress/compose下的[wp-cli] x.xx%这里。打开scripts/download-wp-server-files.ts可以看到下面的内容:

    {
    	name: 'wp-cli',
    	description: 'WP-CLI phar file',
    	url: 'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar',
    	destinationPath: path.join( WP_SERVER_FILES_PATH, 'wp-cli' ),
    }

    相信看到raw.githubusercontent.com这个URL,大家就明白是怎么回事了。找个镜像就解决了…
    …可惜不只是这一个地方。这里改好了之后会发现又卡在了[sqlite-command] x.xx%这一步,对应的文件在src/lib/sqlite-command-release.ts这里。

    WordPress.com也不知道是发什么颠,在这里使用的居然是api.github.com这个域名…

    export async function getLatestSQLiteCommandRelease(): Promise< GithubRelease > {
    	const response = await fetch(
    		`https://api.github.com/repos/automattic/wp-cli-sqlite-command/releases/latest`
    	);
    	return ( await response.json() ) as GithubRelease;
    }

    常见的镜像方式在这里大概是行不通了,最后我的方法是在网站上创建一个文件,里面包含了这个API返回的JSON内容,然后对其进行修改,把browser_download_url这个字段改成镜像的地址。

    下面是截至本文撰写完成时这个API返回的内容,供大家参考:

    {
      "url": "https://api.github.com/repos/Automattic/wp-cli-sqlite-command/releases/168950477",
      "assets_url": "https://api.github.com/repos/Automattic/wp-cli-sqlite-command/releases/168950477/assets",
      "upload_url": "https://uploads.github.com/repos/Automattic/wp-cli-sqlite-command/releases/168950477/assets{?name,label}",
      "html_url": "https://github.com/Automattic/wp-cli-sqlite-command/releases/tag/v1.0.4",
      "id": 168950477,
      "author": {
        "login": "jeroenpf",
        "id": 10244734,
        "node_id": "MDQ6VXNlcjEwMjQ0NzM0",
        "avatar_url": "https://avatars.githubusercontent.com/u/10244734?v=4",
        "gravatar_id": "",
        "url": "https://api.github.com/users/jeroenpf",
        "html_url": "https://github.com/jeroenpf",
        "followers_url": "https://api.github.com/users/jeroenpf/followers",
        "following_url": "https://api.github.com/users/jeroenpf/following{/other_user}",
        "gists_url": "https://api.github.com/users/jeroenpf/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/jeroenpf/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/jeroenpf/subscriptions",
        "organizations_url": "https://api.github.com/users/jeroenpf/orgs",
        "repos_url": "https://api.github.com/users/jeroenpf/repos",
        "events_url": "https://api.github.com/users/jeroenpf/events{/privacy}",
        "received_events_url": "https://api.github.com/users/jeroenpf/received_events",
        "type": "User",
        "site_admin": false
      },
      "node_id": "RE_kwDOMfdmeM4KEfrN",
      "tag_name": "v1.0.4",
      "target_commitish": "main",
      "name": "v1.0.4",
      "draft": false,
      "prerelease": false,
      "created_at": "2024-08-06T16:41:18Z",
      "published_at": "2024-08-06T16:42:18Z",
      "assets": [
        {
          "url": "https://api.github.com/repos/Automattic/wp-cli-sqlite-command/releases/assets/184257628",
          "id": 184257628,
          "node_id": "RA_kwDOMfdmeM4K-4xc",
          "name": "wp-cli-sqlite-command-v1.0.4.zip",
          "label": "",
          "uploader": {
            "login": "github-actions[bot]",
            "id": 41898282,
            "node_id": "MDM6Qm90NDE4OTgyODI=",
            "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/github-actions%5Bbot%5D",
            "html_url": "https://github.com/apps/github-actions",
            "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
            "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
            "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
            "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
            "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
            "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
            "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
            "type": "Bot",
            "site_admin": false
          },
          "content_type": "application/zip",
          "state": "uploaded",
          "size": 667031,
          "download_count": 1767,
          "created_at": "2024-08-06T16:42:40Z",
          "updated_at": "2024-08-06T16:42:40Z",
          "browser_download_url": "https://github.com/Automattic/wp-cli-sqlite-command/releases/download/v1.0.4/wp-cli-sqlite-command-v1.0.4.zip"
        }
      ],
      "tarball_url": "https://api.github.com/repos/Automattic/wp-cli-sqlite-command/tarball/v1.0.4",
      "zipball_url": "https://api.github.com/repos/Automattic/wp-cli-sqlite-command/zipball/v1.0.4",
      "body": "- Ensure that the import and export commands run before WordPress loads"
    }
    

    这一步结束之后把上面文件里的地址改成你自己的地址,再npm install,OK,现在就不会卡住了。

    npm run package卡住或失败

    这一步同样也是网络问题,不过解决方法很简单,新建一个.npmrc文件,然后写入下面的内容:

    electron_mirror=https://npmmirror.com/mirrors/electron/

    npm run package,就能顺利跑下来了。

    结语

    以上就是在Linux下安装WordPress Studio的全部过程和问题。WordPress Studio的具体用法可以参考我的另一篇文章,WordPress Studio 的安装与使用

    • 特别提醒:

      评论看到就会回,但是不保证速度,有的时候站长忘记看的话就会出现审核好几天也没有动静的情况……

      有垃圾评论检查,如果评论之后直接消失、没反应说明被识别为垃圾评论了。

      如果等不及的话,可以加群!

    杏川铭心
    杏川铭心

    群号:1101838302,欢迎友好交流 :P 曾用名Frank419(现在也是我在很多地方的用户名),网站站长。

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注