Please enable Javascript to view the contents

Hugo搭建个人博客教程

 ·  ☕ 4 分钟  ·  ✍️ Calvin Haynes · 👀... 阅读

前言

经过种种尝试,还是决定选择了 Hugo 作为了搭建个人博客的框架,Hugo 是目前可以搭建个人博客的框架中部署最快的,而且坑也相对很少,不过还是有的,近几天折腾了不少东西,也终于算是初步搭建完了 Hugo+Zoo 主题的个人博客

在本文中我会讲解部署的详细过程,也会科普一些部署中的原理,毕竟我也刚刚接触,所以有些说的不对的地方也希望评论区的大佬来勘误,谢谢啦。

如果遇到部署问题,欢迎在评论区打出你的问题,我和知乎这个优秀社区的所有人都有可能回答你的疑问哦,本文如果对你有帮助的话,还希望多多点赞收藏转发,谢谢啦。

1 - 使用 Hugo 创建静态网站实战

1、安装 Hugo

博主用的是 Windows 系统,所以安装过程中我会基于 Windows 进行讲解,有关其他操作系统的安装方法可以参考官方的文档

Windows 下的 Hugo 安装我推荐使用 chocolatey 包管理器进行安装,接触过 Linux 的朋友们都知道,Linux 的各种包管理器,利用命令行就可以实现包的更新,删除等操作,Windows 下也有类似的包管理器就是 chocolatey 了。

安装过程详解

  • 安装 chocolatey 包管理器:在官网点击 Install Now 即可下载

  • 命令行中敲入choco --version,如果显示版本号证明你的 chocolatey 已经安装完毕,如果有误请检查环境变量

  • 命令行中安装 hugo:

    1
    
    choco install hugo -confirm
    

    安装 hugo-extended(扩展版本):

    1
    
    choco install hugo-extended -confirm
    
  • 检查 hugo 是否安装成功:命令行中敲入hugo version

2、初步建站实战(利用 GithubPages 进行部署)

  • 在 Github 中建立一个仓库,仓库名为用户名.github.io

image

  • 将仓库 clone 到本地一个你想存放网站文件的文件夹
1
git clone <YOUR-REPOSITORY_URL>
  • 创建网站:在存放你博客的根目录 <YOUR-REPOSITORY_URL> 中敲入以下命令
1
2
//注意site后面是一个点,不能忽略啊,.代表当前目录
hugo new site .
  • 添加主题(以我博客的主题 Zzo 为例子):
1
2
git init
git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
  • 把 themes/zzo 下的 exampleSite 文件夹的内容复制到你博客的根目录
  • 在博客根目录中敲命令:(启动 hugo 服务器)
1
hugo server
  • 点击这里查看测试(主题和示例网站中的 markdown 博客都正确显示了)

3、GithubPages 服务 + 云托管

1 - 配置 GithubPages 服务进行个人博客的部署,使得所有人都可以访问你的博客站
  • 在 config.toml 文件中设置 baseURL 为 Github Pages 服务的域名(用户名.github.io)
1
2
3
4
5
#config/config.toml

baseURL = "https://blog.calvinhaynes.top/" #未设置阿里云托管之前应该是 "https://用户名.github.io"
title = "Calvin Haynes's Blog"
theme = "zzo"
  • 将更改过后的 github 仓库文件夹(就是你的博客根目录)推送到远端
  • 在 Github 上设置 GithubPages 服务的一些参数

image

(Ps:有关 Custom domain 在以下的云托管中进行解释)

2 - 云托管(阿里云)

​ 博主买了阿里云的学生机,一个 1 核 2GB 内存的轻量应用服务器,所以将博客站云托管在这个服务器上,以下就是基于阿里云的教程,其他服务器也都差不太多,可以自行 google,有关阿里云服务器购买和初步配置自行到官网查看文档吧。

  • 拥有一个阿里云服务器还不够,你需要购买注册一个你自己的专属域名。
  • 拥有自己的专属域名之后,进入域名解析的工作台,就可以看见你的域名了

image

  • 解析设置:(点击修改后各种参数的设置都有相关说明,其他问题也都可以在阿里云官网找到文档解释)

image

image

  • 服务器绑定域名:

image

image

  • 解析设置完后在你的博客根目录中的 static (静态文件存放的地方)中创建一个 CNMAE 文件(注意没有任何后缀)

image

  • CNAME 文件中写入你设置的域名,我的就是 blog.calvinhaynes.top ,写完记得更新 github 库(CNAME 文件就是给你这个 Github 库绑定域名用的,CNAME 的全名就是 Canonical Name,意思是别名)

  • 最后更改 Github pages 配置中的 Custom domain 为你设置的新域名就好咯

image

  • 现在就可以输入你设置的域名进行访问咯,阿里云服务器在中国,所以访问速度快的一批!!!(别忘了 config.toml 文件的 baseURL 参数设置)

2 - 主题参数设置和个性化

​ 这部分主要是看主题作者写的详细文档进行自己的设计,在 Hugo 官网中找到的比较热门的主题的 Github 库中都有相关的文档,建议小伙伴们自行查看学习,每个主题都有不同之处,我使用的是 Zzo 主题,它的官方文档在这里

​ 我的 Github 仓库在这里,欢迎 fork 和查看配置文件

3 - 资源整理(一些有用的文档)

Zzo 主题官方文档

阿里云云解析 DNS 文档

hugo 文章的 front matter

结语

这是一篇利用 hugo 框架搭建个人静态博客的基础教程,关于 hugo 的进阶使用建议大家查看官方文档,当然如果关于我的博客站利用 hugo 实现了一些有趣的操作我也会写相关的文章,欢迎大家再来阅读。


感谢您看到最后,如果本文对您有所帮助的话,还希望给我一个一键三连(狗头保命),如果对于我和我的文章感兴趣的话,欢迎点一个关注,您会收到我回答和文章的更新通知,也欢迎加入我建立的技术交流群 QQ:725133797 讨论交流。

最后附上我的个人博客站:https://blog.calvinhaynes.top/,欢迎访问和交流

-------他日江湖相逢 再当杯酒言欢-------

Calvin Haynes
作者: Calvin Haynes ❉
Life is a journey, not a destination.


目录