如何用HUGO搭建个人博客（0基础入门）

cherbimmy
2,386 阅读2分钟

第一步 安装HUGO

  • 点击链接下载HUGO(当然你需要FQ)

  • 在下方选择你需要的版本

  • 解压后把hugo.exe文件放在你的目录下（本人目录为F:\software\hugo）

  • 将hugo.exe文件所在路径添加到path中（可百度教程）

  • 使用cmder打开文档，输入hugo version后能查看到版本号即安装成功，如下图：

第二步 搭建我们的个人博客

  • 进入hugo官网,然后点击屏幕中央的 Quick Start

  • 进入教程后直接从第二步开始（第一步上面已经安装好了），请直接复制下面的代码，其中的quickstart换成你自己的github仓库名

hugo new site quickstart
  • 然后依次运行以下代码（同样的，将其中的quickstart换成你自己的github仓库名）
cd quickstart

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  • 接下来我们可以输入以下代码来添加一些内容
hugo new posts/my-first-post.md
  • 当然，如果你需要编辑新的内容，请从以下内容后开始编辑
---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

  • 值得注意的是，当你修改完后，需要将代码中的true更改为flase，以公开你的内容

  • 最后一步，让我们来输入以下代码来启动hugo服务器

hugo server -D
  • 这时你会发现有以下内容，使用ctrl+鼠标左键链接至http://localhost:1313/ 即可
                   | EN
+------------------+----+
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/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

此时我们的博客已经可以在本地预览了，接下来就需要将它推到GitHub上了

  • 用文本编辑器打开config.toml文件
* baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

将地址改为GitHub Pages显示的网址，将语言改为zh-Hans

  • 接下来运行最简单的一个指令(建议不要中断之前终端，在新建终端下运行)
hugo

  • 此时你会发现，你多了一个新的名为public的目录,然后我们需要在最外层新建一个.gitignore，将public放入其中

  • 接下来进入public，在public中分别运行以下代码,将其提交至GitHub远程仓库

git init
git add .
git commit -v

*进入你的GitHub并新建一个 xxxxx.github.io 仓库（xxxxx为你的用户名），然后通过两行代码将其上传(记得更改为自己的用户名)

git remote add origin git@github.com:cherbimmy/juejin1.git
git push -u origin master

*之后进入该仓库的settings,找到GitHub Pages部分，点击xxxxx.github.io地址即可

avatar
文章
阅读
粉丝