Hugo + GitHub 搭建个人博客

2023-12-27 16:36:21

1. windows 64 位安装 Hugo

本文基于电脑已经安装了 Git，如何安装 Git，请自行百度哈。
到 Hugo Releases，找到 hugo_0.80.0_Windows-64bit.zip 文件进行下载，下载后进行解压，即安装完成。解压之后重命名为 hugo，完整路径是 E:\blog\hugo，注意解压后的文件夹里面有一个 exe 文件就没错了。
查看 Hugo 是否安装成功：在 E:\blog\hugo 路径下右击，选择 Git Bash Here，输入 hugo version，出现下图结果表示安装成功。

后面使用的命令全部在 Git 命令行中输入！！！

如果需要在全局使用，需要配置对应的环境变量，既然看这篇文章相信大家都会啦，也可自行百度哈，有很多教程。

在 E:\blog\hugo 路径下，输入 hugo new site myblog（myblog 是自定义的名字），此时会生成一个 myblog 文件夹（博客根目录），其中主要有：

config.toml：网站的配置文件。
content：文章存放的地方。
themes：网站主题存放的地方。
static：静态资源存放的地方，如图片，样式文件，脚本文件等。

对于文章中的图片，我是放在 CSDN 服务器中的，因为有人说 GitHub+图床有时候会不显示，缘于 GitHub 国内访问不稳定。

作为以写作为主打的博主，知道以上目录的含义, 就可以开始写作了。

后面所说的根目录就是 myblog 了。

到 Hugo主题下载中，选择一个喜欢的主题点击进入主题下载页：
- 可以选择 DOWNLOAD 下载 ZIP，然后解压到 myblog\themes 目录下。
- 或者在 git 命令行中切换到 myblog\themes 目录，主题页面下方会有相应主题的下载命令，进行 clone 下载。
下面我演示的是飞雪无情的博客主题，也是我自己使用的主题。它里面有下载安装教程和配置文档参考，比较详细。
切换到 myblog 根目录下，执行 git clone https://github.com/flysnow-org/maupassant-hugo themes/maupassant，其中 themes/maupassant 是指定 clone 到的路径，下载后的主题路径为：E:\blog\hugo\myblog\themes\maupassant 。
在maupassant 主题的 exampleSite 目录下有 config.toml 文件，把这个文件复制到 myblog 根目录下，覆盖掉根目录中的 config.toml 文件，此时 config.toml 文件中已经配置了 theme = "maupassant"，所以启动的时候可以不用规定主题了。

切换到 myblog 根目录下，输入命令 hugo new post/FirstBlog.md（FirstBlog.md 是自定义的 markdown 文件名），然后会在 E:\blog\hugo\myblog\content\post 路径下生成 FirstBlog.md 文件，然后再使用 Typora 或者其它能编写 markdown 文件的编辑器打开 FirstBlog.md 文件，写入博客文章的具体内容，注意不要修改原始的 FirstBlog.md 文件中已经有的内容！！！。
接着，切换到 myblog 根目录下，输入命令 hugo server --buildDrafts。
复制网址 http://localhost:1313/ 到浏览器中进行访问，查看站点上的内容是否已经更新，显示我们刚刚编写的博客文章。

注意：每次修改完 FirstBlog.md 文件中的内容后，http://localhost:1313/ 链接中文章内容会自动更新。

经过上面的操作，你只能在本地访问 http://localhost:1313/ 来查看你的个人博客网站，别人是看不到的，要想别人能访问你的博客网站，必须将个人博客部署到远端服务器上。
首先，你要有一个 Github 账号，然后创建一个仓库，注意：创建仓库的名必须是你 GitHub 的昵称小写再加上.github.io。例如，我的 GitHub 昵称是 endlessHair，因此创建的仓库名必须是 endlesshair.github.io。下面都基于这个仓库名示例。
*然后，切换到 myblog 根目录下，输入命令 hugo --baseUrl="https://endlessHair.github.io/" --buildDrafts，会在 myblog 根目录下生成一个 public 文件夹。
切换到 public 文件夹下，输入命令 git init，初始化仓库。
*然后输入 git add .，将所有内容添加到 git。
*接着输入 git commit -m "第一次提交"，提交到 git 本地。
再接着，输入 git remote add origin https://github.com/endlesshair/endlesshair.github.io.git。关联到远程 git，注意这里需要写你自己的 git 。
*最后，输入命令 git push -u origin master，将本地仓库代码推送到远程库。
在浏览器中输入 endlesshair.github.io，即可访问自己的博客网站，此时别人也能访问了。

修改博客后，步骤 6 中带星号的3、5、6、8按顺序来一遍！