TypeScript 不僅已可使用在主機端來進行 Node.js 程式的開發,也支援前端開發的眾多架構,使用 TypeScript 有許多額外的好處,因此學習 TypeScript 是現在軟體開發工程師不可缺的一項技能。本文是用來記錄如何設置一個簡易的 TypeScript 開發環境,用來學習 TypeScript。
開始設置 建立一個目錄
$ mkdir typescript-starter $ cd typescript-starter 透過 npm 產生 package.json 檔案
$ npm init -y 在 Local 端安裝 TypeScript
$ npm install typescript --save-dev #or -D 為 Node.js 安裝類型檔
$ npm install @types/node --save-dev # 在 node.js 中使用 typescript 時,此套件用來加載所有類型定義 透過 tsc 建立 TypeScript 的設定檔 (tsconfig.json)
$ npx tsc --init P.S. 由於 typescript 是安裝在 local,執行時要透過 npx 指令(由 npm 所提供)...
Hugo 內容文件中使用基本 Markdown 語法,還額外支援由 Hugo 所提供的加強語法(也支援基本 HTML 元素)。
標題 (Headings) 要建立標題,請在文字前添加井字符號 #(請注意井字符號後要加入一個空格)。使用的井字符號的數量應與標題級別相對應。例如,要建立三級標題 (<h3>),請使用三個井字符號(例如,### My Header)。
段落 (Paragraphs) 一個 Markdown 段落是由一個或多個連續的文字行組成,它的前後要有一個以上的空行。
文字區塊引用 (Blockquotes) 在段落的第一行最前面加">"
未註明出處的文字區塊引用 (Blockquote without attribution) Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
註明出處的文字區塊引用 (Blockquote with attribution) Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
斷行 (Line Breaks) 要建立換行符號 (<br>),請以兩個或多個空格結束一行,然後鍵入 return 鍵。...
GitHub Page 功能是 GitHub 提供的一項支援靜態網頁的服務,只要在你的 repository 中加入一個名為 gh-pages 的分支,則 GitHub 便會預設將此分支內的檔案以靜態網頁的方式呈現,因此利用此特性就可很容易的製作一個簡單的網站。GitHub Pages 提供了二種不同形態的頁面 “User or organization site” & “Project Site”。其中個人/組織 網站一個 GitHub 帳號只能有一個、而專案網站則可以很多個。
https://calvinegs.github.io #只有一個 https://calvinegs.github.io/project1
https://calvinegs.github.io/project2
https://calvinegs.github.io/project3
…
安裝步驟 Step 1: 在 GitHub 上建立一個 new repository Repository name 若為 Owner_name.github.io 即所謂的 User site,Repository name 即為靜態網站的網址。以下圖為例,有效網址為 https://calvinegs.github.io
Step 2: 使用 GitHub Action 構建 Hugo 透過 GitHub Action 功能,在你每次將新版本的 Hugo 網站內容推送到 GitHub repository 時,GitHub 將自動建置網站。
新增一個 .github/workflows/gh-pages.yml,內容如下:
name: github pages on: push: branches: - main # Set a branch to deploy pull_request: jobs: deploy: runs-on: ubuntu-20....
Hugo 是一個静態網站生成器,搭配 git 很適合來建立個人部落格。在一系列的筆記中將介紹如何安裝/使用相關工具與技術,目的是搭建一個完全免費的個人部落格。
使用的相關工具/技術:
Hugo git vs code gist github page Markdown Chocolatey Chocolatey 是一個 Windows 上的套件管理工具,它結合了 Nuget 基礎服務與 powershell 指令,提供快速安裝應用程式與工具的服務,將安裝軟體的內容封裝到一個安裝包中,在 Chocolatey 中只需要一條簡單的指令就能完成搜尋、安裝、更新、解安裝等操作。
在 Windows 10 上安裝 Chocolatey 以‘系統管理員’身份開啟 ‘Windows PowerShell’, 執行以下指令來進行 Chocolatey 安裝
PS C:\>Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')) 移除 Chocolatey 刪除 C:\ProgramData\chocolatey 目錄及移除環境變數即可,搜尋 “編輯系統環境變數” \ “進階” \ “環境變數”
安裝 hugo Step 1: 在 Windows 10 上使用 choco 安裝 hugo C:\> choco install hugo -confirm C:\> choco install hugo-extended - config C:\> hugo version Step 2: Create a New Site (建立部落格網站) C:\> hugo new site quickstart C:\> hugo new site quickstart -f yml # 若要使用 config....