Hugo+Github Pages搭建

在跟随网上的教程搭建中，我发现了许多的问题，所以决定自己写一篇搭建教程

我会把自己遇到的问题详细的列出来，并给予解决方案

第一步，安装Hugo

1.浏览官方的使用指南

本次部署使用的是Windows系统

如果你对操作有些困惑，这份指南有对其他系统如何安装Hugo的详细说明

在这里我选择了使用对新手比较友好的方式，从GitHub主页下载zip包下载后添加到环境变量

找到并点击Releases选择适合自己的安装包

Windows系统选择带有Windows字样的安装包带有Windows字样

下载后解压到适合的文件夹,找到bin文件，复制路径到环境变量中

至此，Hugo就安装完毕了！

第二步，新建一个Hugo网站

1.进入你想存放Hugo网站文件的文件夹，在文件夹下使用终端(cmd)执行以下命令新建一个Hugo网站

1
hugo new site myblog  # "myblog" 是我的网站文件夹名

2.选择Hugo主题并克隆至本地目录

打开 Hugo Themes 页面，选择一个你喜欢的主题

我选择的是PaperModX主题

进入themes文件夹

将所选主题克隆到本地(themes文件夹下)

点击复制按钮，执行

1
git clone 复制得到的链接

clone成功后，还需要修改文件夹名为你的主题名才可正常运转，在这里我修改文件名为PaperModX

3.编辑配置文件

编辑文件是Hugo自定义的灵魂所在，值得各位研究,官方提供了英文文档,更有第三方的中文文档,也可以仿照他人的范例进行修改，

4.新建一篇文章

进入网站文件夹的根目录

使用以下命令新建一篇文章

1
hugo new post/my-first-post.md # "my-first-post.md"是新建文章的文件名

这里我采用另一种方法，来自这位大佬的博客
思路是每一篇文章都创建一个新的文件夹，将所需要的图片放在文件夹下
而不用使用Hugo传统的把图片放在其他文件夹，方便了引用
注意：文件夹下的文章需命名为index.md，否则无法识别

5.编辑新建的文章，添加内容并保存

6.本地预览网页效果

启动Hugo server

1
hugo server -D

使用浏览器打开 http://localhost:1313 预览

如果你对预览效果满意，进入下一步。
如果不满意，编辑 config.toml 配置文件，再次预览。

在对你的网站满意后，可以进行上传到Github Pages了

第三步，上传到Github Pasges

1.新建一个Github库

打开 GitHub Pages 官网，浏览并了解 User or organization site 部分对应的操作步骤。

GitHub Pages: https://pages.github.com

新建一个 GitHub repository，库名为 username.http://github.io，

username 即你的 GitHub 账号 username。新建 repository：https://github.com/new

例如，在我的Repository name处就填入LOTUSSSB.github.io

注意：创建后需要更改Branch的路径，否则可能无法上传！

在仓库的设置中找到Branches一栏，并改Defaul branch为master

2.在Hugo的网站根目录下，执行hugo命令来构建上传到GitHub的静态页面

1
hugo  # 构建你的 Hugo 网站，默认将静态站点保存到 "public" 目录。

3.进入public文件夹，初始化git库

1
git init  # 初始化 Git 库

4.将 Git 本地库关联至远程库

在public目录下，为Git 本地库添加远程库

1
git remote add origin [email protected]:LOTUSSSB/LOTUSSSB.github.io.git  # "LOTUSSSB/LOTUSSSB.github.io.git" 代表 "your-github-id/your-github-id.github.io.git"。

查看 config 文件

1
cat .git/config  # 显示 config 信息。

上述命令结果返回如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true
[remote "origin"]
    url = [email protected]:LOTUSSSB/LOTUSSSB.github.io.git
    fetch = +refs/heads/*:refs/remotes/origin/*

如果 [remote “origin”] 信息正常显示，说明你的 Git 本地库已成功关联至远程库

5.提交你的修改至本地库

在public文件下，通过commit提交修改,并写一个 commit message 来简洁描述你的修改

1
2
3
git status  # 查看当前修改状态。
git add .  # 添加所有修改过的文件。你也可以只添加某个文件。
git commit -m "Add a new post"  # "Add a new post" 是 commit message.

6.将你的修改推至远程库在public文件下，将修改推至远程库

1
git push -u origin master

查看你的Github仓库是否已经上传成功，若成功

恭喜！现在你已经走完了全程，拥有了一个自己构建的博客网站!

访问 https://你的用户名.github.io 来访问吧！

后续文章更新

Hugo更新文章的方法比较麻烦，需要重新在网站根目录执行

1
hugo new post/你想要的文章名字.md

如果你采用的是上面建议的文章和图片放一起的方式，则需要执行

1
hugo new post/index.md

并且重新手动创建一个文件夹来存放新的文章

添加文章完成后，需要重新构建站点，在网站根目录下执行

1
hugo -D

这样就能重新构建新的文件到public文件了

完成后执行

1
2
3
git status  # 查看当前修改状态。
git add .  # 添加所有修改过的文件。你也可以只添加某个文件。
git commit -m "Add a new  new post"  # "Add a new new post" 

提交到本地

再通过push上传即可

1
git push -u origin master

第一步，安装Hugo#

第二步，新建一个Hugo网站#

第三步，上传到Github Pasges#

后续文章更新#

第一步，安装Hugo

第二步，新建一个Hugo网站

第三步，上传到Github Pasges

后续文章更新