【个人博客网站】如何使用hugo搭建个人博客网站

如何使用hugo创建个人博客网站

一、为什么要创建属于自己博客网站

个人记忆力又不咋地，平时很容易把重要或者重复的知识忘记，所以抽空研究了博客网站的搭建，方便查找知识点，但我没学JS，深入学又耗费时间，如果你也有和我的一些情况，想自己创建一个网站“玩玩”，那么请看下去，希望自己的一些经历能对想短期内创建静态网站、且没学过网站设计的朋友有所帮助。

二、选择静态网站布局工具以及远程仓库

1、工具的选择

在这里我就只推荐hugo，因为本人用的就是hugo，其他的并不是很了解（如果你有更好的方法还请通过留言告诉我，谢谢！），首先确定自己要装在哪个系统上，比如装在Windows、Linux或者Mac（苹果系统），这里我使用Window系统。
Windows系统。我建议使用choco工具在终端上安装，如果电脑没安装choco工具，还请自行安装。
Linux系统。首先确定自己的Linux的发行版本，举个例子，像红帽公司的或ContentOS的，这两个发行版本使用的工具可能就不一样，像ContentOS使用的是工具Yum工具安装。
Mac系统。使用brew工具进行安装。

安装choco工具我这里就不介绍了，在csdn上就有很多教程。

Window下使用命令安装hugo，如下：

	choco install hugo

下载好后使用如下命令检查是否安装成功。

    hugo verser

显示如下说明安装成功：

2、远程仓库的选择

因为要把网站的相关信息放到网上，所以我们需要一个远程的仓库来装这些数据，无疑[github是比较好的选择](^1.github打不开，请在微软应用商店下载watt toolkit加速器)，当然Gitee、gitLab这些应该也可以（本人没有过）。

首先你需要去注册一个github账号，并掌握在线创建、删除、导入和下载仓库，以及文件的上传、删除修改等操作，这些其实并不是很难，刚开始需要你花一点时间。

当我们hugo下载好和仓库创建等操作都学会后，我们就可以开始操作了。

三、仓库创建与静态网站布局

仓库创建最好是和自己github的账户名字一样，且都是小写，然后后面跟着
.github.io,例如：

---

wang32.github.io

这是比较稳妥的做法，如果你不想这么做还请自己花时间去琢磨别的方法。接着我么创建一个空项目，其他的操作都暂时不需要哦!

下一步是静态网站的部署，首先你需要下载一个hugo的主题（下载），也就是用别人的网页主题作为自己网站的基础，这样我们即使没学过JS也可以创建自己的网站。

创建一个目录，比如myblog，接着用code打开这个目录，在code编译器中打开终端窗口监视器，在里面输入命令

   hugo new site

这个时候myblog目录下会生成一些目录，主要关注theme目录，它用来放主题，把下载好的hugo主题放在该目录下，在使用如下命令：

    hugo --theme=<主题名字>  --baseURL="<你github仓库的路径>" --buildDrafts

举个例子：

   hugo --theme=m10c  --baseURL="https://wung32.github.io/" --buildDrafts

上面m10c是主题的名字，也就是你下载的hugo主题名字，而https://wung32.github.io/是github仓库路径。

在这你需要注意：如果不是Windows系统这的baseURL可能写为baseUrl,要确定这件事就去看hugo.tolm文件（有的主题写为config.tolm）。

在hugo.tolm里面的第一二行就会提到baseURL。注意这里的要去主题目录里找。而不是在你创建的目录myblog下找。

运行上面的代码没问题的话，hugo会在你创建的myblog目录下产生一个public的目录，里面装的就是你的静态网页信息。

接着使用git命令把这个文件推送到远程的仓库，一般的步骤如下：

    git init #初始化：本地建库（即文件夹）
    git add  #添加到仓库：代码文件放入本地库，
    git commit -m “注释内容” #提交时要给注释
    git remote add origin https://github.com/xu-xiaoya/Elegent.git #远程仓库关联

    git push (-u) origin master #本地仓库的代码推送到远程仓库Github上

如果报错：

---

error: RPC failed; HTTP 504 curl 18 HTTP/2 stream 7 was reset
send-pack: unexpected disconnect while reading sideband packet
fatal: the remote end hung up unexpectedly
Everything up-to-date

那么加一句：

    git config --global http.postBuffer 524288000

接着继续推送就是了。

然后去自己的仓库，点击设置，找到Page选项，有个Custom domain，在那里写上你的网站名称。

当然也可能遇到其他的错，这时候结合ai与CSDN找找答案吧！

四、买一个域名

我在没买之前网页一直加载不出来，自己也不知道为什么（如果你知道不用买域名也可以实现网站部署还请告诉我，谢谢啦！）。所以我自己是买了一个六块钱的域名的，试用期一年；

当你买一个域名后要记得去解析域名，然后把解析的域名写到上面说的Custom domain那个地方，比如你解析得到的域名是：myblog.wang32.com,那么你就写这个上去。

如果不知道怎么买。怎么解析，那么——是的，一样上网查一下。

五、网站的优化

这个我不建议你一个人慢慢磨，慢慢的去网上找方法，其实，制作主题的作者已经把方法写在他的主题里了，记得先看README.md，所以你老老实实的跟着作者的文档走就是了，实在有些地方不懂的在查一查看。

补充

1、为什么我插入的图片无法显示？

图片的显示：首先要看你的主题是基于什么语言写的，比如我的是markdown,对于这个语言只需要使用：

    ![nihao](../../../public/webfonts/fa-brands-400.svg)

上面的这个方法就可以让图片显示，但实际上不一定可以，因为hugo有个目录创建规则——Page Bundles(链接)，如果不按照这个规则创建，那么你使用别人的主题，插入图片时可能无法显示。

光是上面这点我就搞了一个星期，所以还是希望你好好看一下Page Bundles文档。

写在最后

这次写得比较仓促，很多地方没有讲清楚，我这里主要还是提供一个思路，希望对你有帮助，感谢看到这里！