Wordpress 迁移至 Hugo
目录
背景
去年在Godaddy上买了一个网站主机，因为没有root权限，基本上我拿来也只能建站，我唯一的建站需求是博客，后来想自己搭一个代理，IP干净，能照顾到现有的全部科学上网需求，因此又在Godaddy上买了虚拟主机。自然而然想要在vps上建wordpress，将博客迁移到VPS上，之后就不用同时续费两个主机，同时博客也能当作代理的伪装。捣鼓了几次，发现自己搭建总是有各种问题，搭建完成了数据迁移又有问题，心里一气，加上vps的规格并不大，wordpress占用太高，加上迁移完成之后我就没法随时随地rebuild vps，就放弃了迁移wordpress的想法，转向通过其他建站方式来搭建博客。
动态网站中，除去占有率最高的wordpress，似乎只剩下typecho了，但是typecho的社区很明显的不活跃，官方文档更新时间也都是几年前了，虽然比起wordpress更轻量易用，不过还是不想以后面对一个不活跃社区去提问和查问题，所以暂时还是放弃了typecho。
静态网站中，hexo在github上的start数十分靠前，同时还注意到了hugo，因为mac上只有go环境，hugo的能力也基本满足了我的博客需求，二者对我而言大差不差，所以最终选择了hugo作为博客网站的框架。
今天起就开始hugo的迁移之旅，我想以我三天打鱼两天晒网的功力，这不是一件短期的事情，还是用博客来记录一下，也方便当我遇到一些不可revert的问题时，能够直接rebuild整个vps环境，从头搭建。
update at 2023/05/04
hugo的安装与初始化
直接homebrew安装嘞
网站初始化
-
初始化网站文件 && git
hugo hugo new site halfstackcd halfstack hugo cd halfstack halfstack git init -
下载并启用主题
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt echo "theme = 'LoveIt'" >> config.toml -
修改主题文件
vim themes/LoveIt/config.toml[module] [module.hugoVersion] extended = true min = "0.62.0" [params] # site default theme ["auto", "light", "dark"] # 网站默认主题 ["auto", "light", "dark"] defaultTheme = "auto" # public git repo url only then enableGitInfo is true # 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效 gitRepo = "" # which hash function used for SRI, when empty, no SRI is used # ["sha256", "sha384", "sha512", "md5"] # 哪种哈希函数用来 SRI, 为空时表示不使用 SRI # ["sha256", "sha384", "sha512", "md5"] fingerprint = "" # date format # 日期格式 dateFormat = "2006-01-02" # website title for Open Graph and Twitter Cards # 网站标题, 用于 Open Graph 和 Twitter Cards title = "Halfstack" # website description for RSS, SEO, Open Graph and Twitter Cards # 网站描述, 用于 RSS, SEO, Open Graph 和 Twitter Cards description = "Still have another half to learn" # website images for Open Graph and Twitter Cards # 网站图片, 用于 Open Graph 和 Twitter Cards images = [] # Header config # 页面头部导航栏配置 [params.header] # desktop header mode ["fixed", "normal", "auto"] # 桌面端导航栏模式 ["fixed", "normal", "auto"] desktopMode = "fixed" # mobile header mode ["fixed", "normal", "auto"] # 移动端导航栏模式 ["fixed", "normal", "auto"] mobileMode = "auto" # Header title config # 页面头部导航栏标题配置 [params.header.title] # URL of the LOGO # LOGO 的 URL logo = "" # title name # 标题名称 name = "Halfstack" # you can add extra information before the name (HTML format is supported), such as icons # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标 pre = "" # you can add extra information after the name (HTML format is supported), such as icons # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标 post = "" # whether to use typeit animation for title name # 是否为标题显示打字机动画 typeit = false # Footer config # 页面底部信息配置 [params.footer] enable = true # Custom content (HTML format is supported) # 自定义内容 (支持 HTML 格式) custom = "" # whether to show Hugo and theme info # 是否显示 Hugo 和主题信息 hugo = true # whether to show copyright info # 是否显示版权信息 copyright = true # whether to show the author # 是否显示作者 author = true # site creation time # 网站创立年份 since = 2022 # Section (all posts) page config # Section (所有文章) 页面配置 [params.section] # special amount of posts in each section page # section 页面每页显示文章数量 paginate = 20 # date format (month and day) # 日期格式 (月和日) dateFormat = "01-02" # amount of RSS pages # RSS 文章数目 rss = 10 # List (category or tag) page config # List (目录或标签) 页面配置 [params.list] # special amount of posts in each list page # list 页面每页显示文章数量 paginate = 20 # date format (month and day) # 日期格式 (月和日) dateFormat = "01-02" # amount of RSS pages # RSS 文章数目 rss = 10 # App icon config # 应用图标配置 [params.app] # optional site title override for the app when added to an iOS home screen or Android launcher # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题 title = "Halfstack" # whether to omit favicon resource links # 是否隐藏网站图标资源链接 noFavicon = false # modern SVG favicon to use in place of older style .png and .ico files # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件 svgFavicon = "" # Android browser theme color # Android 浏览器主题色 themeColor = "#ffffff" # Safari mask icon color # Safari 图标颜色 iconColor = "#5bbad5" # Windows v8-11 tile color # Windows v8-11 磁贴颜色 tileColor = "#da532c" # Search config # 搜索配置 [params.search] enable = true # type of search engine ["lunr", "algolia"] # 搜索引擎的类型 ["lunr", "algolia"] type = "lunr" # max index length of the chunked content # 文章内容最长索引长度 contentLength = 4000 # placeholder of the search bar # 搜索框的占位提示语 placeholder = "" # max number of results length # 最大结果数目 maxResultLength = 10 # snippet length of the result # 结果内容片段长度 snippetLength = 30 # HTML tag name of the highlight part in results # 搜索结果中高亮部分的 HTML 标签 highlightTag = "em" # whether to use the absolute URL based on the baseURL in search index # 是否在搜索索引中使用基于 baseURL 的绝对路径 absoluteURL = false [params.search.algolia] index = "" appID = "" searchKey = "" # Home page config # 主页信息设置 [params.home] # amount of RSS pages # RSS 文章数目 rss = 10 # Home page profile # 主页个人信息 [params.home.profile] enable = true # Gravatar Email for preferred avatar in home page # Gravatar 邮箱，用于优先在主页显示的头像 gravatarEmail = "oasis7311@gmail.com" # URL of avatar shown in home page # 主页显示头像的 URL avatarURL = "" # title shown in home page (HTML format is supported) # 主页显示的网站标题 (支持 HTML 格式) title = "" # subtitle shown in home page (HTML format is supported) # 主页显示的网站副标题 (允许 HTML 格式) subtitle = "Still have another half to learn" # whether to use typeit animation for subtitle # 是否为副标题显示打字机动画 typeit = true # whether to show social links # 是否显示社交账号 social = true # disclaimer (HTML format is supported) # 免责声明 (支持 HTML 格式) disclaimer = "" # Home page posts # 主页文章列表 [params.home.posts] enable = true # special amount of posts in each home posts page # 主页每页显示文章数量 paginate = 6 # Social config in home page # 主页的社交信息设置 [params.social] GitHub = "https://github.com/Oasis7311" Linkedin = "" Twitter = "https://twitter.com/KKKyot_" Instagram = "" Facebook = "" Telegram = "" Medium = "" Gitlab = "" Youtubelegacy = "" Youtubecustom = "" Youtubechannel = "" Tumblr = "" Quora = "" Keybase = "" Pinterest = "" Reddit = "" Codepen = "" FreeCodeCamp = "" Bitbucket = "" Stackoverflow = "" Weibo = "" Odnoklassniki = "" VK = "" Flickr = "" Xing = "" Snapchat = "" Soundcloud = "" Spotify = "" Bandcamp = "" Paypal = "" Fivehundredpx = "" Mix = "" Goodreads = "" Lastfm = "" Foursquare = "" Hackernews = "" Kickstarter = "" Patreon = "" Steam = "https://steamcommunity.com/profiles/76561198316055325" Twitch = "" Strava = "" Skype = "" Whatsapp = "" Zhihu = "" Douban = "" Angellist = "" Slidershare = "" Jsfiddle = "" Deviantart = "" Behance = "" Dribbble = "" Wordpress = "" Vine = "" Googlescholar = "" Researchgate = "" Mastodon = "" Thingiverse = "" Devto = "" Gitea = "" XMPP = "" Matrix = "" Bilibili = "" Discord = "" DiscordInvite = "" Lichess = "" ORCID = "" Pleroma = "" Kaggle = "" MediaWiki= "" Plume = "" HackTheBox = "" RootMe= "" Email = "Oasis7311@gmail.com" Phone = "" RSS = "" # Page global config # 文章页面全局配置 [params.page] # whether to hide a page from home page # 是否在主页隐藏一篇文章 hiddenFromHomePage = false # whether to hide a page from search results # 是否在搜索结果中隐藏一篇文章 hiddenFromSearch = false # whether to enable twemoji # 是否使用 twemoji twemoji = false # whether to enable lightgallery # 是否使用 lightgallery lightgallery = false # whether to enable the ruby extended syntax # 是否使用 ruby 扩展语法 ruby = true # whether to enable the fraction extended syntax # 是否使用 fraction 扩展语法 fraction = true # whether to enable the fontawesome extended syntax # 是否使用 fontawesome 扩展语法 fontawesome = true # whether to show link to Raw Markdown content of the content # 是否显示原始 Markdown 文档内容的链接 linkToMarkdown = true # whether to show the full text content in RSS # 是否在 RSS 中显示全文内容 rssFullText = false # Table of the contents config # 目录配置 [params.page.toc] # whether to enable the table of the contents # 是否使用目录 enable = true # whether to keep the static table of the contents in front of the post # 是否保持使用文章前面的静态目录 keepStatic = false # whether to make the table of the contents in the sidebar automatically collapsed # 是否使侧边目录自动折叠展开 auto = true # Code config # 代码配置 [params.page.code] # whether to show the copy button of the code block # 是否显示代码块的复制按钮 copy = true # the maximum number of lines of displayed code by default # 默认展开显示的代码行数 maxShownLines = 50 # KaTeX mathematical formulas config (KaTeX https://katex.org/) # KaTeX 数学公式配置 (KaTeX https://katex.org/) [params.page.math] enable = true # default inline delimiter is $ ... $ and \( ... \) # 默认行内定界符是 $ ... $ 和 \( ... \) inlineLeftDelimiter = "" inlineRightDelimiter = "" # default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions # 默认块定界符是 $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} 和一些其它的函数 blockLeftDelimiter = "" blockRightDelimiter = "" # KaTeX extension copy_tex # KaTeX 插件 copy_tex copyTex = true # KaTeX extension mhchem # KaTeX 插件 mhchem mhchem = true # Mapbox GL JS config (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js) # Mapbox GL JS 配置 (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js) [params.page.mapbox] # access token of Mapbox GL JS # Mapbox GL JS 的 access token accessToken = "" # style for the light theme # 浅色主题的地图样式 lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true" # style for the dark theme # 深色主题的地图样式 darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true" # whether to add NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol) # 是否添加 NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol) navigation = true # whether to add GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol) # 是否添加 GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol) geolocate = true # whether to add ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol) # 是否添加 ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol) scale = true # whether to add FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol) # 是否添加 FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol) fullscreen = true # Social share links in post page # 文章页面的分享信息设置 [params.page.share] enable = true Twitter = true Facebook = true Linkedin = false Whatsapp = false Pinterest = false Tumblr = false HackerNews = true Reddit = false VK = false Buffer = false Xing = false Line = true Instapaper = false Pocket = false Flipboard = false Weibo = true Blogger = false Baidu = false Odnoklassniki = false Evernote = false Skype = false Trello = false Mix = false # Comment config # 评论系统设置 [params.page.comment] enable = false # Disqus comment config (https://disqus.com/) # Disqus 评论系统设置 (https://disqus.com/) [params.page.comment.disqus] enable = false # Disqus shortname to use Disqus in posts # Disqus 的 shortname，用来在文章中启用 Disqus 评论系统 shortname = "" # Gitalk comment config (https://github.com/gitalk/gitalk) # Gitalk 评论系统设置 (https://github.com/gitalk/gitalk) [params.page.comment.gitalk] enable = false owner = "" repo = "" clientId = "" clientSecret = "" # Valine comment config (https://github.com/xCss/Valine) # Valine 评论系统设置 (https://github.com/xCss/Valine) [params.page.comment.valine] enable = false appId = "" appKey = "" placeholder = "" avatar = "mp" meta= "" pageSize = 10 # automatically adapt the current theme i18n configuration when empty # 为空时自动适配当前主题 i18n 配置 lang = "" visitor = true recordIP = true highlight = true enableQQ = false serverURLs = "" # emoji data file name, default is "google.yml" # ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"] # located in "themes/LoveIt/assets/lib/valine/emoji/" directory # you can store your own data files in the same path under your project: # "assets/lib/valine/emoji/" # emoji 数据文件名称, 默认是 "google.yml" # ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"] # 位于 "themes/LoveIt/assets/lib/valine/emoji/" 目录 # 可以在你的项目下相同路径存放你自己的数据文件: # "assets/lib/valine/emoji/" emoji = "" # Facebook comment config (https://developers.facebook.com/docs/plugins/comments) # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments) [params.page.comment.facebook] enable = false width = "100%" numPosts = 10 appId = "" # automatically adapt the current theme i18n configuration when empty # 为空时自动适配当前主题 i18n 配置 languageCode = "" # Telegram comments config (https://comments.app/) # Telegram comments 评论系统设置 (https://comments.app/) [params.page.comment.telegram] enable = false siteID = "" limit = 5 height = "" color = "" colorful = true dislikes = false outlined = false # Commento comment config (https://commento.io/) # Commento comment 评论系统设置 (https://commento.io/) [params.page.comment.commento] enable = false # utterances comment config (https://utteranc.es/) # utterances comment 评论系统设置 (https://utteranc.es/) [params.page.comment.utterances] enable = false # owner/repo repo = "" issueTerm = "pathname" label = "" lightTheme = "github-light" darkTheme = "github-dark" # giscus comment config (https://giscus.app/) # giscus comment 评论系统设置 (https://giscus.app/zh-CN) [params.page.comment.giscus] # You can refer to the official documentation of giscus to use the following configuration. # 你可以参考官方文档来使用下列配置 enable = false repo = "" repoId = "" category = "Announcements" categoryId = "" # automatically adapt the current theme i18n configuration when empty # 为空时自动适配当前主题 i18n 配置 lang = "" mapping = "pathname" reactionsEnabled = "1" emitMetadata = "0" inputPosition = "bottom" lazyLoading = false lightTheme = "light" darkTheme = "dark" # Third-party library config # 第三方库配置 [params.page.library] [params.page.library.css] # someCSS = "some.css" # located in "assets/" 位于 "assets/" # Or 或者 # someCSS = "https://cdn.example.com/some.css" [params.page.library.js] # someJavascript = "some.js" # located in "assets/" 位于 "assets/" # Or 或者 # someJavascript = "https://cdn.example.com/some.js" # Page SEO config # 页面 SEO 配置 [params.page.seo] # image URL # 图片 URL images = [] # Publisher info # 出版者信息 [params.page.seo.publisher] name = "" logoUrl = "" # TypeIt config # TypeIt 配置 [params.typeit] # typing speed between each step (measured in milliseconds) # 每一步的打字速度 (单位是毫秒) speed = 100 # blinking speed of the cursor (measured in milliseconds) # 光标的闪烁速度 (单位是毫秒) cursorSpeed = 1000 # character used for the cursor (HTML format is supported) # 光标的字符 (支持 HTML 格式) cursorChar = "|" # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited) # 打字结束之后光标的持续时间 (单位是毫秒, "-1" 代表无限大) duration = -1 # Site verification code for Google/Bing/Yandex/Pinterest/Baidu # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu [params.verification] google = "" bing = "" yandex = "" pinterest = "" baidu = "" # Site SEO config # 网站 SEO 配置 [params.seo] # image URL # 图片 URL image = "" # thumbnail URL # 缩略图 URL thumbnailUrl = "" # Analytics config # 网站分析配置 [params.analytics] enable = false # Google Analytics [params.analytics.google] id = "" # whether to anonymize IP # 是否匿名化用户 IP anonymizeIP = true # Fathom Analytics [params.analytics.fathom] id = "" # server url for your tracker if you're self hosting # 自行托管追踪器时的主机路径 server = "" # Plausible Analytics [params.analytics.plausible] dataDomain = "" # Yandex Metrica [params.analytics.yandexMetrica] id = "" # Cookie consent config # Cookie 许可配置 [params.cookieconsent] enable = false # text strings used for Cookie consent banner # 用于 Cookie 许可横幅的文本字符串 [params.cookieconsent.content] message = "" dismiss = "" link = "" # CDN config for third-party library files # 第三方库文件的 CDN 设置 [params.cdn] # CDN data file name, disabled by default # ["jsdelivr.yml"] # located in "themes/LoveIt/assets/data/cdn/" directory # you can store your own data files in the same path under your project: # "assets/data/cdn/" # CDN 数据文件名称, 默认不启用 # ["jsdelivr.yml"] # 位于 "themes/LoveIt/assets/data/cdn/" 目录 # 可以在你的项目下相同路径存放你自己的数据文件: # "assets/data/cdn/" data = "jsdelivr.yml" # Compatibility config # 兼容性设置 [params.compatibility] # whether to use Polyfill.io to be compatible with older browsers # 是否使用 Polyfill.io 来兼容旧式浏览器 polyfill = false # whether to use object-fit-images to be compatible with older browsers # 是否使用 object-fit-images 来兼容旧式浏览器 objectFit = false -
启动hugo
hugo server
-
PicGo设置
参见 url to picgo setting
至此，网站的基本建设已经结束了，后续就是迁移wordpress上的文章，以及研究一下插件了。
Update at 2023/05/04
-
增加多语言、搜索、文章作者、语法高亮设置
同时通过 contentDir 设置文章列表路径
如我的设置是：
|-content |--en |----posts |------post1.md |--zh-cn |----posts |------post1.md那么英文版本的post1在多语言下会链接到zh-cn的post1，可以直接通过修改语言设置跳转对应文章
baseURL = "http://example.org/" # 更改使用 Hugo 构建网站时使用的默认主题 theme = "LoveIt" # 设置默认的语言 ["en", "zh-cn", "fr", "pl", ...] defaultContentLanguage = "en" # 默认语言的url是否需要带上语言标识 defaultContentLanguageInSubdir = true [languages] [languages.en] weight = 1 title = "Halfstack" languageCode = "en" languageName = "English" contentDir = 'content/en' [[languages.en.menu.main]] weight = 1 identifier = "posts" pre = "" post = "" name = "Posts" url = "/posts" title = "" [[languages.en.menu.main]] weight = 2 identifier = "tags" pre = "" post = "" name = "Tags" url = "/tags" title = "" [[languages.en.menu.main]] weight = 3 identifier = "categories" pre = "" post = "" name = "Categories" url = "/categories" title = "" [languages.zh-cn] weight = 2 title = "Halfstack" languageCode = "zh-CN" languageName = "简体中文" hasCJKLanguage = true contentDir = 'content/zh-cn' [[languages.zh-cn.menu.main]] weight = 1 identifier = "posts" pre = "" post = "" name = "文章" url = "/posts" title = "" [[languages.zh-cn.menu.main]] weight = 2 identifier = "tags" pre = "" post = "" name = "标签" url = "/tags" title = "" [[languages.zh-cn.menu.main]] weight = 3 identifier = "categories" pre = "" post = "" name = "分类" url = "/categories" title = "" # 作者配置 [author] name = "Oasis" email = "Oasis7311@gmail.com" link = "" # Hugo 解析文档的配置 [markup] # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting) [markup.highlight] # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158) noClasses = false [outputs] home = ["HTML", "RSS", "JSON"]
文章迁移
迁移了部分文章
网站部署
Github
-
创建一个新的Git仓库，仓库名为 userName.github.io
如：
-
在网站根目录下执行命令生成
/public文件夹hugo -
进入
/public文件夹，执行以下命令，将public文件夹内的文件推送到新建的仓库中cd public git init git branch -M main git remote add origin git@UserName.github.io.git git add . git commit git push -u origin main -
查看效果
注意config文件中的baseUrl需要修改为username.github.io
VPS
网上有很多通过GithubAction自动推送VPS的教程，不过暂时不太想搞这些，先把基础的东西弄完吧。
-
进入public文件夹，切换到另一个分支(baseURL不同，会影响到githubPages的展示)
cd public git checkout -b master -
切换回网站根目录，生成vps上的public文件
cd ../ hugo --baseUrl="" -
将重新生成的public文件夹push至git
cd public git commit . git push -
登陆vps，clone master分支，修改nginx配置，指定网站根目录
cd ~/www/ git clone git@github.com:Oasis7311/Oasis7311.github.io.git sudo vim /etc/nginx/nginx.conf sudo systemctl restart nginxnginx配置修改如下：
server { listen 8080 http2; #root /home/summer/www/webpage; root /home/summer/www/Oasis7311.github.io; index index.html; add_header Strict-Transport-Security "max-age=63072000" always; } -
查看效果
暂时先将代理的伪装网站给替换掉了，实际的halfstack.net这个网站仍然还是在web Hosting上运行，后续网站的基础设施都搞完了再全部切过去
问题
发现把主站迁移到vps后，因为用的是halfstack.net的证书，因此proxy.halfstack.net在普通流量访问的时候会因为证书的原因无法正常访问网页。
这时候本来是想将两个证书分别安装，在两个端口部署相同的网站，不过突然醒悟，原本proxy.halfstack.net存在的意义就是因为我的网站和代理是部署在两台不同的机器上的，现在部署在同一个机器上之后，proxy.halfstack.net根本就没有存在的必要了，代理也同样通过halfstack.net访问就好了。
解决步骤：
-
修改xray的配置，直接监听
halfstack.net这个server -
修改https证书文件地址，换成
halfstack.net的证书地址
