项目一_使用hugo和even构建作业博客

在gitee上的地址：
https://zhoujw_18.gitee.io/post/%E9%A1%B9%E7%9B%AE%E4%B8%80_%E4%BD%BF%E7%94%A8hugo%E5%92%8Ceven%E6%9E%84%E5%BB%BA%E4%BD%9C%E4%B8%9A%E5%8D%9A%E5%AE%A2/

安装hugo

下载安装hugo安装包

访问hugo下载地址下载安装包

解压到地址：

D:\hugo

配置环境变量

进入环境变量配置面板：

将hugo.exe的地址加入环境变量中：

检查hugo是否配置成功：

hugo version

本地生成博客网站：

构建网站

创建一个本地文件夹，我创建的地址在 D:\zhoujw_18;进入文件夹执行创建网站命令：

hugo new site ./

在当前文件夹生成了网站的文件目录结构：

结构的详细解释

config.toml

站点全局的参数配置文件

content

存放网页内容的目录，即我们编写的markdown文件都存放在此目录，此目录是Hugo的默认源目录，在E:/website/second-blog下执行命令 hugo new post/hugo_introduce.md之后， 则会在content目录下生成子目录post，post中有一个hugo_introduce.md文件。

static

存放静态文件，比如css、js、img等文件目录，Hugo在渲染时，会直接将static目录下的文件直接复制到public目录下，不会做任何渲染。

data

data目录用来存放数据文件，一般是json文件，Hugo提供了相关命令可以从data目录下读取相关的文件数据，然后渲染到HTML页面中，将业务数据与模板分离。

themes

存放网站主题，可以下载多个主题，themes目录下的每个子目录代表了一个主题，可以通过在config.toml中通过参数theme指定主题，即theme目录下的子目录名字， 也可以在执行hugo命令渲染时通过增加flag参数–theme=xx指定。

archetypes

Hugo的markdown文件中前置数据Front Matter定义的结构，默认使用的是default.md文件，可以自定义，然后在config.toml中指定自定义的结构文件，打开default.md文件。

配置主题

可以访问主题官网选择自己喜欢的主题下载;
我选择的是hugo-theme-even;

下载主题，下载的主题储存在theme 文件夹下：

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

本地启动网站：

输入命令：

hugo server -t even --buildDrafts

发生了报错，根据错误提示信息，查看了readme-zh文件：

将主题中提供的config.toml文件替换全局的config.toml文件：

继续运行上述命令：

在本地浏览器访问：http://localhost:1313/;可以看到已经生成了相应的网页

书写第一篇博客：

博客生成

我们需要在post文件夹下创建我们的markdown文件：

hugo new post/项目一_使用hugo和even构建作业博客.md

将网站发布到远端服务器

在gitee上构建仓库

仓库名为你的用户名，例如我的用户名为zhoujw_18,则仓库名为zhoujw_18,选择仓库语言为 HTML/CSS,选择仓库类型为公有 Public;

开启gitee page 服务：

进入新创建的仓库，点击server->gitee pages服务；

点击开启服务，网站会自动生成相应的博客网站：例如我的博客网址为：https://zhoujw_18.gitee.io

网站部署

执行命令：将会生成public文件夹，里面储存的是根据我们编写的md文件和配置的主题生成的静态网页；
我们的md文件生成的网页就储存在/public/post下面：

hugo --theme=even --baseUrl=“https://zhoujw_18.gitee.io/” --buildDrafts

提交网站到gitee仓库

进入刚生成的public文件夹，执行以下指令：

git init
git add . 他会监控工作区的状态树，使用它会把工作时的所有变化提交到暂存区，包括文件内容修改(modified)以及新文件(new)，但不包括被删除的文件。
git add .
git commit 主要是将暂存区里的改动给提交到本地的版本库。
git commit -m “first commit”
然后将public文件和远端的GitHub进行关联
git remote add origin https://gitee.com/zhoujw_18/zhoujw_18.git
把文件推上gitee仓库，
git push -u origin master

关于git add:

git add -A 提交所有变化

git add -u 提交被修改(modified)和被删除(deleted)文件，不包括新文件(new)

git add . 提交新文件(new)和被修改(modified)文件，不包括被删除(deleted)文件
markdown主要语句;

将提交更新到博客网站：

登录gitee的仓库可以看到，更新已经提交成功；

进入gitee pages页面，点击更新，博客网站才会更新：

再次登录博客网站，可以看到刚刚的md已经生成于页面上：

关于本地照片的存放路径

这个问题困扰了我挺久的，因为在生成html文件时，md文件对应的网页是储存在一个同名的文件夹里面的，
当图片储存在md所在的post文件夹中时，使用相对路径索引本地图片时时，md与html文件使用相同的相对路径，就会有
一个文件不能正常正常索引。

所以我们需要在将图片放在 /static/文件夹下，为了方便管理，最好为一个md创建子文件夹储存图片：在生成public文件夹后，将static文件夹复制进public文件夹下，这样网页和md的相对路径就统一起来了。
md中的图片地址格式为：

…/…/static/01_img/20200924125349.png

关于工具的使用

visual Studio Code 我预览使用的扩展是Markdown Preview Enhanced,使用相对路径时，如果图片路径有上级目录的路径**…/**就会预览失败。当然啦，可能只是我不会设置，但是Typora可以预览。