codexue目录下的文件结构
这里说明几个最常用的目录和文件:
- content:保存我们所需要的发布的博客文件,hugo支持的是Markdown格式的博客文件,具体的Markdown文档可以怎么写,请大家移步Markdown教程,非常的简单,几分钟就能学会!
- static:如果我们需要在我们的博客内添加图片,我们可以在此目录下创建一个images目录,在引用图片的时候使用/images/name.jpg即可连接到此文件夹内的图片文件。
- themes:此目录下存储我们冲GitHub上clone的主题仓库。下面我们会讲解主题的简单使用。
- 此处需要我们完成基本主题的设置。
- --大家可以去https://themes.gohugo.io查看心仪的主题,并通过Git clone到本地的themes目录下。此处我使用的cupper-hugo-theme这个主题,通过git clone [url of theme on github]命令克隆到themes目录下。
- --然后打开\themes\cupper-hugo-theme\exampleSite目录,目录下有一个config.yaml或者config.toml文件,复制到\codexue目录下。删除原本的config.toml/config.yaml文件。
exampleSite目录
- 本地运行测试
使用命令行cd命令进入新建的博客的目录下。比如我的就是D:\xuehu\blog\codexue。
运行hugo server -D
会出现如下结果:
Building sites …
| EN
------------------- -----
Pages | 6
Paginator pages | 0
Non-page files | 0
Static files | 32
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 90 ms
Watching for changes in D:\xuehu\blog\codexue\{archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\xuehu\blog\codexue\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl C to stop
出现上面的结果后,我们可以访问http://localhost:1313/,即可看到我们的博客运行的结果。
http://localhost:1313/结果
- 关联GitHub仓库
- 登录到github并创建一个repository[仓库],仓库的名称为:用户名.github.io,设置可见性为public。因为我的仓库是已经存在的,所以有提示。初次创建是没有提示的~
创建仓库
- 然后本地命令行执行hugo命令,会生成一个/codexue/public目录,我们需要做的就是将此目录的所有文件push到刚刚建立好的仓库里。