🌞

利用Hugo构建个人网站-6:个性化&总结

1. 个性化&总结

现在,你已经有了属于自己的独特网站,并掌握了更新博文的能力,这个网站已经有了你的个人色彩,但,怎能止步于此呢?

1.1 自定义congif.toml

你可以通过修改我们根目录中的"config.toml"文件的其他字段,来完成进一步的定制。这些字段包括:网站的语言、作者信息、你的社交链接、菜单栏、网站字体样式,这将是一段非常个人化但又新奇的体验。

但首先,由于我们在forestry中的更改已经同步给GitHub,但我们本地的文件还没有同步,所以在一切开始前,我们需要先通过简单的git语言,使得我们的本地文件与GitHub同步。

1
2
3
4
e: //进入E盘
cd hugo //进入E盘下的Hugo文件夹
cd byteli-local //进入网站本地的根目录——"E:\Hugo\byteli-local"
git pull //拉取GitHub的更新内容,更新我们的本地文件

在你同步完成后,可以根据自己的偏好,更改网站的配置文件,每个主题作者的设置都所有差别,你需要阅读config.toml中的注释,通常而言,你总是可以更改自己网站的名称、菜单栏名称、作者名称、网站icon、联系信息等内容。

1修改config.png

在你设置完成后,参考我们3.1向Github同步网站的内容,再次将这部分更新推给GitHub。

1
2
3
// 此时位于博客根目录下——"E:\Hugo\byteli-local"
hugo server // 应用修改后的config.toml配置文件
hugo // 更新我们在"public"文件夹下的网页文件

然后向GitHub推送这次同步:

1
2
3
git add . // 添加所有更新
git commit -m "update config" // 填写更新说明
git push origin master // 推送给GitHub,因为GitHub已经记住了我们的仓库地址,所以不需再填写地址信息。

待同步完成后,刷新下我们的主页就可以看到更新后的。

1.2 自定义css

对于其他一些主题,作者会在"config.toml"文件中,给用户说明可以放置自定义css文件的地方,为用户的高度个人化定制提供了很大的方便。需要指出的是,并不是所有主题都会开放这样的方式,我们需要阅读主题作者的配置文件以了解这部分内容。

Hermit主题为例,我们根据作者的引导,在"网站根目录/static/css"下建立一个css文件,之后就可以通过这个css文件,重新定义网站样式。

2自定义css.png

当然,你修改之后,还是需要GitHub的仓库推送这次更新:

1
2
3
git add . 
git commit -m "uodate config" 
git push origin master 

值得庆祝的是,当你完成了网站的自定义后,你将是你很长一段时间内最后一次使用git语句了。当你需要发布文章时,只需要在forestry中编辑并保存,forestry会帮你完成剩下的工作。

2. 总结

以上就是我对自己最近接触和使用Hugo网站框架进行建站的记录 ,核心是还是利用Hugo网站框架,聚合其他的第三方平台的支撑资源,打造个人个博客网站。

接下来,我觉得还可以继续探索以下的内容:

  1. 通用的网站自定义的方法;
  2. 开放评论功能;
  3. 网站性能优化:图片加载策略、国内访问速度优化;
  4. 创建新样式的页面:比如类似pin的瀑布流以展示图片页;
  5. 网站访客统计&分析;
  6. SEO优化;

不过,鉴于此时个人博客的核心功能——发布文章已经完成,最重要的还是多输出、多创造。

updatedupdated2020-05-162020-05-16
加载评论