changed 4 years ago  
Linked with GitHub

CSST Part 1 Hugo

Blog & Markdown

  • Why you need a Blog?
    • Slide Project
    • 個人宣傳頁曝光
    • 美術作品集
    • 名片上有東西放
  • Why Markdown
    • 語法格式統一
    • 純文字卻美觀
    • 多系統支援
    • 撰寫速度快

Markdown 語法介紹

- 「# H1」：最大的標題 
- 「## H2」： 次大的標題
- 「- item」：清單條列用，Tab 可縮排
- 「[連結請點我](https://www.mou.tw)」：超連結
- 「![](https://xxx.png)」：圖片
- 「`#include <stdio.h>`」：放 Code

開始架設一個 Blog 吧！

這代表在 cmd 內執行

這代表要特別留意 GUI 的操作

請點我

安裝 Dependency

Windows

  1. 對 CMD 按右鍵，以系統管理員身份執行
  1. 開啟後貼入如下指令，跑完後如 1. 方式重開
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
  1. 以系統管理員身份重開後，複製貼上以下指令
choco install git.install -y
choco install golang -y
choco install hugo -y
hugo version
  1. 見到版本輸出就代表成功

Mac OS

  1. 打開 terminal（終端機）
  1. 複製貼上 安裝 brew 套件管理
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 完成後重新開啟 Terminal（終端機）輸入以下指令
brew update
brew install hugo
hugo version
  1. 見到版本輸出就代表成功

Linux

老規矩，自立自強，文件如下
https://gohugo.io/getting-started/installing/#linux

sudo apt-get install hugo

Hugo 介紹 & 安裝

1. 創立一個 hugo 專用新資料夾

hugo new site csstblog
cd csstblog
git init
# import theme, hugo use git to manage theme
# git submodule 是把一個 repo 放到當前 repo 底下。
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

2. for Mac/Linux

在config.toml 中新增 theme = "ananke"

echo 'theme = "ananke"' >> config.toml

config.toml 就是設定檔案，有問題先檢查他。

2. for Windows

  1. 輸入以下指令打開 config.toml 檔案

  2. 第四行新增 theme = "ananke"

3. 建立第一篇 Hugo Blog

hugo new posts/my-first-post.md

你可以在這個檔案內打點字。

4. 渲染並產生網站

  • Debug 用：同時渲染並架設伺服器
    hugo server -D
  • 手動部署用：僅渲染並產生在 public 資料夾
    hugo -D

5. 上傳 GitHub

更新 config.toml 中的第一行為：

第一次

baseURL = https://<UserName>.github.io/

第二次

baseURL = https://<UserName>.github.io/<RepoName>
Ex:
baseURL = https://William-Mou.github.io/hugo_test

git add .
git commit -m "Init"

接著創立 GitHub Repo
並依照 GitHub Repo 提示逐行複製貼上

HUGO theme list
每一種 theme 他們的檔案名稱與設定檔不盡相同，使用其他 theme 時記得要去看作者的文件喔！

CI/CD & GitHub Action

CI/CD 與軟體工程

屬於

軟體工程（英語：software engineering），是軟體開發領域裡對工程方法的系統應用。

CI/CD 是 Continuous Integration / Continuous Deploy 的縮寫，倡導開發者應建立一套流程能夠在程式碼 push 到版本控制系統後，即時驗證並隨時有穩定可發表/部署的 codebase。

  • CI：持續整合，aka 自動測試 Debug
  • CD：持續部署，aka 自動編譯上傳上線

更通俗講，每週要交一份 500 字的心得報告：

  • CI：幫你檢查
    • 報告有沒有 500 字
    • 名字有沒有寫等等
  • CD：自動幫你
    • 上傳到 iLMS
    • 告訴你有沒有成功
    • 連續繳交兩份時：
      • 不成功能恢復上一個作業
      • 減少刪作業、重新傳作業的空窗時間

所以導入 CI/CD 我們要做什麼？

  1. 寫好 CI 測試邏輯
  2. 找人（機器）幫你跑測試
  3. 把他變成你的習慣

GitHub Action 是一種 CI/CD

  1. Hugo 提供測試邏輯
  2. GitHub 提供機器 （幹話）
  3. 就可以輕鬆的用了！
  • 免費版的用途與限制：
    • 一定要公開專案

1. 新增 gh-pages.yml 檔案 For Mac/Linux

mkdir -p .github/workflows/
wget -O ./.github/workflows/gh-pages.yml https://raw.githubusercontent.com/William-Mou/csstblog/main/.github/workflows/gh-pages.yml

1. 新增 gh-pages.yml 檔案 For Windows

對以下網址按右鍵，「另存連結」，下載下來
https://raw.githubusercontent.com/William-Mou/quickstart_for-_hugo/main/.github/workflows/gh-pages.yml

接著創建 .github/workflows/ 資料夾，將他放到裡面

2. 上傳到 GitHub

git add .
git commit -m "Add gh=pages.yml"
git push

3. 到設定頁面將 GitHub Page 設定如下

  1. Branch 改成 gh-pages
  2. Enforce HTTPS 勾起來

Domain 介紹購買

你覺得 https://tw-csie-sprout.github.io/py2020/ 這樣的網址很醜嗎？

那就買一個專屬的名字吧！（Domain、域名）

Domain 設定

租了名字，如何給你的網站名字ㄋ？

1. 告訴世界上所有人，這個名字就是你的網站

<@所有>.mou.tw 的網頁(A)
全部都給 GitHub(192.230.252.153) 處理

2. 告訴 GitHub 網站說，你有名字了喔

Google Analytics

可以參考這篇：https://coreychen71.github.io/posts/2019-05/hugoaddgoogleanalytics/

Reference

  1. Windows 安裝方式:https://blog.yowko.com/windows-10-hugo/
  2. Hugo 官方文件：https://gohugo.io/getting-started/quick-start/
  3. Windows 安裝 choco：https://marcus116.blogspot.com/2019/02/chocolatey-windows-chocolatey.html
Select a repo