惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
Schneier on Security
P
Proofpoint News Feed
Apple Machine Learning Research
Apple Machine Learning Research
WordPress大学
WordPress大学
博客园 - Franky
V
V2EX
爱范儿
爱范儿
J
Java Code Geeks
小众软件
小众软件
Last Week in AI
Last Week in AI
The Cloudflare Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Hugging Face - Blog
Hugging Face - Blog
T
The Blog of Author Tim Ferriss
酷 壳 – CoolShell
酷 壳 – CoolShell
The Register - Security
The Register - Security
GbyAI
GbyAI
Vercel News
Vercel News
Y
Y Combinator Blog
腾讯CDC
F
Fortinet All Blogs
I
InfoQ
N
Netflix TechBlog - Medium
B
Blog RSS Feed
D
Docker
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
量子位
博客园 - 司徒正美
阮一峰的网络日志
阮一峰的网络日志
The GitHub Blog
The GitHub Blog
Microsoft Security Blog
Microsoft Security Blog
V
Visual Studio Blog
博客园 - 三生石上(FineUI控件)
宝玉的分享
宝玉的分享
Blog — PlanetScale
Blog — PlanetScale
H
Help Net Security
云风的 BLOG
云风的 BLOG
A
About on SuperTechFans
Scott Helme
Scott Helme
T
Tor Project blog
U
Unit 42
Google Online Security Blog
Google Online Security Blog
PCI Perspectives
PCI Perspectives
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
NISL@THU
NISL@THU
D
Darknet – Hacking Tools, Hacker News & Cyber Security
aimingoo的专栏
aimingoo的专栏
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Stack Overflow Blog
Stack Overflow Blog
Security Archives - TechRepublic
Security Archives - TechRepublic

kok的笔记本

macOS 里 神秘的 kernel_task ,为什么一直在写入硬盘? 产品 node_modules 为什么总是这么大:一次从原理到实践的瘦身记录 谁来救救我的Mac存储空间-清理工具横评:付费vs免费,从界面到命令行 2023 读书推荐 写给播客嘉宾的录制说明书 在 Electron 中使用 Vue Devtools 几何原本中勾股定理的证明 Mac 安装软件时提示 已损坏,无法打开 应该怎么办 PegBoard 你的数字白板 少数派读者与作者的 NewsLetter 闲棋冷子-2-2021年我读过哪些很棒的书 闲棋冷子-1-相信你的身体,它不会骗你 修复 macOS 中 Cisco Anyconnect 报的奇怪Bug 我的 NAS 使用记录 Omniplan 入门教程 Hugo升级0.74记录 一年级产品经理需要掌握什么知识? 无籍之谈-3-和盖盖聊聊尼尔·盖曼与中外科幻 露营笔记-装备篇 无籍之谈-2-和鹏仔聊华尔街兴盛史,给小白投资者的一些建议 介绍一下《无籍之谈》 无籍之谈-1-和不土聊佛学,谈谈《一心走路》《僧侣与哲学家》 高达模型入门 - 工具整理 5 分钟了解 Sketch 的新特性 Tint - 色调 Hugo 主题移动端开发的一些心得 修复 macbook 键盘连击问题 在 Hugo 中使用 Open Graph 提升分享效果 选小米10 还是小米10 Pro? 利用 Python 批量合并 Excel 文件 为什么家国梦不好玩? 高雄85大楼 Mac优秀软件推荐-Itsycal 找到并和正确使用无版权资源 Excel 常用函数 一 无线吸尘器挑选指南 钢铁、蒸汽与 19 世纪 聊聊《铁道之旅》 如何挑选一个电脑电源? 有用的正则表达式 给psd瘦身 2019第二季度读书总结 组装 ITX 黑苹果主机 Intel CPU 挑选指南 常用的 Markdown 工具 2019第一季度读书总结 怎么用尺规作图画75°角? 在 Hugo 中使用 Sass 真正的换位思考-《爱的沟通》读书笔记 Hugo 中使用思维导图 反叛公司中的治理者和顾问玩法 如何搭配成为一个盐系男生? 反叛公司 Rebel Inc. 入门指南 如何评估需求,预估开发成本? 小米8、小米8SE、小米8青春版参数对比 微信外部链接内容管理规范分析 在售 iPhone 参数对比 给Hugo blog中增加一些插件 微信 MacOS 多开的一些实践 矩阵与线性变换的概念理解 尺规作图小习题 介绍我自己 瓜摊老板 Really? EDM邮件营销,你需要知道 果子沟大桥 喀赞其的马车 清晨的木梨硡 hexo 主题开发 青龙寺的狮子 用一个特殊方法解决同位词问题 语义化 html 标签 数模的基本思路和写作攻略 hexo blog 搭建 0.1,0.1^0.1,为什么数值是波动的? 智能手机之旅 老师和学生的博弈 这些使用抗生素的方式,你做的对吗? 炼金术与钢之炼金术师 kok的笔记本 kok的笔记本 中国长征运载火箭家族-PegBoard
用 hugo 和 netlify 搭建blog
kokdemo · 2018-08-12 · via kok的笔记本

距离上一次搭建blog已经超过两年了,这两年并不是懒得写东西,而是实在是懒得折腾hexo了。 在看了好几种方案之后,最终还是选择了hugo。

why hugo?

比较流行的静态blog生成方案包括:

  • jekyll 需要ruby支持,也是gihhub上支持最好的方案。
  • Octopress 基于jekyll的增强方案。
  • hexo 基于nodejs,也是我之前一直在折腾的方案。
  • pelican 基于python。
  • hugo 基于Go语言的静态网站生成工具。

选择hexo之前,我一直在用wordpress写blog,wp是一个非常笨重的系统(虽然也很强大)。

需要自己经常去看一下主机的情况,而且修改主题复杂的要命。

hexo解决了哪些问题呢?

  • 不需要主机的经费支出
  • 基于nodejs,技术栈相对友好,易于二次开发

但在后面的实际使用中,我发现hexo带来了更多的问题。

首先是版本更新,每次hexo发个大版本,更新的时候99.5%都会报错,然后无法渲染页面,这时候就需要到google上去找解决方案,为了这个问题我都把主题重构过好几遍了。

其次是渲染问题,因为静态blog需要本地渲染,所以所有要写作的设备上都需要装一遍hexo(以及npm还有一大堆的包),然后你还得 祈祷 这些hexo的版本是一致的,这样渲染出来的页面才不会报错。

这两个问题实在是太痛苦了!

以至于这两年的文字写作都转移到了简书和微信公众号上。


直到我看到了hugo,不由得眼前一亮!

hugo超级轻量,平台随意安装,没有包管理的问题(就是说你呢,npm

hugo没有任何主题依赖,安装好之后里面真的 什么都没有

你会发现这几个文件夹里几乎全是空的。

hugo速度超快,目前为止这个blog中大概有十几篇文章,每次生成全站的速度都不超过10ms,也能做到实时预览,真是爽快!

首先,找到安装包,点这个链接找到你需要的版本,只有 6MB 大,真是感动的要哭了……

当然作为mac用户你也可以选择输入 brew install hugo 来快速安装。什么,你不知道brew,哪你不妨先搜索一下brew吧。

找到对应的文件路径,输入

hugo new site yoursitename

就创建好了文件夹,里面包括了以下的文件结构:

  • content 用来放文本和页面内容的地方
  • archetypes 用来放 .md 文件的模板
  • data 用来放特殊定义的数据(json yaml之类的)
  • layouts 用来放页面模板,也是我们后面会魔改的地方
  • static 用来放静态文件
  • themes 主题
  • public 用来存放渲染出来的静态文件

此时输入

hugo server 

会在本地启动一个服务器,可以访问 http://localhost:1313 看一眼。

当然这个链接里面完全是空的,什么都没有,毕竟文件夹里全部都是空的,没有内容也没有主题。

添加主题

添加主题其实很方便,首先到hugo的主题官网看一下,挑选一个心意的主题,或者到github上搜一个star数高的也行。

我为了魔改方便,选了一个非常非常轻量的主题 hugo-paper,作为blog的主题。

cd yoursitename/
git submodule add https://github.com/nanxiaobei/hugo-paper.git themes/hugo-paper;

然后修改根目录下的 config.toml ,这是blog中的基本设置,其中有几个比较重要:

baseURL = ""
# 主机名称,后面会提到
title = ""
# blog的标题
theme = "hugo-paper"
# 使用的主题,对应 /themes/你的主题名称

其他还有很多有用的参数,想要了解可以看这里

有了主题之后,就差添加第一篇文章了!

第一篇文章

直接输入

hugo new post/fisrt-post.md

就会在 content/post 下新建一个md文件,只需要编辑里面的内容,比如加一句 hello world ,马上就能在浏览器中看到渲染出来的文章了,速度非常快。

如果想要添加其他的文章,只需要继续新增文章即可。至于怎么新增其他类型的文章,或者应用文章模板,我们后续再说。

github page 够用吗?

之前用hexo的时候一直在使用github page,算是比较稳定的免费服务,但是体验上比较差的地方在于github page 的页面渲染需要在本地完成然后发 commit 上去。

然而hexo的编译经常出问题,三天两头报错,因此我看了其他的方案。

首先是用 Travis-CI 的方式,通过自动化追踪的方式来部署页面,大概需要这么做:

  1. 生成github token
  2. 用 travis ci的命令行工具加密token,然后把这个配置到配置文件中。
  3. 用 travis ci 向 page 页面的 gh-pages 提交渲染后的静态文件

能配置倒是能配置,就是太麻烦了。

Netlify 闪亮登场!

通过朋友的介绍,我找到了 netlify 这个服务。

它对自己的定义是:

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning. 一个包含全球部署,持续化集成以及自动 HTTPS 的全能工作流。

使用它很简单,包括三步:

  1. 连接 git repo:支持 github gitlab 以及 bitbucket。
  2. 添加编译设定:比如设定分支,编译命令,以及输出的文件。
  3. 等待自动部署好。

对于免费用户来说,流量和部署速度都没有打折,还是非常贴心的。

Netlify 使用指南

想要和 hugo 联动也是非常的简单。

首先连接 github 账号,在 repo 列表中找到对应的 repo。

netlify 会读取出来这个 repo 的类型,如果是 hugo 就会自动填写上 bulid command 和 publich directory。

我们不用管这个,直接点最下面的 Deploy site

稍等一下,页面就会自动部署完,你可以在 Deploys 的页面中看到每一次部署的结果,如果后面有一个 Failed 标志,说明部署失败了。

如果一切正常,那么你之后的每一次 git 提交,都会触发 netlify 重新编译部署一次页面,很快blog 就展示全新的内容了,这种感觉非常爽!

设置自定义域名和 HTTPS

在 netlify 中当然也可以设置自定义域名,点击 Settings,找到 Domain management,就可以添加自定义域名了。

netlify 本身也会给你生成一个默认的二级域名,也是可以用的。

添加域名的过程其实就是在 DNS 服务中增加一个 A 记录的转发,我使用的是 DNSPOD,在设置中直接新增一条,将根域名 wocai.de 转发到 netlify 提供的 ip 地址上就好了。

netlify 还提供了免费的 https 证书服务,证书由 Let’s Encrypt 提供,一键点击即可,非常之方便。

后记

在告别了 wordpress 和 hexo 之后,我最终选择了非常轻量的静态生成器 hugo 和优秀的部署服务 netlify,经过合理的组合,终于不用再每次编译提交了。

但超级轻量的 hugo 带来了另外一个问题,太简单了,什么都没有,这意味着所有的功能都需要自己研究然后改造模板。这部分内容留着下次说罢。