经验贴：从0开始搭建个人主页

〇、搭建框架 Hugo 介绍

Hugo是一个十分好用的、搭建静态网页的框架。所谓的静态网页，在我的理解中就是访问次数远大于编辑次数的网页，此类网页常见于一些介绍性质的主页。因而，Hugo很适合用来搭建个人主页。

在开始阅读本博客之前，您可以按照您的需求完成以下事情：

阅读Hugo官方的教程。官方教程会比较简略，且无法满足一些客制化需求。
如果您想要深入了解Hugo的工作原理，请访问此连接。了解Hugo的工作原理可以帮助您在定制个人主页时，更方便的按照您的需求来修改代码，这一点是比较重要的！这是因为目前Hugo的相关博客并不多，内容大多鱼龙混杂，有时难以找到有效信息。这种时候，了解hugo的工作原理可能帮助您更准确地完成目标。

一、Hugo安装及环境配置

hugo官网已经给出了详细的安装方案，这里就不赘述了。安装教程

强烈推荐大家在linux系统上安装hugo并配置环境

二、创建一个示例

安装好hugo之后，我们首先可以通过一行简单的命令hugo new site site_case 来快速创建一个空网站。

此时一个独属于你的个人主页就创建好啦！接下来可以选取一个你喜欢的模板，将模板嵌套在你的个人主页中。

1
2
3
4
5
6


cd site_case

# 此处以even模板为例
git clone https://github.com/olOwOlo/hugo-theme-even themes/even

cp themes/even/exampleSite/config.toml config.toml

此时文件的目录树如下：

到这一步，我们就可以启动server，看看目前的效果啦！

服务器上输入: hugo server --disableFastRender --i18n-warnings --bind localhost -p 23456

本地powershell输入： ssh -N -L localhost:5942:localhost:23456 {username}@{server_ip} -p {port}

浏览器输入网址： localhost:5942

样例：

三、原理解读

此部分是我对hugo使用的一些理解~

OK，让我们从hugo new site这里开始解读。

首先我们可以看到，hugo new site site_case这一行命令生成的文件树如下：

archetypes：通常情况下这个文件夹是不重要的= =（有时可以保存一些默认的模板，不过对于新手来说了解的越少越容易理解）
content：此处存储了你要显示的所有文章。在content目录下也可以创建多个文件夹，用来归类各类文章。
data：暂时用不到~
layouts：暂时用不到~
resources：暂时用不到~
static：此处可以存储要使用的一些图片或者视频等静态资源。例如，我们可以把要使用的图片存储于static/images/test.png。注意，存储的图片在使用时使用的路径并不是static/images/test.png而是images/test.png，后面会给解释。
themes：此处存储了你要使用的主题模板。
config.toml：整个网站的相关配置。

在了解了各个文件夹都是什么作用了之后，我们来说一说hugo是如何把所写的文章转换成网页的（即hugo命令）。首先概括一下流程：

用户撰写文章 -> hugo编译config.toml和模板中的相关文件为html文件 -> hugo将静态资源（static/）与用户撰写文章链接起来，并编译成html文件 -> 将以上这些html文件组织起来，形成个人网站

用户撰写文章：用户使用markdown及html撰写文章。hugo通过其独特的shortcode理解用户文章，并进行编译。
hugo编译config.toml和模板中的相关文件为html文件：首先，site_case/config.toml中保存了所搭建网站的各种信息，hugo会根据这些信息来决定所生成网页的一些特性。然后，模板中也会有一些相关文件。例如，themes/even/layouts/index.html中便写明了even这个主题在进入主页面时所显示的html结构。hugo会将以上信息组织起来，生成用户定制的主题效果。
hugo将静态资源（static/）与用户撰写文章链接起来，并编译成html文件：使用hugo命令时，hugo会生成public文件夹。事实上，仅public文件夹用于构建主页。上述的两步编译好的结果均会存储到public文件夹中。而static/路径下的所有文件夹，都会直接被编译到public中。例如，static/images/test.png在编译后的路径就是images/test.png（以public为根路径）。因此，我们在文章里引用图片路径时，要使用后者才能正确显示。
将以上这些html文件组织起来，形成个人网站：将生成html文件在浏览器打开，以便浏览。

四、一些客制化需求

一些简单的客制化需求例如写博客、在config.toml中修改个人信息等，都已在hugo的官方教程中给出。这里我简单描述一下一些特殊的客制化需求。

menu重排列

大家可以先看一下我的个人主页的menu，和主题中内置的menu是不太一样的，那如何实现这样的效果呢？

首先，我们可以在config.toml中找到与menu相关的一些配置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


[[menu.main]]             # config your menu              # 配置目录
  name = "主页"
  weight = 10
  identifier = "主页"
  url = "/"
[[menu.main]]
  name = "生活"
  weight = 20
  identifier = "生活"
  url = "/life/"
[[menu.main]]
  name = "科研"
  weight = 30
  identifier = "科研"
  url = "/research/"
[[menu.main]]
  name = "技术"
  weight = 40
  identifier = "技术"
  url = "/tech/"

此处config中，name即要在menu中所显示的按钮的名称，weight控制各按钮的排列顺序，而注意url是以content/为base url的，/life/等皆为content中的文件夹。

在尝试之后朋友们会发现，以这种形式创建的按钮，只能指向一个文章列表。如果我们想制作一个单独的about页面来介绍自己，该如何进行呢？

答案很简单，我们只需要在content下创建一个单独的about.md文件即可。当然，我们需要加一些设置= =

1
2


menu: "main"
weight: 5

主页重定向

如果不想让用户点进主页就是一个最近文章列表，而指向一个单独的页面，该怎么办呢？

一个很自然的想法是，仿照上面About Me的写法，单独创建一个markdown文件用来控制这个页面。但很可惜，这样做并不行，并且会带来一系列的问题。

此部分可以说比较困难了，我也花了比较多的时间，后续有空再更新这篇文章。大家感兴趣的话可以在About Me页面中添加我的联系方式 0.0

五、部署

在定制自己的个人主页之后，最激动的时刻来了！我们要将个人主页进行部署，这样就可以通过互联网进行访问。此部分已有很多经验贴，下面列举一个：Hugo部署到Github

我自己撰写了一个部署脚本，希望对大家有帮助：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 添加代理
export http_proxy=http://192.168.16.5:3128
export https_proxy=http://192.168.16.5:3128

# 重新生成public文件夹
rm -rf public
git clone https://github.com/{username}/{username}.github.io.git public
hugo -D

# 上传到github
cd public
git add .
git commit -m"update"
git push origin master

HINT: 记得打开github仓库中的action选项哦~