我的博客迁移之路

为什么要迁移

之前我是从GitHub 上面fork了一份别人的仓库,然后把post目录下的内容一换,每次推送到GitHub上,访问 https://username.github.io就能看自己的博客。之前是用的jekyll + github page来做的博客,后来发现每次push新的代码,要等好长的时间才能看到博客更新,这个速度有点忍受不了,我自己本来也是做go开发的,所以本着对hugo的信任(确实构建速度是用毫秒计的),准备再折腾一番。

quick start

直接安装hugo的二进制,初始化一个目录,非常的流畅。


# Mac的brew下载非常方便
brew new Hugo

hugo new site quickstart

cd quikstart

到这里Hugo已经帮我们把框架搭好了。然后可以下载一个好看的主题:https://themes.gohugo.io ,然后做出第一个页面:

#下载一个主题,如even
git clone https://github.com/olOwOlo/hugo-theme-even themes/even 

#拷贝even的配置文件

cp themes/even
/exampleSite/config.toml ./

#新建第一篇文章
hugo new post/my-first-post.md

#看看效果
hugo server -D
#浏览器打开:localhost:1313

迁移老博客的文章

我将以前仓库的 _post目录下的Markdown文件拷贝到当前的post目录下,然后注意要将最前面的title,date等格式换成当前使用的主题的样式,否则在页面渲染的时候,会解析不出来。

部署到GitHub page

首先要生成public/ 文件夹,生成的网页静态页面全都在这个文件夹里,所以部署的时候只需要将public推到我的GitHub仓库就好了。 这里我在网上借鉴了一个脚本,在这之前首先要在GitHub创建好放博客的仓库。

#!/bin/bash
# 部署到 github pages 脚本
# 错误时终止脚本
set -e

# 删除打包文件夹
#rm -rf public

# 打包。even 是主题
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`

# 进入打包文件夹
cd public

# 添加 readme
echo '## Store Hugo HTML files <br> Blog Markdown File [https://github.com/tangmengqiu/tangmengqiu.github.io](https://github.com/tangmengqiu/tangmengqiu.github.io)' > README.md
# Add changes to git.
#git init
git add -A

# Commit changes.
msg="building site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# 推送到 github pages
# tangmengqiu.github.io 只能使用 master分支
# -f 强制推送
git push -f git@github.com:tangmengqiu/tangmengqiu.github.io.git master

# 回到原文件夹
cd ..

然后sh deploy.sh 就可以浏览器打开:YourUserName.github.io查看你自己的博客了。

添加评论

我是用的GitHub的gitment来做的评论系统,原因就是比较简单且免费,先要去GitHub的设置获取授权及token等,可参考这篇文章,然后在配置文件中:

[params.gitment]         
    owner = "tangmengqiu"              # Your GitHub ID
    repo = "bloggitcomment"               # The repo to store comments
    clientId = "换成你自己的id"           # Your client ID
    clientSecret = "换成自己的secret"       # Your client secret

其他的一些配置

[params.reward]                     # 文章打赏
    enable = true
    wechat = "/weixin.png"           
    alipay = "/alipay.png"  

这里要注意路径,二维码从项目跟目录的路径我是放在:quickstart/themes/even/static

moreMeta = true 可以开启字数统计和阅读时间

还有代码高亮的问题我一直解决不好,我使用的是:highlightInClient = true ,但是渲染的效果不是很好,有懂得兄弟可以指点下。

最后开启了busuanzi统计访问次数

[params.busuanzi]         # 是否使用不蒜子统计站点访问量
    enable = true
    siteUV = true
    sitePV = true
    pagePV = true

参考

1.https://jdhao.github.io/2018/10/10/hexo_to_hugo/

2.https://keysaim.github.io/post/blog/deploy-hugo-blog-in-github.io/

3.https://keysaim.github.io/post/2017-08-16-how-to-add-comments/

4.https://nusr.github.io/post/2019/2019-04-26-creat-hugo-blog/