10分钟搭建一个免费个人博客网站

您诸位好啊，我是无尘。 身为一名技术人，怎么能没有一个属于自己的博客系统呢？难道要买一台云服务器？新用户还好，优惠力度不小，赶上个购物节，小几百就能买上几年的。然而非新用户就尴尬了，续费金额属实不便宜啊。 不卖关子了，说说今天的主角 Hugo，Hugo是由Go语言实现的静态网站生成器。可以将生成的静态页面部署到github。

准备工作：

• 有github账号
• 有安装 git
• 会使用 markdown 编写文档 身为技术人，我这里默认诸位已经准备好了，废话不多少，赶紧实战：

框架搭建

1. 在 Hogo框架下载地址(https://github.com/gohugoio/hugo/releases) 下载自己合适的安装包：

我这里使用的是 windows-64，下载完成后，将安装包放到自己想安装的路径，解压即安装完成。如下图，只有简单的三个文件。

1. 查看是否安装成功 在刚才解压的文件夹里面（hugo.exe所在文件夹），以管理员身份打开 cmd 控制器，输入 hugo version，看到如下图，说明安装无误。

生成个人博客站点

1. 在 hugo.exe 所在文件夹中，管理员身份打开 cmd 控制台，输入 hugo new site myblog ，此处 "myblog" 是你自己的站点名字，可以自行定义。
2. 执行完上面命令后会在 hugo.exe 文件夹中生成 myblog 文件夹及相关文件。

主题下载

1. 这里是 Hugo主题下载地址(https://themes.gohugo.io/)，你可以自行选择喜欢的主题，我这里以 Hugo.386 为例：

1. 如果你电脑已经安装了 Git ，可以使用 git 来进行下载： 如果你还没有安装 git ，也可以直接下载安装包文件，然后在myblog\themes 中新建 hugo.386 文件夹（主题文件夹名），将安装包解压到此处即可。
   • 打开 git bash ，切换到博客根目录（myblog文件夹中）
   • 执行 git clone https://gitlab.com/maxlefou/hugo.386.git themes/hugo.386
   • 下载完成后，主题在 myblog\themes\hugo.386 目录中。
2. 一般主题都带有示例文件，例如我的这个主题：

• 我们将 exampleSite 文件夹中的文件复制到博客根目录（myblog文件夹）中，直接覆盖替换。

• 这里说明下，不同主题示例中的内容略有不同。在我们的博客站点中 myblog/content/post/xxx.md ,这里是存放你的文章的地方，我们这里把主题文章示例覆盖博客文章来预览。
• config.toml 为配置文件，后续我们可以进行站点配置（博客地址、构建配置、标题、导航栏等等）。

1. 在博客根目录（myblog），cmd 执行 hogo server --theme=hugo.386 --buildDrafts 来启动站点服务。
2. 在浏览器中打开地址 http://localhost:1313/ 查看是否启动成功 ❝--theme : 指定主题 --buildDrafts : 引入 content 中的草稿文件 ❞

完美！ ❝我的主题遇到的错误：

❞ ❝发现 content\post\rich-content.md 有问题，直接将此文件删除掉，重新构建 hugo server //这里是简写，因为配置文件里已经说明了主题使用哪个。 ❞

部署到 GitHub

1. 登录你的 GitHub 账号，创建一个仓库，注意：「创建仓库的名称必须是你github的昵称且必须小写再加上.github.io」

例如我的昵称是 wuchengshi，则输入 wuchengshi.github.io

1. cmd 切换到根目录下（myblog）, 运行 hugo --theme=hugo.386 --baseUrl="https://wuchengshi.github.io" --buildDrafts
2. 会在博客根目录 myblog 生成 public 文件夹，里面就是编译好的静态页面文件。在public目录下：
   • 运行 git bash ，执行 git init将public文件夹变成 git 本地仓库
   • 执行git add .将文件夹所以文件放入暂存区
   • 执行 git commit -m "my hugoblog" 提交暂存区到本地仓库中
   • 执行git remote add origin https://github.com/wuchengshi/wuchengshi.github.io.git 添加远程版本库
   • 执行git push -u origin master 将本地仓库代码推送到远程库
3. 最后，在浏览器中访问 https://wuchengshi.github.io/ ，即可看到自己的博客网站。

有什么问题，可以公众号内回复或加我微信交流。