<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Website on 桃语苑</title><link>https://www.whitepeach.top/tags/website/</link><description>Recent content in Website on 桃语苑</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><lastBuildDate>Sat, 21 Jun 2025 00:00:00 +0000</lastBuildDate><atom:link href="https://www.whitepeach.top/tags/website/index.xml" rel="self" type="application/rss+xml"/><item><title>Wordpress迁移到Hugo</title><link>https://www.whitepeach.top/post/wordpress2hugo/</link><pubDate>Sat, 21 Jun 2025 00:00:00 +0000</pubDate><guid>https://www.whitepeach.top/post/wordpress2hugo/</guid><description>&lt;img src="https://www.whitepeach.top/post/wordpress2hugo/cover.png" alt="Featured image of post Wordpress迁移到Hugo" />&lt;h2 id="前言">前言
&lt;/h2>&lt;p>在经历了一年的wordpress体验之后，我最后还是换到了Hugo，一方面因为wordpress对于我2c2g的小机来说确实压力有点大了，而且我的云数据库块过期了，不打算续费了。另一方面wp确实让我很没有写作的欲望，还是直接写MarkDown来的爽👍 &lt;del>（MarkDown Yes！）&lt;/del>&lt;br>
这篇文章主要用于记录站点历史吧&lt;/p>
&lt;blockquote>
&lt;ul>
&lt;li>&lt;a class="link" href="https://wordpress.com/zh-cn/" target="_blank" rel="noopener"
>WordPress官网 | WordPress.com: Everything You Need to Build Your Website&lt;/a>&lt;/li>
&lt;li>&lt;a class="link" href="%28https://gohugo.io/%29" >Hugo官网 | The world&amp;rsquo;s fastest framework for building websites&lt;/a>&lt;/li>
&lt;/ul>&lt;/blockquote>
&lt;h2 id="wordpress使用体验">WordPress使用体验
&lt;/h2>&lt;p>作为超级经典的CMS，wp的整体功能和主题丰富程度是非常棒的，同时还有非常庞大的插件市场。
wp的教程和文章在网上可以说是非常之多了，基本上遇到的问题和需求都能有现成的解决方案，这也是经典框架的好处吧。（PHP is the best language in the world！）
前本站使用的就是WP+&lt;a class="link" href="https://github.com/mirai-mamori/Sakurairo" target="_blank" rel="noopener"
>Sakurairo主题&lt;/a>的方案部署在服务器上，然后套了两层CDN提高用户体验。
响应上使用了 &lt;strong>WP Super Cache&lt;/strong> 插件缩短响应时间， &lt;strong>YoastSEO&lt;/strong> 来优化SEO。整体体验对于阅读者来说还是很不错的，CDN和WP Super Cache双层缓存使得响应迅速，主题的细节处理使得网站的交互性比较好动画也比较丝滑，整体的SEO优化也是不错的 &lt;del>(在SEO上我做的确实比较懒)&lt;/del>
&lt;img src="https://www.whitepeach.top/post/wordpress2hugo/old_site.png"
width="1908"
height="938"
srcset="https://www.whitepeach.top/post/wordpress2hugo/old_site_hu_de90a9bb7310251a.png 480w, https://www.whitepeach.top/post/wordpress2hugo/old_site_hu_eb1517270b130c93.png 1024w"
loading="lazy"
alt="前本站"
class="gallery-image"
data-flex-grow="203"
data-flex-basis="488px"
>
然后就是后台响应问题了，wp的后台加载比较缓慢，这是让我体验很差的一个点，当然这也要归咎于我的经费不足，只能上廉价的小🐔，体会过才能知道这种痛~，就像骑共享单车遇到大上坡一样的无力感。
这也间接导致了这次网站的迁移，但是这次迁移的导火索却不是这个问题；最直接的原因是我的SSL证书过期了，直接导致了网站的访问出现了问题，按理来说切换到http也能正常访问，但是不知道哪一个部分的配置出现了问题，导致通过http连接的话整个布局就错误了，猜想应该是布局文件无法正常加载了，如此种种下来，我决定了将本站迁移到更加方便的平台。&lt;/p>
&lt;h2 id="hugo世界上构建网站最快的框架">Hugo：世界上构建网站最快的框架
&lt;/h2>&lt;p>这是hugo官网对于这个框架的描述，也得益于Go语言的特性，超快的编译速度。由于其编译后的网站本质上就是静态网站，所以其经常被部署于各大免费web平台例如&lt;a class="link" href="https://pages.github.com/" target="_blank" rel="noopener"
>Github Page&lt;/a>、&lt;a class="link" href="https://vercel.com/" target="_blank" rel="noopener"
>vercel&lt;/a>、&lt;a class="link" href="https://www.netlify.com/" target="_blank" rel="noopener"
>Netlify&lt;/a>、&lt;a class="link" href="https://deno.com/" target="_blank" rel="noopener"
>deno&lt;/a>等&lt;/p>
&lt;blockquote>
&lt;p>&lt;img src="https://www.whitepeach.top/post/wordpress2hugo/deploy.png"
width="1421"
height="820"
srcset="https://www.whitepeach.top/post/wordpress2hugo/deploy_hu_d0853c7c11ef63fb.png 480w, https://www.whitepeach.top/post/wordpress2hugo/deploy_hu_6226231f6bc74b1c.png 1024w"
loading="lazy"
alt="官方文档中的部署"
class="gallery-image"
data-flex-grow="173"
data-flex-basis="415px"
>
官方文档中的部署&lt;/p>&lt;/blockquote>
&lt;ul>
&lt;li>
&lt;p>&lt;strong>静态网站的优点很明确&lt;/strong>
无论是在响应速度还是成本上，都是动态网站无法比较的，快是真的快啊，使用主题也可以获得很丝滑的体验，由于没有直接后端，整个网站的安全性也是可以得到极大的保障的，&lt;del>也不用各种折腾防止服务器被攻击或者IP泄露，例如之前写的&lt;a class="link" href="https://www.whitepeach.top/post/double-line-cdn/" >分线CDN解析&lt;/a>&lt;/del>
此外直接写Markdown对我来说简直不要太爽，可以在任何平台想写的时候打开编辑器直接开写，就算没有配置一键上传文章也可以直接复制粘贴MD文件到hugo目录里，&lt;strong>非常方便！&lt;/strong>&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>静态网站的缺点也不可忽视&lt;/strong>
首先是图片问题，不像各种管理系统，静态站点的图片需要自己维护，例如搭建图床什么的，单纯使用文件目录存储图片的话等到文章非常多的时候就会出现一些问题，我目前还没有解决图片问题最优雅的方案，计划是搭建一个图床来存储站点所有的图片，目前本站图片的来源也相对来说比较乱，这就只能等我日后有空了再折腾了。&lt;br>
其次就是动态数据的问题，这应该包括评论等功能，静态意味着评论等功能就需要第三方服务的支持，其他的类似功能也是一样，但从另一个方面来看，这也是玩静态网页不得不品的一环，折腾之路从未停止。。。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>本站点使用的方案&lt;/strong>
本站使用的是Obisidian + Hugo + Gitee同步Github的方案，那么有的小伙伴就要问了，你为什么要用两个代码库啊？这不是脱了裤子放屁多此一举吗！？
这还真不是我多次一举，最初在选择部署平台上我在Vercel和Netlity中选择了Netlity，原因很简单，Vercel在国内经常访问不上，所以选择了Netlity&lt;/p>
&lt;/li>
&lt;/ul>
&lt;blockquote>
&lt;p>&lt;img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Netlify_logo_%282%29.svg"
loading="lazy"
alt="Netlify"
>&lt;/p>&lt;/blockquote>
&lt;p>但是这就有一个很大的问题了，因为他只支持Github仓库和另外两种仓库的导入，但是Github由于某些不可抗力因素平时访问非常不稳定，经常push不了也pull不下来，这就需要提到Gitee的一个功能了，那就是&lt;a class="link" href="https://gitee.com/help/articles/4284#article-header0" target="_blank" rel="noopener"
>同步Github仓库&lt;/a>，就我目前的体验上来看还是非常的不错的。&lt;br>
Obisidian配合静态网站生成器生成静态网站也是老生常谈的操作了，网上教程非常之多我也不过多赘述了。重点是Ob配合插件实现随时随地任何设备都能写文章这件事真的非常爽。&lt;br>
主题使用的是&lt;a class="link" href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener"
>stack&lt;/a>，经过我的 &lt;del>爆改&lt;/del> 微调更加符合我的个人审美，并且加入了一些小动画增加了网站的互动感吧。&lt;br>
插件方面配合Hugo和go特性的Module加入了一些有意思的组件，后续估计还会加入一些有意思的小功能。&lt;/p>
&lt;h2 id="迁移">迁移
&lt;/h2>&lt;p>迁移使用的工具为&lt;a class="link" href="https://github.com/SchumacherFM/wordpress-to-hugo-exporter" target="_blank" rel="noopener"
>wordpress-to-hugo-exporter&lt;/a>，这是一个开源项目，在hugo的文档中亦有记载&lt;a class="link" href="https://gohugo.io/tools/migrations/#wordpress" target="_blank" rel="noopener"
>&lt;code>Migrate to Hugo&lt;/code>&lt;/a>
导出效果其实一般，但也足够了，我的导出的文件如下图所示
&lt;img src="https://www.whitepeach.top/post/wordpress2hugo/exporter.png"
width="637"
height="192"
srcset="https://www.whitepeach.top/post/wordpress2hugo/exporter_hu_ed144417f91d9188.png 480w, https://www.whitepeach.top/post/wordpress2hugo/exporter_hu_1debea16d1d2e039.png 1024w"
loading="lazy"
alt="导出的目录"
class="gallery-image"
data-flex-grow="331"
data-flex-basis="796px"
>&lt;br>
主要重点在于文章的导出部分，这里的图片URL会有一点问题&lt;br>
导出的图片都会变成类似以下的格式&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-gdscript3" data-lang="gdscript3">&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="n">img&lt;/span> &lt;span class="n">loading&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;lazy&amp;#34;&lt;/span> &lt;span class="n">decoding&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;async&amp;#34;&lt;/span> &lt;span class="n">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;333&amp;#34;&lt;/span> &lt;span class="n">height&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;46&amp;#34;&lt;/span> &lt;span class="n">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;https://www.whitepeach.top/wp-content/uploads/2024/05/1716789590-image.png&amp;#34;&lt;/span> &lt;span class="n">alt&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;&amp;#34;&lt;/span> &lt;span class="k">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;wp-image-39&amp;#34;&lt;/span> &lt;span class="n">srcset&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;https://www.whitepeach.top/wp-content/uploads/2024/05/1716789590-image.png 333w, https://www.whitepeach.top/wp-content/uploads/2024/05/1716789590-image-300x41.png 300w&amp;#34;&lt;/span> &lt;span class="n">sizes&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;auto, (max-width: 333px) 100vw, 333px&amp;#34;&lt;/span> &lt;span class="o">/&amp;gt;&lt;/span> &lt;span class="o">&amp;lt;/&lt;/span>&lt;span class="n">figure&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>
&lt;/div>&lt;p>很明显这是wp的图片格式直接照搬过来了，这就比较头疼了，虽然导出连带着图片一起导出了，但是在引用上会存在一点问题，并且也不利于日后的维护，这意味着需要手动将这些图片都改掉，这并不是一个较小的工作量，目前是采用了临时解决方案，等之后搭建图床时再考虑将这些图片资源迁移至新家。
除此之外的所有出站链接也都是有问题的，由于采用了原生HTML，导致主题的部分样式无法正常应用，文章的部分头信息也有问题，字段无法对应，可能是hugo版本更新导出器没有及时更新字段导致的问题。&lt;/p>
&lt;h2 id="后话">后话
&lt;/h2>&lt;p>属于是给自己又开了一个新大坑了，或许在未来本站又会迁移到新的架构上，目前主要的目标还是先折腾hugo吧，整个框架还是非常有可拓展性的，换句话说可玩性是非常高的，应该足够我探索很长一段时间了。&lt;/p></description></item></channel></rss>