博客主题及其选取原因

框架：Hugo框架

使用主题：Hugo主题 Gokarna

主题选取原因：

1. 因为是个人博客设计，首先希望在Home页面能够展示头像、基本信息、进行简要的自我介绍，给人留下好的第一印象；

2. 个人博客的界面、排版也不需要过于花哨，做到简洁明了就好，在此基础上再丰富功能和美观。

   在浏览了课程给出的主题网站后，选择了比较适合的主题。

博客页面布局及其设计思路

博客分为Home、Posts、Tags、Plans、About五个主要界面，分表表示主页、博客、分类、计划和关于我，并且为博客内容设置了文章详情界面。

Home

在Home界面，上方是导航栏，中间是头像和基本的自我介绍、并包含个人的github和stackoverflow链接，下方是已经发布的热门博客。

Posts

在Posts界面，会显示已经发布的博客列表，并且按照年份和时间进行显示。点击博客可以进入文章详情页。

文章详情界面

在文章详情界面，实现了右侧目录预览，并且提供返回顶部的按钮，方便阅读。

Tags

对已经发布的文章进行标签管理，点击标签能够列表显示属于该tag的博客列表，点击博客可以进入文章详情页。

Plans

在Plans界面，主要介绍了个人对学习生活和工作上的一些规划。点击对应标题可以显示详细内容。

About

About界面是关于个人的介绍，表明博客的主题。

其他功能

light、dark主题切换。点击右上角的“太阳”图标，可以切换到dark模式，再次点击可切换回light模式。

博客技术选择与搭建过程

一、准备阶段

1. 安装Hugo
2. 安装git

网络上已经有很多文章对Hugo和git的安装进行了介绍，这里不再进行赘述。通过hugo version命令和git version命令可以显示是否安装成功。

二、本地调试

1. 创建博客目录

   hugo new site MyBlog
   

2. 下载主题到themes目录下

   git clone https://github.com/526avijitgupta/gokarna.git
   

3. 修改配置文档 按照该主题的Github Repository中的说明修改配置文档。

4. 为各个界面添加内容 在对应目录下添加相应markdown文档。

三、上传至github

1. 创建以username.github.io命名的Github Repository
2. 切换到博客的public目录下，依次执行已下命令

    git init 
    git add .
    git remote add origin git@github.com:taketaketakeru/taketaketakeru.github.io.git
    git commit -m "first-commit"
    git push -u origin master
   

   等待，上传成功，进入taketaketakaru.github.io即可正常显示。

博客制作过程中遇到的问题及其解决方法

问题1 在博客的themes文件夹下修改了配置文件，但主题更改不成功

解决办法： 发现应该修改博客根目录下的配置文件而不是themes文件夹下的配置文件，即在hugo.toml中添加theme = “{自己的主题名称}”，即theme = “gokarna”

问题2 本地测试效果与上传github后样式不一致，部分功能无法实现（缺少light、dark转换的图标）

解决办法： 在搜索引擎中查找原因后， https://www.jianshu.com/p/60df9a7adc60 发现该文章中提及到了“在 Windows 下用 Hugo，LF will be replaced by CRLF，换行符会被回车+换行取代。”而在本地编译过程的过程中，确实也出现了该提示，猜测可能是该原因。因此换到Ubuntu下重新进行开发，解决了该问题。

问题3 上传github之后，点击导航栏中的Tags等，发现会跳转到本地的http://localhost:1313/tags/

解决办法：查找public下文件的html代码，发现跳转地址为http://username.github.io/localhost:1313/tags/，非常奇怪，而本地正常跳转，猜测是编译命令出错。使用hugo server命令会导致本地编译，直接使用hugo命令进行编译就能够按照配置文件中的baseURL进行正常的跳转。