Environment: Chrome browser + plug-in + github action
Target: Publish articles to Hexo with one click after browsing any webpage
Method: Use github action to add the date to the header of the MD file step by step
This article is based on the fact that you have completed the deployment of hexo:
deploy the blog source code to github
and implement the automatic deployment of github action to the page warehouse of username.github.io or the vercel website
Step 1: Install the Joy plugin in chrome and authorize github
After completing the above steps, open any webpage, right-click the Jianyue focus mode, and save it to github, so that the article will automatically appear in the source/post directory of the github blog source code warehouse
Step 2 Append characters to the header of md and install the plugin
Although the files saved in the post directory will be automatically deployed to the page warehouse, but the lack of header files required by hexo will result in no title, time, tag, category, or even direct deployment failure. In the github action, you will see something similar to the following Error:
The main reason for this kind of error is that there is no md file header string required by hexo. The second reason is that the content contains special strings that cannot be translated by hexo. The header file generally looks like this
---
title: Hello World
tag:
- tag1
date: 2013/7/13 20:46:25
---
The solution is to append the header characters to the md file before deploying the github action, submit it to the warehouse, and then continue to execute the deploy task
2.1 Create a new github action
Create the following yml file and put it in the github action workflow directory. This task will add the current time to the header of md and cut it to the category directory for reprinting
name: mv
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
token: 替换为你的github token
- uses: szenius/[email protected]
with:
timezoneLinux: "Asia/Shanghai"
- name: Create local changes
run: |
cd source/_posts
sed -i '1s/^/---\n\n\n/' *.md
sed -i "1s/^/date: $(date '+%Y\/%m\/%d %H:%M:%S')\n/" *.md
sed -i '1s/^/---\n/' *.md
mv *.md 转载/
- uses: stefanzweifel/git-auto-commit-action@v4
with:
branch: main
commit_user_name: 替换为你的github账户名
commit_user_email: 替换为你的github邮箱
commit_message: Automated Change 自动追加md文件头部
file_pattern: source/_posts/*.md
This file is placed in the deploy flat directory, similar to this:
2.2 Modify the deployment task, modify the execution order of the task to after the mv task is completed
name: Hexo-Deploy
on:
workflow_run:
workflows: ["mv"]
branches: [main]
types:
- completed
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source
uses: actions/checkout@v1
with:
ref: main
- name: Configration hexo repo
env:
ACTION_DEPLOY_KEY: ${
{ secrets.HEXO_DEPLOY_PRI }}
run: |
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "你的邮箱"
git config --global user.name "你的账户"
- name: Checkout submodules
run: |
git submodule init
git submodule update
- name: Use Node.js ${
{ matrix.node_version }}
uses: actions/setup-node@v1
with:
node-version: '14'
- name: Setup Hexo
run: |
npm install hexo-cli -g
npm install
npm install hexo-renderer-pug hexo-renderer-stylus hexo-generator-search hexo-abbrlink3 hexo-enhancer --save
npm install hexo-wordcount --save
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@v19
- name: List all changed files
run: |
for file in ${
{ steps.changed-files.outputs.all_changed_files }}; do
echo "$file was changed"
done
- name: Hexo deploy
run: |
hexo clean
hexo g
hexo d
Re-upload the file to the post, it will automatically trigger the appending of the md file to the head and cut it to other directories, trigger deploy after completion, the effect is similar to this: if the post directory does not have a
post file, the mv will fail, causing the task to fail, and there is no optimization for the time being ,It does not affect the use of
3. Install the automatic generation of titles, tags, and classification plug-ins:
The article generated in this way solves the problem of publishing errors and has time, but there are no titles, tags, and categories. Here we need to use a plug-in that automatically generates titles, time, categories, tags, and short links: hexo-enhancer
3.1 Install the plug-in hexo-enhancer
npm install hexo-enhancer --save
The format of the file should be similar to this, but we have added time in the previous step, and all file names are title names
20091010-Title.md
2009-10-10_Title.md
2009-10-10-Title.md
2009/10/10#Title.md
2009/10/[email protected]
[20091010]-Title.md
【20091010】Title.md
「20091010」-Title.md
3.2 Adding automatic tags
Modify the blog root directory _config.yml, file, and modify the label keywords into it
keywords: HTML, 替换, Hexo
tags: Java, 替换, 你的, 标签
3.3 Add automatic classification
Create a subdirectory directly in _post, and throw the file into it to automatically generate a classification
3.3 Add automatic short link
Modify the blog root directory _config.yml, file,
permalink: :year/:abbrlink.html
# permalink: :year/:abbrlink
# permalink: posts/:abbrlink.html
# permalink: :year/:month/:day/:abbrlink.html
4. Test
After the above operations, after saving any web page to github, it will
automatically add the header file 4.1 first
automatically cut to the reprint category
4.3 trigger hexo deploy
4.4 trigger the hexo-enhancer plug-in to automatically generate titles, tags, categories, and short links
4.5 translate to Publish static files to github.io pages page
4.6 Check the github website or vercel website to confirm that it is normal