脱WordPressをしました

久しぶりに見た目を変更しました。そもそも更新がかなり久しぶりです。

WordPressは完全にやめてしまって、静的ブログジェネレーターを作成し、静的サイトとしてブログを上げています。
TypeScriptをまじめに触ってみたかったこともあり、TypeScriptで書きましたが、TypeScriptの性能を生かし切れてはいない気がするので普通のVanilla-node（こういう言い方する？）でもよかった気がします。

TypeScript

  2. const fs = require('fs').promises
  3. const fse = require('fs-extra')
  4. const pug = require('pug')
  5. const stylus = require('stylus')
  6. const CleanCSS = require('clean-css')
  7. const minify = require('html-minifier').minify
  9. class Blog {
  11.   entryList = []
  13.   constructor() {
  14.     (async () => {
  15.       this.entryList = await this.getList()
  16.       await this.cleanDist()
  17.       this.list()
  18.       this.entry()
  19.       this.static()
  20.     })()
  21.   }
  23.   // dist
  24.   async cleanDist(): Promise<number> {
  25.     await fse.remove('dist')
  26.     await fs.mkdir('dist')
  27.     return 1
  28.   }
  30.   // 記事一覧の取得
  31.   async getList(): Promise<any> {
  33.     // 過去記事の取得
  34.     const oldList1 = JSON.parse(await fs.readFile('entry/old/entry-01.json', 'utf8'))
  35.     const oldList2 = JSON.parse(await fs.readFile('entry/old/entry-02.json', 'utf8'))
  36.   
  37.     let oldList = [...oldList1, ...oldList2]
  38.   
  39.     oldList.map(entry => {
  40.       delete entry.id
  41.       delete entry.date_gmt
  42.       delete entry.guid
  43.       delete entry.modified_gmt
  44.       delete entry.type
  45.       delete entry.link
  46.       delete entry.excerpt
  47.       delete entry.author
  48.       delete entry.featured_media
  49.       delete entry.comment_status
  50.       delete entry.ping_status
  51.       delete entry.sticky
  52.       delete entry.template
  53.       delete entry.format
  54.       delete entry.meta
  55.       delete entry.categories
  56.       delete entry.post_meta.NoAMP
  57.       delete entry.post_meta.ogpimg
  58.       delete entry.post_meta.thumb
  59.       delete entry._links
  60.       delete entry.content.protected
  61.     
  62.       entry.listDate = entry.date.split('T')[0]
  63.       entry.title = entry.title.rendered
  64.       entry.css = entry.post_meta.css
  65.       entry.noindex = entry.post_meta.noindex
  66.       entry.ver = 1
  67.       entry.color = this.randomColor()
  68.   
  69.       delete entry.post_meta
  70.   
  71.       return entry
  72.     })
  74.     // 新記事の取得
  75.     let newList = await fs.readdir('./entry', {withFileTypes: true})
  77.     newList = newList.filter(dirent => {
  78.       return dirent.isFile()
  79.     })
  81.     newList = newList.map(file => {
  82.       let entry = require(`./entry/${file.name}`)
  84.       entry.slug = file.name.split('.')[0]
  85.       entry.content.rendered = pug.render(entry.content.rendered)
  86.       entry.color = this.randomColor()
  87.       entry.ver = 2
  88.       entry.listDate = entry.date.split('T')[0]
  90.       return entry
  91.     })
  93.     let list = [...oldList, ...newList]
  95.     list.sort((a, b) => {
  96.       return (a.date < b.date ? 1 : -1)
  97.     })
  98.   
  99.     list = list.filter((entry) => {
  100.       return entry.status === 'publish'
  101.     })
  102.   
  103.     return list
  104.   }
  106.   // stylus
  107.   async stylusCompile(file: string): Promise<string> {
  108.     const data: string = await fs.readFile(`stylus/${file}`, 'utf-8')
  109.     return stylus(data).set('filename', `stylus/${file}`).render()
  110.   }
  112.   // ランダムカラー
  113.   randomColor(): string {
  114.     return `hsl(${Math.floor(Math.random() * (360 + 1 - 0)) + 0}, 85%, 65%)`
  115.   }
  117.   // html minfy
  118.   htmlMinify(html: string): string {
  119.     return minify(html, {
  120.       removeAttributeQuotes: true,
  121.       collapseWhitespace: true,
  122.       removeEmptyAttributes: true,
  123.       removeRedundantAttributes: true,
  124.     })
  125.   }
  127.   // 一覧生成
  128.   async list(): Promise<void> {
  129.     const compiledFunction = pug.compileFile(`theme/list.pug`)
  130.     const css: string = (new CleanCSS().minify(await this.stylusCompile('list.styl'))).styles
  132.     const tagList = JSON.parse(await fs.readFile('tag.json', 'utf8'))
  134.     let oldList = this.entryList
  136.     let html: string = compiledFunction({
  137.       metaTitle: 'q-Az',
  138.       description: 'JavaScript、PHP、CSS、HTML、WordPress などウェブ制作の話を中心に解説したり実験したりしています。',
  139.       css,
  140.       oldList,
  141.       tagList
  142.     })
  144.     html = this.htmlMinify(html)
  145.     
  146.     fs.writeFile(`dist/index.html`, html)
  148.     // tag用の一覧
  149.     await fs.mkdir('dist/tag')
  150.     tagList.forEach(async (tag) => {
  151.       const oldTagList = oldList.filter((entry) => {
  152.         return entry.tags.includes(tag.id)
  153.       })
  155.       let tagHtml: string = compiledFunction({
  156.         metaTitle: `${tag.name} | q-Az`,
  157.         description: tag.description,
  158.         css,
  159.         oldList: oldTagList,
  160.         tagList,
  161.         tagActive: tag.slug
  162.       })
  164.       tagHtml = this.htmlMinify(tagHtml)
  166.       await fs.mkdir(`dist/tag/${tag.slug}`)
  167.       fs.writeFile(`dist/tag/${tag.slug}/index.html`, tagHtml)
  168.     })
  169.   }
  171.   // 記事生成
  172.   async entry(): Promise<void> {
  174.     const tagList = JSON.parse(await fs.readFile('tag.json', 'utf8'))
  175.     const oldList = this.entryList
  176.   
  177.     const compiledFunction = pug.compileFile(`theme/entry.pug`)
  178.     const entryCss: string = await this.stylusCompile('entry.styl')
  180.     oldList.forEach(async entry => {
  181.       const css = (new CleanCSS().minify(entryCss + entry.css + `.mainHead{background-color:${entry.color}}`)).styles
  183.       let description = entry.content.rendered.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').replace(/s+/g, '')
  184.       description = description.slice(0, 150)
  185.   
  186.       let html: string = compiledFunction({
  187.         metaTitle: `${entry.title} | q-Az`,
  188.         description,
  189.         css,
  190.         entry,
  191.         tagList
  192.       })
  194.       // 何記事かminify時エラーが出るので無視
  195.       try {
  196.         html = this.htmlMinify(html)
  197.       } catch {}
  199.       await fs.mkdir(`dist/${entry.slug}`)
  200.       fs.writeFile(`dist/${entry.slug}/index.html`, html)
  201.     })
  202.   }
  204.   // staticフォルダのコピー
  205.   async static(): Promise<void> {
  206.     await fse.copy('./static', './dist')
  207.   }
  208.   
  209. }
  211. new Blog(

とりあえず動けばいい精神で書いていたのでエラー処理等全く入れてませんし、似た処理なのに同じこと何度も書いたりしてますが、200行ちょいでブログができるコードが出来たので個人的には満足です。改良したいところ出来るところ多々あるんですが、まずは公開しないとモチベーションも下がってくるのでとりあえず。

フォルダ構成も書こうかと思いましたが、自分のブログでしか使えないコードなので、仮に（仮に）一般に配れる形までも持っていけたらその時GitHubにでも公開しよう（需要）かと思います。

方針とか

今回作成した方針としては

  • WordPressの過去記事をそのまま移行する
  • 記事はPugで書く
  • Stylusを使う
  • IEを完全に無視

という感じでやってみました。

WordPressの過去記事は、WordPressのREST APIをたたいて記事一覧を全部持って来る（json形式）、新記事はjsonだと融通が利かない部分や制限が多いので、1記事1jsファイルで管理

という普通しない方法で管理しています。この記事は「refresh.js」。jsファイルで記事管理をする謎な感じですが、ただのobjectでしかないので、見た目はほぼほぼjsonです。

テンプレート文字列が使えたりするのがjsだとjsonより優れているので、改行などを使って書きたい記事ではjsのobjectが圧倒的に使いやすいです。

過去記事を書き直したいときは、新記事でslugさえ合わせればそのまま上書きしてくれるので、古い記事が多すぎるので直したいところ。

IEに関してはGridのせいで全然違う見た目になっていますが、これはこれであり（？）な見た目になっています。

記事一覧にページネーションがなかったり（120記事全部出し）、なんか大事なもの含め色々欠けていますがこれから増やしていければよいかなと思ってます。

WordPressじゃないと出来ないもの

WordPressというよりはPHPなどによる動的処理が必要なものですが

  • 記事のコメント欄
  • お問い合わせ
  • 記事検索

は静的サイトでは基本出来ません。無理やりというか違うアプローチで出来るところもありますが、基本は無理なのでこの辺はどうしようか未来の課題です。

とりあえず公開の形まで持ってこれたので今回はこれでOKで。