前言
之前博客是使用 Hexo，但是最近接触了 Hugo， 然后对比了下，感觉 Hugo 性能好很多，然后就学习了下 Hugo，将自己的博客迁移到了 Hugo 上了。这篇主要总结下这个过程中的步骤。
安装 Hugo
到 Hugo 官网下载 下载符合系统的最新版本，这里我们下载 hugo_xxx_Linux-64bit.deb
sudo dpkg -i hugo_xxx_Linux-64bit.deb
sudo apt install -f
Hugo 使用
生成站点
使用下面命令生成站点：
hugo new site /path/to/site
创建文章
使用下面命令创建一编文章：
hugo new post/first.md
导入 Hexo 的文章
这里我是直接将 Hexo 里面的博客文章直接复制到了 Hugo 下面，然后做了下格式的修改。比如什么时间格式什么的。基本上不用修改什么，直接迁移就好了。
安装主题
这里我是安装的 hugo-theme-cleanwhite 主题：可以参考下面命令安装：
mkdir test
cd test
mkdir themes
cd themes
git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
cp -r hugo-theme-cleanwhite/exampleSite/** ../
cd ..
hugo serve
然后进行相关的修改
详细的使用方式可以参考 quick-start。
运行 Hugo
当你编写好一篇文章后，可以通过执行 hugo server 在本地浏览器输入 http://localhost:1313 预览。
部署
假设你需要部署在 GitHub Pages 上，首先在 GitHub 上创建一个 Repository，命名为：luffyao.github.io luffyao 替换为你的 github 用户名）。
然后在 config.toml 文件中修改对应的 URL 到你自己的即可。
然后在执行 hugo 命令生成相应的静态页面。如果一切顺利，所有静态页面都会生成到 public 目录，将 pubilc 目录里所有文件 push 到刚创建的 Repository 的 master 分支。
可以参考下面命令进行提交：（这里需要注意一点的是要在 public 目录下进行git init)
hugo
cd public
git init #first time need this command
git remote add origin https://github.com/luffyao/luffyao.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master
最后就可以在浏览器里访问：http://luffyao.github.io/
高亮代码
在 themes/cleanwhite/layouts/_default/baseof.html 文件中添加下面这部分代码
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/vs.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
这里可供参考：
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{ partial "head.html" . }}
{{ partial "nav.html" . }}
<!-- Page Header -->
{{ block "header" .}}
<header class="intro-header" style="background-image: url('{{ .Site.Params.header_image | relURL }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 ">
<div class="site-heading">
<h1>{{ .Site.Title}} </h1>
<!--<hr class="small">-->
<span class="subheading">{{ .Site.Params.slogan }}</span>
</div>
</div>
</div>
</div>
</header>
{{ end }}
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/vs.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{ block "main" . }}
{{ end }}
{{ partial "footer.html" . }}
</body>
</html>
添加 CNAME
如果你购买过自己的域名，则这里可以在 public 目录下添加一个 CNAME 文件，并将自己的域名添加进去即可。这样你就可以通过自己的域名访问到博客了。
添加字数统计和阅读时间
-
在
themes/layouts/partials/head.html文件中引入不蒜子 js 文件{{ if .Site.Params.busuanzi }} <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> {{ end }} -
在
themes/layouts/_default/single.html中添加以下代码{{ if .Site.Params.busuanzi }} <h5 id="wc" style="font-size: 2rem;text-align: right;">本文共 {{ .FuzzyWordCount }} 字|阅读大约 {{ .ReadingTime }} 分钟|总阅读量<span id="busuanzi_value_page_pv"></span>次</h5> {{ end }}这里我是添加的 header 中的。具体可参考下面代码：
<span class="meta"> Posted by {{ if .Params.author }} {{ .Params.author }} {{ else }} {{ .Site.Title }} {{ end }} on {{ .Date.Format "Monday, January 2, 2006" }} {{ if .Site.Params.page_view_conter }} {{ partial "page_view_counter.html" . }} {{ end }} <!-- Don't show "Last Modified on" if update happened on the same day. --> {{ if (and (not .Lastmod.IsZero) (not (eq (dateFormat "2006-01-02" .Lastmod) (dateFormat "2006-01-02" .Date)))) }} <br>Last Modified on {{ dateFormat "Monday, January 2, 2006" .Params.LastMod }} {{ end }} {{ if .Site.Params.busuanzi }} <h5 id="wc" style="font-size: 2rem;text-align: right;">本文共 {{ .FuzzyWordCount }} 字|阅读大约 {{ .ReadingTime }} 分钟|总阅读量<span id="busuanzi_value_page_pv"></span>次</h5> {{ end }} </span> -
在
config.toml文件中添加busuanzi=true[params] #字数统计 busuanzi = true
CDN 引用
使用 Cloudinary 存储图片，加快访问速度。