记一次从WordPress到Hugo
本文最后更新于 346 天前,其中的信息可能已经有所发展或是发生改变。

起因

我之前的博客是基于WordPress,使用的Argon主题,搭建在阿里云香港的ecs上。因为是1m的小水管,再加上WordPress这个吃性能狂魔,两三个人访问的卡的不行。所以就换到Hugo来了,托管在Coding上,免费白嫖腾讯云香港的高速服务器。

任务

  • 安装Hugo
  • 寻找主题
  • 配置主题和站点
  • 导出WordPress文章的xml文件
  • 将WordPress的文章转为Hugo适用的Markdown文件
  • 部署站点

Hugo方面工作

  1. Hugo的Github下载二进制文件
  2. 运行 hugo new site xxx 建立站点文件夹
  3. 下载主题放到站点的themes目录
  4. 修改config.toml文件
  5. 运行hugo serv测试

将WordPress文章转为Hugo适用的Markdown文件

  1. 导出WordPress文章为xml文件
  2. 安装nodejs、npm
  3. 下载blog2md
  4. 在blog2md的文件夹内执行 npm install 安装运行依赖
  5. 输入 node index.js w xml文件 输出目录 进行转换
    Ps:转换文成后会将原文章的评论单独放到一个文件内,以comments结尾。另外原先中文链接或标题的文件会转为url编码的文件名

## 添加valine评论系统

起因

  • 目前我使用的这款主题只自带适配了disque评论,国内网络你懂得
  • 所以想用更符合国情、更方便的valine代替

搭建valine-admin后台

  • 这里使用的HCLonely 修改的valine-admin
  • 具体的搭建过程见大佬的博客,github中有。

给hugo增加valine评论

  • 我这里仅仅是对我在用的这款主题进行说明,其他的主题不了解

    1. 首先进入这个文件夹 themes/hugo-theme-stack/layouts/partials/comments/provider
    2. 然后新建一个名为valine.html的文件,文件内填入如下内容



new Valine({
    el: '#vcomments' ,
    appId: '{{ .Site.Params.valine.appId }}',
    appKey: '{{ .Site.Params.valine.appKey }}',
    notify: '{{ .Site.Params.valine.notify }}', 
    verify: '{{ .Site.Params.valine.verify }}', 
    avatar:'{{ .Site.Params.valine.avatar }}', 
    placeholder: '{{ .Site.Params.valine.placeholder }}',
    visitor: '{{ .Site.Params.valine.visitor }}',
    tagMeta: '{{ .Site.Params.valine.tagMeta }}',
    master: '{{ .Site.Params.valine.master }}'
});
  1. 找到博客文件夹中的config.toml ,添加如下内容
[params.valine]
        appId = ""
        appKey = ""   #以上两项在leancloud的设置---安全中获取
        notify = ""
        verify = ""   #默认false,评论是否验证,需要jq支持,不推荐开
        avatar = ""
        placeholder = "请填写昵称、邮箱后评论,若填写QQ邮箱自动解析头像"  # 显示在评论框中的文字
        visitor = ""  # 是否记录访客
        master = ""   #填写md5 32位小写加密的博主邮箱
        friends = ""                                  #md5 加密后的小伙伴邮箱
  1. [params.comments]下面的provider后引号内填入valine
  2. 至此就添加完了,到今天2020年10月6日为止,有bug,但是不影响基本功能的使用,就看主题作者后期会不会修复了。

生成静态文件部署到Coding

  • 懒得写了,再说 还是写一下吧

吐槽

  • 本来是用的辣鸡coding,但是各种小问题,就放弃了
  • 现在用的vercel + github page的组合,提交到github仓库后就会自动部署,还是蛮好用的

过程

更改github绑定邮箱

  • 用vercel的话,国内邮箱貌似不可以,保险起见把github绑定邮箱改为gmail了
  • 依次点击github右上角头像旁边的三角---settings----Emails----Add email address
  • 添加完之后点垃圾桶图标把国内邮箱删掉

新建仓库并推送静态文件

  • github新建一个仓库
  • 终端用cd命令进入博客文件夹,rm -rf public删掉原先的文件
  • git clone https:xxxxxxx public 然后输入你的邮箱、密码

    cd public
    git add .
    git commit -m "随意"
    git push

部署vercel部署

  • 打开vercel的官网,右上角sign-up,用github账号注册
  • 中间会有一个授权之类的,点那个绿色按钮就可以了
  • 注册完后会进入个人主页,点击 import,然后点左侧的continue
  • 然后复制你的github仓库地址,如https://xxxx.com/xxx/xxx.git ,点继续
  • 下拉列表框选择other,点depoly,等待完成

绑定域名

  • 点击左上方的头像,进入个人主页,点击刚创建的项目
  • 点击 View Domains
  • 在输入框中输入需要绑定的域名,点击Add,然后把dns解析改为CNAME记录,值为cname.vercel-dns.com.
  • 之后耐心等待一段时间,vercel会自动部署并申请ssl证书

享受写作把

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇