今までレンタルサーバーを借りていたのですが年会費が7000円ほどしていたので解約しました。代わりにgithubpagesにてブログを公開しました。これは独自ドメインも使えるので、今まで同じURLが使える状態です

ブログ記事の移行

ブログ記事の移行については手動でやることを考えたのですが、記事数が200記事ほどあったことや、画像を保存する必要性などを考えると、手動で記事の移行を行なうのは困難だと判断しました。

そのためPythonのBeautiful Soupを利用してスクレイピングにて全記事を自動生成しました。非常に便利なライブラリですが、Pythonに不慣れなのでPython自体の操作と、取得したNodeの子要素の取り扱いに苦戦しました。

そして、えいやーで作ったかなり汚いコードですが残しておきます

import requests
from bs4 import BeautifulSoup 
import os
import pprint
import time
import urllib.error
import urllib.request
import sys


# ターゲットWebページのURLを指定します。
print ("-TARGET PATH = " + str(sys.argv[1]) + "-\n")
targetPath = str(sys.argv[1])#"3702"#3796
url = "https://volkruss.com/?p=" + targetPath

# 出力ファイル
file = open("./../myblog/posts/" + "p" + targetPath + ".md" ,"w", encoding='utf-8')

# 改行に挟んでテキストを出力します
def printLineAndText(file, text):
  file.write("\n");
  file.write(text + "\n")
  file.write("\n");

# 画像を保存します
def download_file(imageUrl, fileNameCount):
    
    # まず必要なフォルダを作成します:例./myblog/public/2234
    if not os.path.isdir("./../myblog/public/" + targetPath):
        os.mkdir("./../myblog/public/" + targetPath)
    try:
        with urllib.request.urlopen(imageUrl) as web_file, open("./../myblog/public/" + targetPath + "/" + fileNameCount + ".png" , 'wb') as local_file:
            local_file.write(web_file.read())
    except urllib.error.URLError as e:
        print(e)

# 言語の取得 javaがなくC#とC++で代用していたのでJavaに変換する rsも同様
def getLang(lang):
    if not isinstance(lang, str):
        return "html"
    if lang == "C++" or lang == "C#":
        return "java"
    if lang == "C":
        return "c"
    if lang == "Ruby":
        return "rs"
    if lang == "TypeScript":
        return "ts"
    if lang == "JavaScript":
        return "js"
    if lang == "JavaScript":
        return "js"
    if lang == "HTML":
        return "html"
    if lang == "PHP":
        return "php"
    if lang == "Python":
        return "python"
    if lang == "CSS":
        return "css"
    if lang == "SQL":
        return "sql"
    else:
        return lang

# ULとLI要素を解析して出力します
def listPrint(indent, elm, file):
	for li in elm.find_all("li", recursive=False):
		file.write(indent + "* " + li.text + "\n")
	inneruls = elm.find_all("ul", recursive=False)
	for ul in inneruls:
		listPrint(indent + "  ", ul, file)
count = 0
# htmlを取得します。
html = requests.get(url)
# BeautifulSoupでパースする
soup = BeautifulSoup(html.content, "html.parser")

# mdファイル情報を出力します
file.write("---" + "\n")
file.write("title: " + soup.find("h1",class_="entry-title").text + "\n")
file.write("date: "+ soup.find("time",class_="entry-date").text + "\n")
file.write("description: " + soup.find("h1",class_="entry-title").text + "\n")
file.write("categories: "  + "['" + soup.find("span",class_="cat-label").text + "']" + "\n")
file.write("---" + "\n")


elem = soup.find("div",class_="entry-content")
# 取得したhtmlを走査する
for child in elem.children:
  if child.name == 'ul':
    for uls in child:
      file.write("* " + uls.contents[0].text + "\n")
      for ul in uls.find_all("ul",recursive=False):
        listPrint("  ", ul , file)
      for li in uls.find_all("li",recursive=True):
        listPrint("  ", li , file)
  if child.name == 'p':
    file.write("\n");
    file.write(child.text + "\n");
  #見出しの取得
  if child.name == 'h1':
    printLineAndText(file, '# ' + child.string)
  if child.name == 'h2':
    printLineAndText(file, '## ' + child.string)
  if child.name == 'h3':
    printLineAndText(file, '### ' + child.string)
  if child.name == 'h4':
    printLineAndText(file, '#### ' + child.string)
  if child.name == 'h5':
    printLineAndText(file, '##### ' + child.string)
  if child.name == 'h6':
    printLineAndText(file, '###### ' + child.string)
  # divの時は基本的にsyntaxhighlightとして扱うことを前提とする
  # divの最初の子要素がpreなら```で囲って出力
  if child.name == 'div':
    if child.contents[0].name == 'pre':
      file.write("\n");
      file.write("```" + getLang(child.contents[0].get("data-lang")) + "\n")
      file.write(child.string + "\n")
      file.write("```" + "\n")
      file.write("\n");
      
  if child.name == 'pre':
      file.write("```" + "\n")
      file.write(child.string + "\n")
      file.write("```" + "\n")
  # ------------------------------
  # tableは弾く。iframeはsrcだけ抽出する
  # ------------------------------
  if child.name == 'figure':
    if child.contents[0].name == 'table':
      continue
    if child.contents[0].name == 'img':
      count+=1
      file.write("\n")
      file.write("![画像](/" + targetPath + "/" + str(count) + ".png)" + "\n") #　str(count) + "画像") #![画像](/2761/1.png)
      file.write("\n")
      # ファイルを保存する
      download_file(child.contents[0].get("src"), str(count) );
    # 謎のwarpリンク(iframeで埋め込まれているパターン)
    if not child.contents[0].name == 'img':
      iframe = child.find("iframe")
      # iframeが取得できた場合のみ
      if iframe is not None:
        # iframeからa要素を抜き出してプリント
        linkStr = iframe.get("src")
        cutStr = linkStr[0:20]
        if cutStr == 'https://volkruss.com':
          lastIndex = linkStr.rfind("/")
          # 指定位置からの文字列を取得する /?は除いて p=4598の4598箇所
          pathStr = linkStr[lastIndex + 4 : len(linkStr)]
          file.write("\n")
          file.write( "[リンク](" + "/posts/p" + str(pathStr) + ")" + "\n")
          file.write("\n")
        else:
          file.write("\n")
          file.write( "[参考](" + linkStr + ")" + "\n")
          file.write("\n")
        # iframeの場合はaタグが子要素として存在しないので抜ける
        continue
    # aタグの走査
    if not child.contents[0].name == 'img':
      link = child.find("a")
      linkStr = link.get("href")
      cutStr = linkStr[0:20]
      if cutStr == 'https://volkruss.com':
        lastIndex = linkStr.rfind("/")
        # 指定位置からの文字列を取得する /?は除いて p=4598の4598箇所
        pathStr = linkStr[lastIndex + 4 : len(linkStr)]
        file.write("\n")
        file.write( "[リンク](" + "/posts/p" + str(pathStr) + ")" + "\n")
        file.write("\n")
      else:
        file.write("\n")
        file.write( "[参考](" + linkStr + ")" + "\n")
        file.write("\n")
  # 通常のAタグを取得
  if child.name == 'a':
    file.write("\n")
    file.write(child.get("href") + "\n")
    file.write("\n")
file.close()
print ("-END-")

リダイレクト処理

以前のブログのURLはWordPressを使っており、URLにクエリパラメータが含まれている形になっていました。 ?p=999のような形です。ただしNext.jsでページ生成する際に?が使えないので、被リンクに対して置き去り状態になってしまいます。そのためリダイレクト処理で対処しました。

やり方はnext.config.jsに以下のような記載をします

async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'query',
            key: 'p',
            value: '4'
          },
        ],
        destination: '/posts/p1',
        permanent: true,
      },
    ]
  },

これで?p=4の時にposts/p1にリダイレクトさせることができます。

※これはNext.jsのサーバーで動いているときのみ有効でした。実際にGithubpagesなどに静的ファイルとしてデプロイした場合はこれが機能していませんでした。

そのためホームにてリダイレクト処理を無理矢理挟みました

import { useRouter } from 'next/router'
import { useEffect } from 'react'

const router = useRouter();
  const post_id = router.asPath;
  // パスによってリダイレクトさせる
  const params = post_id.slice(4,post_id.length);
  useEffect(() => {
    if(params === String(116)){
      router.replace("/posts/p116/");
    }
    if(params === String(2691)){
      router.replace("/posts/p2691/");
    }
  },[]);

これで/?p=8のようなアクセスに対して、事前にクエリを解析してリダイレクトさせることができました。

問題点

コードの表示

一部コードが無害化された状態で表示されている可能性があります。

完璧な対応は現状回避が難しい(面倒くさい)と判断しました。メインで取り扱っているJavaのコードについては問題なく表示できているので、未着手になっています。

一部リンク

リンクについては全て確認していないので、うまく機能していないリンク箇所があるかもしれません。

改善点

不具合込みで改善するべき点を挙げます

スマホの表示
記事検索
一部スタイル(CSS)

しかし、最終的には別に激安レンサバを借りて、そっちでWordPress運用していこうと思います。 →ローカルでのファイル管理が大変なため

ブログの移転