首页 运维干货使用Hugo+Gitbook+Nginx 构建静态博客网站

使用Hugo+Gitbook+Nginx 构建静态博客网站

运维派隶属马哥教育旗下专业运维社区,是国内成立最早的IT运维技术社区,欢迎关注公众号:yunweipai
领取学习更多免费Linux云计算、Python、Docker、K8s教程关注公众号:马哥linux运维

前言:之前我一直使用的是wordpress搭建的博客,由于是在某云搞活动时买的最低配置服务器,而wordpress又需要安装很多组件,网站变得越来越慢。最近发现了Hugo 是 Go 编写的静态网站生成器,速度很快,依赖于 Markdown 文件, 非常适合博客,索性就把之前的全部干掉了。

使用Hugo+Gitbook+Nginx 构建静态博客网站插图

看了一些帖子,大部分是在本地编辑好,然后转化为html文件扔到Github,然后通过 Github Page的方式访问,我也测了下感觉访问Github还是太慢了,并且最近GIthub也不稳定,所以我就直接在我Linux服务器上部署了,使用个人域名访问还是挺快的。我的博客

本问部署方式是使用Nginx作为Web服务器,代理Hugo和Gitbook的静态网页,通过个人域名访问。

一、部署hugo

在Github上下载Hugo的Release包上传到Linux服务器

创建网站

选择主题

在这里hugo themes选择你喜欢的主题并根据主题的REAMDE进行相应操作,比如我选择的是Pure主题。

因为每个主题的样式和功能不同,所以要根据主题的README介绍进行调试,将主题的配置和文章目录复制到网站根目录下

根据自己的想法修改模板的配置文件进行调试,可参考主题的README文件,我的部分定义如下:

创建第一篇文章

根据主题的定义,文章需要放在posts目录下,由于上面我们已经copy了主题模板的文件。所以我们可以直接新建文章,无需使用hugo new posts/xxx.md指令。

$ cat SUMMARY.md

Summary

$ vim book.json
{
“title”: “前行”,
“author”: “前行”,
“description”: “kubernetes”,
“language”: “zh-hans”,
“gitbook”: “3.2.3”,
“styles”: {
“website”: “./style/website.css”
},
“structure”: {
“readme”: “README.md”
},
“links”: {
“sidebar”: {
“回到博客”: “http://www.unmin.club”
}
},
“plugins”: [
“anchors”,
“auto-scroll-table”,
“chapter-fold”,
“expandable-chapters-small”,
“toggle-chapters”,
“advanced-emoji”,
“code”,
“favicon”,
“fontsettings”,
“klipse”,
“-livereload”,
“-lunr”,
“pageview-count”,
“page-toc-button”,
“popup”,
“sharing-plus”,
“-sharing”,
“splitter”,
“-search”,
“search-pro”,
“tbfed-pagefooter”,
“todo”,
“hide-element”
],
“pluginsConfig”: {
“hide-element”: {
“elements”: [“.gitbook-link”]
},
“theme-default”: {
“showLevel”: true
},
“code”: {
“copyButtons”: true
},
“tbfed-pagefooter”: {
“copyright”: “Copyright © zhanmin 2020”,
“modify_label”: “本书发布时间:”,
“modify_format”: “YYYY-MM-DD HH:mm:ss”
},
“page-toc-button”: {
“maxTocDepth”: 2,
“minTocSize”: 2
},
“sharing”: {
“douban”: false,
“facebook”: false,
“google”: false,
“hatenaBookmark”: false,
“instapaper”: false,
“line”: false,
“linkedin”: false,
“messenger”: false,
“pocket”: false,
“qq”: true,
“qzone”: true,
“stumbleupon”: false,
“twitter”: false,
“viber”: false,
“vk”: false,
“weibo”: true,
“whatsapp”: false,
“all”: [
“weibo”,”qq”, “qzone”, “douban”, “facebook”,”google”,
“linkedin”,”twitter”,”whatsapp”
]
},
“anchor-navigation-ex”: {
“showLevel”: true
},
“favicon”:{
“shortcut”: “”,
“bookmark”: “”
}
}
}

gitbook install

mkdir /app/k8s-book/Chapter1
vim /app/k8s-book/Chapter1/README.md
hello gitbook

gitbook serve

gitbook build ls /app/k8s-book
_book Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 Chapter6 Chapter7 README.md SUMMARY.md update.sh

$ vim /etc/nginx/nginx.conf

autoindex on;

$ nginx -s reload

`

访问验证

访问hugo

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(1)

访问gitbook,添加后缀/k8s-book,当然也可以在Hugo上添加个跳转链接。

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(2)

四、配置七牛云图床

由于是使用markdown进行写作,一些图片在静态博客上是无法显示的,所以我们需要设置自己的图床,我使用的是七牛云,免费空间为10G,时间不限。

在这里注册七牛云用户,点击对象存储,创建存储空间

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(3)

会给你一个30天的临时测试域名,到期会回收,所以最好使用自己的域名。

添加CDN加速域名,我配置的是二级域名,这个二级域名我还没在服务商那里添加解析

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(4)

现在到域名服务商那里,添加个二级域名解析

比如我的腾讯云

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(5)

其中记录值是在七牛云添加CDN域名加速时获得的CNAME值,鼠标停留在域名上即可获得。

详细配置可查看官方文档,最后域名配置显示成功即可

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(6)

五. 使用PicGO

PicGo可以帮我们自动将复制的图片转换为Markdown链接,非常方便。

安装完成后配置七牛云图床

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(7)

AccessKey/SecretKey获取方式

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(8)

设定访问网址是你添加的二级域名,存储区域如下

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(9)

配置完成点击确定,就可以使用了。

使用Hugo+Gitbook+Nginx 构建静态博客网站插图(10)

原文链接:https://www.jianshu.com/p/d9f93763340a 作者:Anson_前行

本文链接:http://www.yunweipai.com/38785.html

网友评论comments

发表评论

电子邮件地址不会被公开。

暂无评论

Copyright © 2012-2020 YUNWEIPAI.COM - 运维派
扫二维码
扫二维码
返回顶部