Skytoby
Skytoby

hugo+github搭建个人博客

Posted on

hugo+github搭建个人博客

Posted on

前记

最近想自己建立个人的博客，也很久没写过博客，趁着这个学习过程，记录一下hugo+github搭建个人博客。当时看到一个个人博客，排版挺好的，就复制了那个博客版本，建立了本博客。Markdown格式用的编辑工具是Typora。通过该文，你将会在短时间建立个人的博客。

环境准备

1.github安装

基本的软件安装，下载完成后，直接点击安装，配置好path环境变量。

2.建立GitHub账户

进入github官网进行注册个人账号，需要输入用户名、密码和绑定的邮箱。

注册完成后，可以建立一个仓库（仓库名称一定要是 用户名.github.io），这个仓库以后直接就是个人博客内容提交的地方。

3.本地github配置

git bash 全局配置

1
2
git config --global user.name "你的注册用户名"
git config --global user.email "你的邮箱"

git bash 生成ssh key

ssh-keygen -t rsa -C "你的邮箱"

一直按enter即可，直到生成ssh key

hugossh

按照提示的路径打开id_rsa.pub文件，将其内容复制到github个人设置-SSH and GPG keys一栏。

这样本地就和远程的git仓库进行了绑定，可以git push git commit等基本的操作。

4.hugo安装

进入hugo官网下载,选择相应的版本进行下载，解压即可，将hugo.exe路径添加到环境变量。

hugo version验证是否配置成功。其他安装请参考官网

到此环境准备的工作已经全部完成，下面将介绍具体的hugo操作。

hugo基本操作

1.建站

1
2
3
4
5
6
7
8
9
10
D:\blog>hugo new site test
Congratulations! Your new Hugo site is created in D:\blog\test.
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
3
4
5
6
7
├── archetypes
├── content
├── data
├── layouts
├── static
├── themes
└── config.toml

archetypes：存储.md的模板文件

content：存储网址的所有内容

data：存储数据文件供模板调用

layouts：存储.html模板

static：存储图片，css,js等静态文件

themes：存储主题

config.toml：网站配置文件

2.下载主题

hugo默认不带主题，需要下载主题，才能工作。可以在hugo主题网站选择主题下载。

进入根目录下

1
2
3
4
D:\blog\test>git clone https://github.com/olOwOlo/hugo-theme-even themes/even
Cloning into 'themes/even'...
remote: Enumerating objects: 1410, done.
Receiving objects:  11% (159/1410), 340.01 KiB | 2.00 KiB/s

检查themes目录下的even主题是否下载成功,even主题模板使用说明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
D:\blog\test\themes\even>tree
├─archetypes
├─data
│  └─even
├─exampleSite
│  └─content
│      └─post
├─i18n
├─images
├─layouts
│  ├─partials
│  │  └─post
│  ├─post
│  ├─shortcodes
│  └─_default
├─src
│  ├─css
│  │  ├─_common
│  │  ├─_custom
│  │  └─_partial
│  │      ├─_footer
│  │      ├─_header
│  │      └─_post
│  ├─fonts
│  │  ├─chancery
│  │  └─iconfont
│  └─js
└─static
    ├─dist
    │  └─src
    │      └─fonts
    │          ├─chancery
    │          └─iconfont
    ├─img
    │  └─reward
    └─lib
        ├─fancybox
        ├─flowchartDiagrams
        ├─highlight
        ├─jquery
        ├─js-sequence-diagrams
        ├─slideout
        └─timeago

3.新建文章

hugo new xx.md新建文章

1
2
D:\blog\test>hugo new about.md
D:\blog\test\content\about.md created

打开about.md文件

1
2
3
title: "About"
date: 2019-05-04T16:57:27+08:00
draft: true

title为文章标题，draft表示是否为草稿，编辑完成后要将其改为false，否则编译会跳过草稿文件。

备注：md文件中图片的位置放在站点根目录下的static目录下，在static目录下新建img目录，在插入图片时，输入的位置为(/img/xx.jpg)即可。

对应博客文件一般放在content/post目录下：

hugo new post/first_blog.md

4.启动hugo自带服务器

在根目录下hugo server后，可以使用hugo内置服务器预览博客。–theme选项可以指定主题，–watch选项可以在修改文件后直接刷新浏览器，–buildDrafts包括标记为draft的内容。

本例选用的是even主题，注意启动的时候，需要配置config.toml文件，直接将GitHub even的config复制到配置文件即可。

具体的config文件配置说明，文件中已经已有详细的配置说明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
D:\blog\test>hugo server --theme=even --buildDrafts --watch
Building sites … WARN 2019/05/04 17:29:33 Page's .Hugo is deprecated and will be removed in a future release. Use the global hugo function.
WARN 2019/05/04 17:29:33 Page's .RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like:
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
WARN 2019/05/04 17:29:33 Page's .URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Pa

                   | EN
+------------------+----+
  Pages            | 12
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 40
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Total in 268 ms
Watching for changes in D:\blog\test\{content,data,layouts,static,themes}
Watching for config changes in D:\blog\test\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/后，界面如下：

hugolocal

5.hugo高级配置

在之前新建md文件是默认只有title、date、draft，还要其他的type属性。

hugo支持TOML、YAML、JSON格式的Front Matter。

除了必要的date与title参数外，你可以选择性的使用其他参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
---
title: "文章标题"
description: "文章的描述信息"
tags: [ "标签1", "标签2", "标签3" ]
categories: [ "分类1", "分类2" ]
keywords: [ "Hugo", "keyword" ]
date: 2012-04-06
lastmod: 2015-12-23
# CJKLanguage: Chinese, Japanese, Korean
isCJKLanguage: true
# 如果draft为true，除非使用 --buildDrafts 参数，否则不会发布文章
draft: false
# 设置文章的过期时间，如果是已过期的文章则不会发布，除非使用 --buildExpired 参数
expiryDate: 2020-01-01
# 设置文章的发布时间，如果是未来的时间则不会发布，除非使用 --buildFuture 参数
publishDate: 2020-01-01
# 排序你的文章
weight: 40
# 使用这两个参数将会重置permalink，默认使用文件名
url: 
slug: 
# 别名将通过重定向实现
aliases:
  - 别名1
  - /posts/my-original-url/
  - /2010/01/01/another-url.html
# type 与 layout 参数将会改变 Hugo 寻找该文章模板的顺序，将在下一节细述
type: review
layout: reviewarticle
# 三个比较复杂的参数
taxonomies:
linkTitle: 
outputs:
# 实验性的参数
markup: "md"
# 你还可以自定义任何参数，这些参数可以在模板中使用
include_toc: true
show_comments: false
---

通过以上的介绍，基本上可以满足一个简单的博客要求，下面将介绍如何同步到github。

本地站点上传

将生成的页面上传到自己的GitHub参考中，完成站点的部署。

在根目录下输入：

hugo --theme=even --baseUrl="http://用户名.github.io"

baseUrl是和第一步中建立的个人仓库（用户名.github.io）进行了关联。

hugo完成后会在站点根目录下生成public文件夹。

进行下列操作上传所有的文件。

1
2
3
4
5
6
cd public
git init
git remote add origin https://github.com/用户名/用户名.github.io.git
git add --a
git commit -m "first commit"
git push -u origin master

上传完成后，输入https://用户名.github.io就可以访问自己的站点了。

hugoremote

以后的博客基本上会上传到github中，希望这篇文章，可以让你快速建立个人站点，具体其他的优化配置，可以参考模板中的说明。还是希望自己以后多写博客，多总结，加油！

参考博客

https://blog.olowolo.com/post/hugo-quick-start/

https://blog.csdn.net/weixin_38233274/article/details/80279836

https://blog.csdn.net/kikajack/article/details/80413052