Publish Static Blog with iPhone

First, let's face it#

The previous blog post about publishing blogs through Yuque was basically useless. Then, after getting the iPhone 13 pm, I remembered that iOS seems to have a powerful productivity app called Shortcuts (when you have a hammer, everything looks like a nail?). So I created this activity, which doesn't require writing an iOS client and allows you to publish static blogs directly from your iPhone.

Prerequisite knowledge#

Updating a GitHub repository using the API#

To implement this workflow, you first need to know how to update a GitHub repository using the API. I have mentioned this issue before, and updating a file is quite easy to understand.

Let's review it again here. The steps are similar to the ones mentioned in the previous article, but with some improvements:

Get the Ref: Ref refers to a Git reference, which points to a commit and makes it easier for you to find that commit. Otherwise, you would have to use its SHA-1 value to locate it. For example, heads/master is a Ref, so you can use this Ref to find the latest commit on the master branch instead of remembering a long hash value. In other words, the purpose of getting the Ref is to obtain the hash value of the latest commit.
Get the Commit Information: This step is used to get the SHA of the current commit's tree, which is needed when generating a new tree in step 5.
Create a Blob: This is equivalent to the "add" operation in a normal local commit.
Create a Tree: Build a new tree. The parameter base_tree used here comes from the Commit Information obtained in step 2. (In fact, the /git/trees API allows you to directly pass the content in this step, and the system will automatically generate the blob for you, eliminating the need to call the third step API.)
Create a Commit: Create a commit using the new tree. At this point, the submission is complete.
Update the Ref: Make the Ref of the master branch point to the version you just committed.

The core code (calling APIs) looks like this:

const updateGitHubRes = async function ({
  blob,
  encoding,
  path,
  commitMessage,
}) {
  const ref = await getRef()
  const commitSha = ref.object.sha
  const commitInfo = await getCommitInfo(commitSha)
  const commitTreeSha = commitInfo.tree.sha
  const blob = await createBlob(blob, encoding)
  const tree = await createTree(commitTreeSha, path, blob.sha)
  const newCommit = await createCommit(commitSha, tree.sha, commitMessage)
  await updateRef(newCommit.sha)
}

Previously, the steps for updating a repository in the GitHub API documentation were spread across multiple pages, but now they seem to be consolidated into a single page, making it more convenient to refer to. Also, please note that calling the API requires a personal access token, and you need to include Authorization: 'token ' + process.env.GH_TOKEN in the request header.

The lazy way#

Later, I found a more convenient update API in the documentation - /repos/{owner}/{repo}/contents/{path}

With this API, you can update a GitHub repository without worrying about the underlying Git commit process. It's a convenient option.

Serverless Function#

Simply put, Serverless means writing a function and deploying it to a specific endpoint. When that endpoint is accessed, the corresponding function is executed. In this function, you can access various request information, process the data, and return the result. It's a lightweight interface.

In this scenario, Serverless is perfect because using a personal access token doesn't require logging into a system, so there are no state issues. Additionally, when it comes to GitHub APIs, using a foreign service is faster than setting up your own server in China.

There are many providers that offer Serverless Functions, but I'll stick with the one I'm familiar with, Vercel, which provides free usage every month. After all, for normal usage, you won't exceed the free limit (unless you're uploading images like crazy).

Shortcuts#

Originally named Workflow, it became a built-in app in iOS and can be considered as a visual scripting tool. It's not difficult to understand, but it takes some time to get familiar with the operations (and it's a bit awkward to use on an iPhone, and it often triggers page flickering bugs. It feels more comfortable on an iPad).

The core of implementing the publishing feature is the "Get contents of URL" step, which is essentially an Ajax request and can be used to freely request network interfaces. With this feature, the possibilities are endless.

In addition to requesting network interfaces, you can also use URL schemes to directly access hidden features of native apps. For example, you can open the health code, payment code, and scanning features with just one tap.

Shortcut 3#

Below are three shortcuts for publishing blogs directly from your iPhone. In addition to the built-in Shortcuts app and the photo library, you also need a markdown editor called Taio, which does not require a subscription (if you want to use a notepad to write markdown, you don't need to install Taio either).

Create a new markdown#

In the spirit of efficiency, manual file creation is not an option. You can easily create a file using the following 5 steps:

Ask for the file name.
Prepare a file template.
Create the file using Taio (you can replace it with other editing tools).
Decode a URL (this step must be noted. I don't know if it's a bug or something, but if you don't decode the URL and use it directly, it will prompt that the file name obtained in the first step cannot be placed in the URL. I'm puzzled because the file name is clearly a text and it's all in English. Why doesn't it work?).
Use the decoded URL to open the newly created file through Taio, and then complete the information and start writing.

shortcuts3

Upload a markdown#

Select "Share Sheet" as the input source (you need to enable the "Show in Share Sheet" option in the upper right corner).
Enter your publishing API address.
The "Get contents of URL" step is actually an Ajax request, and you can decide the data. I used the current time, file content, and file path as the data.
Finally, display the result returned by the API. This step is optional because if there is an error in the request, the previous step will stop and prompt you.

shortcuts2

There is actually one improvement that can be made. When uploading, you can dynamically modify the date of the article to refresh the article's update time. This can be done with a little knowledge of regular expressions.

Upload an image#

Someone may ask, what about images? With the accumulation mentioned above, this is also simple.

Just like on a PC, many people often use PicGo and jsdelivr as image hosts. The same applies to iOS. I have already explained the principle of uploading files, so there is no problem with uploading images using this API. You can choose base64 when creating the blob in the createBlob step.

The process is as follows:

Select an image from the photo library.
Ask for the file name.
Compress the image to jpg (if not compressed, the file will be very large, and some applications may not be able to open heic files?).
Convert the jpg to base64 and send it to the API.
Enter your publishing API address.
Publish the base64, and remember to select base64 as the encoding when creating the blob.
Display the result returned by the API.

shortcuts1

What about Android?#

When using Android, I didn't really think about this issue, but it seems that Shortcut Maker can partially achieve some of the functions. However, the degree of integration with other apps may be limited.

Alternatively, you can use github.dev, but the downside is that you need a VPN to access it, and the editing area is slightly narrower.

Conclusion#

I understand that this is just an activity, and it may be useless in the future, just like being proven wrong with the Yuque publishing method.

Are there really many scenarios where you need to update directly from your phone? There are indeed not many demands for writing long paragraphs on a phone, but for short ones, it feels unnecessary to publish a "blog" and is at most a "microblog".

So, should I add a microblogging feature to this static blog (I've seen many personal blogs with this feature)? Implementing the feature is simple, but I feel that running a build every time I post a short sentence on a static page is not cost-effective. Should I just embed the Sina Weibo page directly?

A similar issue is the problem of sharing images. The image section of this static blog hasn't been updated for centuries, and I feel that the updating experience is lacking, and there is a lack of linkage between images and text. Should I find another platform to solve this problem? For this purpose, I registered on Flickr and 500px, but I found that free users have limits on the number of images they can upload. Although in reality, I may not reach the limit, but I still feel restricted. The perfect choice - Instagram also has one fatal flaw, it requires a VPN, sigh, it's frustrating.

Let's take some time to think about it. I used to want to use my own comment system, but now I think using a third-party one might be more convenient. I used to think that it would be convenient to manage all the images in one project, but then I realized that it takes time to package, and it lacks the linkage between images and text. Should I find another platform to solve this problem? For this purpose, I registered on Flickr and 500px, but I found that free users have limits on the number of images they can upload. Although in reality, I may not reach the limit, but I still feel restricted. The perfect choice - Instagram also has one fatal flaw, it requires a VPN, sigh, it's frustrating.