hugo搭建个人博客

一、背景介绍

博主之前使用Hexo 搭建博客，用了三年，这个工具最大的缺点就是，每次更新blog后，项目运行跟打包的速度有点慢，直到近期在冲浪的时候发现了Hugo，号称最快的静态站点生成器。使用之后发现确实，更快，果断迁移！

博主在第一次创建博客的时候还是一名学生，当时经济上不能满足我为搭建博客购买服务器、域名等，之后发现Github账户可以给自己开一个静态网站（可通过username.github.io访问）–Git Pages 。静态网站有一些功能上的限制，如不能运行php、不能自动读写站内文件……但是考虑到自己搭建博客的目的主要是记录学习、记录技术等，静态网站可以满足个人需求，主要还是因为免费，所以选择了它。但是有个缺点是访问速度慢或者无法访问，因为Github的服务器在国外，所以国内访问会受到限制。直到看到了Vercel之后找到了代替git pages的方案，下面会介绍这个网站的。

二、开始搭建

2.1 创建网站Github仓库

Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world.

Github 顾名思义全球最大的同性交友（击剑）网站全球最大代码托管平台，每个程序员都应该有听过或者正在使用。我们可以将自己的网站代码托管在上面。

2.1.1 注册Github账号

访问Github，点击右上角 Sign Up进行注册，注册成功后，Sign in进入个人主页

2.1.2 新建仓库

点击右上角 + –> 点击 New Repository

注意此处，仓库命名为 ”username.github.io" 例如 你的账户名为lincx那么此处设置为 lincx.github.io

点击 Create Repository即创建成功

2.1.3 本地安装git

本地下载 Git ，Win10直接下载 exe ，点击下一步就好了

（已安装的可以直接跳过）

更多关于git 学习，可以看git学习

2.2 Hugo

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易拓展、快速部署。

2.2.1 安装hugo

从hugo的GitHub 仓库下载即可，可根据个人电脑类型选择适合的安装包，博主选择的是 hugo_0.89.4_Windows-64bit.zip，下载完成，解压，将hugo的路径添加到环境变量PATH即可。（针对win10）打开命令行，输入hugo version，显示版本号即为安装成功。

2.2.2 初始化网站

在适合的位置 （推荐D盘）输入 hugo new site blogname ，其中 blogname 可以根据自己喜好修改

> hugo new site blogname
Congratulations! Your new Hugo site is created in E:\blog\hugo\blogname.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

根据提示信息：

1. 下载配置主题
2. 添加blog文章内容
3. 在本机启动hugo自带的服务器进行调试

点击进入blogname文件夹可以看到文件构成

├─archetypes
├─content
├─data
├─layouts
├─resources
├─static
├─themes
├─.hugo_build.lock
└─config.toml

config.toml 是网站的配置文件，hugo 同时还支持 YAML 格式的 config.yaml 或 JSON 格式的 config.json。content 目录放 markdown 文章，data 目录放数据，layouts 目录放网站模板文件，static 目录放图片、css、js 等静态资源，themes 命令放下载的主题

2.2.3 下载主题

hugo默认不自带主题，但是又需要主题才能正常工作，所以我们可以到 主题网站，选择心仪的主题，下载到themes目录中。

下面以code主题为例：

首先点击到主题里边，点击 Download之后就会跳转到对应的GitHub仓库

在readme 处通常会有安装教程，可以根据这个教程来完成

也可以直接将它拉取到本地，复制地址

在本地项目blogname的themes目录中，右击打开 Git Bash here ，运行 git clone git@github.com:luizdepra/hugo-coder.git hugo-coder命令，即可下载成功

$ git clone git@github.com:luizdepra/hugo-coder.git hugo-coder
Cloning into 'hugo-coder'...
remote: Enumerating objects: 2649, done.
remote: Counting objects: 100% (267/267), done.
remote: Compressing objects: 100% (155/155), done.
remote: Total 2649 (delta 92), reused 190 (delta 52), pack-reused 2382
Receiving objects: 100% (2649/2649), 3.05 MiB | 1.70 MiB/s, done.
Resolving deltas: 100% (1320/1320), done.

接着，将 hugo-coder\exampleSite\config.toml 这个配置文件复制代替blogname 根目录的config.toml

最后在项目blogname根目录打开命令行，下面是一个快速打开命令行的方式，在文件路径栏中输入 cmd按回车 Enter即可打开

运行 hugo server -D 看到下面的提示，算成功了。

E:\blog\hugo\blogname>hugo server -D
port 1313 already in use, attempting to use an available port
Start building sites …
hugo v0.89.4-AB01BA6E windows/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio

                   | EN | PT-BR
-------------------+----+--------
  Pages            | 11 |    11
  Paginator pages  |  0 |     0
  Non-page files   |  0 |     0
  Static files     |  5 |     5
  Processed images |  0 |     0
  Aliases          |  1 |     0
  Sitemaps         |  2 |     1
  Cleaned          |  0 |     0

Built in 114 ms
Watching for changes in E:\blog\hugo\blogname\{archetypes,content,data,layouts,static,themes}
Watching for config changes in E:\blog\hugo\blogname\config.toml, E:\blog\hugo\blogname\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

打开 浏览器 访问 http://localhost:1313/ 可以看到blog主页

2.2.4 添加内容

在项目目录中执行 hugo new XX.md 命令，会在 content 目录中创建这个 XX.md 文件。

hugo new about.md

这个文件的默认内容为：

---
title: "About"
date: 2021-12-03T15:05:35+08:00
draft: true
---

draft 表示是否是草稿，编辑完成后请将其改为 false，否则编译会跳过草稿文件。具体内容写在其下面：

---
title: "About"
date: 2021-12-03T15:05:35+08:00
draft: true
---
# 关于作者

一名在校计算机专业学生，技术主要集中在后端开发，同时也有接触过前端、小程序开发，平时喜欢接触一些新鲜玩意儿

目前技术栈：

+ Golang、Java、JavaScript
+ Vue.js、Spring、Spring Boot、Gin
+ Mysql、Redis、Etcd
+ 云原生、分布式

希望通过这个blog记录自己学习心得等，有问题欢迎联系哦！

再次运行 hugo server -D，在浏览器点开blog主页的About能看到内容

一般blog文章内容放在 content/posts这个目录中，所以写文章可以运行 hugo new posts/xxxx.md

新建内容文件，然后编写内容

+++
draft = true
date = 2021-12-03T15:23:01+08:00
title = "First Blog"
description = "xxxx"
slug = ""
authors = ["lincx"]
tags = []
categories = []
externalLink = ""
series = []

+++

# First Blog

这是我的第一篇blog 希望能在接下来的日子里，在这里分享自己学习心路历程

重新运行 hugo server -D，在浏览器点开blog主页的Blog能看到内容

2.2.5 更改配置

blog项目的配置主要是根目录下的 config.toml文件

baseURL = "http://www.example.com"
title = "johndoe"
theme = "hugo-coder"
languageCode = "en"
defaultContentLanguage = "en"
paginate = 20
pygmentsStyle = "bw"
pygmentsCodeFences = true
pygmentsCodeFencesGuessSyntax = true
enableEmoji = true
# Enable Disqus comments
# disqusShortname = "yourdiscussshortname"

[params]
author = "John Doe"
description = "John Doe's personal website"
keywords = "blog,developer,personal"
info = ["Full Stack DevOps", "Magician"]
avatarURL = "images/avatar.jpg"
#gravatar = "john.doe@example.com"
dateFormat = "January 2, 2006"
since = 2019
# Git Commit in Footer, uncomment the line below to enable it
commit = "https://github.com/luizdepra/hugo-coder/tree/"
# Right To Left, shift content direction for languagues such as Arabic
rtl = false
# Specify light/dark colorscheme
# Supported values:
# "auto" (use preference set by browser)
# "dark" (dark background, light foreground)
# "light" (light background, dark foreground) (default)
colorScheme = "auto"
# Hide the toggle button, along with the associated vertical divider
hideColorSchemeToggle = false
# Series see also post count
maxSeeAlsoItems = 5
# Custom CSS
customCSS = []
# Custom SCSS, file path is relative to Hugo's asset folder (default: {your project root}/assets)
customSCSS = []
# Custom JS
customJS = []

# If you want to use fathom(https://usefathom.com) for analytics, add this section
# [params.fathomAnalytics]
# siteID = "ABCDE"
# serverURL = "analytics.example.com" # Default value is cdn.usefathom.com, overwrite this if you are self-hosting

# If you want to use plausible(https://plausible.io) for analytics, add this section
# [params.plausibleAnalytics]
# domain = "example.com"
# serverURL = "analytics.example.com" # Default value is plausible.io, overwrite this if you are self-hosting or using a custom domain

# If you want to use goatcounter(https://goatcounter.com) for analytics, add this section
# [params.goatCounter]
# code = "code"

# If you want to use Cloudflare Web Analytics(https://cloudflare.com) for analytics, add this section
# [params.cloudflare]
# token = "token"

# If you want to use Matomo(https://matomo.org) for analytics, add this section
# [params.matomo]
# siteID = "ABCDE" # Default value is "1", overwrite this if you are cloud-hosting
# serverURL = "analytics.example.com" # For cloud-hosting, use provided URL, e.g. example.matomo.cloud

# If you want to use Google Tag Manager(https://analytics.google.com/) for analytics, add this section
# [params.googleTagManager]
# id = "gid"

# If you want to implement a Content-Security-Policy, add this section
[params.csp]
childsrc = ["'self'"]
fontsrc = ["'self'", "https://fonts.gstatic.com", "https://cdn.jsdelivr.net/"]
formaction = ["'self'"]
framesrc = ["'self'"]
imgsrc = ["'self'"]
objectsrc = ["'none'"]
stylesrc = [
  "'self'",
  "'unsafe-inline'",
  "https://fonts.googleapis.com/",
  "https://cdn.jsdelivr.net/"
]
scriptsrc = ["'self'", "'unsafe-inline'", "https://www.google-analytics.com"]
prefetchsrc = ["'self'"]
# connect-src directive – defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource
connectsrc = ["'self'", "https://www.google-analytics.com"]

[taxonomies]
category = "categories"
series = "series"
tag = "tags"
author = "authors"

[[params.social]]
name = "Github"
icon = "fa fa-2x fa-github"
weight = 1
url = "https://github.com/johndoe/"

[[params.social]]
name = "Gitlab"
icon = "fa fa-2x fa-gitlab"
weight = 2
url = "https://gitlab.com/johndoe/"

[[params.social]]
name = "Twitter"
icon = "fa fa-2x fa-twitter"
weight = 3
url = "https://twitter.com/johndoe/"

[[params.social]]
name = "LinkedIn"
icon = "fa fa-2x fa-linkedin"
weight = 4
url = "https://www.linkedin.com/in/johndoe/"

[[params.social]]
name = "Medium"
icon = "fa fa-2x fa-medium"
weight = 5
url = "https://medium.com/@johndoe"

[[params.social]]
name = "RSS"
icon = "fa fa-2x fa-rss"
weight = 6
url = "https://myhugosite.com/index.xml"
rel = "alternate"
type = "application/rss+xml"

[languages.en]
languageName = "🇬🇧"

[[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 = "🇧🇷"
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 ：

需要改成 2.1.2步 创建的仓库 ，找到Settings->Options->Repository name

将 bashURL “=” 后面的内容换成 “https://xxxx.github.io/”xxxx 为你的用户名，例如我的 “https://lincx-911.github.io/”

如果不修改 baseURL的话push到远程仓库，会找不到文件

🤡修改头像的话 avatarURL：

可以在项目根目录下的 static\images文件夹（没有的话自己创建）添加自己的照片，将 avatarURL后面的内容修改为 “images\xxxx.png”

其他的可以根据自己的需求进行修改

2.2.6 上传到GitHub

在项目根目录 blogname打开命令行，输入 hugo，回车，如果一切顺利，所有静态页面都会生成到 public 目录，将pubilc目录里所有文件 push 到刚创建的Repository的

PS E:\blog\hugo\blogname> hugo
Start building sites …
hugo v0.89.4-AB01BA6E windows/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio

                   | EN | PT-BR
-------------------+----+--------
  Pages            | 11 |    11
  Paginator pages  |  0 |     0
  Non-page files   |  0 |     0
  Static files     | 10 |    10
  Processed images |  0 |     0
  Aliases          |  1 |     0
  Sitemaps         |  2 |     1
  Cleaned          |  0 |     0
  
  Total in 936 ms

进入 public 文件夹，依次输入下面命令就行，注意 xxxx要换成你的github username

$ cd public
$ git init
$ git remote add origin https://github.com/xxxxx/xxxxx.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问：http://xxxxxx.github.io/会看到你的blog主页了。以后，每次新增文章或者修改配置，都需要重新走一遍上面2.2.6 的步骤，只不过不需要 git init跟git remote 两个步骤，这两个只需要在第一次push的时候执行就行

2.2.7 报错

1、点看主页后发现 “This XML file does not appear to have any”。解决：点开GitHub仓库

 Settings -> Pages -> Change theme

随便选一个主题就行。然后重新访问就能正常了。

2.3 Vercel

vercel 是目前我用过的最好用的网站托管服务

2.3.1 注册账号

访问主页，点击右上角 Sign Up 注册账号

通过Git仓库账号关联注册，如果注册中出现错误，检查下账号是不是QQ邮箱。

Vercel不支持QQ邮箱，以GitHub为例，可以修改GitHub的默认邮箱。

GitHub -> Settings -> Emails -> Primary email address

2.3.2 创建project

点击 New Project 输入前面创建的GitHub仓库的地址

在线安装vercel

GitHub -> Settings -> Applications -> Vercel -> Configure

选择项目 ，选择项目框架

点击 Deploy部署项目

点击 DOMAINS下面的xxxxx-vercel-app就能访问你的主页了

2.3.3 设置域名

Vercel -> Project-> Settings -> Domains

生效后会自动签发SSL证书，开启HTTPS