hugo搭建个人博客,详细步骤

古城微笑少年丶 2023-02-24 11:12 155阅读 0赞

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png]

# 额,一时兴起, 搭建一个基于hugo的个人博客玩一下 #

博客地址: [https://zhang-550.github.io/][https_zhang-550.github.io]

将hugo部署到github上,供外网访问: [https://my.oschina.net/u/4284277/blog/3210343][https_my.oschina.net_u_4284277_blog_3210343]

## 1. 下载安装hugo ##

官网下载地址
    https://github.com/gohugoio/hugo/releases
    我们根据自身情况选择下载
    我是win64位的,所以就用win64进行演示了
    下面网盘中的hugo是win64的
    链接：https://pan.baidu.com/s/1LW1zEnVq0KStWNeFfUksXg 
    提取码：ttzz 
    复制这段内容后打开百度网盘手机App，操作更方便哦

![up-ec0aea52ec117b3c22b12e2a39c645a3be5.png][]

### 1.1 将安装包解压到指定目录 ###

![up-9080c515126de1a50b43bb7fdd263ffeb05.png][]

## 2. 配置环境变量 ##

*  为什么要配置环境变量呢?

因为我们把hugo.exe解压到了D:\dev\hugo下面。hugo命令只能在该目录下才能识别。
    如果我们想把博客目录建到其它目录下，就要配置环境变量。

### 2.1 步骤1：鼠标右键->属性 ###

![up-4543acda5ac44481c86a21f88d27175217e.png][]

### 2.2 步骤2：点击高级系统设置 ###

![up-ed8889519a0e9f7fcdbea59d92f2bc4a93b.png][]

### 2.3 步骤3：点击环境变量 ###

![up-ddc63407c437887b907ccea2122bda4c8bd.png][]

### 2.4 步骤4：选中path，点击编辑 ###

![up-14aef2f5d80fd3560638308d531adefb797.png][]

### 2.5 步骤5：点击新建 ###

![up-75923b65144c4cce17874c70dbc576ba641.png][]

### 2.6 步骤6：Hugo.exe目录,配置ok后点击确定，一路确定 ###

![up-913cd62d7ec1913b73a2273792746c5afe0.png][]

## 3.hugo新建博客 ##

### 3.1 打开cmd命令行 ###

*  方式一: 快捷键:win+R键 win就是你的键盘上的那个四个格格 ![up-3ab3f656f2ee9814dd09add6c7fbbb427a2.png][]
 *  方式二: 通过电脑搜索cmd ![up-3737967a7cdabe675cef7e889250aa63e35.png][]

### 3.2 输入如下命令 ###

命令: hugo new site /path/to/site
    
    比如  hugo new site E:/hugo/myBlogger
    就会在E盘的hugo文件夹下新建一个叫myBlogger的hugo站点

![up-abe17faa4cadb25309cbbe8a259254b68c9.png][]

### 3.2 hugo新建页面和文章 ###

#### 3.2.1 新建一个links页面 ####

命令: hugo new links.md

![up-7bad90662db03d1fa3741a6b2b977787086.png][]

links.md自动生成到了content.links.md, 内容如下

![up-8161b9aff24fadf3c470b97bc902538fb80.png][]

#### 3.2.2 创建第一篇文章,放到post目录, 方便以后生成聚合页面 ####

命令: hugo new post/myfirst.md

![up-3ad9f629737cedf15037cb248b2a3d80fbd.png][]

myfirst.md 自动生成到了 content/post/myfirst.md, 内容如下:

**(需要注意: 这里需要把draft删除掉或者改为false，不然正式生产的时候不会生成文章，因为draft是草稿)**

![up-7ca8d5184ef2fe74748dd939e1ab7fe5310.png][]

#### 3.2.3 hugo安装主题 ####

可以去官方主题列表themes.gohugo.io里面去挑选自己想要的主题

![up-7d5088bd5279e6efd6fd7e920d879778c5e.png][]

我们使用gethub上一个icarus主题。
    github.com/digitalcraftsman/hugo-icarus-theme
    下载完成后放到如下目录:

![up-2897a694012b7607c2a1dfbe4fff0344228.png][]

#### 3.2.4 配置主题 ####

找到刚刚下载的主题, 打开config.toml文件。
    E:\hugo\myBlogger\themes\hugo-icarus-theme-master\exampleSite\config.toml

![up-66e1e7d040ad32fb17aca3c2b77acfa9180.png][]

将内容替换到myBlogger\config.toml中
    
    baseurl需要改成你的github pages的仓库名，theme、themesDir改成主题目录名和主题路径（相对路径,绝对路径都可以,我使用的是相对路径）。
    其他配置可以参考icarus主题的文档，这里就不做介绍了。

![up-72340d4e1a2ee123681c13917d8a10dae5e.png][]

### 4. 执行如下命令 ###

hugo server

![up-26135d4cd653d60f44be53d492b8a509335.png][]

访问该路径即可看到自己的博客了: localhost:1313 如果不行,看下之前3.2.2步骤中是否删掉了draft:true

![up-3182c8ddbc7a56aa204e949686ffe9cbd03.png][]

### 有时间再更新将本地的hugo部署到github上的教程 ###

*  已更新:

将hugo部署到github上,供外网访问: [https://my.oschina.net/u/4284277/blog/3210343][https_my.oschina.net_u_4284277_blog_3210343]

[hot3.png]: /images/20230209/cc60908d5cad4c8da9f87a55f41bc945.png
[30_ _hot3.png]: https://www.oschina.net/action/visit/ad?id=1221
[https_zhang-550.github.io]: https://zhang-550.github.io/
[https_my.oschina.net_u_4284277_blog_3210343]: https://my.oschina.net/u/4284277/blog/3210343
[up-ec0aea52ec117b3c22b12e2a39c645a3be5.png]: /images/20230209/3db3b05e8af54203acd00856d2ff5a96.png
[up-9080c515126de1a50b43bb7fdd263ffeb05.png]: https://oscimg.oschina.net/oscnet/up-9080c515126de1a50b43bb7fdd263ffeb05.png
[up-4543acda5ac44481c86a21f88d27175217e.png]: https://oscimg.oschina.net/oscnet/up-4543acda5ac44481c86a21f88d27175217e.png
[up-ed8889519a0e9f7fcdbea59d92f2bc4a93b.png]: https://oscimg.oschina.net/oscnet/up-ed8889519a0e9f7fcdbea59d92f2bc4a93b.png
[up-ddc63407c437887b907ccea2122bda4c8bd.png]: https://oscimg.oschina.net/oscnet/up-ddc63407c437887b907ccea2122bda4c8bd.png
[up-14aef2f5d80fd3560638308d531adefb797.png]: https://oscimg.oschina.net/oscnet/up-14aef2f5d80fd3560638308d531adefb797.png
[up-75923b65144c4cce17874c70dbc576ba641.png]: https://oscimg.oschina.net/oscnet/up-75923b65144c4cce17874c70dbc576ba641.png
[up-913cd62d7ec1913b73a2273792746c5afe0.png]: https://oscimg.oschina.net/oscnet/up-913cd62d7ec1913b73a2273792746c5afe0.png
[up-3ab3f656f2ee9814dd09add6c7fbbb427a2.png]: https://oscimg.oschina.net/oscnet/up-3ab3f656f2ee9814dd09add6c7fbbb427a2.png
[up-3737967a7cdabe675cef7e889250aa63e35.png]: https://oscimg.oschina.net/oscnet/up-3737967a7cdabe675cef7e889250aa63e35.png
[up-abe17faa4cadb25309cbbe8a259254b68c9.png]: https://oscimg.oschina.net/oscnet/up-abe17faa4cadb25309cbbe8a259254b68c9.png
[up-7bad90662db03d1fa3741a6b2b977787086.png]: https://oscimg.oschina.net/oscnet/up-7bad90662db03d1fa3741a6b2b977787086.png
[up-8161b9aff24fadf3c470b97bc902538fb80.png]: https://oscimg.oschina.net/oscnet/up-8161b9aff24fadf3c470b97bc902538fb80.png
[up-3ad9f629737cedf15037cb248b2a3d80fbd.png]: https://oscimg.oschina.net/oscnet/up-3ad9f629737cedf15037cb248b2a3d80fbd.png
[up-7ca8d5184ef2fe74748dd939e1ab7fe5310.png]: https://oscimg.oschina.net/oscnet/up-7ca8d5184ef2fe74748dd939e1ab7fe5310.png
[up-7d5088bd5279e6efd6fd7e920d879778c5e.png]: https://oscimg.oschina.net/oscnet/up-7d5088bd5279e6efd6fd7e920d879778c5e.png
[up-2897a694012b7607c2a1dfbe4fff0344228.png]: https://oscimg.oschina.net/oscnet/up-2897a694012b7607c2a1dfbe4fff0344228.png
[up-66e1e7d040ad32fb17aca3c2b77acfa9180.png]: https://oscimg.oschina.net/oscnet/up-66e1e7d040ad32fb17aca3c2b77acfa9180.png
[up-72340d4e1a2ee123681c13917d8a10dae5e.png]: https://oscimg.oschina.net/oscnet/up-72340d4e1a2ee123681c13917d8a10dae5e.png
[up-26135d4cd653d60f44be53d492b8a509335.png]: https://oscimg.oschina.net/oscnet/up-26135d4cd653d60f44be53d492b8a509335.png
[up-3182c8ddbc7a56aa204e949686ffe9cbd03.png]: https://oscimg.oschina.net/oscnet/up-3182c8ddbc7a56aa204e949686ffe9cbd03.png