Comment j’ai migré mon site WordPress vers les pages GitHub | de Laszlo Fazekas | janvier 2023

Un guide étape par étape pour un tout nouveau site Web

J’ai commencé mon premier blog en 2010. En utilisant WordPress était évident à cette époque. C’était un bon choix car il est facile à utiliser et propose des milliers de thèmes et de plugins. WordPress est un moteur incroyable, mais il a ses inconvénients. Il est gourmand en ressources et il existe de nombreuses vulnérabilités liées à WordPress. Une des solutions possibles est mettre tout le site derrière CloudFront ou tout autre CDN. Le CDN évolue bien et protège le site, mais dans mon cas, le blog n’était qu’une archive et je ne voulais pas que mon serveur continue de fonctionner. C’est la raison pour laquelle j’ai choisi Pages GitHub.

GitHub Pages est la « solution d’hébergement du pauvre ». C’est gratuit et vous pouvez faire pointer votre domaine vers celui-ci. L’inconvénient est qu’il ne peut héberger que des sites statiques, j’ai donc dû générer un site statique à partir de mon blog WordPress.

Heureusement, WordPress peut exporter (Outils/Exporter sur l’admin) tout le contenu du site dans un fichier XML, je n’ai donc eu qu’à développer un simple générateur de site statique qui génère le contenu de l’export. J’ai choisi TypeScript pour le développement parce que je le connais bien et qu’il existe de nombreuses bibliothèques JS sympas et faciles à utiliser pour le faire.

Tout d’abord, j’ai dû trouver un analyseur XML simple et facile à utiliser. Après une courte recherche sur Google, j’ai trouvé analyseur fast-xml. Cet analyseur crée une arborescence d’objets JS à partir du XML qui peut être facilement traitée.

Une autre chose dont j’avais besoin était un moteur de modèle simple. Dans ce but, ne pas est le meilleur. C’est facile à apprendre car vous pouvez intégrer votre JS dans le code HTML, et aussi rapide car, en arrière-plan, le moteur compile votre modèle en JS. Pour les petits projets, je ne peux pas imaginer une solution plus facile et meilleure.

J’avais tout ce dont j’avais besoin, alors j’ai développé mon petit générateur de site statique.

Pour créer les templates ejs, j’ai téléchargé les fichiers HTML générés par WordPress et y ai ajouté les balises ejs. J’ai créé deux modèles. Un pour les messages et un autre pour la table des matières.

La structure de l’export XML est très simple. C’est un flux RSS qui est construit à partir d’éléments. Chaque élément a un type (publication, pièce jointe, etc.), mais je n’avais besoin que des publications et des pièces jointes. Le code ressemble à ceci :

(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-blog
This 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)
})()

Le code itère sur les éléments et vérifie leur type. Si le type est « pièce jointe », il lit la valeur du _wp_attached_file métadonnées contenant l’URL de la pièce jointe et la télécharge à l’aide du module HTTP.

Si le type d’élément est « post » et qu’il est publié (pubDate n’est pas vide) puis générez la page. Le contenu de la page est dans le content:encoded tag au format HTML avec une petite torsion. Chaque ligne est un paragraphe séparé, vous devez donc convertir les sauts de ligne en paragraphes. La ligne de code suivante fait cela :

post['content:encoded'] = 
post['content:encoded']
.split(/\r?\n|\r|\n/g)
.reduce((accumulator: string, currentValue: string) => 
accumulator + `<p>${currentValue}</p>`)

Il y a dix ans, quand j’ai commencé mon blog, je ne connaissais rien au référencement, donc les liens des articles ressemblent à ceci : …/archives/123, où le dernier numéro est l’identifiant de l’article. Dans le meilleur des cas, l’URL de la publication est plus expressive et contient des mots-clés, mais dans les deux cas, vous serez confronté au problème que GitHub Pages ne prend pas en charge les pages HTML sans l’extension « .html ».

Si vous téléchargez un fichier HTML sans extension, le navigateur le téléchargera au lieu de l’afficher. De ce fait, vous devez convertir ces URL en répertoires contenant un index.htmle fichier. Par exemple, /archives/123 doit être converti en /archives/123/index.html. Avec cette nouvelle structure, tout fonctionne comme un charme.

Le dernier bloc du code génère le HTML ToC et un readme.md dossier. La seconde peut être très utile si quelqu’un trouve votre page sur GitHub, car il peut facilement accéder à vos publications.

Une fois la génération de pages statiques terminée, j’ai téléchargé mon site sur GitHub et activé les pages GitHub dans les paramètres.

Après avoir défini l’enregistrement CNAME sur l’administrateur de mon fournisseur DNS, GitHub l’a vérifié. En cochant la case Appliquer HTTPS, GitHub a généré un certificat HTTPS, et après un petit moment, le site était prêt. Ici vous pouvez voir le résultat : Le blog est en hongrois, donc vous ne comprendrez probablement pas le contenu, mais vous pouvez voir que tout fonctionne bien, et les URL sont les mêmes que les URL WordPress.

Comme je l’ai écrit, ce blog n’est qu’une archive, et je ne prévois pas de créer de nouveaux articles, mais si je le voulais, je pourrais installer mon moteur WordPress sur ma machine locale, écrire de nouveaux articles et mettre à jour les pages nouvellement générées dans le dépôt. Donc si vous souhaitez utiliser WordPress pour les blogs et GitHub pour l’hébergement des pages, c’est aussi possible.

Ce fut mon court voyage de WordPress aux pages GitHub. J’espère que ce court article pourra vous aider à migrer votre blog si vous le souhaitez.

(Vous pouvez tout trouver dans mon Dépôt GitHub.)