如何用 Hugo 搭建个人博客

猫七先生
1,613 阅读6分钟

什么是 Hugo ？

Hugo 是一个由 Go 语言编写的静态网站生成器，Hugo以速度快著称，号称是世界上最快的网站生成框架

如何安装 Hugo ？

第一步，安装 Hugo 的二进制文件

首先我们需要安装一个 Hugo 的二进制文件（Hugo或Hugo.exe） 这是 Hugo 的下载地址，点击下载对应的版本 然后这是 Hugo 的官方网站，点击首页中间的 Quick Start 按钮，就能查看官方教程，PS. 因为是国外的网站，速度慢很正常，有条件的可以开下加速器

第二步，配置二进制文件的系统环境

我们下载的 Hugo 的二进制文件是一个压缩包，我们将压缩包解压到自己喜欢的目录中即可，然后就能在这个目录中看到一个 Hugo.exe 的文件**（尽量别放在 C盘）** 重点来了，我们要将 Hugo.exe 的目录路径复制一下，然后添加到计算机的系统变量中的 Path 路径中，方法如下

  1. 在桌面右键我的电脑点击属性，会弹出一个展示电脑信息的窗口
  2. 点击高级系统设置，会弹出一个系统属性的窗口，默认会跳到他的高级分页
  3. 点击环境变量，会弹出一个窗口，一般我们能看到两个变量，用户变量和系统变量
  4. 我们在系统变量中找到一个名为 Path 的变量
  5. 点击编辑
    1. win10：会弹出一个编辑环境变量的窗口，在里面点击添加，然后把之前复制的 Path 路径粘贴进去即可
    2. win8：win8没有win10那么好的 UI界面，只有一个输入栏，输入栏中是我们设置的环境变量，我们在环境变量的最后先加上一个;如果有就不用加，然后把之前复制的 Path 路径粘贴进去即可
    3. 小拓展：用户环境变量是只针对当前账号的，里面的变量不会影响电脑的另一个账号，系统变量针对电脑，所有账号都可以用，当我们把一个软件的 .exe 所在的目录路径添加到 Path 中，就可以在命令行中直接输入软件名，即可启动软件，在 win + r 中也可以启动
  6. 在命令行中输入 hugo version 即可查看配置是否成功，成功会返回版本号

如何使用 hugo 搭建博客？

第一步：新建项目文件

新建一个目录，作为博客项目的存放目录； 在控制台中使用 hugo new site 建立博客项目站点，我们以 abc 为例

hugo new site abc  // 此时存放目录中会出现一个 abc 的文件目录，里面是博客项目的一些基本配置

第二步：添加主题

hugo 可以使用别人开发的主题，省去我们设计排版的时间下面是如何安装主题

cd abc // 进入站点目录
git init // 首先初始化git仓库，防止以后项目被意外损害
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
// 这是官方给出的默认主题，当我们输入这行命令时会启动下载，下载的存放路径为 themes ，完成后会出现一个 ananke 的目录，这就是主题的名字，注意：下载的时候可能会很慢，有条件可以开下FQ，请耐心等待

echo 'theme = "ananke"' >> config.toml
// 这行命令的意思是，将 them = "ananke" 这段文本追加到 config.toml 中，我们可以只直接用编辑器在 config.toml 中手动添加，config.toml 文件就存放在站点目录下

这样主题就算是添加上了，下一步就该创建文章了

第三步：添加文章

文章使用的是 Markdown 格式，网上已经有一些优秀的 Markdown 编辑器，我用的是Typora,当然，也可以用 Markdown 语法直接编写，只要是 .md 文件后缀就行

  1. 我们新建一篇 test 为例
hugo new posts/test.md

hugo new 是新建的指令，会在 content 中新建一个 posts 文件夹，里面有一篇 test.md 的文章，如果不加 posts 的话会在 content 中直接新建文章，这里建议加上

  1. 编辑我们新建的文章 其实我们可以用 Typora 这些 Markdown 编辑器事先写好文章，然后直接复制到 content 下的 posts 里面，但如果这样，Hugo要求我们需要在文章的开头添加一些声明
title: "My First Post" // 这是文章的标题
date: 2019-03-26T08:47:11+01:00 // 文章的时间
draft: true	// 草稿，改为 false 之后，文章就处于发布状态了

第四步：启动本地服务器，可以在本地预览博客

直接在命令行中输入

hugo server -D // 注意：D是大写

成功后会返回一串信息，里面有一个 Web Server is available at http://localhost:1313/，这时候我们在浏览器的地址栏输入 http://localhost:1313 就可以看到博客的样子

第五步：自定义主题

之前虽然已经安装了主题，但博客名字等一些其他信息还没有修改，这里改一下 编辑 config.toml 文件

baseURL = "https://huage404.github.io/" // 设置域，如果我们要把博客放到GitHub上，就需要改成博客项目的链接，项目链接就是下面第七步第六小节中的链接，不修改我们会发现点击阅读全文回失效
languageCode = "en-us"	// 修改语言，我改成 "zh-Hans"
title = "My New Hugo Site"	// 这是博客的名称，可以自由更改
theme = "ananke" // 设置主题文件

第六步：发布博客

使用 hugo 命令，会将博客项目打包，项目中会出现一个 public ，这里面就是我们需要丢到服务器上的文件

第七步：上传到 GitHub

GitHub 给了我们一个免费的域名，输入这个域名可以进入这个仓库中的项目，本着不要白不要的优秀态度，可以用来放置我们的博客

  1. 在 GitHub 上新建一个仓库，仓库名是我们的 账号名+github.io，其他什么都不用管，点击创建即可
  2. 进入仓库，点击设置(settings)，往下翻，会有个 GitHub Pages 的标题，下面是一个信息框，如果是第一次操作会有一个多选按钮，勾上它即可
  3. 上传 public 中的文件到仓库，直接用 git 上传即可
  4. 这里需要注意，我们之前在创建博客站点时曾使用过 git init，虽然不会对我们在 public 中新建 git 仓库产生影响，但会影响博客站点的 git 仓库，所有我们需要配置一下博客站点的文件
  5. 在博客站点中新建一个 .gitignore 文件，文件中输入 /public/ 意思是告诉 git不要上传这个文件以及这个文件里面的内容
  6. 然后就可以在 https://你的账户名.github.io 中看到你的博客项目了，没有立马出现也没关系，可能在缓存，等一小会再看也无妨

总结

其实只要点击文章开始的官网链接，里面的教程里都有，这篇主要是我自己的学习笔记，写得会比较啰嗦一些

avatar
文章
阅读
粉丝