使用hugo搭建静态网站

安装

brew install hugo

hugo new site blog

下载主题

初次运行

cd blog
hugo --theme=LeaveIt --baseurl="https://asketch.github.io"
cd public

touch README.md
git init 
git add README.md
git commit -m "first commiit"
git remote add origin git@github.com:asketch/asketch.github.io.git
git add -A
# 第一次提交
git push -u origin master
# 非第一次提交
git push origin master
# 暴力的方法
git push upstream master

如果不是第一次上传文件，而是进行更新：

git pull origin master
git push origin master

通常情况下

cd MySite
hugo --theme=LeaveIt --baseUrl="https://yourName.github.io/"
cd public
git status
git add -A
git commit -m "second commit"
git pull
git push origin master

发布脚本

在blog目录用脚本发布

# 授权
chmod +x deploy.sh

使用脚本

./deploy.sh

脚本本体

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
# 替换baseUrl
hugo --theme=LeaveIt --baseUrl="https://asketch.github.io/" # if using a theme, replace with `hugo -t <YOURTHEME>`
# Go To Public folder
cd public
# Add changes to git.
git add -A
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git pull
git push origin master
# Come Back up to the Project Root
cd ..

绑定域名

域名解析--添加记录--

添加两个A类型的记录，一个主机记录www，一个为@，记录值都是xxx.github.io

然后，修改文件CNAME文件

xxx.github.io

评论 valine

1. 配置文件

 # Valine.
 # You can get your appid and appkey from https://leancloud.cn
 # more info please open https://valine.js.org
 [params.valine]
 enable = true
 appId = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'
 appKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'
 notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
 verify = false # Verification code
 avatar = 'mm'
 placeholder = '说点什么吧...'
 visitor = true

2. 主题目录下的layouts--》partials下新建一个名为comments.html文件

<!-- valine -->
{{- if .Site.Params.valine.enable -}}
<!-- id 将作为查询条件 -->

<div id="vcomments"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>

<script type="text/javascript">
  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 }}'
  });
</script>
{{- end }}

3. 接下来，在LeaveIt的主题下的 layouts/_default/single.html 找到

<div class="post-comment">
    <!-- 加入评论功能 -->
    {{ partial "comments.html" . }}
</div>

4. 开启邮件通知（待续）

评论gitalk

主题的 layouts/partials 文件夹中创建 gitalk.html 文件

{{ if .Site.Params.enableGitalk }}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
  const gitalk = new Gitalk({
    clientID: '{{ .Site.Params.Gitalk.clientID }}',
    clientSecret: '{{ .Site.Params.Gitalk.clientSecret }}',
    repo: '{{ .Site.Params.Gitalk.repo }}',
    owner: '{{ .Site.Params.Gitalk.owner }}',
    admin: ['{{ .Site.Params.Gitalk.owner }}'],
    id: location.pathname, // Ensure uniqueness and length less than 50
    distractionFreeMode: false // Facebook-like distraction free mode
  });
  (function() {
    if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
      document.getElementById('gitalk-container').innerHTML = 'Gitalk comments not available by default when the website is previewed locally.';
      return;
    }
    gitalk.render('gitalk-container');
  })();
</script>
{{ end }}

可能是single中，在模板中插入

{{ partial "gitalk.html" . }}

站点配置

[params]
  enableGitalk = true
[params.gitalk] 
    clientID = "[Client ID]" # Your client ID
    clientSecret = "[Client Secret]" # Your client secret
    repo = "mogeko.github.io" # The repo to store comments
    owner = "Mogeko" # Your GitHub ID
    admin= "Mogeko" # Required. Github repository owner and collaborators. (Users who having write access to this repository)
    id= "location.pathname" # The unique id of the page.
    labels= "gitalk" # Github issue labels. If you used to use Gitment, you can change it
    perPage= 15 # Pagination size, with maximum 100.
    pagerDirection= "last" # Comment sorting direction, available values are 'last' and 'first'.
    createIssueManually= false # If it is 'false', it is auto to make a Github issue when the administrators login.
    distractionFreeMode= false # Enable hot key (cmd|ctrl + enter) submit comment.

目录 toc

在/themes/LeaveIt/layouts/partials/下新建toc.html文件

<div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">{{ T "toc" }}</h2>
  {{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
  <div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
    {{.TableOfContents}}
  </div>
</div>
<script type="text/javascript">
  window.onload = function () {
    var fix = $('.post-toc');
    var end = $('.post-comment');
    var fixTop = fix.offset().top, fixHeight = fix.height();
    var endTop, miss;
    var offsetTop = fix[0].offsetTop;
    $(window).scroll(function () {
      var docTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
      if (end.length > 0) {
        endTop = end.offset().top;
        miss = endTop - docTop - fixHeight;
      }
      if (fixTop < docTop) {
        fix.css({ 'position': 'fixed' });
        if ((end.length > 0) && (endTop < (docTop + fixHeight))) {
          fix.css({ top: miss });
        } else {
          fix.css({ top: 0 });
        }
      } else {
        fix.css({ 'position': 'absolute' });
        fix.css({ top: offsetTop });
      }
    })
  }
</script> 

在/themes/LeaveIt/assets/css/_custom.scss中添加下面的toc样式，可以根据自己的喜好自定义修改

.post-toc {
    position: absolute;
    width: 200px;
    margin-left: 780px;
    padding: 10px;
    word-wrap: break-word;
    box-sizing: border-box;
    .post-toc-title {
        margin: 0;
        font-weight: 400;
        text-transform: uppercase;
    }
    .post-toc-content {
        &.always-active ul {
            display: block;
        }
        >nav>ul {
            margin: 10px 0;
        }
        ul {
            padding-left: 0;
            list-style: none;
            ul {
            padding-left: 15px;
            display: none;
            }
            .has-active > ul {
                display: block;
            }
        }
    }
    a:hover {
        color: #c05b4d;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    a {
        display: block;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
}
@media only screen and (max-width: 1224px) {
    .post-toc {
        display: none;
    }
} 

在文章页的模板/themes/LeaveIt/layouts/_default/single.html中 ``标签后引入TOC模板

	{{ if ( .Site.Params.toc | default true ) }}
          {{ partial "toc.html" . }}
	{{ end }}

最后，站点配置config.toml

toc = true                # 是否开启目录
autoCollapseToc = true   # Auto expand and collapse toc

放大文章内图片显示

LeaveIt主题内置了LightGallery灯箱效果，所以图片原状态是比较小，需要点击才能放大，但是通过添加下面的代码就可以让图片放大显示，对眼睛舒服点。

在 assets/css/_custom.scss 中添加下面代码

	.post-warp .post-content img {
  		max-width: 100%;
}

添加阅读进度条

首先将这一段代码插入到 header 的模板中
LeaveIt 的 header 在 /layouts/partials/header.html，插入到第 2 行和第 16

{{ if (and .IsPage (not .Params.notsb)) }}
    <div class="top-scroll-bar"></div>
{{ end }}

然后在/assets/css/_custom.scss 文件中为我们的进度条添加样式

// 顶部阅读进度条
.top-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 0;
    height: 3px;
    background: #ef3982;
}

再然后，新建一个 js脚本 文件 /assets/js/_custom.js，来控制我们的进度条。

// ==============================
// Custom JavaScript
// ==============================
// 顶部阅读进度条
$(document).ready(function () {
  $(window).scroll(function(){
    $(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
  });
});

最后，使用 `` 标签将 js 脚本引入到博客中，使其生效。

在 /layouts/partials/js.html 文件中添加以下内容，然后将 $custom 加入到变量 $vendorscript 中

{{ $custom := resources.Get "/js/_custom.js" }}

长url自动换行

主题目录下的/LeaveIt/assets/css/_common/_page/post.scss 文件，找到.post-content代码块 在里面添加下面的代码

   .post-content {
        padding-top: 2rem;
						word-break: break-all;//here
						word-wrap: break-word;//hrer
        h2,
        h3,
        h4,
        h5,
        h6 {
            padding-top: .8em;
            padding-bottom: .3em;
        }

代码样式

assets/css/_common/_page/post.scss 中 code:not([class]) 的样式代码

/* 原来的代码 */
code:not([class]) {
    padding: 5px 5px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
    margin-left: 3px;
    margin-right: 3px;
    .dark-theme &:not([class]) {
        background: transparent;
        box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
    }
}
/* 修改成自己想要的样式 */
code:not([class]) {
    padding: 2px 4px;
    background: #2d2d2d; //
    color: #ef3982;
    border-radius: 2px;
    margin-left: 3px;
    margin-right: 3px;
    
    .dark-theme &:not([class]) {
        background: #2d2d2d;
        color: #e06c75;
    }
}

去掉 I miss you!（＞﹏＜）

assets/js/main.js第24-26行

// window.onblur = function() {
        //     document.title = 'I miss you!（＞﹏＜）';
        // }

移动设备适合性

一般在/themes/<THEME>/layouts/robots.txt，本主题下禁止了搜索引擎爬取我的样式或者脚本。接下来删除中间部分，修改结果为：

User-agent: *
Sitemap: {{ "sitemap.xml" | absLangURL }}

其他

1. 添加了一个静态网页指向一个网盘

hugo 的 static 静态文件夹内放置 html 文件。如，static/test/index.html，编译之后访问路径 主站/test 进入到 index.html 内容

about页面需要整改