一、Hugo 配置以及使用
1. Hugo 下载安装
Install Hugo
brew install hugo
查看当前已安装 Hugo 版本:
hugo version
2. 创建本地网站
Create a New Site
hugo new site HugoDemo
此时会在本地创建一个名为 HugoDemo 的项目:
下面分别解释下每个都是干嘛的:
3. 下载喜欢的 Hugo Theme
以 Timer Hugo 为例。
进入 themes 目录下,也可以 cd 目标位置,这里使用 j 插件:
j themes
将 Timer Hugo 克隆到本地:
git clone https://github.com/themefisher/timer-hugo.git
进入已下载主题拷贝所有文件并替换项目根目录下所有文件:
启动本地服务,运行查看效果:
hugo serve
Chrome 打开 http://localhost:1313/ 查看事例:
对了 记得下载个 Atom 方便打开 Hugo 项目修改文件。
二、Coding 部署静态网站
登录 Coding,该注册注册,该实名实名,毕竟用人东西,遵守人规定吧。
创建 HugoDemo 项目,获取到 git 地址,准备提交将要部署的页面文件。
1. 准备生成要部署的静态网站
Coding 中获取访问地址:
记得在 Coding 新建网站的时候选择自动部署,并设置代码推送 master 分支自动构建。
记得在 Coding 中添加 SSH 公钥:
使用如下命令直接拷贝本地公钥:
pbcopy < ~/.ssh/id_rsa.pub
最后将 Coding 为我们提供的地址拷贝,下面会使用。
2. 提交静态网页到 Coding
Step 1:修改 config 文件
baseURL = "这里替换成 Coding 提供的网址"languageCode = "en-us"title = "Timer | Responsive Multipurpose Bootstrap Hugo Template"theme = "timer-hugo"
Step 2:生成要发布的网站资源
回到项目根目录键入 hugo:
随后会生成 public 目录,这里存放的就是要部署网站所需要的一些东西。
Step 3:上传 Coding
此处步骤如下:
示例图如下:
Step 4:Coding 部署网站
其实当代码上传 Coding 完成之后,便自动开始构建部署了。
要做的就是,根据 Coding 提供的网站打开查看效果即可。
参考资料
一手资料:
Thanks Others: