全新網站的分步指南 
作者圖片 | 來自 WordPress 和 GitHub 的標誌
我在 2010 年開始了我的第一個博客。當時使用 WordPress 是顯而易見的。這是一個不錯的選擇，因為它易於使用並且擁有數以千計的主題和插件。WordPress 是一個了不起的引擎，但它也有缺點。它對資源要求很高，並且存在許多與 WordPress 相關的漏洞。一種可能的解決方案是 將整個站點置於 CloudFront 或任何其他 CDN 之後。CDN 可以很好地擴展並保持站點安全，但就我而言，博客只是一個存檔，我不想讓我的伺服器保持運行。這就是我選擇 GitHub Pages的原因。
GitHub Pages 是「窮人的託管解決方案」。它是免費的，您可以將您的域指向它。缺點是它只能託管靜態站點，所以我不得不從我的 WordPress 博客生成一個靜態站點。
幸運的是，WordPress 可以將整個站點的內容導出（管理員上的工具/導出）到一個 XML 文件中，所以我只需要開發一個簡單的靜態站點生成器來生成導出的內容。我選擇 TypeScript 進行開發是因為我熟悉它，並且有許多很酷且易於使用的 JS 庫可以做到這一點。
首先，我必須找到一個簡單易用的 XML 解析器。經過簡短的 Google 搜索後，我找到了 fast-xml-parser。該解析器從易於處理的 XML 中創建 JS 對象樹。
我需要的另一件事是一個簡單的模板引擎。為此， ejs 是最好的。它易於學習，因為您可以將 JS 嵌入到 HTML 代碼中，而且速度也很快，因為引擎會在後台將您的模板編譯為 JS。對於小型項目，我想不出更簡單更好的解決方案。
我擁有我需要的一切，所以我開發了我的小型靜態站點生成器。
為了創建 ejs 模板，我下載了 WordPress 生成的 HTML 文件並向其中添加了 ejs 標籤。我創建了兩個模板。一個用於帖子，另一個用於目錄。
導出 XML 的結構非常簡單。它是一個從項目構建的 RSS 提要。每個項目都有一個類型（帖子、附件等），但我只需要帖子和附件。代碼如下所示：
(async function () { const parser = new XMLParser(); let wp_export = parser.parse(readFileSync('wordpress-export.xml')); let posts = wp_export.rss.channel.item; let pinned_posts: any[] = [] let post_list: any[] = [] for (const post of posts) { // download attachments if (post['wp:post_type'] == 'attachment') { const url = post['wp:attachment_url']; for (const post_meta of post['wp:postmeta']) { if (post_meta['wp:meta_key'] == '_wp_attached_file') { const file_path = post_meta['wp:meta_value'] const full_path = `wp-content/uploads/${file_path}` mkdirSync(dirname(full_path), { recursive: true }); const file = createWriteStream(full_path); http.get(url, (resp) => { resp.pipe(file); file.on("finish", () => { file.close(); }); }) } } } // generate post page if it's published if (post['wp:post_type'] == 'post' && post['pubDate']) { post['content:encoded'] = post['content:encoded'].split(/\r?\n|\r|\n/g).reduce((accumulator: string, currentValue: string) => accumulator + `<p>${currentValue}</p>`) const content = await ejs.renderFile("template.ejs", { post: post }, { async: true }) mkdirSync(`archives/${post['wp:post_id']}`, { recursive: true }); writeFileSync(`archives/${post['wp:post_id']}/index.html`, content) const element = { id: post['wp:post_id'], title: post.title, summary: truncate(post['content:encoded'].replace(/<[^>]*>?/gm, ''), 300) } if (pinned_post_ids.includes(post['wp:post_id'])) { pinned_posts.push(element) } else { post_list.push(element) } } } // generate toc pinned_posts.sort((a, b) => { return b.id - a.id }) let merged_posts = pinned_posts.concat(post_list.sort((a, b) => { return b.id - a.id })) // readme.md let readme = `# my-wordpress-blogThis is a backup of my WordPress blog. (http://lf.estontorise.hu/)` for (const post of merged_posts) readme += `[${post.title}](https://thebojda.github.io/my-wordpress-blog/archives/${post.id})\n\n` writeFileSync('README.md', readme) // index.html const content = await ejs.renderFile("template_toc.ejs", { posts: merged_posts }, { async: true }) writeFileSync(`index.html`, content)})()
代碼迭代項目並檢查它們的類型。如果類型是「附件」，它會讀取 _wp_attached_file 包含附件 URL 的元數據的值，並使用 HTTP 模塊下載它。
如果項目類型為「post」並且已發布（pubDate 不為空），則生成頁面。頁面內容 content:encoded 在 HTML 格式的標籤中，稍作改動。每行都是一個單獨的段落，因此您必須將換行符轉換為段落。以下代碼行執行此操作：
post['content:encoded'] = post['content:encoded'] .split(/\r?\n|\r|\n/g) .reduce((accumulator: string, currentValue: string) => accumulator + `<p>${currentValue}</p>`)
十年前，當我開始寫博客時，我對 SEO 一無所知，所以帖子鏈接如下所示：…/archives/123，其中最後一個數字是帖子 ID。在更好的情況下，帖子 URL 更具表現力並包含關鍵字，但在這兩種情況下，您都會面臨 GitHub Pages 不支持沒有「.html」擴展名的 HTML 頁面的問題。
如果您上傳沒有擴展名的 HTML 文件，瀏覽器將下載它而不是顯示它。因此，您必須將這些 URL 轉換為包含 index.html 文件的目錄。例如，/archives/123 必須轉換為 /archives/123/index.html。有了這個新結構，一切都像魅力一樣。
代碼的最後一個塊生成 ToC HTML 和一個 readme.md 文件。如果有人在 GitHub 上找到您的頁面，第二個將非常有用，因為他們可以輕鬆導航到您的帖子。
靜態頁面生成完成後，我將網站上傳到 GitHub 並在設置中啟用了 GitHub Pages。
在我的 DNS 提供商的管理員上設置 CNAME 記錄後，GitHub 對其進行了檢查。通過選中 Enforce HTTPS 複選框，GitHub 生成了一個 HTTPS 證書，片刻之後，網站就準備好了。您可以在這裡查看結果： https://lf.estontorise.hu。 該博客是匈牙利語的，因此您可能看不懂內容，但您可以看到一切正常，並且 URL 與 WordPress 的 URL 相同。
正如我所寫，這個博客只是一個存檔，我不打算創建新帖子，但如果我願意，我可以在我的本地機器上安裝我的 WordPress 引擎，寫新帖子，並更新新生成的頁面回購。所以如果你想用 WordPress 寫博客，用 GitHub 託管頁面，也是可以的。
這是我從 WordPress 到 GitHub Pages 的短暫旅程。如果您願意，我希望這篇簡短的文章可以幫助您遷移您的博客。
（您可以在我的 GitHub 存儲庫中找到所有內容。）