Welcome to Bear2's Secret Garden 💬🐻💬
Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Back to homepage
  1. Welcome to Bear2's Secret Garden 💬🐻💬
  2. /
  3. Mydocs
  4. /
  5. 搭建博客
  6. /
  7. 1.基于Hugo+Github搭建博客

1.基于Hugo+Github搭建博客

1 项目介绍

本文介绍如何使用GitHub Pages+Hugo搭建个人博客

Q1：什么是 GitHub Pages+Hugo ？

  • GitHub Pages 是一个静态站点托管服务，直接将个人、组织或项目的页面托管于 GitHub 库或仓库 (repository) 中
  • Hugo 是一个用 Go 语言编写的静态站点生成器，它针对速度、易用性和可配置性进行了优化，快速灵活

2 GitHub环境准备

在有GitHub账号的基础上，新建一个仓库，库名为${username}.github.io

GitHub
仓库名必须为${username}.github.io，唯一值

image-20220801180125885

3 安装Hugo

根据自己的操作系统，参考以下安装指南

  1. 你的Mac已安装Homebrew的情况下，在终端执行
brew install hugo
  1. 安装完成后，检查版本
hugo version
https://gohugo.io/getting-started/installing/
https://gohugo.io/getting-started/installing/

环境安装成功后，程序目录如下

 bear2  ~/git/blog  ll
total 40
drwxr-xr-x   3 bear2  staff    96B  7 28 15:14 archetypes
-rw-r--r--   1 bear2  staff   554B  7 31 15:06 config.toml
-rw-r--r--   1 bear2  staff    82B  7 28 15:15 config.toml.bak
drwxr-xr-x   9 bear2  staff   288B  8  1 17:36 content
-rwxr-xr-x@  1 bear2  staff   1.5K  8  1 17:36 create_article.sh
drwxr-xr-x   3 bear2  staff    96B  7 29 16:41 data
-rwxr-xr-x   1 bear2  staff   455B  7 28 18:28 deploy.sh
-rw-r--r--   1 bear2  staff    84B  7 29 19:43 index.md
drwxr-xr-x   2 bear2  staff    64B  7 28 15:14 layouts
drwxr-xr-x  26 bear2  staff   832B  7 31 15:08 public
drwxr-xr-x   3 bear2  staff    96B  7 28 15:16 resources
drwxr-xr-x   2 bear2  staff    64B  7 28 15:14 static
drwxr-xr-x   3 bear2  staff    96B  7 28 15:47 themes

搭建本地站点，为你的博客创建第一篇文章

hugo new ${dir}/${article}
hugo new 会在hugo安装路径下创建一篇新文章，默认会在~/content/生成，添加 ${dir}后文章会在~/content/${dir}创建，非必选项

目录结构如下

bear2  ~/git/blog/content  ll
total 0
drwxr-xr-x   4 bear2  staff   128B  8  1 18:23 bdocs
drwxr-xr-x  12 bear2  staff   384B  7 31 14:08 frontpage
drwxr-xr-x   4 bear2  staff   128B  7 31 14:16 golang
drwxr-xr-x   4 bear2  staff   128B  7 31 14:20 kubernetes
drwxr-xr-x   4 bear2  staff   128B  8  1 10:33 openvpn
drwxr-xr-x   4 bear2  staff   128B  7 31 14:18 python

启动本地站点，访问http://localhost:1313/导航到你的网站

# hugo server -D

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

Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/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

为你的博客选择合适的主题，我选择的主题是Geekdocs，界面简洁且优雅

下载最新的发布包并将其解压到主题目录~/themes

mkdir -p themes/hugo-geekdoc/
curl -L https://github.com/thegeeklab/hugo-geekdoc/releases/latest/download/hugo-geekdoc.tar.gz | tar -xz -C themes/hugo-geekdoc/ --strip-components=1

不推荐使用clone的方式，从Github克隆下的内容不是一个完整工程包，还需要单独构建其中的CSS和SVG文件，如果仍想使用该种方式，请参考以下官方文档

https://geekdocs.de/usage/getting-started/#using-the-theme

Hugo添加主题相关配置，配置文件~/config.toml，修改之前请备份它

baseURL = "https://opsbear2.github.io"
title = "Welcome to Bear2's Secret Garden 💬🐻💬"
theme = "hugo-geekdoc"

pluralizeListTitles = false

# Geekdoc required configuration
pygmentsUseClasses = true
pygmentsCodeFences = true
disablePathToLower = true

# Required if you want to render robots.txt template
enableRobotsTXT = true

# Needed for mermaid shortcodes
[markup]
  [markup.goldmark.renderer]
    # Needed for mermaid shortcode
    unsafe = true
  [markup.tableOfContents]
    startLevel = 1
    endLevel = 9

[taxonomies]
   tag = "tags"

更换自定义主题后需要重新构建静态页，启动本地环境访问站点查看效果

hugo -D  #构建静态页
hugo server -D #启动本地站点

至此，本地站点环境搭建完成，更多资料见传送门🚪

1.Hugo官方文档

2.Hugo的主题库

3.Geekdocs官方文档

4 将网站推送至Github

在构建静态页后，会在~/public目录存放网站内容，需要将这些资源推送至Github

进入~/public,初始化本地仓库

git init

添加需要上传的文件

git add .

提交文件到本地仓库

git commit -m "info"

关联远程仓库

git remote add origin [email protected]:${username}/${username}.github.io.git

提交内容

git push -u origin master

提交成功后，Github结构如下

image-20220801192004652

至此，个人博客搭建完成，你的博客地址是

https://${username}.github.io

5 添加文章

上面介绍了搭建个人博客的教程，如果想新增博客内容，参考以下内容

新增文章的流程是在~/content目录下添加内容，一般是markdown格式的文档，你可以在本地目录下手动创建目录或者文章，当然也可以使用hugo new ${dir}/${article}，新增内容后使用hugo -D 重新构建静态页，将~/public下的内容提交到Github

为了解放双手，以上流程已封装成脚本，包括创建文章和推送仓库

create_article.sh 点击Expand展开

#!/bin/sh

# 使用脚本创建新的文章

if [ $# -ne 2 ];then
        echo "\033[33mUsage: sh $0 dir article\033[0m"
        exit 1
fi

# 定义文章目录和名称
dir=$1
article=$2

if [ ! -d content/$dir ];then
    echo "\033[32mInitializing new directory and article ... \033[0m"
    # 若是新目录,需要创建目录和索引文件
    mkdir -p content/$dir && cp index.md content/$dir/_index.md    
    first=${dir:0:1}    #获取首字母
    other=${dir:1}      #获取其他字母
    first_upper=$(echo $first | tr 'a-z' 'A-Z')   #将首字符转换为大写
    title=${first_upper}${other}   #拼接首字母大写的目录名称
    /usr/local/bin/gsed -i "s/Default/$title/g" content/$dir/_index.md  #修改索引文件的title

    # 获取文章序列号
    ls -l content/$dir/*.md |grep -v 'index' >/dev/null
    if [ $? = 0 ];then
        num=$(cd content/$dir && ls -l *.md |grep -v 'index'| awk '{print $NF}'|awk -F '.' '{print $1}'| tail -1)
        num=$(($num+1))
    else  
        num=1
    fi

    # 创建文章
    hugo new $dir/${num}.${article}.md 
    # echo "hugo new $dir/${num}.${article}.md "
else
    # 获取文章序列号
    ls -l content/$dir/*.md |grep -v 'index' >/dev/null
    if [ $? = 0 ];then
        num=$(cd content/$dir && ls -l *.md |grep -v 'index'| awk '{print $NF}'|awk -F '.' '{print $1}'| tail -1)
        num=$(($num+1))
    else  
        num=1
    fi

    # 创建文章
    hugo new $dir/${num}.${article}.md 
    # echo "hugo new $dir/${num}.${article}.md "
fi

deploy.sh 点击Expand展开

#!/bin/sh

# If a command fails then the deploy stops
# set -e

# Print out commands before executing them
# set -x

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
hugo -D

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date '+%Y-%m-%d %H:%M:%S')"
if [ -n "$*" ]; then
    msg="$*"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master
create_article.sh脚本的line17index.md文件，Hugo安装完默认不创建，如果想使用脚本生成文章，需要单独生成，然后复制到博客目录下命名_index.md作为隐藏文件，该文件是博客目录的配置文件，可以在里面定义一些功能，例如自定义目录名称、窗口折叠、模块介绍等

index.md文件内容

---
title: Default	#博客目录名称
geekdocCollapseSection: true	#开启窗口折叠
---

Demo collapsible menu entries.	#模块介绍

参考示例

bear2 ~/git/blog/content/bdocs ll
total 32
-rw-r--r--@ 1 zhangyonggang  staff   9.2K  8  1 19:43 1.blogquickstart.md
-rw-r--r--@ 1 zhangyonggang  staff    89B  8  1 17:44 _index.md

 bear2 ~/git/blog/content/bdocs cat _index.md
---
title: Bdocs
geekdocCollapseSection: true
---

Sharing some Bear2's articles in here

博客展示

image-20220801194651559

6 网站加速

GitHub Pages+Hugo整体搭建流程简单，基于Go语言编写的Hugo可以快速构建前端页面资源，由于后端依托在GitHub，国内访问站点存在一定的网络延迟，为此可以配置CDN加速来提高网站的访问效率，当然你需要一个可用域名以及CloudFlare账号（用于白嫖CDN加速）

建议从海外网站购买域名，可以省去一系列备案审核的不必要麻烦，个人推荐购买域名的网站Namesilo

https://www.namesilo.com/

添加站点

完成CloudFlare账号注册后，在控制台【网站】添加你的站点，站点地址是你的域名，例如opsbear2.com

image-20220801201029616

配置解析

在【CDN】页面添加DNS解析

image-20220801201513173

A记录解析后，你的访问站点是http://opsbear2.com

CNAME解析后，你的访问站点是http://www.opsbear2.com

更多Github配置自定义域，参考官方文档 GithubDocs

加速原理

在CDN配置页面，开启代理后，访问站点会先经过CloudFlare的节点，CloudFlare将网站内容的副本存储在全球分布的数据中心的服务器上，使访问网站更快。当然这是CloudFlare提供的免费服务，生命不止，白嫖不息！

开启Https访问

添加完站点和CDN解析后，CloudFlare还会免费提供一个SSL/TLS安全证书，需要调整以下配置，你的站点将开启更安全的Https访问

image-20220801203436555

  1. 使用签名证书

image-20220801203711328

  1. 开启自动重写

image-20220801203509941

CloudFlare加速配置完成，最后在Github上添加自定义域即可

Github配置自定义域

【Settings】->【Pages】->【Custom domain】，添加你的网站域名

image-20220801204133447

到这里，你的站点凭借CloudFlare白嫖资源完成了CDN访问加速！