使用hugo搭建个人博客

tea9

发布于 2023-03-07 20:46:47

1K0

发布于 2023-03-07 20:46:47

文章被收录于专栏：tea9的博客

PS：为什么当前的博客还是用的hexo没用hugo，因为hugo我使用下来很多插件还不完善，还是比较喜欢hexo完善的插件比如我最喜欢的，博客链接持久化的插件就没有，和hexo有些问题出现随便搜索就能解决，hugo比较新很多的东西不太完善，主题也比较少，还有就是当前hexo的这个主题我很喜欢，很简洁很工整，小时候喜欢花里胡哨的特效，现在年龄大了喜欢简单点的。

0x00 简介

Hugo是一个用来生成静态网站的工具，使用Go语言编写的。从网上很多人的评论看，Hugo的显著优点就是部署快！

0x01 安装

https://github.com/gohugoio/hugo/releases

下载对应的安装包进行安装

然后解压后把，解压的路径加到环境变量上就可以使用了

验证是否成功

hugo version
PS C:\Users\tea90> hugo version
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb windows/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
PS C:\Users\tea90>

创建一个新站点

hugo new site myblog

0x02 主题

搭建博客肯定是要有一个好的主题了，我找到了一个hugo-coder的主题，感觉很符合现在黑白的极简风格，整体的风格根据跟程序员，比较适配，最近可能年龄大了，博客也想搭建的没有那么多花里胡哨的了

https://github.com/luizdepra/hugo-coder

主题整体长下面这个样子

下载主题：

首先进入到博客的目录，然后下载主题

#git初始化
> git init
#下载主题，引入主题的git仓库
> git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

复制themes\hugo-coder\exampleSite目录下的所有东西到博客根目录

然后运行博客

hugo server

正常的话启动成功可以直接访问http://localhost:1313/就可以看到

然后我用的这个主题一直报错

PS C:\Users\tea90\Documents\tea\myblog> hugo server
Start building sites …
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb windows/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
WARN 2022/04/10 11:51:39 The "twitter_simple" shortcode will soon require two named parameters: user and id. See "C:\Users\tea90\Documents\tea\myblog\content\posts\rich-content.md:26:1"
ERROR 2022/04/10 11:52:00 Failed to get JSON resource "https://publish.twitter.com/oembed?dnt=false&omit_script=true&url=https%3A%2F%2Ftwitter.com%2Fx%2Fstatus%2F1085870671291310081": Get "https://publish.twitter.com/oembed?dnt=false&omit_script=true&url=https%3A%2F%2Ftwitter.com%2Fx%2Fstatus%2F1085870671291310081": dial tcp 128.242.245.180:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
If you feel that this should not be logged as an ERROR, you can ignore it by adding this to your site config:
ignoreErrors = ["error-remote-getjson"]
Error: Error building site: "C:\Users\tea90\Documents\tea\myblog\content\posts\rich-content.md:1:1": timed out initializing value. You may have a circular loop in a shortcode, or your site may have resources that take longer to build than the `timeout` limit in your Hugo config file.
Built in 62032 ms

大概是有rich-content.md:1:1 错误，查看文件C:\Users\tea90\Documents\tea\myblog\content\posts\rich-content.md:26:1文件，应该是twitter的参数给错误了，最后需要传入正确的参数user和id，现在就把26行删除掉，后面发现vimeo也有问题，需要把26行和34行删除在启动服务。

还有个国际化葡萄牙语的文件也要同步删除，rich-content.pt-br.md、rich-content.md都要处理

运行：

> hugo server
Start building sites …
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb windows/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio

                   | EN | PT-BR
-------------------+----+--------
  Pages            | 48 |    48
  Paginator pages  |  0 |     0
  Non-page files   |  0 |     0
  Static files     | 10 |    10
  Processed images |  0 |     0
  Aliases          | 19 |    18
  Sitemaps         |  2 |     1
  Cleaned          |  0 |     0

Built in 205 ms
Watching for changes in C:\Users\tea90\Documents\tea\myblog\{archetypes,content,data,layouts,static,themes}
Watching for config changes in C:\Users\tea90\Documents\tea\myblog\config.toml, C:\Users\tea90\Documents\tea\myblog\themes\hugo-coder\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

0x03 主题的国际化

这个主题本身是带国际化的，需要在配置中更改，我新加上中文，然后把原有的葡萄牙语给注释掉了

打开myblog\config.toml文件拉到最后的语言修改的位置

新增cn然后把pt-br注释

最终：

[languages.zh-cn]
languageName = ":cn:"
title = "茶"

[languages.zh-cn.params]
author = "茶"
info = "Full Stack DevOps e Mágico"
description = "Sítio pessoal de João Ninguém"
keywords = "blog,desenvolvedor,pessoal"

[[languages.zh-cn.menu.main]]
name = "关于"
weight = 1
url = "about/"

[[languages.zh-cn.menu.main]]
name = "博客"
weight = 2
url = "posts/"

[[languages.zh-cn.menu.main]]
name = "项目"
weight = 3
url = "projects/"

[[languages.zh-cn.menu.main]]
name = "联系我"
weight = 5
url = "contact/"

[languages.en]
languageName = ":uk:"

[[languages.en.menu.main]]
name = "About"
weight = 1
url = "about/"

[[languages.en.menu.main]]
name = "Blog"
weight = 2
url = "posts/"

[[languages.en.menu.main]]
name = "Projects"
weight = 3
url = "projects/"

[[languages.en.menu.main]]
name = "Contact me"
weight = 5
url = "contact/"

#[languages.pt-br]
#languageName = ":brazil:"
#title = "João Ninguém"

#[languages.pt-br.params]
#author = "João Ninguém"
#info = "Full Stack DevOps e Mágico"
#description = "Sítio pessoal de João Ninguém"
#keywords = "blog,desenvolvedor,pessoal"

#[[languages.pt-br.menu.main]]
#name = "Sobre"
#weight = 1
#url = "about/"

#[[languages.pt-br.menu.main]]
#name = "Blog"
#weight = 2
#url = "posts/"

#[[languages.pt-br.menu.main]]
#name = "Projetos"
#weight = 3
#url = "projects/"

#[[languages.pt-br.menu.main]]
#name = "Contato"
#weight = 5
#url = "contact/"

重新运行后就可以看到效果了

最后把配置文件的默认语言改成中文

baseURL = 'http://example.org/'
title = "tea9"
theme = "hugo-coder"
languageCode = "zh-cn"
defaultContentLanguage = "zh-cn"
paginate = 20
pygmentsStyle = "bw"
pygmentsCodeFences = true
pygmentsCodeFencesGuessSyntax = true
enableEmoji = true

后面就给了头像图标，描述什么的

0x03 优化

1.路径持久化

然后搜索了路径优化发现hugo没有支持，类似hexo的路径优化插件abbrlink的插件hugo也没有，然后发现了slug标签还不打算用，需要每个文章都要添加比较麻烦，现在就遵循hugo原本的逻辑

2.一言

因为我比较非主流迷恋网络上的经典语录，从几年前知道一言的这个插件就一发不可收拾，感觉这个插件里的话都特别符合我的气质，每个自己搭建的博客都要带，

“不论在哪里,总有那么几个句子能穿透你的心。把这些句子汇聚起来,传递更多的感动。”这个简介也很打动我。。

因为github pages搭建了之前的博客还有是qiang的原因导致原来的博客，后来发现国内用码云的也挺多的，然后它也支持跟pages功能所以使用这个搭建下，国内访问会快

https://gitee.com/

C:\Users\tea90\Documents\tea\myblog\themes\hugo-coder\layouts\partials\header.html

在headrer.html文件中新增

<!---一言begin-->
 <!--<p  style='color:#008080 ;text-align:center;' id="hitokoto">正在加载一言...</p> -->

 <div style='color:#008080 ;text-align:center;' id="hitokoto" >
          
  <div class="word" id="hitokoto_text">正在加载一言...</div>
  
  <div class="author" id="hitofrom"></div>
 </div>
<!----一言end-->
</nav>

<!---一言begin-->
<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
<script>
  

  fetch('https://v1.hitokoto.cn')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto_text');
      hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
      var hitofrom = document.getElementById('hitofrom');
      hitofrom.innerText = "——" + data.from + '\xa0'; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

我在本地访问的时候访问不到，估计是要传到外网上把

3.live2d

https://haremu.com/p/205

找了一下感觉太麻烦了，之后有机会在做了

0x04 gitee Pages

什么是Gitee？

Gitee(码云) 是开源中国推出的基于 Git 的代码托管服务，类似于Github。最基础的用法，就是使用它保管开发者的代码，进行版本控制。

在搭建时，使用Hugo打包构建静态网站，输出一个纯静态的资源包。将这个静态资源包上传到Gitee，就能实现站点部署。

还有Codinghttps://coding.net/ 是国内的gitdiamond仓库为什么没选coding是因为coding pages收费就没选

具体步骤可以参考下面：

https://gitee.com/help/articles/4136#article-header1

首先要打包构建

博客目录输入命令hugo，就会进行构建了然后再public目录下会生成静态的文件

在gitee上申请账户

在gitee上建立跟用户名同名的仓库名就可以

https://username.gitee.io进行访问了

上传代码：

${git_address}需要替换为gitee的仓库地址

#生成静态文件
hugo
#进入到public目录
cd public
#初始化git
git init
git add .
git commit -m "init"
git remote add origin ${git_address}
git push -f origin master

配置gitee pages：

然后gitee pages需要实名认证只能等一下了

0x05 编写博客

使用以下命令可以编写博客

hugo new posts/blog_name.md

下面看意思是时间、标题、描述、作者、标签、分类、externalLink为外部链接，如果填写了内容会直接跳转，如https://www.baidu.com

+++ 
date = "2022-04-14"
title = "Apache Shiro 1.2.4反序列化漏洞（CVE-2016-4437）漏洞复现"
description = ""
slug = ""
author = "tea9"
tags = ["漏洞复现","vulhub"]
categories = ["安全"]
externalLink = ""
+++