使用 Hugo 搭建个人博客

2019-02-05  本文已影响0人  萧何爱英语
  1. HugoGitHub Releases 下载与操作系统相对应的二进制文件

由于我使用的是 Windows 10,所以我下载的是 hugo_0.61.0_Windows-64bit.zip,解压得到 hugo.exe

  1. 将下载好的二进制文件拷贝到环境变量 PATH 目录中

Win 键 + R 键 打开“运行”,然后输入 cmd,回车进入“命令提示符”,输入 path 回车查看所有的 PATH 目录。我是直接将 hugo.exe 拷贝到目录 C:\Windows

  1. 验证安装

关闭“命令提示符”再重新打开,然后输入 hugo version 回车。安装成功会输出版本信息,我的是 Hugo Static Site Generator v0.61.0-9B445B9D windows/amd64 BuildDate: 2019-12-11T08:29:13Z

  1. 创建站点目录

输入 hugo new site blog 回车,得到一个名为 blog 的目录(站点目录的名称可随意指定)。输入 cd blog 回车,然后进入 blog 目录

  1. 添加主题

可以在 https://themes.gohugo.io/ 找自己喜欢的主题,我是直接使用了 Maupassant 主题。通过 Git 工具将 maupassant-hugo 下载并拷贝到 blog/themes 下,然后修改 blog/config.toml 内容,在最后一行添加配置 theme = "maupassant-hugo"

  1. 添加文章

输入 hugo new posts/my-first-post.md 回车,在 blog/content/posts 目录下会自动生成 my-first-post.md 文件,这就是你要写的文章了。最终发布文章的时候,记得将 my-first-post.md 文件中的 draft: true 去掉,另外文章的位置一定是在 blog/content/posts 下,改动了位置会导致文章内容显示不出来。

修改 blog/config.toml,记得将 config.toml 编码格式转换为 UTF-8,否则中文会显示成乱码

# blog/config.toml
baseURL = "http://example.org/"
title = "My New Hugo Site"
theme = "maupassant-hugo"
preserveTaxonomyNames = true
disablePathToLower = true
hasCJKLanguage = true
summaryLength = 140
paginate = 10

[author]
  name = "xx有限公司"

[params]
  subtitle = "专注xx"
  keywords = "xx销售"
  description = ""
  busuanzi = true

[permalinks]
  posts = "/:year/:month/:day/:filename"
  
[menu]
  [[menu.main]]
    identifier = "archives"
    name = "汇总"
    url = "/archives/"
    weight = 1
  [[menu.main]]
    identifier = "about"
    name = "关于"
    url = "/about/"
    weight = 2

修改 blog/content/posts/my-first-post.md,记得将 my-first-post.md 编码格式转换为 UTF-8

# blog/content/posts/my-first-post.md
---
title: "My First Post"
date: 2019-12-21
categories: ["分类"]
---

正文
  1. 预览网页效果

输入 hugo server -D 回车,用浏览器打开 http://localhost:1313/ 即可看到页面,内容如下:

  1. 部署网站
上一篇 下一篇

猜你喜欢

热点阅读