前情提要

完成前面的工作后，我们的网站是下图这样的，非常符合极简之美。不过空荡荡的网站不是我们想要的，接下来我们就开始最核心的部分：修改网站内容。

一、准备文本编辑工具

（1）下载文本编辑工具。创作当然离不开文本的编辑，那么一款高效好用的文本编辑工具就非常重要了。这里我强烈推荐一个常用的工具 Visual Studio Code，它可以多文件管理。点击 https://code.visualstudio.com/Download 可以直达官网下载。接下来的讲述会使用到 VSCode，如果你选择其他文本编辑器，也无妨，找到对应的文件修改即可。

（2）用 VSCode 打开 blog 文件夹。打开 VSCode 后，点击左上角文件菜单，然后点击打开文件夹，选择 D:/hugo/site/blog 文件夹。

（3）我们需要关注 content 文件夹、public 文件夹和 config.yaml 文件即可。content 存放网站的所有内容，我们平时写文章会在里面创建；public 存放网站的源代码，我们使用 hugo 命令时它会自动生成，我们需要将它上传到 Github ；config.yaml 是网站的配置文件，我们网站的基本信息都会在里面配置。

二、网站预览

用命令窗口进入网站 blog 根目录，执行 hugo server。打开浏览器，访问 localhost:1313。

三、创建菜单栏

可以看到我们的网站现在有五个菜单，如果你前面在网站配置把菜单改成中文的话，那么将是[主页]、[关于]、[分类]、[标签]、[订阅]。[主页]不用多说了，[分类]、[标签]、[订阅]是自动管理的，如果不需要的话可以在网站目录的 config.yaml 里删掉，[关于]现在点击的话，是访问不了的，因为我们还没有创建对应的文件夹或文件。

（1）打开 themes/hugo-ivy/exampleSite 文件夹，这是 hugo-ivy 主题作者提供的示例网站。复制其中的 content 文件夹下的所有文件和文件夹，放到我们网站根目录下的 content文件夹下面。

（2）修改 config.yaml 文件，添加文章和记录两个菜单。对应的文件夹是 post 和 note。

（3）这样，再回到浏览器上看。因为我们把示例的文章也复制过来了，所以网站已经有文章显示了。而我们添加的[文章]和[记录]文章也完成了。如果你需要添加其他菜单，可以参考现有的：在 content 文件夹下新建文件夹，然后在 config.yaml 文件中添加修改。

四、新建文章

我们可以复制 content/post 或者 content/note 下的文件，然后修改里面的标题、作者、日期、分类、标签等等，因为我们使用 hugo server 预览网站，所以可以在浏览器上 localhost:1313 实时查看修改后的效果。不过更常见的做法是通过命令的方式来创建，下面演示在[文章]菜单下创建一篇文章。

（1）同样，在重新打开一个 cmd 命令窗口，进入网站根目录（blog)。和之前的做法一样这里就不贴图片了。

(2)执行 hugo new post/2021-11-18.md 命令，post 是存放的目标文件夹，2021-11-18.md 是将要生成的文件，文件名可以随意，注意不要使用中文。

(3)在 VSCode 里面修改文件内容。

五、推送到 Github 平台

（1）在 cmd 窗口，在网站根目录（blog）下先执行 hugo 生成网站源代码到 public 目录，然后执行 cd pulic 进入 public 目录。

（2）分别执行 git add . 和 git commit -m "update" 和 git push完成上传。

六、完成

上传成功后，等一小会就可以通过 “你的 github 用户名.github.io” 域名访问你的网站啦。到这里，最基本的流程已经走完了，现在可以开始自行探索了！当然，还有很多内容会在后续补充，本系列教程仍存在不足的地方，如果你遇到问题可以联系我。祝愉快~