用hugo框架在github来搭建自己的博客吧！

た入场券 2022-10-11 01:10 194阅读 0赞

### 文章目录 ###

*  背景
 *  安装
 *  创建博客
 *  使用主题
 *  启动 blog 服务
 *  写博客
 *  修改博客属性
 *  部署到 github
 *  往后如何更新博客

# 背景 #

如果希望搭建一个博客网站，就是用 hugo 吧！因为它：

*  开源
 *  基于 golang
 *  支持 markdown

# 安装 #

mac 安装 hugo

brew install hugo

查看是否成功

hugo version

# 创建博客 #

第一次我们找到一个 workplace 下，然后执行

# 博客项目的名字为 myblog
    hugo new site myblog

myblog 目录如下：

├── archetypes
    │   └── default.md
    ├── config.toml         # 博客站点的配置文件
    ├── content             # 博客文章所在目录
    ├── data                
    ├── layouts             # 网站布局
    ├── static              # 一些静态内容
    └── themes              # 博客主题

注意 themes 文件夹用来存放下载的主题，content｜static｜config.toml 这几个文件是要被主题替换的文件

# 使用主题 #

hugo主题网址：https://themes.gohugo.io

我们先 cd 到 themes 中

cd themes

然后我们依据对应主题里头的 git 命令克隆到本地，克隆下来之后，在 themes 文件中格式如下：

└── xxx主题名字
        ├── CHANGELOG.md
        ├── LICENSE.txt
        ├── README.md
        ├── archetypes
        ├── assets
        ├── exampleSite         # 本主题示例内容
        |      ├── content      # 示例博客文章
        │      |-- static
        │      |-- config.toml  # 本主题配置
        ├── i18n
        ├── images
        ├── layouts
        ├── package-lock.json
        ├── package.json
        ├── screenshot.png
        ├── source
        ├── theme.toml      
        └── webpack.config.js

然后我们需要把上面主题中的 exampleSite 内容复制到 myblog 根目录，这样就可以把根目录的 content｜static｜config.toml 给全覆盖

cd myblog
    cp -r themes/xxx主题/exampleSite/* ./

# 启动 blog 服务 #

启动服务

go server

如下图即为成功启动：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY251bGw_size_16_color_FFFFFF_t_70]

但是有的人启动会报错误

Error: module "xxx" not found; either add it as a Hugo Module or store it in "/Users/abcnull/workplace/myblog/themes".: module does not exist

遇到这个错误我们按照它改下名字即可，用 mv 命令，改好后再执行 hugo server 发现还是会报下面错误

Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
           Run `hugo help new` for details.

这是因为我们需要重新把重新命名的主题文件夹下的文件重新拷贝到 myblog 根目录中，然后我们再执行拷贝命令，最后再执行一边 hugo server，最后发现终于成功了！

地址一般是是`http://localhost:1313/`，我们直接复制到浏览器中打开，发现成功了！

# 写博客 #

上面已经给出了目录结构，如果我们把博客文章放在 content 中文章就可以显示啦！

一般来说 hugo 提供这样的格式来标明文章类别，这个模版写在 markdown 文章最上面即可，这些内容会被 hugo 解析

---
    title: "文章标题"           # 文章标题
    author: "作者"              # 文章作者
    description : "描述信息"    # 文章描述信息
    date: 2015-09-28            # 文章编写日期
    lastmod: 2015-04-06         # 文章修改日期
    
    tags : [                    # 文章所属标签
        "文章标签1",
        "文章标签2"
    ]
    categories : [              # 文章所属标签
        "文章分类1",
        "文章分类2",
    ]
    keywords : [                # 文章关键词
        "Hugo",
        "static",
        "generator",
    ]
    
    next: /tutorials/github-pages-blog      # 下一篇博客地址
    prev: /tutorials/automated-deployments  # 上一篇博客地址
    ---

根据个人不同的博客，然后我把模版进一步缩减

---
    title: "文章标题"           # 文章标题
    author: "作者"              # 文章作者
    date: 2015-09-28            # 文章编写日期
    lastmod: 2015-04-06         # 文章修改日期
    tags : [                    # 文章所属标签
        "文章标签1",
        "文章标签2"
    ]
    ---
    
    ---
    title: "Helloworld"
    date: 2020-04-19T23:56:47+08:00
    ---

然后试着写一篇 markdown 形式的 blog 然后打开网页其可以正常显示了！

# 修改博客属性 #

我们先 vim 打开 config.toml 来进行编辑

vim config.toml

具体如何修改可以参考网上给出的具体方法，也可以自己尝试查看英文修改

具体有哪些属性值以及如何修改请参照官方文档：[https://gohugo.io/getting-started/configuration/\#all-configuration-settings][https_gohugo.io_getting-started_configuration_all-configuration-settings]

# 部署到 github #

github 创建仓库命名`账户.github.io`

在本地使用 hugo 命令在根目录生成 public 文件夹，它就是要存放到 github 中的项目

hugo

然后我们通过 git init 一套流程上传上去 github 然后访问`账户.github.io`就能看到我们的主页了！

# 往后如何更新博客 #

往后更新博客，可以先 cd 到 myblog/content 目录下，然后我们写 md 文章

写好以后，我们 cd 到 myblog 下执行 hugo 命令重新生成 public 文件

再然后我们 cd 进 myblog/public 中，然后执行 git 提交命令提交到 github 即可～

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY251bGw_size_16_color_FFFFFF_t_70]: /images/20221005/f6d8056a82ec49e98f9e715a55c75314.png
[https_gohugo.io_getting-started_configuration_all-configuration-settings]: https://gohugo.io/getting-started/configuration/#all-configuration-settings