文章目錄
如果小川與趙高經歷互換，小川能否初心依舊？趙高無愧於小川。
前言
最近各種技術交融，竟然有了一絲絲共鳴。😄😄😄
說不出來的酸爽無比。
玩個好玩的，macOS 快速搭建個人博客，坑了我小半天吶。😭😭😭
就當開始一場旅程咯～
旅途特色
- Hugo
- Coding
關鍵就這倆，剩下的例如 git 等這都屬於基本開發必備了，暫時忽略了。
Quick Start
本文主要按照個人使用先後順序進行整理，主要有如下倆個部分：
- Hugo 配置以及使用
- Coding 簡單使用
一、Hugo 配置以及使用
1. Hugo 下載安裝
Install Hugo
brew install hugo
查看當前已安裝 Hugo 版本：
hugo version
2. 創建本地網站
Create a New Site
hugo new site HugoDemo
此時會在本地創建一個名爲 HugoDemo 的項目：
下面分別解釋下每個都是幹嘛的：
- archetypes： 原型（創建新內容時使用的模板）；
- assets： 存儲 Hugo Pipes 需要處理的所有文件。只有使用 .Permalink 或的文件 .RelPermalink 纔會發佈到 public 目錄中。注意：默認情況下未創建資產目錄；
- config： Hugo附帶了大量的配置指令。在config目錄正是這些指令被存儲爲JSON，YAML，或TOML文件。每個根設置對象都可以作爲自己的文件站立，並可以按環境進行結構化。設置最少的項目且不需要環境意識的項目可以config.toml在其根目錄使用單個文件；
- content： 網站的所有內容都將位於此目錄中；
- data： 存儲生成網站時 Hugo 可以使用的配置文件；
- layouts： 以 .html 文件形式存儲模板，這些模板指定如何將內容視圖呈現到靜態網站中。模板包括列表頁面，主頁，分類模板，partials，單頁模板等；
- static： 存儲所有靜態內容：圖像，CSS，JavaScript 等；
- resources： 緩存一些文件以加快生成速度；
- themes： 當前應用的主題文件；
- public： 生成的用於發佈的網站資源。
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
此處步驟如下：
- 進入 public 目錄，執行 git init
- 隨後執行 git add .
- 提交暫存區：git commit -m “Commit info”
- 接下來將本地倉庫與遠程倉庫建立關聯：git remote add origin 遠程倉庫地址
- 推送遠程倉庫：git push -u origin master
示例圖如下：
Step 4：Coding 部署網站
其實當代碼上傳 Coding 完成之後，便自動開始構建部署了。
要做的就是，根據 Coding 提供的網站打開查看效果即可。
參考資料
一手資料：
Thanks Others：