如何使用Hugo+Github搭建个人博客？

寻求另一半

1.使用Hugo + Github
2.解析个人域名

目前本地测试  hugo server --theme+xxx 无问题 不知道如何放到Github Pages上并长期维护呢？

wulibing

最近刚好建了一个，仅供参考
在Github使用Hugo搭建个人博客 · 浮世尘烟

zhaoqianting

还没有使用github搭建博客站点的同学，可以参考： 诸葛说投资：利用github搭建自己的免费博客站点
在使用hexo搭建完博客站点后，希望美化页面，那我们可以更换一个博客主题，以NexT主题为例说明，具体效果可以查看我的github博客站点 Richard Zhu博客。

• 下载next 主题代码到themes/目录下
  

$ cd blog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
2. 修改下博客所用的主题名称。修改blog目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，如下所示：
theme: next
3. 本地运行验证效果。 $hexo serve
4. NexT主题会定期更新，如何更新使用最新的主题？进入next目录，运行git pull更新即可。
$ cd themes/next
$ git pull


NexT主题还有很多好玩的插件，可以参考awesome-next 。
更多其他主题可以访问Themes 进行选择，使用方法和NexT是一样的。

阳光的宛琳琅

<hr>0x00 配置Hugo环境

本文记录是在macOS的环境下安装的全过程，Windows和Linux用户可以去参考官方的详细文档：https://gohugo.io/getting-started/installing/
安装Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装hugo

brew install hugo
执行版本查询命令可以看到版本证明已安装成功
➜  ~ hugo versionhugo v0.82.0+extended darwin/amd64 BuildDate=unknown
创建网站目录

可以在任意目录或者用户目录下载执行以下命令生成一个基本的hugo结构：
hugo new site blogcd blog
可以看到blog目录下的文件列表：
├── archetypes   使用Hugo New命令创建Hugo中的新文件会按照里面的模版生成│   └── default.md├── config.toml   博客的配置文件├── content     存放文章的位置├── data    ├── layouts  模版文件├── static  静态文件└── theme  主题文件
输入hugo help 我们可以看到很多命令，但是我们现在只需要用到的一小部分命令足以：
new         创建新的博客网站结构server      本地运行博客        -t, --theme strings          使用制定的主题生成public文件
到这里我们的hugo文件部署就完毕了。
0x01 安装主题

如果直接运行hugo server是没有任何内容的，需要先安装一套主题。
下载主题文件

我们可以到官方的主题库里面选一个你喜欢的风格作为自己博客的主题：https://themes.gohugo.io/
比如我们选一个 https://themes.gohugo.io/themes/hugo-theme-meme/
点击Download按钮就会跳转到GitHub项目主页，我们先进入我们的博客目录和输入以下命令：
~ $ cd blog~/blog $ git init~/blog $ git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme
配置主题

• 将 config.toml 替换为示例配置。
  

bash    ~/blog $ rm config.toml && cp themes/meme/config-examples/zh-cn/config.toml config.toml

• 新建一篇文章和一个关于页面：
  

bash    ~/blog $ hugo new "posts/hello-world.md"    ~/blog $ hugo new "about/_index.md"

• 现在：
  

bash    ~/blog $ hugo server -D
运行后打开地址：http://localhost:1313/
如果看到一个正常的网页，恭喜你已经成功配置完毕了～

0x02 部署Github Pages

这一步我也遇到了挺多的问题的，不过相对于hexo上会麻烦一点，但是hugo的编译速度是真的块。
下面的内容是copy了慕课的一篇文章，做了删减：https://m.imooc.com/wiki/github-pages
GitHub Pages 介绍

在使用之前，我们先了解一下 GitHub Pages 是什么以及我们为什么要使用它。
GitHub Pages 是什么

GitHub Pages 是 GitHub 提供给用户用来展示个人或者项目主页的静态网页系统。也就是说我们可以把项目代码写好后上传 GitHub，然后利用 GitHub Pages 为这个项目生成一个静态页面，别人通过网址可以访问我们的页面。
GitHub Pages 优点

那么使用 GitHub Pages 有哪些优点呢？我认为：

• 免费，不需要再购买云服务，就可以搭建个人网站；
  
• 简单，步骤简单，只需要按着教程一步步来，无需关注技术细节；
  
• 功能多，生态链丰富，你可以绑定自己域名，使用免费 https，还能使用现成的主题，插件等；
  
• 省心，只需要负责搭建，不需要关心如何维护之类的。
  

所以推荐大家使用一下，作为免费的服务，当然也有一些限制，在使用的时候项目和网站的大小不要超过 1 GB，每个月的带宽使用上限为 100 GB。不过一般情况下，我们也不会超过这些限制，影响不大。
GitHub Pages 使用

大致了解了 GitHub Pages 之后，现在让我带着大家来使用它。
创建仓库

创建代码仓库的步骤跟之前一样，但是要注意的是，这里起名很有讲究，格式是http://username.github.io，其中 username 是你 GitHub 的用户名，这个名字不能出错，如果出错，则需要删除仓库重新来。

自定义域名

创建完仓库后，进入设置模块：

如果你觉得默认的域名不好记忆，也可以在这里自定义成你觉得好记的域名，完成之后访问新的域名验证是否成功即可。

小结

通过本节，我们学会了如何搭建 GitHub Pages。
0x03 将Hugo部署Github Pages

GitHub推送的身份验证机制

因为在2021年8月份github不再通过验证密码方式push代码，需要使用personal access token个人访问令牌。
相关的操作可以参考此文：https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
如果上面还是看不懂，可以百度or谷歌下～
部署过程

完成上面的身份验证机制后，我们进入我们的blog目录执行以下命令，因为我上面用的主题是meme，所以-t后面跟着就是meme这个主题名称
hugo -t meme
执行完会在该目录下生成一个public目录，该目录就是要上传到GitHub上面的。
我们在进入public进行操作：
cd publicgit add .         #将public下的所以文件添加到需要上传的队列git commit -m "first commit"         #提交更改并注释，当中的first commit 可以随意更改git push -f origin master      #推送文件到GitHub上面
执行完，等几分钟后再打开http://xxx.github.io会看到部署的网站内容，完成这一步整个过程就完毕了～
Github推送脚本

在blog目录下新建脚本文件deploy.sh:
#!/bin/bash# Program:#   发布Hugo生成文件到GitHub Pages# History:# 2020.05.05 GeekWho First release.# If a command fails then the deploy stopsset -eprintf "\033[0;32mDeploying updates to GitHub...\033[0m\n"# Build the project.Hugo -t meme # 这里的meme改成你的主题名称# Go To Public foldercd public# Add changes to git.git add .# Commit changes.msg="Published on $(date +'%Y-%m-%d %H:%M:%S')"if [ -n "$*" ]; then    msg="$*"figit commit -m "$msg"git pull --rebase origin master# Push source and build repos.git push -f origin master
Github推送相关的错误

• Please make sure you have the correct access rights and the repository exists.
  

查看远程库是否存在：
git remote -v
如果没有内容执行,记得把后面的换成你的ssh地址
git remote add origin git@github.com:xxx/xxxx.github.io.git

• Untracked files
  

这个折腾了很久,提示了很多
nothing added to commit but untracked files present (use "git add" to track)Everything up-to-datefatal: 'coding' does not appear to be a git repositoryfatal: Could not read from remote repository.
尝试使用clean命令来清理都不能成功
git clean -fdxn
后来执行了以下内容解决了，在blog目录：
rm -rf publicrm -rf .githugo -t memecd publicgit initgit remote add origin git@github.com:xxxx/xxx.github.io.gitgit add .git commit -m "first commit"git push -u origin master

• error: failed to push some refs to 'github.com:xxx/xxx.github.io.git
  

这个是本地跟远程库内容版本不一致导致的
git pull --rebase origin mastergit push -u origin master

• ! [rejected]        master -> master (fetch first)
  

确保你本地的内容是要全新上传的，执行下面的命令：
rm -rf publicrm -rf .githugo -t memecd publicgit initgit remote add origin git@github.com:xxxx/xxx.github.io.gitgit add .git commit -m "first commit"git push -u origin master --force

aya7973

一、Hugo搭建博客

搭建博客的方法可见Hugo的中文文档，比较详细具体。
我简单来说下
1、 第一步安装hugo

前往网站 https://github.com/gohugoio/hugo/releases  下载对应的hugo。

接着将hugo.exe所在路径加入到环境变量Path中，如下图:

至此hugo安装完成，当然你可以打开命令行通过下面的命令检测你是否安装成功或检测安装的版本。

二、快速在本地建立博客

首先前往https://themes.gohugo.io/tags/blog/下载自己喜欢的主题。
比如我随便选了一个PaperMod，点击Download就会跳转到作者的Github页面，点击右上角的Code下载到本地，如下图：

下载完后，在D盘创建一个新文件夹，取名为blog（盘和名字都按自己的需求来就好，但下面的命令要随之改变），打开命令行，用cd D:/blog切换到新建的文件路径下，执行
hugo new site D:/blog

之后你的blog就会多出如下文件：

打开themes，将刚刚下载好的主题解压放入。

在命令行中执行
hugo new post/first.md
就会在文件夹content中创建一个post文件夹，并在文件夹中创建first.md文件。
打开first.md，在末尾写入“用于测试”，如下图：

保存退出后，在命令行中执行
hugo server --theme=hugo-PaperMod --buildDrafts
其中，server表示启动本地服务；--theme的值需要和themes文件里文件名一致，用于指明所用主题；--buildDrafts由于想显示我们的内容，包括设置了 draft 草稿状态的内容。

执行后，搜索对应网址，如上图的“http://localhost:1313/”

可见，我们写的First.md被成功显示。
二、部署到Github和Gitee

两者方式没有很大的区别，基本过程如下：
1、在Github创建一个仓库，取名为http://yourname.github.io (yourname是你github的用户名)，而Gitee的仓库名不能这么取，你可以直接取名为blog。
2、在你的blog文件夹路径下，执行
hugo --theme=你的主题名 --baseUrl='你的远端地址'
注意这里没有server，因为我们要部署到远端；theme和上面描述一致；部署到Github，baseUrl为https://yourname.github.io/，如果是Gitee填https://yourname.gitee.io/blog，其中yourname是你github或gitee的用户名，blog是你gitee创建的仓库名。
执行完后，本地的blog文件夹下会多出一个public文件夹。
cd public
打开public文件夹
git initgit remote add origin https://github.com/yourname/yourname.github.io.git 或git remote add origin https://gitee.com/yourname/yourname/blog.bit
其中https://github.com/yourname/yourname.github.io.git和https://gitee.com/yourname/yourname/blog.bit都可以在你创建仓库后看到，直接复制粘贴就可以了。
git add -Agit commit -m "first commit"git branch -M maingit push -u origin main
其中git branch -M main切换到main分支，因为有可能你的git是默认master分支的。
接着push就上传成功了。
但是你也可能出现timeout的报错，此时我的解决办法是，修改host文件，具体见：
https://www.cnblogs.com/heroljy/p/15704474.html
其中host文件位置在C:\Windows\System32\drivers\etc，修改方式是先将host文件拖拽到桌面，再修改并保存，最后拖回去。否则会告诉你没有权限修改文件。
3、push完后，打开github或gitee刚刚新创建的仓库，刷新一下，就会发现文件被上传了。

至此，github部署已经结束，可以通过访问https://yourname.github.io/进入你部署的页面。
而gitee还需要进一步部署，如下图点击服务下的Gitee Pages

第一次进入需要身份认证，要等工作人员给你认证完。之后就是选择部署的分支即main，点击更新，就结束了。
但是，这个过程中，可能会出现一个问题---你发现你本地运行页面正常显示，但是部署到github上的网页却丢失了格式，在该网页下按Fn+F12，打开浏览器控制台可以看到Failed to load resource: the server...的报错。这可能是因为你的主题用到了一些网上公共的资源，在部署的时候需要去访问这些网站（个人理解）。此时你需要将这些网站的ip也加入host，类似于push报错的处理方法。
可以参考

白涩天

以你 github 的用户名建一个仓库,创建一个名为 CNAME 的文件,里面写上你的域名,把 CNAME 跟hugo 生成的网页文件一起提交到仓库,配置好 DNS ,不出意外的话就可以看到的你的博客了..
没用过 hugo ,只用过 hexo ,不过步骤应该差不多....

aya7973

这个问题下面简直是安装手册集散地，我也来凑个热闹，目前已经实现了Hugo+Github Pages+Github Action方案，慢慢把记录总结出来。
本系列包括三部分：

• 搭建本地服务
  
• 发布到Github Pages
  
• 配置Github Action实现CI/CD
  

第一部分
Ivy：Hugo+Github Pages+Github Action博客方案之一——使用Hugo搭建个人博客
第二部分
Ivy：Hugo+Github Pages+Github Action博客方案之二——将搭建好的本地博客托管到github?
待续。

xX死丫头

文章更新见我的个人blog：


前言——为什么要写博客？通过Hugo搭建个人博客前言——为什么要写博客？

写一篇技术博客，首先面对的用户应该是未来的自己。人的记忆力有限，所以谁也不敢保证在未来还可以掌握现在的技能。但是与笔记不同，博客是要发表的，所以我们自然而然的就会想好好的记录，这有助于提升我们的记录水准。同时博客可以和同行交流，具有社交属性。

为什么搭建个人博客，而不是使用知乎、简书和博客园等平台？

• 个人博客更自由，不必担心被第三方删帖、监控
  
• 个人博客自定义性更强，样式更美观，你甚至可以自己开发一个主题
  

为什么使用 Hugo + GitHub Pages 搭建静态博客而非 Wordpress 动态博客？

• 静态博客无需服务器，费用低，不考虑域名费用的话，完全可以做到0成本
  
• 无需备案
  
• GitHub Page 的国内访问速度还不错，国外则快得多，如果采用服务器，不但费用高，且难以平衡国内外的访问速度
  
• 可以通过 markdown 语法写作，便于迁移备份，程序员的福音
  
• 可以用 Gitee 替换 GitHub
  

为什么使用 Hugo 而非 Hexo、Vuepress 等静态博客工具

• 目前Hugo的使用人数最多， GitHub 上 Hugo 的 star 数也最多，是静态博客的未来
  
• 相比 Hexo 等工具，部署和生成速度最快
  
• Hugo 支持实时预览
  
• 用近几年大火的 Go 语言开发，应该算是它的优点
  
• 写作和发布流程简单，易于掌握
  
• 拓展和主题生态强大
  
• Hugo 和 Hexo 的区别
  

博客搭建

1.安装 Hugo

对于不同的操作系统，安装过程可能会有所不同，以下给出的都是 macOS 下的安装过程。如果你使用的是 Linux 或 Windows，请自行查看 Hugo 官方文档或 Google 相关教程。此外，由于国内网络环境较差，请你务必具备魔法上网的能力
macOS：
你需要先安装 homebrew —— macOS 上的包管理器
然后在终端中输入如下命令
brew install hugo
其它操作系统的安装方法，详见官方文档
安装完成后，可以通过hugo version命令检验
hugo versionhugo v0.89.4+extended darwin/amd64 BuildDate=unknown
2.创建个人博客文件

在你的个人电脑上，选择一个合适的路径，用于存放个人网站
例如，在我的用户主目录中，使用如下命令创建个人博客
cd ～ # 进入主目录hugo new site blog # blog 可以被替换成任何你喜欢的名字
这样，在你选择的路径中会生成一个blog文件夹，里面存放着你的博客文件
文件夹内目录如下
cd blog # 进入 blog 文件夹tree # 使用 tree 工具查看文件夹结构.├── archetypes # 存放 markdown 文章的模板│   └── default.md # 这是 Hugo 默认的模板文件├── config.toml # 个人博客的配置信息├── content # 你用写的博客文章存放在这里├── data # 存放 Hugo 数据├── layouts # 存放自定义的view，可为空 ├── static # 存放图像、CNAME、css、js等资源，发布后该目录下所有资源将处于网页根目录└── themes # 存放你安装的 Hugo 主题
3.安装主题

这里我选择MemE主题，一个优雅、简约、现代，令人惊艳的主题
主题文档见此处

为了便于维护，你需要先安装 git

在终端中输入
cd blog # 进入blog文件夹git init # git初始化git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme # 该命令在 themes 文件夹中安装主题
用 Git 的这种方式安装 MemE，有利于主题的更新，以及持续集成部署。
更新提示

如何将 MemE 更新到最新版本？
git submodule update --rebase --remote
请在 GitHub 上关注（Watch）Hugo 和 MemE，如此你就能通过邮件及时获取到最新版本的通知。当然，你也可以通过查看 Releases 页面以获取相关的更新说明。此外，如果有任何问题，可以前往 Issues 页面提问
替换 conifg.toml

可以将 blog 文件夹中的 conifg.toml 文件删除，然后把 themes/meme/config-examples/zh-cn/目录下的conifg.toml 文件复制到 blog 文件夹中
或者通过终端命令
rm config.toml && cp themes/meme/config-examples/zh-cn/config.toml config.toml
配置 conifg.toml 文件

将 baseURL 换成 https://<你的GitHub用户名>.github.io
在文件中增加 publishDir = "docs" 配置项
4.新建一篇文章

由于 Hugo 并不会提供默认的示例文章，所以如果你想在安装和配置完后立即体验 MemE 的话，还需新建一篇文章和一个关于页面
hugo new posts/hello-world.mdhugo new about/_index.md
这里面值得注意的是，通过上述命令行创建的文章中，会自动生成一部分文本如下
---title: "hello-world"date: 2019-03-26T08:47:11+01:00draft: true---
我们需要把 draft : true 修改成 draft : false 才可以上传这篇文章(或者直接删除这一行)
如果你希望删除某篇文章，将对应的 markdown 文件在 contents/posts 目录删除即可
现在开始预览：
hugo server -D # 本地预览命令，-D参数是为了让草稿加入预览
在浏览器中打开 http://localhost:1313/，你已经成功在本地搭建好博客了   
hugo # 通过 `hugo` 命令生成静态文件git add . git commit -m "init"
此后，如果你生成一篇文章，并完成写作后，直接遵循以下步骤即可完成发布
hugo # 生成静态文件git add .git commit -m "xxx" # xxx 由你自定义git push -u origin main # 现在你还没有关联GitHub pages 远程仓库，这条命令还无法使用！
或者组合成一条命令 hugo && git add . && git commit -m '发布新文章' && git push -u origin main
写作期间可以通过 hugo server -D 命令在浏览器中实时预览
5.部署到 GitHub Pages

创建 GitHub 的ssh密钥（已创建的可以忽略）

设置 GitHub 的user name和email
git config --global user.name "your_name" git config --global user.email "your_email@example.com" # 你的 GitHub 邮箱ssh-keygen -t rsa -C "your_email@example.com"
在系统当前用户文件夹下生成了私钥 id_rsa 和公钥 id_rsa.pub
然后将打开公钥文件，将其中的内容复制到 GitHub 上，具体内容Google即可
部署

这部分需要使用到一个叫做github page的东西，Github Pages 本质上是一个静态网站托管系统，你可以使用它为你的每一个仓库制作一个静态网页入口。
首先在 Github 上创建一个 Repository ，仓库命称为 你的Github用户名.github.io，譬如我的博客仓库是darkestsirius.github.io，这样你就可以生成一个用户页面
创建成功后，根据 GitHub 给出的提示，在本地终端中输入
git remote add origin git@github.com:darkestsirius/darkestsirius.github.io.git # 这里应该是你的 GitHub 仓库的 ssh 地址git branch -M main # 替换成 main 分支git push -u origin main # 把本地博客推送到 GitHub 远程仓库
在 GitHub 仓库界面，选择 settings -> pages,修改 source 选项的值，其中的 branch 由 master 替换成 main,把 /(root) 换成 /docs
在浏览器中输入 https://darkestsirius.github.io，即可查看你的个人博客
如果你的博客无法显示css和html样式，那么在 GitHub 仓库界面的 settings -> pages 页面点击 Choose a theme，选择随意一个主题即可
6.为你的博客网站配置域名

建议在 namesilo 购买域名，完成后在 namesilo 官网进行域名解析

• 如果没有 .com .org等域名后缀，可以选择 .pro .io .me
  

域名解析

添加4个A类型和一个CNAME类型
hosttypeaddressTTLA185.199.108.1533600A185.199.109.1533600A185.199.110.1533600A185.199.111.1533600wwwCNAME<你的GitHub用户名>.github.io3600然后在本地 blog 文件夹的 /static 目录中创建一个名为 CNAME 的文本文件（无后缀名），其内容为你的域名（注意不包含 https://www. 的内容）
然后按照之前的教程生成、部署你的博客，你就可以在浏览器通过购买的域名访问它了（域名解析需要一定的时间）

本文使用 WPL/s 发布 @GitHub