最简单的方法，利用 GitHub Pages 和 Hugo 搭建个人博客

最新推荐文章于 2024-05-15 10:02:12 发布

愿望是当打工人

最新推荐文章于 2024-05-15 10:02:12 发布

阅读量2.2k

点赞数

分类专栏：经验分享文章标签： github

转载注明出处。

本文链接：https://blog.csdn.net/weixin_40557160/article/details/116041939

版权

经验分享专栏收录该内容

17 篇文章 2 订阅

订阅专栏

昨天没搞成功，今天一定要成功。

写在前面：其实用Hugo和github建网站，就跟新建仓库一样。
你的github.io仓库用hugo编辑好，然后commit到github.io仓库。原理很简单。

安装Hugo

首先下载：
git clone https://github.com/gohugoio/hugo.git

然后：
cd hugo
go install --tags extended

提示没安装go语言：

Command 'go' not found, but can be installed with:

sudo snap install go         # version 1.16.3, or
sudo apt  install golang-go  # version 2:1.13~1ubuntu2
sudo apt  install gccgo-go   # version 2:1.13~1ubuntu2

See 'snap info go' for additional versions.

那就安装：

sudo pat install golang-go

下列【新】软件包将被安装：
  golang-1.13-go golang-1.13-race-detector-runtime golang-1.13-src golang-go
  golang-race-detector-runtime golang-src
升级了 0 个软件包，新安装了 6 个软件包，要卸载 0 个软件包，有 5 个软件包未被升级。
需要下载 60.9 MB 的归档。
解压缩后会消耗 324 MB 的额外空间。

这么大，那也得安：）

再次执行：
go install --tags extended
提示：

go: github.com/BurntSushi/locker@v0.0.0-20171006230638-a6e239ea1c69: Get https://proxy.golang.org/github.com/%21burnt%21sushi/locker/@v/v0.0.0-20171006230638-a6e239ea1c69.mod: dial tcp 216.58.200.49:443: i/o timeout
time out.估计是被墙的原因。

网上查了查，ubuntu可以直接安装Hugo
sudo apt install Hugo
只不过版本没有github官网新。官网几天出一个新版。。

从官网安装

截至目前官网是v0.82.1,我从用命令行下载是0.64.太老了。卸载从github下载安装：

https://github.com/gohugoio/hugo/releases

sudo dpkg -i hugo_0.82.1_Linux-64bit.deb

查看一下：

hugo version
hugo v0.82.1-60618210 linux/amd64 BuildDate=2021-04-20T11:02:50Z VendorInfo=gohugoio

创建GitHub page。

这个很简单，在GitHub创建一个名字为 你的用户名.github.io的仓库。

如果还不懂，就百度一下。

创建Hugo网站。

最好新建一个文件夹，然后运行
hugo new site xiaoPeng-blog
xiaopeng-blog是你的网站名。

成功结果：

(base) xiaopeng@xiaopeng-HP-Z800-Workstation:~/Hugo$ hugo new site xiaoPeng-blog
Congratulations! Your new Hugo site is created in /home/xiaopeng/Hugo/xiaoPeng-blog.

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.

看一下我们的文件夹。文件夹名就是你的网站名。
在这里插入图片描述
里面是这样的，是网站所有的东西。
其实这个时候就可以在本地浏览器打开查看了，你也可以用这个方法尝试看一下你的服务能否开启：
进入你刚才新建的网站文件夹：
cd 你的网站
然后：
hugo server

Start building sites … 
WARN 2021/04/23 09:29:27 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/04/23 09:29:27 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/04/23 09:29:27 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

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

Built in 38 ms
Watching for changes in /home/xiaopeng/Hugo/xiaoPeng-blog/{archetypes,content,data,layouts,static}
Watching for config changes in /home/xiaopeng/Hugo/xiaoPeng-blog/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
WARN 2021/04/23 09:29:40 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

是没问题的，警告是因为我们的网站什么内容都没有。哈哈。
然后，通常是先下个主题，好看。
去官网下载，https://gohugo.io/

找到主题的github网站。
然后Git下载。我用的是这个主题。

https://github.com/adityatelange/hugo-PaperMod

网上有的教程要新建theme文件夹，并不需要，新建网站的时候，已经自动生成了，所以我们进入这个文件夹直接下载就可以。

修改config.toml文件，使用我们的主题，去官网找到你下载的config.yml文件。记得把后缀名改为yml。不然会失败。hugo给的模板是yml的。

https://github.com/adityatelange/hugo-PaperMod/wiki/Installation

然后复制粘贴：
在这里插入图片描述然后看看效果，看看成功没有。

base) xiaopeng@xiaopeng-HP-Z800-Workstation:~/Hugo/xiaoPeng-blog$ hugo server
Error: module "PaperMod" not found; either add it as a Hugo Module or store it in "/home/xiaopeng/Hugo/xiaoPeng-blog/themes".: module does not exist

提示不存在，看了一下，是文件名不对。git下来多了一个hugo前缀。
重命名一下。与yml中一致就行。

(base) xiaopeng@xiaopeng-HP-Z800-Workstation:~/Hugo/xiaoPeng-blog$ hugo server
port 1313 already in use, attempting to use an available port
Start building sites … 

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

Built in 27 ms
Watching for changes in /home/xiaopeng/Hugo/xiaoPeng-blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/xiaopeng/Hugo/xiaoPeng-blog/config.yml
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:43237/ (bind address 127.0.0.1)
Press Ctrl+C to stop

yes！
在这里插入图片描述

新建文章

hugo new posts/hello.md
其实从这里开始，新建文章什么的，都可以使用你的编辑器了，vscode，vim等等，只要是markdown格式就可以。

在这里插入图片描述
启动服务，查看一下。

nice！

同步到github page

接下来就是发布到github了。
但是在发布之前，需要先便宜生成，因为这里用的hugo的解析工具，你得生成github page的文件。

在你的根目录下，直接

hugo -d docs

我们用这种方式将编译文件和源文件放在一个文件夹下。

然后：

git init

没有找到手动初始化仓库的方法，只能用命令行了。

这样会将这个网站和git服务连接起来。

有的说用ssh关联，搞了半天也没弄成，太麻烦了。
还有的是弄了两个仓库，设置脚本，自动更新，网上大部分都是这个。

在这里我教大家一个简单的方法。

因为上面我们已经有了github.io这个仓库，同时也是我们的网站。
那我们把编译好的文档放到这里不就好了吗。

在这里插入图片描述直接网址输入，你的用户名.github.io。

很简单。
这里需要设置一个docs路径。对应我们上面的编译路径。
hugo -d docs

在这里插入图片描述当然网上用两个仓库也有他的道理。
一个仓库放你的源文件，一个仓库放编译好的文件，即docs文件夹。两个同步就必须用脚本。把另一个仓库的修改的获取到，然后自动提交。以后有空试试。

如何新建文章及发布。

hugo new post/my-first-post.md

这里，应该是必须为md后缀，即markdown格式的语言。
注意这里新建的文件在你的网站的content文件夹下。

然后命令行

hugo -d docs

刚开始老是忘了打docs，必须生成在docs文件夹下。因为我们的github设置的解析路径为docs文件夹。

然后commit提交。我用的是vscode。直接在vscode里面提交。命令行的话：

git commit -m "Add a new post"
git push -u origin master

还是用vscode方便。因为hugo只是一个生成网站的工具。并不是编辑器。你的md文件还是需要一个编辑器。

图片需要放在static文件夹下。
对于图片的引用, 我们可以把图片直接放到static文件夹下, 比如我保存的图片路径是static/exam.png, 那么在markdown中就需要填写

[(img-F6Yfs817-1619160338709)](/example.jpg)

老是提示我外链图片。。反正格式是这个样子。留做记录。

总的流程就是：

1 安装hugo
2 下载模板
3 clone你的io库
4 把模板整个复制粘贴过去。
5 github切换docs文件夹。
6 新建你的博客。
7 直接命令行输入 hugo -d docs。
8 然后git push，也就是提交。
9 打开giuhub.io网页查看。

成功！

这样省去了新建两个仓库弄脚本的麻烦。

后记

如果我想换别的主题，
先git clone 你的io库。
然后把content文件夹保存到单独的地方。

在这里插入图片描述
参照上面的教程下载一个新模板。
复制粘贴到你的io仓库中，把以前的删掉。
然后把content复制过来即可。
hugo的模板都会有content文件夹。
然后hugo -d docs
用vscode或者git提交就好了！

Reference:
这些脚本功能我并没有实现。
https://cloud.tencent.com/developer/article/1326514
https://zhuanlan.zhihu.com/p/57361697

愿望是当打工人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
最简单的方法，利用 GitHub Pages 和 Hugo 搭建个人博客

写在前面：其实用Hugo和github建网站，就跟新建仓库一样。你的github.io仓库用hugo编辑好，然后commit到github.io仓库。原理很简单。
复制链接

扫一扫