Hugo搭建个人博客

Hugo搭建个人博客

我使用的为Windows操作系统,只演示在Windows下的安装搭建流程。

本网页即为搭建成果

1. 下载Hugo

官方中文文档

2. 下载Hugo主题

主题网站

安装前确保已经安装git并配置环境变量。下拉网页可以看到使用git安装主题的方式,例如:

image-20200625110741023

themes路径在执行上一步创建站点目录中被自动创建,如果按照官方文档进行安装,你的目录结构应该和我此时一样:

image-20200625111122850

3. 在本地启动博客

Hugo搭建个人博客_第1张图片

-t指定了安装的主题,-buildDrafts显示内容。可以看到此时的访问地址为http://localhost:1313/,在浏览器中访问(使用m10c主题)。

注意一定要在博客的根目录执行此命令。

image-20200625114025002

不同主题的使用方式可能不同,比如zzo的开启方式为:

Hugo搭建个人博客_第2张图片

需要查看下载页的文档,灵活变动。

4. 创建博客文件

hugo new /test/HelloHugo.md

使用如上命令,创建一个markdown文件,此路径被保存到博客根目录下的./content目录中。

于是就可以在markdown文件中编写博客了!

特别注意!如果在markdown文件中写了如 的HTML标记,需要在 config.toml中设置 unsave = true,否则将不允许在md文件中使用HTML语法。由于我希望使用图片的缩放功能,需要用到HTML语法,需要进行设置。 参考博客

5. 将博客部署到Github

5.1. 创建一个空仓库

image-20200625122652014

仓库名称为用户名.github.io

5.2. 在Hugo中进行部署操作

在根目录执行如下命令,将hugo部署到刚才创建的空仓库中。baseUrl为你的博客配置完成后的访问路径。

Hugo搭建个人博客_第3张图片

执行完毕后,生成了public目录:

Hugo搭建个人博客_第4张图片

5.3. 将public目录上传至github仓库中

cd public
git init
git remote add origin 仓库地址
git add .
git commit -m "first commit"
git push -u origin master

如果你是第一次使用git,还需要配置自己的用户名和邮箱:

  1. 配置用户名:git config --global user.name "your name";
  2. 配置用户邮箱:git config --global user.email "[email protected]";

通过baseUrl中填入的路径,即可访问博客。

Hugo搭建个人博客_第5张图片

5.4. 后续博客的更新

还是需要通过hugo new /test/HelloHugo.md创建博客文件,编写完成后执行hugo --theme=主题文件名(h10c) --baseUrl=博客访问网址(https://aalchemist.github.io/) --buildDrafts将静态页面更新到public目录,再将public里的文件提交到暂存区git add .,提交到版本库git commit -m "..."(https://github.com/AAlchemist/AAlchemist.github.io),push到远程仓库git push -u origin master

6. Enjoy it

搭建博客也花了不少时间,感觉进一步的配置还是巨大的坑,比如如何添加层级目录,如何添加评论系统,都需要继续学习配置,不过最主要的还是坚持写博客,在记录和总结中巩固知识。

你可能感兴趣的:(程序员,hugo)