乐趣区

关于hugo:博客迁移之路-从hexo换成hugo

jiezi

简介

因为之前应用的 hexo 搭建的博客，然而很多资源都是应用的国外 cdn，动态资源有点多，在国内应用有点慢，而且我的博客是小水管，所以物色良久才发现 hugo 这个动态博客生成工具，试用之后发现比拟满足我目前的要求，而且主题也不少，博客迁徙的工作量也不大，最重要一点是 go 实现的，配上 go 实现的 caddy，所以综合思考，我的技术选型如下：

  • traefik（完满与 docker 联合）
  • hugo
  • caddy

文章次要蕴含上面几局部：

  • 软件介绍
  • 环境搭建
  • 博客初始化
  • 博客部署

软件介绍

Hugo 是一个弱小的动态博客生成器，由 spf13 应用 Golang 开发。在性能和生成文章的速度上都不错。

Caddy 同样也是一个由 Golang 开发的 HTTP server，其最大的亮点就是内建了 HTTPS 和 HTTP2 的反对，同时主动可能向 Let’s Encrypt 申请证书。同时，反对 Middleware 的性能，应用 Golang 撰写的 Middleware 可能反对各种各样的性能，同时任何人都能够撰写本人的 Middleware，个性化这个 HTTP Server。

环境搭建

  • golang 环境搭建
  • hugo 装置

golang 环境搭建

到 Go 语言中文网 下载 golang 的安装包，而后依照 装置阐明 进行装置，根本都是下一步即可。

装置实现后，校验装置是否胜利：

$ go version
go version go1.14.4 windows/amd64

我这里装置的是 golang 的 1.14.4 版本。

hugo 装置

在命令行终端装置 github.com/spf13/hugo 工具：

$ go get -v github.com/spf13/hugo

校验装置是否胜利：

$ hugo version
Hugo Static Site Generator v0.73.0 windows/amd64 BuildDate: unknown

装置胜利，版本是 v0.73.0

博客初始化

  • hugo 初始化博客我的项目
  • 应用 hugo 主题 pure
  • 从 hexo 迁徙到 hugo

hugo 初始化我的项目

应用 Hugo 疾速生成站点，比方心愿生成到 /path/to/site 门路：

$ hugo new site /path/to/site

这样就在 /path/to/site 目录里生成了初始站点，进去目录：

$ cd /path/to/site

初始化胜利后我的项目构造：

▸ archetypes/
▸ content/
▸ layouts/
▸ static/
config.toml

应用 hugo 主题 pure

到 皮肤列表 筛选一个心仪的皮肤，比方你感觉 Hyde 皮肤不错，找到相干的 GitHub 地址，创立目录 themes，在 themes 目录里把皮肤 git clone 下来：

本博客中应用的 pure 主题：

# 创立 themes 目录
$ cd themes
$ git clone https://github.com/xiaoheiAh/hugo-theme-pure pure

pure 配置：

baseURL: https://example.com/
theme: pure
title: Pure theme for Hugo
defaultContentLanguage: en  # en/zh/...
footnoteReturnLinkContents: ↩
hasCJKLanguage: true
paginate: 7
enableEmoji: true
PygmentsCodeFences: false
googleAnalytics: ""      # UA-XXXXXXXX-X 
permalinks:
  posts: /:year/:month/:filename/

taxonomies:
    category : categories
    tag : tags
    series : series
outputFormats:          # use for search. recommend not to modify 
  SearchIndex:
    mediaType: "application/json"
    baseName: "searchindex"
    isPlainText: true
    notAlternative: true

outputs:
    home: ["HTML","RSS","SearchIndex"]  # recommend not to modify
# sitemap
sitemap:
  changefreq: monthly
  filename: sitemap.xml
  priority: 0.5

menu:
  main:
    - identifier: home
      name: Home
      title: Home
      url: /
      weight: 1

    - identifier: archives
      name: Archives
      title: Archives
      url: /posts/
      weight: 2

    - identifier: categories
      name: Categories
      title: Categories
      url: /categories/
      weight: 3

    - identifier: tags
      name: Tags
      title: Tags
      url: /tags/
      weight: 4

    - identifier: about
      name: About
      title: About
      url: /about/
      weight: 5


params:
  since: 2017
  dateFormatToUse: "2006-01-02"
  enablePostCopyright: true
  # the directory under content folder that you want to render
  mainSections: ["posts"]
  # Enable/Disable menu icons
  # Icon Reference: http://blog.cofess.com/hexo-theme-pure/iconfont/demo_fontclass.html
  enableMathJax: true #Enable mathjax support, to use mathematical notations
  highlightjs:
    langs: ["python", "javascript"] # refer to http://staticfile.org/, search highlight.js, already have highlight.min.js

  # Allows you to specify an override stylesheet
  # put custom.css in $hugo_root_dir/static/
  # customCSS: css/custom.css

  menuIcons:
    enable: true  # 是否启用导航菜单图标
    home: icon-home-fill
    archives: icon-archives-fill
    categories: icon-folder
    tags: icon-tags
    repository: icon-project
    books: icon-book-fill
    links: icon-friendship
    about: icon-cup-fill

  # profile
  profile:
    enabled: true # Whether to show profile bar
    avatar: avatar.png
    gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
    author: xiaoheiAh
    author_title: author title
    author_description: Good Good Study, Day Day Up~
    location: Shanghai, China
    follow: https://github.com/xiaoheiAh
    # Social Links
    social:
      links:
        github: https://github.com/xiaoheiAh
        # weibo: http://weibo.com/{yourid}
        # twitter: https://twitter.com/
        # facebook: /
        rss: /index.xml
      link_tooltip: false # enable the social link tooltip, options: true, false
  # Site
  site:
    logo:
      enabled: true
      width: 40
      height: 40
      url: favicon.ico
    title: Hugo # 页面 title
    favicon: favicon.ico
    board: <p>enjoy~</p> # 公告牌

  # Share
  # weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
  share:
    enable: true # 是否启用分享
    sites: weibo,qq,wechat,facebook,twitter # PC 端显示的分享图标
    mobile_sites: weibo,qq,qzone # 挪动端显示的分享图标

  # Comment
  comment:
    type:  # type disqus/gitalk/valine 启用哪种评论零碎
    disqus: your_disqus_name # enter disqus shortname here
    gitalk: # gitalk. https://gitalk.github.io/
      owner: #必须. GitHub repository 所有者，能够是集体或者组织。admin: #必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。repo:  #必须. GitHub repository.
      ClientID: #必须. GitHub Application Client ID.
      ClientSecret: #必须. GitHub Application Client Secret.
    valine: # Valine. https://valine.js.org
      appid: # your leancloud application appid
      appkey: # your leancloud application appkey
      notify: # mail notifier , https://github.com/xCss/Valine/wiki
      verify: # Verification code
      placeholder: enjoy~ # comment box placeholder
      avatar: mm # gravatar style
      meta: nick,mail # custom comment header
      pageSize: 10 # pagination size
      visitor: false # Article reading statistic https://valine.js.org/visitor.html

  # Donate
  donate:
    enable: false
    # 微信打赏
    wechatpay:
      qrcode: donate/wechatpayimg.png
      title: 微信领取
    # 支付宝打赏
    alipay:
      qrcode: donate/alipayimg.png
      title: 支付宝

  # PV
  pv:
    busuanzi:
      enable: false # 不蒜子统计
    leancloud:
      enable: false # leancloud 统计
      app_id: # leancloud <AppID>
      app_key: # leancloud <AppKey>

  # wordcount
  postCount:
    enable: true
    wordcount: true # 文章字数统计
    min2read: true # read time 浏览时长预计

  # config
  config:
    skin: theme-black # theme color default is white. other type [theme-black,theme-blue,theme-green,theme-purple]
    layout: main-center # main-left main-center main-right
    excerpt_link: Read More
    toc: true

  # Sidebar
  sidebar: right

  # Search
  search:
    enable: true # enable search. thanks for https://raw.githubusercontent.com/ppoffice/hexo-theme-icarus/master/source/js/insight.js

  # Sidebar only the following widgets. you can remove any you don't like it.
  widgets:
    - board
    - category
    - tag
    - recent_posts

能够依据本人的须要进行批改。

运行并测试：

hugo server --buildDrafts

从 hexo 迁徙到 hugo

把 hexo 博客中的 blog/source/_posts/ 中的文章复制到 hugo 目录下 content/posts 中即可

运行并测试：

hugo server --buildDrafts

博客部署

博客部署应用的 docker，因为博客须要进行打包，所以这里应用的是 docker 的多阶段打包：

应用 caddy 作为文件服务器

Caddyfile:

:80 {
    root * /var/www/blog
    file_server browse
}

Dockerfile:

FROM klakegg/hugo:alpine as builder

WORKDIR /var/www

COPY . /var/www/

RUN cd /var/www && hugo

FROM caddy:alpine

RUN rm -rf /var/www/blog/*

# 应用了多阶段构建
COPY --from=builder /var/www/public /var/www/blog
COPY ./Caddyfile /var/www/blog/Caddyfile

WORKDIR /var/www

CMD caddy run --config /var/www/blog/Caddyfile

docker-compose.yml

version: "3"

networks:
  default:
    external:
      name: traefik_gateway

services: 
  blog:
    build: . 
    restart: always
    tty: true
    labels: 
      # 设置 Host 为 www.sockstack.cn 进行域名拜访
      - "traefik.http.routers.blog.rule=Host(`www.sockstack.cn`)" # traefik 绑定域名
      - "traefik.http.routers.blog.tls=true" # 启用 https
      - "traefik.http.routers.blog.tls.certresolver=le" # 证书生成器
      - "traefik.http.routers.blog.entrypoints=https" # entrypoints 简略了解就是端口转发
      - "traefik.http.middlewares.test-compress.compress=true" # 应用 gzip 压缩，有肯定的规定，满足规定就会应用 gzip 压缩
      - "traefik.http.middlewares.test-ratelimit.ratelimit.average=100" # 限流
      - "traefik.http.middlewares.test-ratelimit.ratelimit.burst=50" # 限流

启动博客：

$ docker-compose up -d

拜访 www.sockstack.cn 测试胜利。

退出移动版