CSST Part 1 Hugo

[TOC] # 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 內執行` :::warning 這代表要特別留意 GUI 的操作 ::: [請點我](https://hackmd.io/yTOHpmJNQ1uJV02e6o0h5g?view) --- ## 安裝 Dependency ### Windows 1. 對 CMD 按右鍵，以系統管理員身份執行 ![](https://i.imgur.com/CNUBB5b.png) ---- 2. 開啟後貼入如下指令，跑完後如 `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" ``` ---- 3. 以系統管理員身份重開後，複製貼上以下指令 ``` choco install git.install -y choco install golang -y choco install hugo -y hugo version ``` ---- 4. 見到版本輸出就代表成功 ![](https://i.imgur.com/s4wheQu.png) --- ### Mac OS 1. 打開 terminal（終端機） ![](https://i.imgur.com/K6h22aG.png) ---- 2. 複製貼上安裝 `brew` 套件管理 ``` /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` ---- 3. 完成後重新開啟 Terminal（終端機）輸入以下指令 ``` brew update brew install hugo hugo version ``` ---- 4. 見到版本輸出就代表成功 ![](https://i.imgur.com/HqZXjmW.png) --- ### Linux > 老規矩，自立自強，文件如下 https://gohugo.io/getting-started/installing/#linux `sudo apt-get install hugo` --- ## Hugo 介紹 & 安裝 #### 1. 創立一個 hugo 專用新資料夾 ```sh 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 ``` :::info `config.toml` 就是設定檔案，有問題先檢查他。 ::: ---- #### 2. for Windows 1. 輸入以下指令打開 `config.toml` 檔案 ![](https://i.imgur.com/0Gl12Yt.png) 2. 第四行新增 `theme = "ananke"` ---- #### 3. 建立第一篇 Hugo Blog ``` hugo new posts/my-first-post.md ``` > 你可以在這個檔案內打點字。 ---- #### 4. 渲染並產生網站 - Debug 用：同時渲染並架設伺服器 `hugo server -D` - 手動部署用：僅渲染並產生在 public 資料夾 `hugo -D` ---- #### 5. 上傳 GitHub :::warning 更新 `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" ``` ---- :::warning 接著創立 GitHub Repo 並依照 GitHub Repo 提示逐行複製貼上 ::: :::info [HUGO theme list](https://themes.gohugo.io) 每一種 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 :::warning 對以下網址按右鍵，「另存連結」，下載下來 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 設定如下 ![](https://i.imgur.com/amAqnLV.png) 1. Branch 改成 gh-pages 2. Enforce HTTPS 勾起來 --- ## Domain 介紹購買你覺得 https://tw-csie-sprout.github.io/py2020/ 這樣的網址很醜嗎？ ---- 那就買一個專屬的名字吧！（Domain、域名） - https://Gandi.net - https://tw.godaddy.com/ ---- ### Domain 設定租了名字，如何給你的網站名字ㄋ？ ---- #### 1. 告訴世界上所有人，這個名字就是你的網站 **<@所有>**.mou.tw 的**網頁(A)** 全部都給 **GitHub(192.230.252.153)** 處理 ![](https://i.imgur.com/fULPw8S.png) ---- #### 2. 告訴 GitHub 網站說，你有名字了喔 ![](https://i.imgur.com/bavTf1n.png) --- ### 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

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.