Migrate Qiita articles to GitHub Pages + VuePress

After reading @ mima_ita's article Migrating Qiita articles to GitHub --Qiita, I also wanted to migrate (?). After salvage → It is a story to be published on GitHub Pages + VuePress. Since the purpose is a little different from the original article, PR is not published.

The deliverable is here: perpouh / blog

Preparing for Vuepress

I will omit it because it already exists. Follow the steps in Official.

Preparation of qiita_exporter

Please refer to Migrate Qiita articles to GitHub. When getting the access token, I checked both read_qiita and write_qiita. I didn't use write.

Also, the original code did not work in my environment, so at the beginning of the file

# -*- coding: utf-8 -*-
# %%

I put in. I wonder if this depends on the environment?

Change the image file save destination

I want to save the image in .vuepress / public / assets / img instead of ʻimage, so rewrite the path. The display will be / blog / assets / img /` (depending on the vuepress settings) I don't want to do hard code too much, but I'm writing it wondering if it's not a type of script that I use many times.

    if not os.path.exists(dst):
        os.mkdir(dst)
-   if not os.path.exists(dst + '/image'):
-       os.mkdir(dst + '/image')
def fix_image(dst_folder, line):
    """Modify to display the file of my repository from the image file of Qiita server."""
    images = re.findall(r'https://qiita-image-store.+?\.(?:png|gif|jpeg|jpg)', line)
    if not images:
        return line
    for url in images:
        name = url.split("/")[-1]
-        download(url, dst_folder + '/image/' + name)
+        download(url, dst_folder + '/../.vuepress/public/assets/img/' + name)
        ix = line.find(url)

-        line = line.replace(url, '/image/' + name)
+        line = line.replace(url, '/blog/assets/img/' + name)
    return line

I wanted to include the title and date in the text, so I added the following.

    for i in items:
        text = fix_markdown(github_url, dst, i['body'], dict_title)
        with open(dst + '/' + i['title'] + '.md', 'w', encoding='utf-8') as md_file:
+           md_file.write("#" + i['title'] + "\n")
+           md_file.write("last updated:" + datetime.strptime(i['updated_at'], '%Y-%m-%dT%H:%M:%S+09:00').strftime('%Y year%m month%d day') + "\n\n")
            md_file.write(text)

I got the file, so I tried building it here and confirmed that it seems to be okay.

Create a link in the sidebar

Since there is no flow line to the article, I will make a link. I really want to do it with just one command, but is this kind of copy and paste acceptable?

import os
if __name__ == '__main__':
  filelist = os.listdir('../blog/qiita')
  for item in filelist:
    #Last 3 characters(.md)Get rid of
    print("['qiita/"+item[-4::-1][-1::-1]+"', '"+item[-4::-1][-1::-1]+"']")

I get something like this.

['qiita/Start git management on mac', 'Start git management on mac'],
...

I got into the .DS_Store so I removed it manually. Copy and paste this into .vuepress/config.js. See also the official for more information on the sidebar.

Post a moving article on Qiita

I wrote the source by referring to here Try updating the article to Qiita via API --Qiita. Since the article title could be treated as the transfer destination URL as it is

if __name__ == "__main__":
    argvs = sys.argv
    token = argvs[1]
    user = argvs[2]
    qiitaApi = qiita_api.QiitaApi(token)

    items = qiitaApi.query_user_items(user)
    for item in items:
      execute(item, token)
      break
def parse(item):
    return {
        'title': item['title'],
        'qiita_id': item['id'],
        'tags': item['tags'],
        'body': f'''
This article has moved to GitHub Pages.\n
        "https://perpouh.github.io/blog/qiita/{item['title']}.html"
        ''',
        'tweet': False,
        'private': False,
    }

I tried to knead it I stopped because I was too scared to move even without looping and my stomach hurt (fucking the commentary) You may do it manually if you feel like it: severe:

(Bonus) VuePress automatic build

I'm doing it with GitHub Actions. Automatic deployment to GitHub Pages by GitHub Actions-Qiita It's nice that you don't have to put files (post-deployment files) in the master branch that you wouldn't touch manually rather than running automatically.

Recommended Posts

Migrate Qiita articles to GitHub Pages + VuePress
Migrate Qiita articles to GitHub
Migrate Qiita articles to WordPress
Back up Qiita posts to GitHub
Migrate Qiita stock and LGTM to "Hatena Bookmark"
[First API] Try to get Qiita articles with Python
Scraping your Qiita articles to create a word cloud
Convert Qiita articles to Jekyll post format for backup