Hugo on Time Friend

博客 Logo 动画是怎么做的

Thu, 14 Aug 2025 17:00:00 +0000

网站左上角那个小方框, 是视频.

默认灰度, hover 才亮起来, 颜色每次还不一样, 播放速度也会先快后缓. 像被惊醒了一下.

为什么做这个

之前 logo 是张静态 PNG. 总觉得缺了点呼吸感. 正好手头有一段素材, 就把 logo 从静态图换成了视频.

mp4 没有 Alpha 通道

剪映导出时明明去掉了背景, 但 mp4 不支持透明通道, 透明部分被压成了黑色.

桌面端用 mix-blend-mode: screen 解决 — 黑色变完全透明, 只保留亮色部分:

@media (hover: hover) and (pointer: fine) {
 #header #logo { mix-blend-mode: screen; }
}

限定 (hover: hover) 是因为移动端浏览器对 <video> 的 blend mode 支持普遍不好.

移动端改用 <canvas> 做逐像素抠图: video 隐藏继续播放, canvas 每帧取画面, RGB 都低于 30 的像素 alpha 置 0:

function render() {
 canvasCtx.drawImage(videoEl, 0, 0, w, h);
 var src = canvasCtx.getImageData(0, 0, w, h).data;
 var id = canvasCtx.createImageData(w, h);
 for (var i = 0; i < src.length; i += 4) {
 id.data[i] = src[i];
 id.data[i+1] = src[i+1];
 id.data[i+2] = src[i+2];
 id.data[i+3] = (src[i] < 30 && src[i+1] < 30 && src[i+2] < 30) ? 0 : 255;
 }
 canvasCtx.putImageData(id, 0, 0);
 requestAnimationFrame(render);
}

这个性能取决于视频分辨率, logo 尺寸很小, 所以开销可以接受.

首页打字效果是如何实现的

Tue, 12 Aug 2025 11:50:00 +0000

打开首页会看到一行文字在逐字打字, 过几秒又换一句. 这个效果不复杂, 但很多人问怎么做的.

这篇说一下实现方式.

整体原理

首页加载时, 从一个 JSON 文件里随机选一句台词, 用 Typed.js 这个库模拟打字效果.

首页加载
 ↓
main.js 检测到当前是首页
 ↓
根据语言 (中文/英文) 确定取哪个字段
 ↓
从 /data/quotes.json 随机取一条
 ↓
传给 Typed.js, 开始打字动画

数据来源: quotes.json

台词存在 static/data/quotes.json 里.

[
 {
 "en": "Hope is a good thing, maybe the best of things, and no good thing ever dies.",
 "zh": "希望是美好的，也许是世间最美好的事物，而美好的事物永不消逝。",
 "author": "The Shawshank Redemption"
 },
 {
 "en": "Get busy living or get busy dying.",
 "zh": "忙着活，或忙着死。",
 "author": "The Shawshank Redemption"
 }
]

每条数据包含三个字段:

如何让博客支持离线访问

Tue, 08 Jul 2025 15:30:00 +0000

PWA 是个 buzzword, 说白了这个博客用到的 PWA 功能就两个: manifest.json 和 Service Worker. manifest.json 让浏览器知道"这是个应用", Service Worker 让它在离线时也能工作.

这篇重点说 Service Worker, 因为它比较复杂. manifest.json 很简单, 放在最后说.

Service Worker 是什么

简单说, Service Worker 是一个运行在浏览器背后的脚本. 它独立于网页, 在后台默默干活.

你可以把它理解为浏览器和网络之间的中间人. 正常情况下, 浏览器请求一个资源 (HTML, JS, 图片), 直接去服务器拿. 有了 Service Worker, 请求会先经过它:

浏览器 → Service Worker → 网络 (或缓存)

Service Worker 可以决定: 这个请求是去网络拿, 还是直接从本地缓存返回, 还是两者都做.

这个博客的 Service Worker 就是用 Workbox 生成的, 大约 5KB.

有什么用

离线访问

这是最核心的功能. 如果用户访问过一次博客, Service Worker 会把静态资源缓存下来. 下次即使没有网络, 也能打开之前看过的文章.

我是怎么给博客加页面统计的

Sun, 15 Jun 2025 13:20:00 +0000

写博客不知道有没有人看, 会很空虚. 统计不是为了 KPI, 就是图一乐.

这个博客的页面统计有两套系统, 各管各的.

Busuanzi 显示在文章页面上, 读者能看到每篇文章被看了多少次. 它是开源的, 不需要注册, 脚本一引就行.

Google Analytics 在后台跑, 只有我自己能看到. 用来分析流量来源, 用户分布, 热门内容等.

两套互不干扰.

Busuanzi (前端展示)

Busuanzi 是不蒜子的英文名, 一个极简的阅读统计工具. 没有后台, 没有 Dashboard, 只有一个计数器和一段 JS 脚本.

引入脚本

在 layouts/partials/js.html 里加载:

{{ if .IsPage }}
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{{ end }}

只在文章页加载, 首页和列表页不用.

显示阅读量

在文章页模板 layouts/_default/single.html 里:

<div class="article-tag">
 <i class="fa fa-eye"></i>
 <span id="busuanzi_container_page_pv">
 <span id="busuanzi_value_page_pv">0</span>
 </span>
</div>

Busuanzi 的脚本加载后会自动查找 id="busuanzi_value_page_pv" 的元素, 把阅读量填进去. 数据存在 Busuanzi 的服务端, 不需要自己维护.

评论系统怎么接入博客的

Tue, 06 May 2025 10:30:00 +0000

博客不能没有评论. 但又不想为了一个评论功能去搞数据库和 moderation. Giscus 是一个折中方案.

这个博客的评论系统用的是 Giscus. 它基于 GitHub Discussions. 所有评论都直接存在 GitHub 仓库里, 不需要自建数据库, 不需要第三方服务.

整体流程

用户打开文章页
 ↓
加载 giscus.app/client.js
 ↓
Giscus 脚本读取 data- 属性配置
 ↓
根据 mapping="pathname" 取当前 URL 路径
 ↓
用 GitHub Discussions API 查询匹配的 Discussion
 ↓
找到 → 渲染评论框和已有评论
未找到 → 显示"留个评论吧"输入框
 ↓
用户写评论 → 点击发布
 ↓
跳转 GitHub OAuth 授权 (首次需要)
 ↓
评论通过 API 写入仓库的 Discussions
 ↓
Giscus WebSocket 监听变更 → 实时更新评论区

整个过程用户无感知, 不需要离开页面.

哪里对接

评论系统以 script 标签嵌入页面. 在 layouts/partials/comments.html 里:

我是怎么部署这个博客的

Thu, 10 Apr 2025 15:44:00 +0000

静态文件总得找个地方放, 还得让全世界都能访问.

部署平台: Cloudflare Pages

选 Cloudflare Pages 而不是其他平台, 原因有三:

全球 CDN: Cloudflare 有遍布全球的边缘节点, 无论访客在哪, 都能从最近的节点加载页面
零配置 HTTPS: 自动签发和续期 SSL 证书, 不需要手动处理
免费额度够用: 对于个人博客来说, 带宽和构建次数完全够用

配置很简单, 在 Cloudflare Pages 控制台创建一个项目, 关联 GitHub 仓库. 构建命令和输出目录在 GitHub Actions 里控制, 不需要在控制台配.

有个坑: Cloudflare Pages 默认分配的域名是 <project>.pages.dev, 项目名一旦确定就不能改. 想换只能删掉重建. 我那会儿随便打了个名字, 后来想改发现不行, 只能留着.

CI/CD 流程

完整的部署流程由 GitHub Actions 管理:

name: Deploy to Cloudflare Pages

on:
 push:
 branches: [master]
 workflow_dispatch:

jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "0.164.0"
 extended: true

 - uses: actions/setup-node@v4
 with:
 node-version: 24
 cache: npm

 - name: Install dependencies
 run: npm ci

 - name: Patch theme for Hugo compatibility
 run: bash scripts/patch-theme.sh

 - name: Build
 run: npm run build

 - name: Deploy to Cloudflare Pages
 run: npx wrangler pages deploy public --project-name=time-friend
 env:
 CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

触发条件是 push 到 master 分支. 也支持手动触发 (workflow_dispatch), 方便在不改代码的情况下重新部署.

博客的 Google SEO 是怎么做的

Tue, 25 Mar 2025 11:08:00 +0000

这篇文章只讲 Google SEO. 其他搜索引擎不搞, 原因很简单: 流量大头在 Google, 把 Google 做好就够了.

结构化数据

这是最重要的部分. 结构化数据让 Google 在搜索结果里展示 rich result, 包括发布时间, 作者, 摘要等信息.

每篇文章在构建时自动注入 JSON-LD:

{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": {
 "@type": "Person",
 "name": "{{ .Site.Params.author }}"
 },
 "description": "{{ if .Description }}{{ .Description }}{{ else }}{{ .Summary | plainify }}{{ end }}",
 "url": "{{ .Permalink }}"
 {{ with .Params.tags }}
 ,"keywords": "{{ delimit . ", " }}"
 {{ end }}
}
</script>
{{ end }}

关键字段:

博客的构建流水线是怎么跑的

Wed, 05 Mar 2025 16:30:00 +0000

文章写完之后, 总不能手动一条条部署. 自动化的目的很简单: push 完代码就什么都不用管了.

本质上就两件事: 把 Markdown 变成静态文件扔到网上去, 顺便把构建流程自动化.

Gulp 任务

整个构建就两个 Gulp 任务, 串行跑:

gulp.task("default", gulp.series('build', 'generate-service-worker'));

build

gulp.task('build', () => gulp.src('./').pipe(shell(['hugo --buildFuture --minify'])));

一行代码. 调用 Hugo 构建, --buildFuture 允许发布未来日期的内容, --minify 在构建时做 HTML/CSS/JS 压缩.

为什么用 gulp-shell 而不是直接调用 Hugo? 因为后续需要在构建完成后做一些处理, Gulp 作为编排工具把任务串起来比较方便. 如果用 npm script 串命令也可以, 但 Gulp 的 task 定义更清晰, 错误处理也更直接.

generate-service-worker

gulp.task('generate-service-worker', () => {
 return workbox.generateSW({
 globDirectory: './public',
 globPatterns: ['**/*.{woff2,woff,js,css,png.jpg}'],
 globIgnores: ['sw.js'],
 swDest: `./public/sw.js`,
 clientsClaim: true,
 skipWaiting: true,
 runtimeCaching: [
 { urlPattern: /.*\.js/, handler: 'NetworkFirst' },
 { urlPattern: /.*\.css/, handler: 'StaleWhileRevalidate' },
 { urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif)/,
 handler: 'CacheFirst',
 options: { cacheName: 'images', expiration: { maxEntries: 50 } } },
 { urlPattern: /.*\.html/, handler: 'NetworkFirst' }
 ]
 })
 .then(() => console.info('Service Worker 生成完成'))
 .catch(error => console.warn('Service Worker 生成失败: ' + error));
});

这个任务用 Workbox 自动生成 SW, 具体原理和缓存策略在 PWA 与 Service Worker 那篇里讲了.

我的博客主题是如何定制的

Sat, 15 Feb 2025 09:15:00 +0000

主题用的 hugo-cactus-dark, 一个暗色主题, 干净, 没什么花哨的东西. 完全够用.

但原版主题只覆盖了基础功能. 我需要双语切换, Giscus 评论, 页面统计, 结构化数据, 这些原版都没有. 所以直接 fork 了一份, 在 layouts/ 里覆盖掉需要改的模板.

覆盖了哪些

layouts/ 目录下的模板优先级高于主题里的同名文件. 我只覆盖需要改的部分, 不需要动的就留给主题.

这个东西开发的时候有个烦人的点: Hugo 对模板有缓存. 你改了 layouts/ 下的文件, 有时候浏览器还是用旧版本. 不是 Hugo 的锅, 是浏览器缓存了 HTML. 清一下或者开无痕模式就好.

head.html

改动最大的一个. 原版只输出了基本的 meta 和样式引用. 这里加了一堆东西:

<!-- 搜索引擎验证 -->
<meta name="360-site-verification" content="xxx" />
<meta name="sogou_site_verification" content="xxx" />

<!-- 双语 hreflang -->
{{ if .IsTranslated }}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

<!-- Open Graph -->
<meta property="og:locale" content="{{ if eq .Lang "zh" }}zh_CN{{ else }}en_US{{ end }}">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:image" content="{{ .Params.image | absURL }}">
<meta property="og:description" content="{{ .Summary | truncate 200 }}">

<!-- Canonical -->
<link rel="canonical" href="{{ .Permalink }}">

<!-- 结构化数据 -->
{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": { "@type": "Person", "name": "{{ .Site.Params.author }}" }
}
</script>
{{ end }}

为什么要加 Open Graph? 因为文章分享到社交媒体时, 预览卡片需要这些 meta. 没有的话就只显示一个光秃秃的链接.

博客多语言是怎么实现的

Mon, 20 Jan 2025 14:21:00 +0000

写技术博客有个尴尬: 中文内容国内读者看, 但海外流量也不少. 干脆中英文都上.

这个博客是中英双语的. 同一篇文章有中文版和英文版, 各自有独立的 URL, 互不影响.

i18n 分两层: 一是内容的国际化 (文章本身有中英文版本), 二是界面的国际化 (按钮, 菜单, 提示文字跟着语言切换).

内容国际化

目录结构

Hugo 的 module.mounts 来做语言映射:

module:
 mounts:
 - source: content/en
 target: content
 lang: en
 - source: content
 target: content
 lang: zh
 excludeFiles: 'en/**'

英文内容从 content/en 取, 中文内容从 content 取, 排除掉 en/ 目录. 这样中文和英文文件互不干扰, 各自在独立的目录下.

中文文章在 content/archive/ 下, 英文文章在 content/en/archive/ 下.

translationKey 配对

用 Hugo 的 translationKey 来配对文章. 同一篇文章的中英文版本用同一个 key:

# 中文文章
translationKey: zh0189
title: Git系列之关于add命令的一些事
slug: git-series-about-add-command

# 英文文章
translationKey: zh0189
title: Git Series: About the Add Command
slug: git-series-about-add-command

Hugo 会自动把这两个页面识别为翻译对. 模板里用 .Translations 拿到对应语言的版本, 用来做语言切换.

我的博客架构长什么样

Fri, 10 Jan 2025 10:00:00 +0000

很多人好奇这个博客是怎么搭的.

看起来很简单,但背后东西不少.算不上大工程,但从工程角度确实折腾了不少东西.双语架构,自动化构建, PWA, Google SEO 等等.

所以打算写个系列,把现在的这套东西记录下来.用什么,为什么这么选,代码怎么写的,性能上怎么考虑的.

整体架构

Markdown 内容 (中英双语)
 ↓
 Hugo SSG (extended, v0.164)
 ↓
 自定义主题 (fork cactus-dark, 大改)
 ↓
 Gulp Pipeline
 ├── hugo --minify
 └── Workbox generateSW
 ↓
 Cloudflare Pages (GitHub Actions CI)

三层: 内容层, 构建层, 部署层. 没有数据库, 没有后端, 全是静态文件.

为什么用 Hugo

我是前端, 喜欢用前端圈的东西. Hugo 是用 Go 写的, 文章多了以后构建速度就是快. 两百多篇文章, 几秒就构建完了. 这就是核心原因.

构建快了, 更新博客的心理负担就小. 这是一个正反馈.

Go 模板用起来也挺顺手, 变量作用域, 管道语法, partial 系统, 该有的都有. 不过刚开始接触的时候, {{ range }} 和 {{ with }} 的区别可能会绕一下.

使用Travis CI自动化部署你的Hugo,Hexo博客

Tue, 20 Nov 2018 16:14:25 +0000

Travis CI 是什么?

Travis CI 是在线托管的 CI 服务，用 Travis 来进行持续集成，不需要自己搭服务器。最重要的是，它对开源项目是免费的。如果公司是用的是 gitlab,也有提供相应的持续集成服务.这里就过多赘述.

Travis CI 配置文件

Travis 要求项目的根目录下面，必须有一个.travis.yml文件。

当你的仓库有提交的时候,travis 会自动执行你下面配置的行为.

Travis CI 的钩子与生命周期

Travis 的钩子

Travis 有不同的阶段,他提供了 7 个钩子。

before_install：install 阶段之前执行
before_script：script 阶段之前执行
after_failure：script 阶段失败时执行
after_success：script 阶段成功时执行
before_deploy：deploy 步骤之前执行
after_deploy：deploy 步骤之后执行
after_script：script 阶段之后执行

生命周期

before_install
install
before_script
script
aftersuccess or afterfailure
[OPTIONAL] before_deploy
[OPTIONAL] deploy
[OPTIONAL] after_deploy
after_script

.travis.yml

下面是我的博客部署配置,也是我项目.travis.yml文件的内容.

hugo

这是我的 hugo 部署配置,仅供参考

language: node_js
node_js: 10.13.0
install:
 - wget https://github.com/gohugoio/hugo/releases/download/v0.51/hugo_0.51_Linux-64bit.deb
 - sudo dpkg -i hugo*.deb
 - hugo version
 - rm -rf public
 - npm install

script:
 - hugo --buildFuture
 - gulp
 - echo 'Build done!'
after_success:
 - git config --global user.name "Fan"
 - git config --global user.email "你的邮箱"
 - git clone https://${ACCESS_TOKEN}@github.com/Num142857/alili.tech.git container
 - rm -rf container/*
 - cp -r public/* container
 - cd container
 - git add .
 - git commit -m 'Travis upate blog'
 - git push -u origin gh-pages -f

Hexo

这是我的 hexo 部署配置,仅供参考.

让你的Hugo博客支持echarts图表

Mon, 19 Nov 2018 16:14:25 +0000

在之前hexo构建的博客里,有使用到图表,但是现在迁移到hugo之后,就没有相关的插件支持了.

所以自己动手丰衣足食.

在hugo中有支持一种特性叫做 Shortcodes.简单的来说就是一个可以传参的小模板.

创建Shortcodes

创建 ./layouts/Shortcodes/echarts.html文件

<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
 // 指定图表的配置项和数据
 var option = JSON.parse({{ .Inner }})
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
</script>

使用

在 Shortcodes 插入echarts的配置数据,这样你就可以再页面中看到一个完整的图表了

Time Friend - Be a friend of time, long-term thinking, documenting growth 本文资源来源互联网，仅供学习研究使用，版权归该资源的合法拥有者所有，

效果

Hugo平台博文指定时间之后不显示?

Sun, 18 Nov 2018 16:14:25 +0000

自从博客切换到Hugo之后,是遇到了一些坑.

明明正确添加到文章,页面时间调整到今天,或者是今天之后缺不能显示在文章列表里.

原因是Hugo模板在循环遍历文件的时候,只要超过当前时间的文章都不会出现.

时区问题

如果你的文章时间没有指定时区的话.

像这样2018-11-19 16:14:25,很有可能文章不会显示.

Hugo时间统一为格林威治时间,因为中国的时间比格林威治时间早8个小时. 格林威治时间没有到你配置的时间的时候,文章是不会出现在文章列表里的.

解决方案

本地服务

hugo server --buildFuture

页面生成

hugo --buildFuture

Hugo博客百度SEO终极优化,熊掌号自动推送

Sat, 17 Nov 2018 16:14:25 +0000

在切换到Hugo平台之后,比较头疼的是之前hexo很多seo的插件不能使用了. 下面跟大家说一下我的seo优化方案.

Meta标签优化

Description

meta description，被认为是最有用的meta标签，是网站的简介信息。 content控制在100个字符以内比较好。

<meta name='description' itemprop="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{substr .Summary 0 100}}{{ end }}{{ end }}">

Keywords

{{ if .Keywords }} 
<meta name="keywords" content="{{ delimit .Keywords ", " }}" >
{{else}}
<meta name="keywords" content="{{ delimit .Site.Params.Keywords ", " }}" >
{{ end }}

百度熊掌号推送

说到seo熊掌号是必不可少的了,他可以做到24小时之内收录.所以这个必须不能放过.

gulp

在这里我要使用gulp来做我的自动化任务管理工具

安装gulp需要的模块

npm init
npm install gulp --save
npm install xml2js --save
npm install xmlhttprequest --save

在项目根目录创建一个`gulpfile.js`文件

// 导入相关依赖
const gulp = require("gulp");
const fs = require('fs');
const xml2js = require('xml2js')
const parser = new xml2js.Parser();
const XMLHttpRequest = require("xmlhttprequest").XMLHttp;


// 注册百度站长与熊掌号,百度会提供下面的数据给你
var xz_appid = 'xxxxx';
var xz_token = 'xxxxx';
var baidu_token= 'xxxxx' 

//熊掌号每天需要提交的url数量
// 注意这个数字必须要跟百度允许提交的url数量一致,如果多了会提交失败.
const xzCount = 20


// 创建一个任务
gulp.task('baiduSeo', () => {
 // 读取sitemap.xml文件并且转换成json
 fs.readFile(__dirname + '/public/sitemap.xml', function(err, data) {
 parser.parseString(data, function (err, result) {
 // 把读取的数据传入这个函数
 urlSubmit(result.urlset.url)
 console.log('Done');
 });
 });
 });

 // 提交url的方法
 function urlSubmit(urls) {
 // 最新内容提交
 var new_target = "http://data.zz.baidu.com/urls?appid="+xz_appid+"&token="+xz_token+"&type=realtime"
 
 // 历史提交
 var history_target = "http://data.zz.baidu.com/urls?appid="+xz_appid+"&token="+xz_token+"&type=batch"

 // 百度站长
 var baidu_target = "http://data.zz.baidu.com/urls?site=https://你的域名&token="+baidu_token

 // MIP
 var MIP_target = "http://data.zz.baidu.com/urls?site=https://你的域名&token="+baidu_token+"&type=mip"

 // AMP
 var AMP_target = "http://data.zz.baidu.com/urls?site=https://你的域名&token="+baidu_token+"&type=amp"

 // 最新url,看熊掌号情况而定
 urls = urls.map(item=>item.loc[0])
 allUrls = urls.join('\n')

 var new_urls_Arr = urls.slice(0,xzCount)
 new_urls= new_urls_Arr.join('\n');

 console.info('百度站长开始提交',new_urls)
 sendData(baidu_target,new_urls,'百度站长提交成功')

 console.info('熊掌号开始提交')
 sendData(new_target,new_urls,'熊掌号提交完成')

 // 提交历史url 每天最多500w条
 console.info("历史数据开始提交")
 sendData(history_target,allUrls,"历史数据提交完成")

 console.info("MIP 开始提交")
 sendData(MIP_target,allUrls,"MIP提交成功")

 console.info("AMP 开始提交")
 sendData(AMP_target,allUrls,"AMP提交成功")

 // 提交数据
 function sendData(target,urls,message){
 var xhr = new XMLHttpRequest();
 xhr.open('POST', target, false);
 xhr.setRequestHeader('Content-type', 'text/plain');
 xhr.onload = function () {
 console.log(this.responseText);
 if(message){console.info(message)}
 };
 xhr.send(urls);
 }

};

gulp.task("default",[
 'baiduSeo'
])

配置好以上都文件之后

博客构建工具Hugo的基本使用

Thu, 15 Nov 2018 16:14:25 +0000

最终还是把博客迁移到了Hugo,当初最纠结的是这套主题在Hugo平台上没有. 但是脑子一热，花了两三天时间。这套主题。全部迁移到了Hugo平台。接下来就给大家介绍一下Hugo的使用以及踩到的坑,以及解决方案.

Hugo的性能

正是因为hexo的性能不能满足,在生成静态文件的时候极其不稳定.而且时间也相对比较长一些. 在相同页面数量的情况下,处理速度hugo是hexo20倍及以上.这才是我换Hugo的原因.

配置文件

两个平台有很多共通的地方,迁移起来有很多工作是非常顺其自然的. 在配置文件上hugo也是可以使用yaml的,所以从hexo迁移过来会相对好很多. 其次hugo还可以使用json作为配置文件,为用户提供了很多选择.

Hugo的基本使用

Mac平台下

Mac下Hugo提供了homebrew安装的方式，非常简便。

brew install hugo

Debian and Ubuntu平台下

sudo apt-get install hugo

Windows平台下

Windows下Hugo提供了Chocolatey方式的安装，通过如下命令即可。

choco install hugo -confirm

验证安装

安转完成后，我们打开终端，输入如下命令进行验证是否安装成功

hugo version

创建一个站点

hugo new site quickstart

添加一个主题

cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

# 编辑你的 config.toml 配置文件
# 添加一个叫 Ananke 的主题
echo 'theme = "ananke"' >> config.toml

新建一篇文章

hugo new posts/my-first-post.md

本地开启Hugo服务

hugo server -D

构建静态站点

hugo