sean523

使用Hugo + Gitee Pages 搭建个人博客

 133  1 min

hugo介绍、 Pages 介绍、

为什么选hugo 、 gitee。 以后再补充这些嘿嘿。

第一步:环境准备

  • hugo安装（这里参考hugo官网即可）

    1. 如果是直接下载relaease的话，记得下载extended版本，方便支持很多好看的主题

    2. 下载完成之后添加系统环境变量方便使用, 使用powershell验证安装是否成功。

      1585989667702

  • 注册一个gitee账户（用于进行静态页面托管）

第二步：hugo的基本使用

  1. 在本地新建一个目录作为hugo项目的根目录（本文选择D:\hugo）。

  2. 在hugo项目的根目录下，使用hugo new site myblog 新建一个博客（静态网页）项目，myblog是项目名称。

    1585990338957

  3. 进入项目目录并查看项目结构

    1585990502839

    content: 是以后写了博客所放置的位置

    themes: 是博客可以定制的主题

    config.toml: 博客的配置文件，包括使用的主题、页面的元素等

  4. 添加喜欢的主题，可以从这里选择自己喜欢的主题，我们选择一款简约的变色主题meme,找到其github项目地址：https://github.com/reuixiy/hugo-theme-meme ，下载到themes目录下。

    1. 使用git clone 下载到themes目录下并以meme为名保存(没有git的可以直接下载zip文件解压)

      1

      git clone https://github.com/reuixiy/hugo-theme-meme.git themes/meme

    2. 使用主题给定的示例config文件。

      把themes\meme\config-examples\zh-cn 目录下的下的config.toml配置文件替换掉hugo根目录下的同名配置文件。

      1585991878343

  5. 在myblog目录下使用命令hugo server启动hugo看看效果

    1585992087641

    使用浏览器打开：http://localhost:1313/ 可以看到博客主题效果，不过此时还没有文章。

    1585992013176

  6. 使用hugo new post/my-first-blog.md 写第一篇博客，指令执行完毕会在myblog项目下的content目录下生成post/my-first-blog.md的markdown格式文件，可以使用记事本打开看一下。关于markdown格式的介绍后面补充。

    1585992440510

    使用记事本打开文件如下，

    1585992719685

    在文件中添加内容：

    1585992815511

    1. 重新启动hugo server, 使用hugo server -D 可显示草稿状态文稿 ，启动之后再次打开浏览器可以看到文章已经出现了。

      1585992966805

      1585992950704

三、gitee pages 使用

​ 只在本地看自己的博客就没有意思了，我们想要把博客放到网上。但是服务器、域名都是要花钱滴，gitee/github pages就给我们提供了一个免费页面托管服务。我们把需要展示的页面上传到gitee上并启动gitee pages服务，之后就可以使用一个给定的url（类https://yinshuaiguo.gitee.io/blog/ ）来访问了。

  1. 我们注册一个gitee账号并新建一个仓库，仓库名字就叫myblog吧。

    1585993524769

    1585993871386

    1585993922153

  2. 接下来，把我们的静态网页推送到这里托管。首先使用hugo -D 生成静态网页，命令执行后会新建一个名为public的目录，并把静态网页信息放进去。

    1585994192081

  3. 我们进入public目录，使用git推送到gitee

    1
2
3
4
5
6

    cd public
git init
git remote add origin https://gitee.com/yinshuaiguo/myblog.git
git add .
git commit -m "my blog"
git push --set-upstream origin master

    git

    可以在gitee上看到我们上传的代码，接下来进行gitee pages托管。

    1585995002649

    因为我们只上传了静态资源，所以部署目录为整个目录，直接点击启动即可。

    1585995080241

    启动成功后会返回一个网站地址，现在就可以愉快的访问了。

    1585995124098

    打开url展示效果,真是尴尬。显示的完全与localhost不一样，从网上看到原因是配置文件中没有修改baseURL为我们的网址，那接下来修改一下。

    1585997055590

  4. 修改根目录下的config.toml 文件，baseURL修改为我们获取的地址，title可以改为你想要的文本，title会展示在浏览器页面标签上。

    1585997652286

  5. 修改完毕后，再次执行一整套部署操作。

    1
2
3
4
5
6
7

    //编译静态页面
hugo -D
//重新上传
cd public
git add .
git commit -m "change baseURL"
git push

    由于gitee pages 不支持自动部署，所以我们修改了博客之后，记得去更新一下。

    1585997887630

    更新完成之后，我们再次访问一下，发现OK了。以后每次更新了博客都要重复一下这一步骤。

    1585997931408

updatedupdated2020-04-042020-04-04